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

feat: filling deals from excel file

Browse Source
This commit is contained in:
AlexSserb
2024-12-25 21:16:10 +04:00
parent db21801cc1
commit 71cab887d2
29 changed files with 878 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Dnd/Board/Board.tsx
View File

@@ -9,6 +9,7 @@ import classNames from "classnames";
import { getPluralForm } from "../../../shared/lib/utils.ts";
import { groupBy, has, sum, uniq } from "lodash";
import { DealGroupView } from "../DealGroupView/DealGroupView.tsx";
import CreateDealsFromFileButton from "../CreateDealsFromFileButton/CreateDealsFromFileButton.tsx";
type Props = {
droppableId: string;
@@ -181,8 +182,10 @@ export const Board: FC<Props> = ({
)}
{...provided.droppableProps}>
{withCreateButton && (
<CreateDealButton onClick={() => {
}} />
<>
<CreateDealButton />
<CreateDealsFromFileButton />
</>
)}
{getDealsAndGroups().map(obj => {
if (isGroup(obj)) {

7
src/components/Dnd/CreateDealButton/CreateDealButton.tsx
View File

@@ -1,4 +1,4 @@
import { FC, useState } from "react";
import { useState } from "react";
import styles from "./CreateDealButton.module.css";
import { Text, Transition } from "@mantine/core";
@@ -8,10 +8,7 @@ import { useQueryClient } from "@tanstack/react-query";
import { dateWithoutTimezone } from "../../../shared/lib/date.ts";
import { usePrefillDealContext } from "../../../pages/LeadsPage/contexts/PrefillDealContext.tsx";
type Props = {
onClick: () => void;
};
const CreateDealButton: FC<Props> = () => {
const CreateDealButton = () => {
const [isCreating, setIsCreating] = useState(false);
const [isTransitionEnded, setIsTransitionEnded] = useState(true);
const queryClient = useQueryClient();

19
src/components/Dnd/CreateDealsFromFileButton/CreateDealsFromFileButton.module.css Normal file
View File

@@ -0,0 +1,19 @@
.container {
/*background-color: red;*/
min-height: 5rem;
display: flex;
justify-content: center;
align-items: stretch;
text-align: center;
flex-direction: column;
border: dashed var(--item-border-size) var(--mantine-color-default-border);
border-radius: var(--item-border-radius);
cursor: pointer;
}
.container:hover {
background-color: light-dark(
var(--mantine-color-default-hover),
var(--mantine-color-gray-filled-hover)
);
}

17
src/components/Dnd/CreateDealsFromFileButton/CreateDealsFromFileButton.tsx Normal file
View File

@@ -0,0 +1,17 @@
import styles from "./CreateDealsFromFileButton.module.css";
import { Text } from "@mantine/core";
import { usePrefillDealsWithExcelContext } from "../../../pages/LeadsPage/contexts/PrefillDealsWithExcelContext.tsx";
const CreateDealsFromFileButton = () => {
const { prefillWithExcelOnOpen } = usePrefillDealsWithExcelContext();
return (
<div
className={styles["container"]}
onClick={prefillWithExcelOnOpen}>
<Text>Добавление из файла</Text>
</div>
);
};
export default CreateDealsFromFileButton;

86
src/components/ExcelDropzone/ExcelDropzone.tsx Normal file
View File

@@ -0,0 +1,86 @@
import { Dropzone, DropzoneProps, FileWithPath, MIME_TYPES } from "@mantine/dropzone";
import { FC } from "react";
import { Fieldset, Flex, Group, Loader, rem, Text } from "@mantine/core";
import { IconFileExcel, IconUpload, IconX } from "@tabler/icons-react";
import UseExcelDropzone from "../../types/UseExcelDropzone.tsx";
interface RestProps {
dropzone: UseExcelDropzone;
onDrop: (files: FileWithPath[]) => void;
}
type Props = RestProps & Omit<DropzoneProps, "onDrop">;
const ExcelDropzone: FC<Props> = (props: Props) => {
const { isLoading } = props.dropzone;
const getBody = () => {
return (
<Dropzone
{...props}
accept={[
MIME_TYPES.xlsx,
]}
multiple={false}
onDrop={props.onDrop}>
<Group
justify="center"
gap="xl"
style={{ pointerEvents: "none" }}>
<Dropzone.Accept>
<IconUpload
style={{
width: rem(52),
height: rem(52),
color: "var(--mantine-color-blue-6)",
}}
stroke={1.5}
/>
</Dropzone.Accept>
<Dropzone.Reject>
<IconX
style={{
width: rem(52),
height: rem(52),
color: "var(--mantine-color-red-6)",
}}
stroke={1.5}
/>
</Dropzone.Reject>
<Dropzone.Idle>
<IconFileExcel
style={{
width: rem(52),
height: rem(52),
color: "var(--mantine-color-dimmed)",
}}
stroke={1.5}
/>
</Dropzone.Idle>
<div style={{ textAlign: "center" }}>
<Text
size="xl"
inline>
Перенесите или нажмите чтоб выбрать файл формата xlsx
</Text>
</div>
</Group>
</Dropzone>
);
};
return (
<Flex
gap={rem(10)}
direction={"column"}>
<Fieldset legend={"Файл"}>
<Flex justify={"center"}>
{isLoading ? <Loader /> : getBody()}
</Flex>
</Fieldset>
</Flex>
);
};
export default ExcelDropzone;

8
src/components/Selects/ClientSelect/ClientSelect.tsx
View File

@@ -1,4 +1,4 @@
import { FC } from "react";
import { FC, ReactNode } from "react";
import { Select } from "@mantine/core";
import { ClientSchema } from "../../../client";
import useClientsList from "../../../pages/ClientsPage/hooks/useClientsList.tsx";
@@ -7,8 +7,10 @@ type Props = {
value?: ClientSchema;
onChange: (client: ClientSchema) => void;
withLabel?: boolean;
error?: string;
inputContainer?: (children: ReactNode) => ReactNode;
};
const ClientSelect: FC<Props> = ({ value, onChange, withLabel = false }) => {
const ClientSelect: FC<Props> = ({ value, onChange, error, inputContainer, withLabel = false }) => {
const { clients } = useClientsList();
const options = clients.map(client => ({
label: client.name,
@@ -33,6 +35,8 @@ const ClientSelect: FC<Props> = ({ value, onChange, withLabel = false }) => {
}}
data={options}
label={withLabel && "Клиент"}
error={error}
inputContainer={inputContainer}
/>
);
};