kangaroo-and-rabbit/karso
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Activity

[FEAT] add user

Browse Source
This commit is contained in:
Edouard DUPIN 2025-02-07 21:08:49 +01:00
parent 67f20b0d81
commit ca6eda17d6
9 changed files with 196 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
front/src/components/ParameterLayout/ParameterLayout.ts Normal file
View File

@ -0,0 +1,22 @@
export {
ParameterLayoutContent as Content,
type ParameterLayoutContentProps as ContentProps
} from './ParameterLayoutContent';
export {
ParameterLayoutFooter as Footer,
type ParameterLayoutFooterProps as FooterProps
} from './ParameterLayoutFooter';
export {
ParameterLayoutHeader as Header,
type ParameterLayoutHeaderProps as HeaderProps
} from './ParameterLayoutHeader';
export {
ParameterLayoutHeaderBase as HeaderBase,
type ParameterLayoutHeaderBaseProps as HeaderBaseProps
} from './ParameterLayoutHeaderBase';
export {
ParameterLayoutRoot as Root,
type ParameterLayoutRootProps as RootProps
} from './ParameterLayoutRoot';

19
front/src/components/ParameterLayout/ParameterLayoutContent.tsx Normal file
View File

@ -0,0 +1,19 @@
import { Flex } from "@chakra-ui/react";
import { ReactNode } from "react";
export type ParameterLayoutContentProps = {
children?:ReactNode;
}
export const ParameterLayoutContent = ({children}:ParameterLayoutContentProps) => {
return <Flex
direction="column"
width="full"
borderY="1px solid black"
paddingY="15px"
paddingX="25px"
minHeight="10px"
background="gray.700">
{children}
</Flex>
}

16
front/src/components/ParameterLayout/ParameterLayoutFooter.tsx Normal file
View File

@ -0,0 +1,16 @@
import { Flex } from "@chakra-ui/react";
import { ReactNode } from "react";
export type ParameterLayoutFooterProps = {
children?: ReactNode;
}
export const ParameterLayoutFooter = ({children}:ParameterLayoutFooterProps) => {
return <Flex
width="full"
paddingY="15px"
paddingX="25px"
minHeight="10px">
{children}
</Flex>
}

17
front/src/components/ParameterLayout/ParameterLayoutHeader.tsx Normal file
View File

@ -0,0 +1,17 @@
import { Flex } from "@chakra-ui/react";
import { ReactNode } from "react";
export type ParameterLayoutHeaderProps = {
children?:ReactNode;
}
export const ParameterLayoutHeader = ({children}:ParameterLayoutHeaderProps) => {
return <Flex
width="full"
paddingY="15px"
paddingX="25px"
minHeight="10px"
>
{children}
</Flex>
}

23
front/src/components/ParameterLayout/ParameterLayoutHeaderBase.tsx Normal file
View File

@ -0,0 +1,23 @@
import { Flex, Text } from "@chakra-ui/react";
import { ParameterLayoutHeader } from "./ParameterLayoutHeader";
export type ParameterLayoutHeaderBaseProps = {
title:string;
description?: string,
}
export const ParameterLayoutHeaderBase = ({
title,
description,
}:ParameterLayoutHeaderBaseProps) => {
return <ParameterLayoutHeader>
<Flex direction="column">
<Text
fontSize="25px"
fontWeight="bold">
{title}
</Text>
{description && <Text>{description}</Text>}
</Flex>
</ParameterLayoutHeader>
}

16
front/src/components/ParameterLayout/ParameterLayoutRoot.tsx Normal file
View File

@ -0,0 +1,16 @@
import { VStack } from '@chakra-ui/react';
export type ParameterLayoutRootProps = {
children?: ReactNode;
}
export const ParameterLayoutRoot = ({children}:ParameterLayoutRootProps) => {
return <VStack gap="0px" marginX="15%" marginY="20px" justify="center"
//borderRadius="20px"
borderRadius="0px"
border="1px solid black"
background="gray.500">
{children}
</VStack>
}

1
front/src/components/ParameterLayout/index.ts Normal file
View File

@ -0,0 +1 @@
export * as ParameterLayout from './ParameterLayout';

107
front/src/scene/account/ManageAccountPage.tsx
View File

