fakz9/Fulfillment-Frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: prettier

Browse Source
This commit is contained in:
admin
2024-09-27 04:47:04 +03:00
parent c5f839d9ef
commit de4fe450ab
253 changed files with 11322 additions and 10004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/ClientsPage/ClientsPage.module.css
View File

@@ -9,4 +9,4 @@
padding: rem(5);
gap: rem(10);
display: flex;
}
}

101
src/pages/ClientsPage/ClientsPage.tsx
View File

@@ -1,76 +1,65 @@
import {FC} from "react";
import { FC } from "react";
import ClientsTable from "./components/ClientsTable/ClientsTable.tsx";
import useClientsList from "./hooks/useClientsList.tsx";
import PageBlock from "../../components/PageBlock/PageBlock.tsx";
import styles from './ClientsPage.module.css';
import {Button} from "@mantine/core";
import {modals} from "@mantine/modals";
import {ClientSchema, ClientService} from "../../client";
import {notifications} from "../../shared/lib/notifications.ts";
import styles from "./ClientsPage.module.css";
import { Button } from "@mantine/core";
import { modals } from "@mantine/modals";
import { ClientSchema, ClientService } from "../../client";
import { notifications } from "../../shared/lib/notifications.ts";
const ClientsPage: FC = () => {
const {clients, refetch} = useClientsList();
const { clients, refetch } = useClientsList();
const onCreate = (client: ClientSchema) => {
ClientService
.createClientApi({
requestBody: {
data: client
}
})
.then(async ({ok, message}) => {
notifications.guess(ok, {message});
if (ok)
await refetch()
})
}
ClientService.createClientApi({
requestBody: {
data: client,
},
}).then(async ({ ok, message }) => {
notifications.guess(ok, { message });
if (ok) await refetch();
});
};
const onChange = (client: ClientSchema) => {
ClientService
.updateClient({
requestBody: {
data: client
}
})
.then(async ({ok, message}) => {
notifications.guess(ok, {message});
if (ok)
await refetch()
})
}
ClientService.updateClient({
requestBody: {
data: client,
},
}).then(async ({ ok, message }) => {
notifications.guess(ok, { message });
if (ok) await refetch();
});
};
const onDelete = (client: ClientSchema) => {
ClientService
.deleteClient({
requestBody: {
clientId: client.id
}
})
.then(async ({ok, message}) => {
notifications.guess(ok, {message});
if (ok)
await refetch()
})
}
ClientService.deleteClient({
requestBody: {
clientId: client.id,
},
}).then(async ({ ok, message }) => {
notifications.guess(ok, { message });
if (ok) await refetch();
});
};
const onCreateClick = () => {
modals.openContextModal({
modal: 'productFormModal',
modal: "productFormModal",
title: "Создание клиента",
innerProps: {
onCreate
}
})
}
onCreate,
},
});
};
return (
<div className={styles['container']}>
<div className={styles["container"]}>
<PageBlock>
<div className={styles['top-panel']}>
<div className={styles["top-panel"]}>
<Button
onClick={onCreateClick}
variant={"default"}
>
variant={"default"}>
Создать клиента
</Button>
</div>
</PageBlock>
<PageBlock>
<ClientsTable
@@ -80,6 +69,6 @@ const ClientsPage: FC = () => {
/>
</PageBlock>
</div>
)
}
export default ClientsPage;
);
};
export default ClientsPage;

95
src/pages/ClientsPage/components/ClientsTable/ClientsTable.tsx
View File

