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/LeadsPage/drawers/DealEditDrawer/DealEditDrawer.module.css
View File

@@ -7,4 +7,4 @@
@mixin dark {
background-color: var(--mantine-color-dark-5);
}
}
}

139
src/pages/LeadsPage/drawers/DealEditDrawer/DealEditDrawer.tsx
View File

@@ -2,7 +2,11 @@ import { Box, Drawer, rem, Tabs, Text } from "@mantine/core";
import { FC, useEffect, useRef } from "react";
import DealServicesTable from "../../components/DealServicesTable/DealServicesTable.tsx";
import { useDealPageContext } from "../../contexts/DealPageContext.tsx";
import { DealProductSchema, DealService, DealServiceSchema } from "../../../../client";
import {
DealProductSchema,
DealService,
DealServiceSchema,
} from "../../../../client";
import { notifications } from "../../../../shared/lib/notifications.ts";
import { modals } from "@mantine/modals";
import { BaseTableRef } from "../../../../components/BaseTable/BaseTable.tsx";
@@ -27,13 +31,13 @@ const useDealServicesTableState = () => {
service,
},
}).then(async ({ ok, message }) => {
if (!ok) {
notifications.guess(ok, { message });
return;
}
await DealService.getDealById({ dealId: selectedDeal.id })
.then(setSelectedDeal);
await DealService.getDealById({ dealId: selectedDeal.id }).then(
setSelectedDeal
);
});
};
const onServiceDelete = (service: DealServiceSchema) => {
@@ -42,15 +46,9 @@ const useDealServicesTableState = () => {
title: "Удаление услуги",
children: (
<>
<Text>
Вы уверены, что хотите удалить услугу:
</Text>
<Text>
{service.service.name}?
</Text>
<Text>Вы уверены, что хотите удалить услугу:</Text>
<Text>{service.service.name}?</Text>
</>
),
onConfirm: () => {
DealService.deleteDealService({
@@ -63,8 +61,9 @@ const useDealServicesTableState = () => {
notifications.guess(ok, { message });
return;
}
await DealService.getDealById({ dealId: selectedDeal.id })
.then(setSelectedDeal);
await DealService.getDealById({
dealId: selectedDeal.id,
}).then(setSelectedDeal);
});
},
labels: {
@@ -87,8 +86,9 @@ const useDealServicesTableState = () => {
notifications.guess(ok, { message });
return;
}
await DealService.getDealById({ dealId: selectedDeal.id })
.then(setSelectedDeal);
await DealService.getDealById({ dealId: selectedDeal.id }).then(
setSelectedDeal
);
});
};
const onsServiceMultipleDelete = (items: DealServiceSchema[]) => {
@@ -113,8 +113,9 @@ const useDealServicesTableState = () => {
notifications.guess(ok, { message });
return;
}
await DealService.getDealById({ dealId: selectedDeal.id })
.then(setSelectedDeal);
await DealService.getDealById({
dealId: selectedDeal.id,
}).then(setSelectedDeal);
});
},
labels: {
@@ -143,14 +144,16 @@ const DealEditDrawerServicesTable = () => {
onsServiceMultipleDelete,
} = useDealServicesTableState();
return (<DealServicesTable
tableRef={tableRef}
items={services}
onChange={onServiceUpdate}
onDelete={onServiceDelete}
onCreate={onServiceCreate}
onMultipleDelete={onsServiceMultipleDelete}
/>);
return (
<DealServicesTable
tableRef={tableRef}
items={services}
onChange={onServiceUpdate}
onDelete={onServiceDelete}
onCreate={onServiceCreate}
onMultipleDelete={onsServiceMultipleDelete}
/>
);
};
const useDealProductTableState = () => {
@@ -166,8 +169,9 @@ const useDealProductTableState = () => {
}).then(async ({ ok, message }) => {
notifications.guess(ok, { message });
if (!ok) return;
await DealService.getDealById({ dealId: selectedDeal.id })
.then(setSelectedDeal);
await DealService.getDealById({ dealId: selectedDeal.id }).then(
setSelectedDeal
);
});
};
const onProductDelete = (product: DealProductSchema) => {
@@ -176,15 +180,9 @@ const useDealProductTableState = () => {
title: "Удаление товара",
children: (
<>
<Text>
Вы уверены, что хотите удалить товар:
</Text>
<Text>
{product.product.name}?
</Text>
<Text>Вы уверены, что хотите удалить товар:</Text>
<Text>{product.product.name}?</Text>
</>
),
onConfirm: () => {
DealService.deleteDealProduct({
@@ -197,8 +195,9 @@ const useDealProductTableState = () => {
notifications.guess(ok, { message });
return;
}
await DealService.getDealById({ dealId: selectedDeal.id })
.then(setSelectedDeal);
await DealService.getDealById({
dealId: selectedDeal.id,
}).then(setSelectedDeal);
});
},
labels: {
@@ -219,8 +218,9 @@ const useDealProductTableState = () => {
notifications.guess(ok, { message });
return;
}
await DealService.getDealById({ dealId: selectedDeal.id })
.then(setSelectedDeal);
await DealService.getDealById({ dealId: selectedDeal.id }).then(
setSelectedDeal
);
});
};
const onProductMultipleDelete = (items: DealProductSchema[]) => {
@@ -245,8 +245,9 @@ const useDealProductTableState = () => {
notifications.guess(ok, { message });
return;
}
await DealService.getDealById({ dealId: selectedDeal.id })
.then(setSelectedDeal);
await DealService.getDealById({
dealId: selectedDeal.id,
}).then(setSelectedDeal);
});
},
labels: {
@@ -281,7 +282,6 @@ const DealEditDrawerProductsTable = () => {
onMultipleDelete={onProductMultipleDelete}
onDelete={onProductDelete}
onCreate={onProductCreate}
/>
);
};
@@ -295,10 +295,7 @@ const useDealStatusChangeState = () => {
const DealEditDrawerStatusChangeTable = () => {
const { statusHistory } = useDealStatusChangeState();
return (
<DealStatusChangeTable
items={statusHistory}
/>);
return <DealStatusChangeTable items={statusHistory} />;
};
const useDealEditDrawerState = () => {
@@ -328,53 +325,51 @@ const DealEditDrawer: FC = () => {
body: {
height: "100%",
display: "flex",
flexDirection: "column", gap: rem(10),
flexDirection: "column",
gap: rem(10),
},
}}
>
}}>
<Tabs
defaultValue={"general"}
flex={1}
variant={"outline"}
orientation={"vertical"}
keepMounted={false}
>
<Tabs.List
>
<Tabs.Tab value={"general"} leftSection={<IconSettings />}>
keepMounted={false}>
<Tabs.List>
<Tabs.Tab
value={"general"}
leftSection={<IconSettings />}>
Общее
</Tabs.Tab>
<Tabs.Tab value={"history"} leftSection={<IconCalendarUser />}>
<Tabs.Tab
value={"history"}
leftSection={<IconCalendarUser />}>
История
</Tabs.Tab>
<Tabs.Tab value={"servicesAndProducts"} leftSection={<IconBox />}>
<Tabs.Tab
value={"servicesAndProducts"}
leftSection={<IconBox />}>
Товары и услуги
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value={"general"}>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}
>
<Box h={"100%"} w={"100%"} p={rem(10)}>
transition={{ duration: 0.2 }}>
<Box
h={"100%"}
w={"100%"}
p={rem(10)}>
<DealEditDrawerGeneralTab />
</Box>
</motion.div>
</Tabs.Panel>
<Tabs.Panel value={"history"}>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}
>
transition={{ duration: 0.2 }}>
<Box p={rem(10)}>
<DealEditDrawerStatusChangeTable />
</Box>
@@ -382,11 +377,9 @@ const DealEditDrawer: FC = () => {
</Tabs.Panel>
<Tabs.Panel value={"servicesAndProducts"}>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}
>
transition={{ duration: 0.2 }}>
<Box p={rem(10)}>
<ProductAndServiceTab />
</Box>
@@ -407,4 +400,4 @@ const DealEditDrawer: FC = () => {
);
};
export default DealEditDrawer;
export default DealEditDrawer;