@ -1,12 +1,13 @@
import { Box, Center, Flex, HStack, Table, Text, VStack } from '@chakra-ui/react';
import { LuCrown } from 'react-icons/lu';
import { Button, Table, Text } from '@chakra-ui/react';
import { PageLayout } from '@/components/Layout/PageLayout';
import { TopBar } from '@/components/TopBar/TopBar';
import { useColorModeValue } from '@/components/ui/color-mode';
import { Application } from '@/back-api';
import { ApplicationService } from '@/service/application';
import { UserCreateWrite } from '@/back-api';
import { useFormidable } from '@/components/form/Formidable';
import { FormInput } from '@/components/form/FormInput';
import { FormPassword } from '@/components/form/FormPassword';
import { ParameterLayout } from '@/components/ParameterLayout';
import { UserService } from '@/service/user.service';
const options: Intl.DateTimeFormatOptions = {
@ -24,34 +25,9 @@ export const ManageAccountPage = () => {
<>
<TopBar title="Manage accounts" />
<PageLayout>
<VStack gap="0px" marginX="15%" marginY="20px" justify="center"
//borderRadius="20px"
borderRadius="0px"
border="1px solid black"
background="gray.500">
<Flex
width="full"
paddingY="15px"
paddingX="25px"
minHeight="10px"
>
<Flex direction="column">
<Text
fontSize="25px"
fontWeight="bold">
Users
</Text>
<Text>List of all users</Text>
</Flex>
</Flex>
<Flex
direction="column"
width="full"
borderY="1px solid black"
paddingY="15px"
paddingX="25px"
minHeight="10px"
background="gray.700">
<ParameterLayout.Root>
<ParameterLayout.HeaderBase title="Users" description="List of all users"/>
<ParameterLayout.Content>
<Table.Root size="sm" variant="outline" interactive>
<Table.Header>
<Table.Row>
@ -78,16 +54,65 @@ export const ManageAccountPage = () => {
))}
</Table.Body>
</Table.Root>
</Flex>
<Flex
width="full"
paddingY="15px"
paddingX="25px"
minHeight="10px">
</Flex>
</VStack>
</ParameterLayout.Content>
<ParameterLayout.Footer/>
</ParameterLayout.Root>
<CreateUserComponent/>
</PageLayout>
</>
);
};
export const CreateUserComponent = () => {
const form = useFormidable<UserCreateWrite>({
initialValues: {
login: "",
email: "",
password: "",
},
configuration: {
enableModifyNotification: false,
enableReset: false,
}
});
//const { connect, lastError, isConnectionLoading } = useLogin();
const {userCreate, error, isCalling} = UserService.useCreate({});
const onSubmit = () => {
userCreate(form.values);
};
return <ParameterLayout.Root>
<ParameterLayout.HeaderBase title="Create users" />
<ParameterLayout.Content>
{error && <Text colorPalette="@danger">{error}</Text>}
<FormInput
form={form}
variableName="login"
isRequired
label="Username"
/>
<FormPassword
form={form}
variableName="password"
isRequired
label="Password"
/>
</ParameterLayout.Content>
<ParameterLayout.Footer>
<Button
marginLeft="55%"
marginTop="10px"
variant="solid"
background="green"
width="45%"
disabled={isCalling}
onClick={onSubmit}
>
Login
</Button>
</ParameterLayout.Footer>
</ParameterLayout.Root>
}

18
front/src/service/user.service.ts
View File

@ -4,9 +4,9 @@
* @license PROPRIETARY (see license file)
*/
import { UserResource } from "@/back-api";
import { UserAuthGet, UserCreateWrite, UserResource } from "@/back-api";
import { useQuery, useQueryCall, useQueryCallProps } from "@/utils/query";
import { useSessionService } from "./session";
import { useQuery } from "@/utils/query";
export namespace UserService {
export const useGets = () => {
@ -19,4 +19,18 @@ export namespace UserService {
},
});
};
export const useCreate = ({ config }: { config?: Omit<useQueryCallProps<UserAuthGet, any>, 'queryFunction'> }) => {
const { getRestConfig } = useSessionService();
const { call, ...rest } = useQueryCall<UserAuthGet, UserCreateWrite>({
queryFunction: (data) => {
return UserResource.create({
restConfig: getRestConfig(),
data: { ...data },
});
},
...config
});
return { userCreate: call, ...rest };
};
}