@@ -1,64 +1,69 @@
import {FC} from "react";
import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
import {useClientsTableColumns} from "./columns.tsx";
import {MRT_TableOptions} from "mantine-react-table";
import {ClientSchema} from "../../../../client";
import {ActionIcon, Flex, Tooltip} from "@mantine/core";
import {IconEdit, IconTrash} from "@tabler/icons-react";
import {CRUDTableProps} from "../../../../types/CRUDTable.tsx";
import {modals} from "@mantine/modals";
import { FC } from "react";
import { BaseTable } from "../../../../components/BaseTable/BaseTable.tsx";
import { useClientsTableColumns } from "./columns.tsx";
import { MRT_TableOptions } from "mantine-react-table";
import { ClientSchema } from "../../../../client";
import { ActionIcon, Flex, Tooltip } from "@mantine/core";
import { IconEdit, IconTrash } from "@tabler/icons-react";
import { CRUDTableProps } from "../../../../types/CRUDTable.tsx";
import { modals } from "@mantine/modals";
const ClientsTable: FC<CRUDTableProps<ClientSchema>> = ({
items,
onDelete,
onChange
}) => {
items,
onDelete,
onChange,
}) => {
const columns = useClientsTableColumns();
const onEditClick = (client: ClientSchema) => {
if (!onChange) return;
modals.openContextModal({
modal: "productFormModal",
title: 'Создание клиента',
title: "Создание клиента",
withCloseButton: false,
innerProps: {
onChange: (newClient) => onChange(newClient),
onChange: newClient => onChange(newClient),
element: client,
}
})
}
},
});
};
return (
<>
<BaseTable
striped
data={items}
columns={columns}
restProps={{
enableColumnActions: false,
enableRowActions: true,
renderRowActions: ({row}) => (
<Flex gap="md">
<Tooltip label="Редактировать">
<ActionIcon
onClick={() => onEditClick(row.original)}
variant={"default"}>
<IconEdit/>
</ActionIcon>
</Tooltip>
<Tooltip label="Удалить">
<ActionIcon onClick={() => {
if (onDelete) onDelete(row.original);
}} variant={"default"}>
<IconTrash/>
</ActionIcon>
</Tooltip>
</Flex>
)
} as MRT_TableOptions<ClientSchema>}
restProps={
{
enableColumnActions: false,
enableRowActions: true,
renderRowActions: ({ row }) => (
<Flex gap="md">
<Tooltip label="Редактировать">
<ActionIcon
onClick={() =>
onEditClick(row.original)
}
variant={"default"}>
<IconEdit />
</ActionIcon>
</Tooltip>
<Tooltip label="Удалить">
<ActionIcon
onClick={() => {
if (onDelete)
onDelete(row.original);
}}
variant={"default"}>
<IconTrash />
</ActionIcon>
</Tooltip>
</Flex>
),
} as MRT_TableOptions<ClientSchema>
}
/>
</>
);
};
)
}
export default ClientsTable;
export default ClientsTable;

72
src/pages/ClientsPage/components/ClientsTable/columns.tsx
View File

@@ -1,37 +1,39 @@
import {useMemo} from "react";
import {MRT_ColumnDef} from "mantine-react-table";
import {ClientSchema} from "../../../../client";
import { useMemo } from "react";
import { MRT_ColumnDef } from "mantine-react-table";
import { ClientSchema } from "../../../../client";
export const useClientsTableColumns = () => {
return useMemo<MRT_ColumnDef<ClientSchema>[]>(() => [
{
accessorKey: "name",
header: "Имя",
},
{
accessorKey: "details.telegram",
header: "Телеграм"
},
{
accessorKey: "details.email",
header: "EMAIL"
},
{
accessorKey: "details.phoneNumber",
header: "Телефон"
},
{
accessorKey: "details.inn",
header: "ИНН"
},
{
accessorKey: "companyName",
header: "Название компании"
},
{
accessorKey: "barcodeTemplate.name",
header: "Шаблон штрихкодов"
}
], []);
}
return useMemo<MRT_ColumnDef<ClientSchema>[]>(
() => [
{
accessorKey: "name",
header: "Имя",
},
{
accessorKey: "details.telegram",
header: "Телеграм",
},
{
accessorKey: "details.email",
header: "EMAIL",
},
{
accessorKey: "details.phoneNumber",
header: "Телефон",
},
{
accessorKey: "details.inn",
header: "ИНН",
},
{
accessorKey: "companyName",
header: "Название компании",
},
{
accessorKey: "barcodeTemplate.name",
header: "Шаблон штрихкодов",
},
],
[]
);
};