196
src/pages/LeadsPage/drawers/DealEditDrawer/tabs/DealEditDrawerGeneralTab.tsx
View File

@@ -14,13 +14,20 @@ import {
Tooltip,
} from "@mantine/core";
import { useForm } from "@mantine/form";
import { ClientService, DealSchema, DealService, ShippingWarehouseSchema } from "../../../../../client";
import { DealStatus, DealStatusDictionary } from "../../../../../shared/enums/DealStatus.ts";
import {
ClientService,
DealSchema,
DealService,
ShippingWarehouseSchema,
} from "../../../../../client";
import {
DealStatus,
DealStatusDictionary,
} from "../../../../../shared/enums/DealStatus.ts";
import { isEqual } from "lodash";
import { notifications } from "../../../../../shared/lib/notifications.ts";
import { useQueryClient } from "@tanstack/react-query";
import ShippingWarehouseAutocomplete
from "../../../../../components/Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx";
import ShippingWarehouseAutocomplete from "../../../../../components/Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx";
import { ButtonCopyControlled } from "../../../../../components/ButtonCopyControlled/ButtonCopyControlled.tsx";
import { useClipboard } from "@mantine/hooks";
import ButtonCopy from "../../../../../components/ButtonCopy/ButtonCopy.tsx";
@@ -29,10 +36,10 @@ import { getCurrentDateTimeForFilename } from "../../../../../shared/lib/date.ts
import { IconPrinter } from "@tabler/icons-react";
type Props = {
deal: DealSchema
}
deal: DealSchema;
};
type FormType = Omit<DealSchema, "statusHistory" | "services" | "products">
type FormType = Omit<DealSchema, "statusHistory" | "services" | "products">;
const Content: FC<Props> = ({ deal }) => {
const { setSelectedDeal } = useDealPageContext();
@@ -40,31 +47,34 @@ const Content: FC<Props> = ({ deal }) => {
const queryClient = useQueryClient();
const initialValues: FormType = deal;
const form = useForm<FormType>(
{
initialValues: initialValues,
validate: {
name: (value: string) => value.length > 0 ? null : "Название сделки не может быть пустым",
},
const form = useForm<FormType>({
initialValues: initialValues,
validate: {
name: (value: string) =>
value.length > 0
? null
: "Название сделки не может быть пустым",
},
);
});
const updateDealInfo = async (values: FormType) => {
return DealService.updateDealGeneralInfo({
requestBody: {
dealId: deal.id,
data: { ...values, shippingWarehouse: values.shippingWarehouse?.toString() },
data: {
...values,
shippingWarehouse: values.shippingWarehouse?.toString(),
},
},
}).then(({ ok, message }) => {
notifications.guess(ok, { message });
if (!ok) return;
DealService.getDealById({ dealId: deal.id })
.then((data) => {
setSelectedDeal(data);
form.setInitialValues(data);
queryClient.invalidateQueries({
queryKey: ["getDealSummaries"],
});
DealService.getDealById({ dealId: deal.id }).then(data => {
setSelectedDeal(data);
form.setInitialValues(data);
queryClient.invalidateQueries({
queryKey: ["getDealSummaries"],
});
});
});
};
const updateClientInfo = async (values: FormType) => {
@@ -72,8 +82,7 @@ const Content: FC<Props> = ({ deal }) => {
requestBody: {
data: values.client,
},
}).then(({ ok, message }) =>
notifications.guess(ok, { message }));
}).then(({ ok, message }) => notifications.guess(ok, { message }));
};
const handleSubmit = async (values: FormType) => {
// Updating client info if there changes
@@ -83,9 +92,10 @@ const Content: FC<Props> = ({ deal }) => {
// updating deal info
await updateDealInfo(values);
};
const isShippingWarehouse = (value: (ShippingWarehouseSchema | string | null | undefined)): value is ShippingWarehouseSchema => {
return !["string", "null", "undefined"].includes((typeof value));
const isShippingWarehouse = (
value: ShippingWarehouseSchema | string | null | undefined
): value is ShippingWarehouseSchema => {
return !["string", "null", "undefined"].includes(typeof value);
};
const onCopyGuestUrlClick = () => {
@@ -94,18 +104,20 @@ const Content: FC<Props> = ({ deal }) => {
dealId: deal.id,
},
}).then(({ ok, message, url }) => {
if (!ok)
notifications.guess(ok, { message });
clipboard.copy(
`${window.location.origin}/${url}`,
);
if (!ok) notifications.guess(ok, { message });
clipboard.copy(`${window.location.origin}/${url}`);
});
};
return (
<form onSubmit={form.onSubmit((values) => handleSubmit(values))}>
<Flex direction={"column"} justify={"space-between"} h={"100%"}>
<form onSubmit={form.onSubmit(values => handleSubmit(values))}>
<Flex
direction={"column"}
justify={"space-between"}
h={"100%"}>
<Fieldset legend={`Общие параметры [ID: ${deal.id}]`}>
<Flex direction={"column"} gap={rem(10)}>
<Flex
direction={"column"}
gap={rem(10)}>
<TextInput
placeholder={"Название сделки"}
label={"Название сделки"}
@@ -115,20 +127,26 @@ const Content: FC<Props> = ({ deal }) => {
disabled
placeholder={"Дата создания"}
label={"Дата создания"}
value={new Date(deal.createdAt).toLocaleString("ru-RU")}
value={new Date(deal.createdAt).toLocaleString(
"ru-RU"
)}
/>
<TextInput
disabled
placeholder={"Текущий статус"}
label={"Текущий статус"}
value={DealStatusDictionary[deal.currentStatus as DealStatus]} />
value={
DealStatusDictionary[
deal.currentStatus as DealStatus
]
}
/>
{deal.category && (
<TextInput
disabled
placeholder={"Категория"}
label={"Категория"}
value={deal.category.name}
/>
)}
<Textarea
@@ -139,27 +157,46 @@ const Content: FC<Props> = ({ deal }) => {
<ShippingWarehouseAutocomplete
placeholder={"Введите склад отгрузки"}
label={"Склад отгрузки"}
value={isShippingWarehouse(form.values.shippingWarehouse) ? form.values.shippingWarehouse : undefined}
value={
isShippingWarehouse(
form.values.shippingWarehouse
)
? form.values.shippingWarehouse
: undefined
}
onChange={event => {
if (isShippingWarehouse(event)) {
form.getInputProps("shippingWarehouse").onChange(event.name);
form.getInputProps(
"shippingWarehouse"
).onChange(event.name);
return;
}
form.getInputProps("shippingWarehouse").onChange(event);
form.getInputProps(
"shippingWarehouse"
).onChange(event);
}}
/>
</Flex>
</Fieldset>
<Flex mt={"md"} gap={rem(10)} align={"center"} justify={"flex-end"}>
<Flex align={"center"} gap={rem(10)} justify={"center"}>
<Flex gap={rem(10)} align={"center"} justify={"space-between"}>
<Tooltip
label={"Распечатать сделку"}
>
<Flex
mt={"md"}
gap={rem(10)}
align={"center"}
justify={"flex-end"}>
<Flex
align={"center"}
gap={rem(10)}
justify={"center"}>
<Flex
gap={rem(10)}
align={"center"}
justify={"space-between"}>
<Tooltip label={"Распечатать сделку"}>
<ActionIcon
onClick={() => {
const pdfWindow = window.open(`${import.meta.env.VITE_API_URL}/deal/detailedDocument/${deal.id}`);
const pdfWindow = window.open(
`${import.meta.env.VITE_API_URL}/deal/detailedDocument/${deal.id}`
);
if (!pdfWindow) return;
pdfWindow.print();
}}
@@ -169,38 +206,42 @@ const Content: FC<Props> = ({ deal }) => {
</Tooltip>
<Flex gap={rem(10)}>
{(deal.billRequest && deal.billRequest.pdfUrl) ?
{deal.billRequest && deal.billRequest.pdfUrl ? (
<ButtonCopy
onCopiedLabel={"Ссылка скопирована в буфер обмена"}
value={deal.billRequest.pdfUrl}
>
onCopiedLabel={
"Ссылка скопирована в буфер обмена"
}
value={deal.billRequest.pdfUrl}>
Ссылка на оплату
</ButtonCopy>
:
) : (
<ButtonCopyControlled
onCopyClick={() => {
const date = getCurrentDateTimeForFilename();
FileSaver.saveAs(`${import.meta.env.VITE_API_URL}/deal/document/${deal.id}`,
`bill_${deal.id}_${date}.pdf`);
const date =
getCurrentDateTimeForFilename();
FileSaver.saveAs(
`${import.meta.env.VITE_API_URL}/deal/document/${deal.id}`,
`bill_${deal.id}_${date}.pdf`
);
}}
copied={false}
onCopiedLabel={"Ссылка скопирована в буфер обмена"}
>
onCopiedLabel={
"Ссылка скопирована в буфер обмена"
}>
Ссылка на оплату (PDF)
</ButtonCopyControlled>
}
)}
<ButtonCopyControlled
onCopyClick={onCopyGuestUrlClick}
onCopiedLabel={"Ссылка скопирована в буфер обмена"}
onCopiedLabel={
"Ссылка скопирована в буфер обмена"
}
copied={clipboard.copied}>
Ссылка на редактирование
</ButtonCopyControlled>
</Flex>
</Flex>
<Flex gap={rem(10)}>
<Checkbox
label={"Оплачен"}
checked={deal.billRequest?.paid || false}
@@ -216,36 +257,33 @@ const Content: FC<Props> = ({ deal }) => {
{...form.getInputProps("isDeleted")}
/>
</Flex>
</Flex>
<Divider
orientation={"vertical"}
/>
<Group align={"center"} justify={"center"}>
<Divider orientation={"vertical"} />
<Group
align={"center"}
justify={"center"}>
<Button
color={"red"}
type={"reset"}
disabled={isEqual(initialValues, form.values)}
onClick={() => form.reset()}
>Отменить изменения</Button>
onClick={() => form.reset()}>
Отменить изменения
</Button>
<Button
variant={"default"}
type={"submit"}
disabled={isEqual(initialValues, form.values)}
>Сохранить изменения</Button>
disabled={isEqual(initialValues, form.values)}>
Сохранить изменения
</Button>
</Group>
</Flex>
</Flex>
</form>
);
};
const DealEditDrawerGeneralTab: FC = () => {
const { selectedDeal } = useDealPageContext();
if (!selectedDeal) return <>No deal selected</>;
return (
<Content deal={selectedDeal} />
);
return <Content deal={selectedDeal} />;
};
export default DealEditDrawerGeneralTab;
export default DealEditDrawerGeneralTab;