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

crap

Browse Source
This commit is contained in:
fakz9
2024-03-31 07:36:24 +03:00
parent 98a6dee996
commit 6328ac877a
38 changed files with 385 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/LeadsPage/ui/LeadsPage.tsx
View File

@@ -1,4 +1,4 @@
import React, {FC, useEffect, useState} from "react";
import {FC, useEffect, useState} from "react";
import styles from './LeadsPage.module.css';
import Board from "../../../components/Dnd/Board/Board.tsx";
import {DragDropContext} from "@hello-pangea/dnd";

4
src/pages/LoginPage/LoginPage.tsx
View File

@@ -39,8 +39,8 @@ const LoginPage = () => {
},
(data: TelegramUser) => {
AuthService.loginAuthLoginPost({requestBody: data})
.then(({access_token}) => {
dispatch(login({accessToken: access_token}));
.then(({accessToken}) => {
dispatch(login({accessToken: accessToken}));
navigate({to: "/"}).then(() => {
notifications.success({message: "Вы успешно вошли!"})
})

1
src/pages/PageWrapper/PageWrapper.module.css
View File

@@ -10,5 +10,4 @@
.container {
padding: rem(20);
display: flex;
//min-height: 100vh;
}

11
src/pages/PageWrapper/PageWrapper.tsx
View File

@@ -14,20 +14,17 @@ const PageWrapper: FC<Props> = ({children}) => {
<AppShell
layout={"alt"}
navbar={{width: rem('80px'), breakpoint: "sm"}}
// header={{height:rem(60)}}
>
{/*<AppShell.Header>*/}
{/* <Header/>*/}
{/*</AppShell.Header>*/}
<AppShell.Navbar>
<Navbar/>
{authState.isAuthorized &&
<Navbar/>
}
</AppShell.Navbar>
<AppShell.Main className={styles['main-container']}>
<div className={styles['container']}>
{children}
</div>
</AppShell.Main>
</AppShell>
)

62
src/pages/ProductsPage/components/ProductsTable/ProductsTable.tsx
View File

@@ -1,24 +1,56 @@
import {ProductSchema} from "../../../../client";
import {FC, RefObject} from "react";
import {BaseTable, BaseTableRef} from "../../../../components/BaseTable/BaseTable.tsx";
import {FC} from "react";
import {BaseTable} from "../../../../components/BaseTable/BaseTable.tsx";
import {MRT_TableOptions} from "mantine-react-table";
import {useProductsTableColumns} from "./columns.tsx";
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";
type Props = {
products: ProductSchema[];
tableRef?: RefObject<BaseTableRef<ProductSchema>>
}
const ProductsTable: FC<Props> = ({products, tableRef}) => {
const ProductsTable: FC<CRUDTableProps<ProductSchema>> = ({items, onDelete, onChange, tableRef}) => {
const columns = useProductsTableColumns();
const onEditClick = (product: ProductSchema) => {
if (!onChange) return;
modals.openContextModal({
modal: "createProduct",
title: 'Создание товара',
withCloseButton: false,
innerProps: {
onChange: (newProduct) => onChange(newProduct),
product: product,
}
})
}
return (
<BaseTable
ref={tableRef}
data={products}
columns={columns}
restProps={{
enableColumnActions: false,
} as MRT_TableOptions<ProductSchema>}
/>
<BaseTable
ref={tableRef}
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<ProductSchema>}
/>
)
}

23
src/pages/ProductsPage/components/ProductsTable/columns.tsx
View File

@@ -1,8 +1,10 @@
import {useMemo} from "react";
import {MRT_ColumnDef} from "mantine-react-table";
import {ProductSchema} from "../../../../client";
import {List, Spoiler, useMantineTheme} from "@mantine/core";
export const useProductsTableColumns = () => {
const theme = useMantineTheme();
return useMemo<MRT_ColumnDef<ProductSchema>[]>(() => [
{
accessorKey: "article",
@@ -13,8 +15,27 @@ export const useProductsTableColumns = () => {
accessorKey: "name",
header: "Название",
enableSorting: false,
},
{
accessorKey: "barcodes",
header: "Штрихкоды",
Cell: ({cell}) => {
return (
<List size={"sm"}>
<Spoiler maxHeight={parseFloat(theme.lineHeights.sm) * 25}
showLabel={"Показать все"}
hideLabel={"Скрыть"}>
{cell.getValue<string[]>().map(barcode => (
<List.Item key={barcode}>
{barcode}
</List.Item>
))}
</Spoiler>
</List>
)
}
}
], []);
}

6
src/pages/ProductsPage/hooks/useProductsList.tsx
View File

@@ -8,12 +8,12 @@ type Props = {
}
const useServicesList = (props: Props) => {
const {clientId, page, itemsPerPage} = props;
const {isPending, error, data, refetch} = useQuery({
const {data, refetch} = useQuery({
queryKey: ['getAllServices', clientId, page, itemsPerPage],
queryFn: () => ProductService.getProductsByClientId({clientId, page, itemsPerPage})
});
const products = isPending || error || !data ? [] : data.products;
const paginationInfo = data?.pagination_info;
const products = !data ? [] : data.products;
const paginationInfo = data?.paginationInfo;
return {products, paginationInfo, refetch}
}
export default useServicesList;

97
src/pages/ProductsPage/modals/CreateProductModal/CreateProductModal.tsx Normal file
View File

@@ -0,0 +1,97 @@
import {ContextModalProps} from "@mantine/modals";
import {Button, Flex, rem, TagsInput, TextInput} from "@mantine/core";
import {useForm} from "@mantine/form";
import {BaseProduct, CreateProductRequest} from "../../types.ts";
import {ProductSchema} from "../../../../client";
type CreateProps = {
clientId: number;
onCreate: (values: CreateProductRequest) => void
}
type EditProps = {
product: ProductSchema,
onChange: (values: ProductSchema) => void
}
type Props = CreateProps | EditProps;
const CreateProductModal = ({
context,
id,
innerProps,
}: ContextModalProps<Props>) => {
const isEditProps = 'product' in innerProps;
const isCreatingProps = 'clientId' in innerProps;
const initialValues = isEditProps ? {
name: innerProps.product.name,
article: innerProps.product.article,
barcodes: innerProps.product.barcodes
} : {
name: '',
article: '',
barcodes: []
};
const form = useForm({
initialValues: initialValues,
validate: {
name: (name) => name.trim() !== '' ? null : "Необходимо ввести название товара",
article: (article) => article.trim() !== '' ? null : "Необходимо ввести артикул",
}
})
const onCancelClick = () => {
context.closeContextModal(id);
}
const onSubmit = (values: BaseProduct) => {
if (isEditProps) innerProps.onChange({...innerProps.product, ...values})
if (isCreatingProps) {
innerProps.onCreate({...values, clientId: innerProps.clientId});
form.reset();
}
}
return (
<>
<form onSubmit={form.onSubmit((values) => onSubmit(values))}>
<Flex gap={rem(10)} direction={"column"}>
<TextInput
placeholder={"Введите название товара"}
label={"Название товара"}
{...form.getInputProps('name')}
/>
<TextInput
placeholder={"Введите артикул"}
label={"Артикул"}
{...form.getInputProps('article')}
/>
<TagsInput
placeholder={!form.values.barcodes.length ? "Добавьте штрихкоды к товару" : ""}
label={"Штрихкоды"}
{...form.getInputProps('barcodes')}
/>
<Flex justify={"flex-end"} mt={rem(5)} gap={rem(10)}>
<Button onClick={() => onCancelClick()} variant={"subtle"}>Отменить</Button>
{isEditProps ?
<Button
onClick={() => context.closeContextModal(id)}
type={"submit"}
variant={"default"}
>Сохранить и закрыть</Button> :
<>
<Button
onClick={() => context.closeContextModal(id)}
type={"submit"}
variant={"default"}
>Создать и закрыть</Button>
<Button
type={"submit"}
variant={"default"}
>Создать</Button>
</>}
</Flex>
</Flex>
</form>
</>
)
};
export default CreateProductModal;

6
src/pages/ProductsPage/types.ts Normal file
View File

@@ -0,0 +1,6 @@
export type BaseProduct = {
name: string;
article: string;
barcodes: string[];
}
export type CreateProductRequest = BaseProduct & { clientId: number }

80
src/pages/ProductsPage/ui/ProductsPage.tsx
View File

@@ -1,37 +1,83 @@
import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
import {FC, useEffect, useState} from "react";
import styles from './ProductsPage.module.css';
import {Button, Drawer, Pagination} from "@mantine/core";
import {useDisclosure, usePagination} from "@mantine/hooks";
import {Button, Text, Pagination} from "@mantine/core";
import ClientSelect from "../../../components/Selects/ClientSelect/ClientSelect.tsx";
import ProductsTable from "../components/ProductsTable/ProductsTable.tsx";
import useProductsList from "../hooks/useProductsList.tsx";
import {notifications} from "../../../shared/lib/notifications.ts";
import {modals} from "@mantine/modals";
import {notifications} from "../../../shared/lib/notifications.ts";
import {CreateProductRequest} from "../types.ts";
import {ProductSchema, ProductService} from "../../../client";
export const ProductsPage: FC = () => {
// const [opened, {open, close}] = useDisclosure(false);
const [clientId, setClientId] = useState(-1);
const [totalPages, setTotalPages] = useState(1);
const pagination = usePagination({total: totalPages});
const {products, paginationInfo} = useProductsList({
const [currentPage, setCurrentPage] = useState(1);
const {products, paginationInfo, refetch} = useProductsList({
clientId,
page: pagination.active - 1,
page: currentPage - 1,
itemsPerPage: 10
});
const onProductCreate = (request: CreateProductRequest) => {
ProductService.createProduct({requestBody: request})
.then(async ({ok, message}) => {
notifications.guess(ok, {message: message});
if (!ok) return;
await refetch();
});
}
const onProductChange = (product: ProductSchema) => {
ProductService.updateProduct({requestBody: {product}})
.then(async ({ok, message}) => {
notifications.guess(ok, {message});
if (!ok) return;
await refetch();
})
}
const onCreateProductClick = () => {
if (clientId < 0) {
notifications.error({message: "Необходимо выбрать клиента"});
return
}
modals.openContextModal({
modal: "createProduct",
title: 'Создание категории',
title: 'Создание товара',
withCloseButton: false,
innerProps: {
clientId
clientId,
onCreate: onProductCreate
}
})
}
const onDeleteClick = (product: ProductSchema) => {
modals.openConfirmModal({
title: 'Удаление товара',
centered: true,
children: (
<Text size="sm">
Вы уверены что хотите удалить товар {product.name}
</Text>
),
labels: {confirm: 'Да', cancel: "Нет"},
confirmProps: {color: 'red'},
onConfirm: () =>
ProductService.deleteProduct({requestBody: {productId: product.id}})
.then(async ({ok, message}) => {
notifications.guess(ok, {message: message});
if (!ok) return;
await refetch();
})
});
}
useEffect(() => {
if (!paginationInfo) return;
setTotalPages(paginationInfo.total_pages);
setTotalPages(paginationInfo.totalPages);
}, [paginationInfo]);
@@ -50,8 +96,18 @@ export const ProductsPage: FC = () => {
<PageBlock>
<div className={styles['body-container']}>
<div className={styles['table-container']}>
<ProductsTable products={products}/>
<Pagination className={styles['table-pagination']} total={100}/>
<ProductsTable
onChange={onProductChange}
onDelete={onDeleteClick}
items={products}
/>
<Pagination
className={styles['table-pagination']}
withEdges
onChange={event => setCurrentPage(event)}
total={totalPages}
value={currentPage}
/>
</div>
</div>
</PageBlock>

4
src/pages/ServicesPage/ui/ServicesPage.tsx
View File

@@ -26,10 +26,10 @@ export const ServicesPage: FC = () => {
}
const onCreate = (values: ServiceSchema) => {
ServiceService.createService({requestBody: {service: values}})
.then(({ok, message}) => {
.then(async ({ok, message}) => {
notifications.guess(ok, {message: message});
if (!ok) return;
refetch();
await refetch();
})
}
const onCreateCategoryClick = () => {