16
src/pages/ClientsPage/hooks/useClientsList.tsx
View File

@@ -1,13 +1,13 @@
import {ClientService} from "../../../client";
import {useQuery} from "@tanstack/react-query";
import { ClientService } from "../../../client";
import { useQuery } from "@tanstack/react-query";
const useClientsList = () => {
const {isPending, error, data, refetch} = useQuery({
queryKey: ['getAllClients'],
queryFn: ClientService.getAllClients
const { isPending, error, data, refetch } = useQuery({
queryKey: ["getAllClients"],
queryFn: ClientService.getAllClients,
});
const clients = isPending || error || !data ? [] : data.clients;
return {clients, refetch}
}
export default useClientsList;
return { clients, refetch };
};
export default useClientsList;

56
src/pages/ClientsPage/modals/BaseFormModal/BaseFormModal.tsx
View File

@@ -1,27 +1,27 @@
import {UseFormReturnType} from "@mantine/form";
import {Button, Flex, rem} from "@mantine/core";
import {FC} from "react";
import { UseFormReturnType } from "@mantine/form";
import { Button, Flex, rem } from "@mantine/core";
import { FC } from "react";
export type CreateProps<T> = {
onCreate(values: T): void;
}
};
export type EditProps<T> = {
onChange(values: T): void;
element: T;
}
};
export type CreateEditFormProps<T> = CreateProps<T> | EditProps<T>;
export type BaseFormProps<T> = {
form: UseFormReturnType<T>
form: UseFormReturnType<T>;
onClose: () => void;
closeOnSubmit?: boolean;
children: React.JSX.Element;
}
};
type Props<T> = BaseFormProps<T> & (CreateProps<T> | EditProps<T>);
const BaseFormModal = <T, >(props: Props<T>) => {
const {closeOnSubmit = false} = props;
const isEditing = 'onChange' in props;
const BaseFormModal = <T,>(props: Props<T>) => {
const { closeOnSubmit = false } = props;
const isEditing = "onChange" in props;
const onSubmit = (values: T) => {
if (isEditing) {
@@ -31,38 +31,42 @@ const BaseFormModal = <T, >(props: Props<T>) => {
}
if (closeOnSubmit) props.onClose();
}
};
return (
<form onSubmit={props.form.onSubmit((values) => onSubmit(values))}>
<Flex gap={rem(10)} direction={"column"}>
<form onSubmit={props.form.onSubmit(values => onSubmit(values))}>
<Flex
gap={rem(10)}
direction={"column"}>
{props.children}
<Flex justify={"flex-end"} gap={rem(10)}>
<Flex
justify={"flex-end"}
gap={rem(10)}>
<Button
variant={"subtle"}
onClick={() => props.onClose()}
>
onClick={() => props.onClose()}>
Отменить
</Button>
<Button
type={"submit"}
variant={"default"}
>
variant={"default"}>
Сохранить
</Button>
</Flex>
</Flex>
</form>
)
}
);
};
type BodyProps = {
children: React.JSX.Element;
}
const Body: FC<BodyProps> = ({children}) => {
};
const Body: FC<BodyProps> = ({ children }) => {
return (
<Flex gap={rem(10)} direction={"column"}>
<Flex
gap={rem(10)}
direction={"column"}>
{children}
</Flex>
)
}
);
};
BaseFormModal.Body = Body;
export default BaseFormModal;
export default BaseFormModal;

90
src/pages/ClientsPage/modals/ClientFormModal/ClientFormModal.tsx
View File

