k

2024-07-21 10:58:51 +03:00
parent 54c9ca8908
commit af05b51d1c
188 changed files with 1155 additions and 555 deletions
--- a/src/components/AnimatedOutlet/au.tsx
+++ b/src/components/AnimatedOutlet/au.tsx
@@ -1,4 +1,4 @@
-import {forwardRef, RefObject, useContext, useRef} from "react";
+import {forwardRef, useContext, useRef} from "react";
 import {getRouterContext, Outlet} from "@tanstack/react-router";
 import {motion, useIsPresent} from "framer-motion";
 import {cloneDeep} from "lodash";
@@ -19,11 +19,19 @@ const AnimatedOutlet = forwardRef<HTMLDivElement>((_, ref) => {
    return (
        <motion.div ref={ref}
                    initial={{x: "-100%"}}
-                    animate={{x: 0}}
-                    transition={{duration: 0.3}}
-                    onAnimationComplete={()=>{
-                        (ref as RefObject<HTMLDivElement>).current?.style.removeProperty("transform")
+                    animate={{
+                        x: 0,
+                        transform: "",
+                        transitionEnd: {
+                            transform: "none"
+                        }
                    }}
+
+                    transition={{
+                        duration: 0.4,
+                        ease: "circInOut",
+                    }}
+
        >
            <RouterContext.Provider value={renderedContext.current}>
                <Outlet/>
--- a/src/components/Dnd/CreateDealForm/CreateDealFrom.tsx
+++ b/src/components/Dnd/CreateDealForm/CreateDealFrom.tsx
@@ -7,6 +7,7 @@ import ClientAutocomplete from "../../Selects/ClientAutocomplete/ClientAutocompl
 import {DateTimePicker} from "@mantine/dates";
 import ShippingWarehouseAutocomplete
    from "../../Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx";
+import BaseMarketplaceSelect from "../../Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";

 type Props = {
    onSubmit: (quickDeal: QuickDeal) => void
@@ -20,7 +21,12 @@ const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
            clientAddress: '',
            comment: '',
            acceptanceDate: new Date(),
-            shippingWarehouse: ''
+            shippingWarehouse: '',
+            baseMarketplace: {
+                key: "",
+                iconUrl: "",
+                name: ""
+            }
        }
    });
    return (
@@ -37,7 +43,7 @@ const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
            }}>
                <div className={styles['inputs']}>
                    <TextInput
-                        placeholder={'Название'}
+                        placeholder={'Название сделки'}
                        {...form.getInputProps('name')}
                    />
                </div>
@@ -45,6 +51,13 @@ const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
                    <ClientAutocomplete
                        nameRestProps={form.getInputProps('clientName')}
                    />
+                </div>
+                <div className={styles['inputs']}>
+                    <BaseMarketplaceSelect
+                        rightSection={<></>}
+                        placeholder={"Базовый маркетплейс"}
+                        {...form.getInputProps("baseMarketplace")}
+                    />
                    <ShippingWarehouseAutocomplete
                        {...form.getInputProps('shippingWarehouse')}
                        placeholder={'Склад отгрузки'}
--- a/src/components/Dnd/DealSummaryCard/DealSummaryCard.module.css
+++ b/src/components/Dnd/DealSummaryCard/DealSummaryCard.module.css
@@ -11,7 +11,6 @@
    padding-top: rem(5);
    padding-bottom: rem(5);
    font-size: var(--mantine-font-size-sm);
-    flex: 1;
    flex-wrap: wrap;

    @mixin light {
@@ -20,14 +19,21 @@
    @mixin dark {
        background-color: var(--mantine-color-dark-5);
    }
+
+}
+
+.flex-row-left {
+    flex: 1;
 }

 .flex-row {
+
    display: flex;
    flex-direction: column;
    justify-content: space-between;
 }

 .flex-row-right {
+
    align-items: flex-end;
 }
--- a/src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx
+++ b/src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx
@@ -2,7 +2,7 @@ import {FC} from "react";
 import {DealService, DealSummary} from "../../../client";
 import styles from './DealSummaryCard.module.css';

-import {Text} from '@mantine/core';
+import {ActionIcon, Text, Image} from '@mantine/core';
 import classNames from "classnames";
 import {useDealPageContext} from "../../../pages/LeadsPage/contexts/DealPageContext.tsx";

@@ -36,7 +36,7 @@ const DealSummaryCard: FC<Props> = ({dealSummary}) => {
    }
    return (
        <div onClick={() => onDealSummaryClick()} className={styles['container']}>
-            <div className={styles['flex-row']}>
+            <div className={classNames(styles['flex-row'], styles["flex-row-left"])}>
                <div className={styles['flex-item']}>
                    <Text size={"sm"} c={"gray.6"}>
                        Клиент: {dealSummary.clientName}
@@ -53,9 +53,9 @@ const DealSummaryCard: FC<Props> = ({dealSummary}) => {
            </div>
            <div className={classNames(styles['flex-row'], styles['flex-row-right'])}>
                <div className={styles['flex-item']}>
-                    <Text size={"sm"} c={"gray.6"}>
-                        {/*Создана: {new Date(dealSummary.changedAt).toLocaleString('ru-RU')}*/}
-                    </Text>
+                    <ActionIcon  variant={"transparent"}>
+                        <Image src={dealSummary.baseMarketplace?.iconUrl || ""}/>
+                    </ActionIcon>
                </div>
                <div className={styles['flex-item']}>
                    <Text size={"sm"} c={getDeadlineTextColor(dealSummary.deadline)}>
--- a/src/components/Navbar/Navbar.module.css
+++ b/src/components/Navbar/Navbar.module.css
@@ -3,13 +3,21 @@
    padding: var(--mantine-spacing-md);
    display: flex;
    flex-direction: column;
-    border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));
    align-items: center;
+    @mixin dark {
+        background-color: var(--mantine-color-body);
+        box-shadow: 0 2px 4px var(--mantine-color-dark-7), 0 4px 24px var(--mantine-color-dark-7);
+    }
+    @mixin light {
+        background-color: #f9f9f9;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 24px rgba(0, 0, 0, .08);
+    }
+    border-radius: rem(20);
+    width: 100%;
+    justify-content: space-between;
 }

 .navbarMain {
-    flex: 1;
-    margin-top: rem(50px);
    width: 100%;
 }

--- a/src/components/Navbar/Navbar.tsx
+++ b/src/components/Navbar/Navbar.tsx
@@ -1,4 +1,4 @@
-import {Center, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme} from '@mantine/core';
+import {Center, Flex, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme} from '@mantine/core';
 import {
    IconBarcode,
    IconBox,
@@ -96,18 +96,22 @@ export function Navbar() {

    return (
        <nav className={classes.navbar}>
-            <Center>
-                <Image
-                    // style={{filter: "drop-shadow(0 0 30px #fff)"}}
-                    src={colorScheme == "dark" ? "/icons/logo-light.png" : "/icons/logo.png"}
-                />
-            </Center>
+            <Flex direction={"column"} gap={rem(30)}>
+                <Center
+                    p={rem(5)}
+                >
+                    <Image
+                        // style={{filter: "drop-shadow(0 0 30px #fff)"}}
+                        src={colorScheme == "dark" ? "/icons/logo-light.png" : "/icons/logo.png"}
+                    />
+                </Center>

-            <div className={classes.navbarMain}>
-                <Stack justify="center" gap={rem(10)}>
-                    {links}
-                </Stack>
-            </div>
+                <div className={classes.navbarMain}>
+                    <Stack justify="center" gap={rem(10)}>
+                        {links}
+                    </Stack>
+                </div>
+            </Flex>

            <Stack w={"100%"} justify="center" gap={0}>
                <NavbarLink icon={IconDashboard}
--- a/src/components/PageBlock/PageBlock.module.css
+++ b/src/components/PageBlock/PageBlock.module.css
@@ -1,7 +1,16 @@
 .container {
    border-radius: rem(20);
-    background-color: var(--mantine-color-body);
+    background-color: #f9f9f9;
+    @mixin dark {
+        background-color: var(--mantine-color-body);
+        box-shadow: 0 2px 4px var(--mantine-color-dark-7), 0 4px 24px var(--mantine-color-dark-7);
+    }
+    @mixin light {
+        background-color: #f9f9f9;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 4px 24px rgba(0, 0, 0, .08);
+    }
    padding: rem(15);
+
 }

 .container-fluid {
--- a/src/components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx
+++ b/src/components/Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx
@@ -0,0 +1,30 @@
+import ObjectSelect, {ObjectSelectProps} from "../../ObjectSelect/ObjectSelect.tsx";
+import {BaseMarketplaceSchema} from "../../../client";
+import {FC} from "react";
+import useBaseMarketplacesList from "../../../hooks/useBaseMarketplacesList.tsx";
+import {ActionIcon, Image} from "@mantine/core";
+
+type Props = Omit<ObjectSelectProps<BaseMarketplaceSchema>, 'data' | 'getValueFn' | 'getLabelFn'>
+
+const BaseMarketplaceSelect: FC<Props> = (props) => {
+    const {objects: baseMarketplaces} = useBaseMarketplacesList();
+    return (
+        <ObjectSelect
+            renderOption={(baseMarketplace) =>
+                <>
+                    <ActionIcon variant={"transparent"}>
+                        <Image
+                            src={baseMarketplaces.find(el => baseMarketplace.option.value === el.key)?.iconUrl || ""}/>
+                    </ActionIcon>
+                    {baseMarketplace.option.label}
+                </>
+
+            }
+            getValueFn={(baseMarketplace) => baseMarketplace.key}
+            getLabelFn={(baseMarketplace) => baseMarketplace.name}
+            data={baseMarketplaces}
+            {...props}
+        />
+    )
+}
+export default BaseMarketplaceSelect
--- a/src/components/Selects/ClientAutocomplete/ClientAutocomplete.tsx
+++ b/src/components/Selects/ClientAutocomplete/ClientAutocomplete.tsx
@@ -59,7 +59,7 @@ const ClientAutocomplete: FC<Props> = ({onSelect, addressRestProps, nameRestProp
        <>
            <Autocomplete
                {...nameRestProps}
-                placeholder={'Клиент: название'}
+                placeholder={'Клиент'}
                onChange={handleChange}
                value={value}
                data={clients.map(client => client.name)}
--- a/src/components/Selects/UserSelect/UserSelect.tsx
+++ b/src/components/Selects/UserSelect/UserSelect.tsx
@@ -0,0 +1,16 @@
+import ObjectSelect, {ObjectSelectProps} from "../../ObjectSelect/ObjectSelect.tsx";
+import {UserSchema} from "../../../client";
+import {FC} from "react";
+import useUsersList from "../../../pages/AdminPage/hooks/useUsersList.tsx";
+
+type Props = Omit<ObjectSelectProps<UserSchema>, 'data' | 'getValueFn' | 'getLabelFn'>
+const UserSelect: FC<Props> = (props) => {
+    const {objects: users} = useUsersList();
+    return (<ObjectSelect
+        data={users}
+        getLabelFn={(user) => `${user.firstName} ${user.secondName}`}
+        getValueFn={(user) => user.id.toString()}
+        {...props}
+    />)
+}
+export default UserSelect;