@@ -1,55 +1,59 @@
import {ContextModalProps} from "@mantine/modals";
import {Fieldset, TextInput} from "@mantine/core";
import {useForm} from "@mantine/form";
import {ClientSchema} from "../../../../client";
import BaseFormModal, {CreateEditFormProps} from "../BaseFormModal/BaseFormModal.tsx";
import { ContextModalProps } from "@mantine/modals";
import { Fieldset, TextInput } from "@mantine/core";
import { useForm } from "@mantine/form";
import { ClientSchema } from "../../../../client";
import BaseFormModal, {
CreateEditFormProps,
} from "../BaseFormModal/BaseFormModal.tsx";
import BarcodeTemplateSelect from "../../../../components/Selects/BarcodeTemplateSelect/BarcodeTemplateSelect.tsx";
type Props = CreateEditFormProps<ClientSchema>;
const ClientFormModal = ({
context,
id,
innerProps,
}: ContextModalProps<Props>) => {
const isEditing = 'onChange' in innerProps;
context,
id,
innerProps,
}: ContextModalProps<Props>) => {
const isEditing = "onChange" in innerProps;
const initialValues: ClientSchema = isEditing ? innerProps.element : {
id: -1,
name: '',
companyName: '',
details: {
telegram: '',
phoneNumber: '',
email: '',
inn: undefined,
}
}
const initialValues: ClientSchema = isEditing
? innerProps.element
: {
id: -1,
name: "",
companyName: "",
details: {
telegram: "",
phoneNumber: "",
email: "",
inn: undefined,
},
};
const form = useForm<ClientSchema>({
initialValues: initialValues,
validate: {
name: (name: string) => name.trim() !== '' ? null : "Необходимо ввести название клиента",
name: (name: string) =>
name.trim() !== ""
? null
: "Необходимо ввести название клиента",
// details: {
// telegram: (address: string | undefined | null) => (address && address.trim() !== '') ? null : "Необходимо ввести телеграм",
// phoneNumber: (phoneNumber: string | undefined | null) => (phoneNumber && phoneNumber.trim() !== '') ? null : "Необходимо ввести номер телефона",
// email: (email: string | undefined | null) => (email && email.trim() !== '') ? null : "Необходимо ввести почту",
// inn: (inn: string | undefined | null) => (inn && getDigitsCount(parseInt(inn)) >= 10) ? null : "ИНН должен содержать не менее 10 цифр",
// }
}
})
},
});
const onClose = () => {
context.closeContextModal(id);
}
};
return (
<BaseFormModal
{...innerProps}
closeOnSubmit
form={form}
onClose={onClose}
>
onClose={onClose}>
<BaseFormModal.Body>
<>
<Fieldset legend={"Основная информация"}>
@@ -57,47 +61,47 @@ const ClientFormModal = ({
required
label={"Название клиента"}
placeholder={"Введите название клиента"}
{...form.getInputProps('name')}
{...form.getInputProps("name")}
/>
</Fieldset>
<Fieldset legend={"Дополнительная информация"}>
<TextInput
label={"Телеграм"}
placeholder={"Введите телеграм"}
{...form.getInputProps('details.telegram')}
{...form.getInputProps("details.telegram")}
/>
<TextInput
label={"Номер телефона"}
placeholder={"Введите номер телефона"}
{...form.getInputProps('details.phoneNumber')}
{...form.getInputProps("details.phoneNumber")}
/>
<TextInput
label={"Почта"}
placeholder={"Введите почту"}
{...form.getInputProps('details.email')}
{...form.getInputProps("details.email")}
/>
<TextInput
label={"ИНН"}
placeholder={"Введите ИНН"}
{...form.getInputProps('details.inn')}
{...form.getInputProps("details.inn")}
/>
<TextInput
label={"Название компании"}
placeholder={"Введите название компании"}
{...form.getInputProps('companyName')}/>
{...form.getInputProps("companyName")}
/>
</Fieldset>
<Fieldset legend={'Настройки'}>
<Fieldset legend={"Настройки"}>
<BarcodeTemplateSelect
label={'Шаблон штрихкодов'}
placeholder={'Выберите шаблон штрихкодов'}
{...form.getInputProps('barcodeTemplate')}
label={"Шаблон штрихкодов"}
placeholder={"Выберите шаблон штрихкодов"}
{...form.getInputProps("barcodeTemplate")}
/>
</Fieldset>
</>
</BaseFormModal.Body>
</BaseFormModal>
)
}
);
};
export default ClientFormModal;
export default ClientFormModal;