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

feat: deal card, deal status, deal new dates, indicator, hide navbar

Browse Source
This commit is contained in:
admin
2024-09-30 08:52:21 +03:00
parent 31d2c86770
commit 99b71b9da9
15 changed files with 313 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/client/index.ts
View File

@@ -25,7 +25,6 @@ export type { BaseEnumListSchema } from './models/BaseEnumListSchema';
export type { BaseEnumSchema } from './models/BaseEnumSchema';
export type { BaseMarketplaceSchema } from './models/BaseMarketplaceSchema';
export type { BaseShippingWarehouseSchema } from './models/BaseShippingWarehouseSchema';
export type { BillPaymentInfo } from './models/BillPaymentInfo';
export type { BillPaymentStatus } from './models/BillPaymentStatus';
export type { BillStatusUpdateRequest } from './models/BillStatusUpdateRequest';
export type { Body_upload_product_image } from './models/Body_upload_product_image';

3
src/client/models/BillStatusUpdateRequest.ts
View File

@@ -2,12 +2,11 @@
/* istanbul ignore file */
/* tslint:disable */
/* eslint-disable */
import type { BillPaymentInfo } from './BillPaymentInfo';
import type { BillPaymentStatus } from './BillPaymentStatus';
import type { NotificationChannel } from './NotificationChannel';
export type BillStatusUpdateRequest = {
listenerTransactionId: number;
channel: NotificationChannel;
info: (BillPaymentInfo | BillPaymentStatus);
info: BillPaymentStatus;
};

2
src/client/models/DealSchema.ts
View File

@@ -26,5 +26,7 @@ export type DealSchema = {
shippingWarehouse?: (ShippingWarehouseSchema | string | null);
billRequest?: (DealBillRequestSchema | null);
category?: (ServicePriceCategorySchema | null);
deliveryDate?: (string | null);
receivingSlotDate?: (string | null);
};

2
src/client/models/DealSummary.ts
View File

@@ -17,5 +17,7 @@ export type DealSummary = {
totalProducts: number;
shipmentWarehouseId: (number | null);
shipmentWarehouseName: (string | null);
deliveryDate?: (string | null);
receivingSlotDate?: (string | null);
};

2
src/components/Dnd/Board/Board.module.css
View File

@@ -2,7 +2,7 @@
width: 100%;
display: flex;
flex-direction: column;
/*background-color: green;*/
flex: 1;
}
.header {

2
src/components/Dnd/DealSummaryCard/DealSummaryCard.module.css
View File

@@ -12,7 +12,7 @@
padding-bottom: rem(5);
font-size: var(--mantine-font-size-sm);
flex-wrap: wrap;
/*border-color: red;*/
@mixin light {
background-color: var(--mantine-color-gray-1);
}

235
src/components/Dnd/DealSummaryCard/DealSummaryCard.tsx
View File

@@ -8,14 +8,16 @@ import {
CopyButton,
Flex,
Image,
Indicator,
IndicatorProps,
Popover,
rem,
Text,
} from "@mantine/core";
import classNames from "classnames";
import { useDealPageContext } from "../../../pages/LeadsPage/contexts/DealPageContext.tsx";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck } from "@fortawesome/free-solid-svg-icons";
import { DealStatus } from "../../../shared/enums/DealStatus.ts";
type Props = {
dealSummary: DealSummary;
@@ -28,120 +30,149 @@ const DealSummaryCard: FC<Props> = ({ dealSummary }) => {
setSelectedDeal(deal);
});
};
const getDeadlineTextColor = (deadline: string) => {
// generate three colors, yellow for 1 day, red for 0 days, green for more than 1 day
const deadlineDate = new Date(deadline);
const getIndicatorProps = (): IndicatorProps => {
// check if deal status is less then in delivery and delivery_date - current date is less then 3 days, then show indicator
// and if current status is less then in_delivery, then show indicator
if (!dealSummary.deliveryDate)
return { disabled: true };
const deliveryDate = new Date(dealSummary.deliveryDate);
const currentDate = new Date();
const diff = deadlineDate.getTime() - currentDate.getTime();
const diff = deliveryDate.getTime() - currentDate.getTime();
const diffDays = Math.ceil(diff / (1000 * 3600 * 24));
if (diffDays < 0) return "red.8"; // for past deadlines
if (diffDays === 1) {
return "yellow.8";
if (dealSummary.status < DealStatus.IN_DELIVERY) {
// if less than 2 days left, show yellow, if less than 1 day left, show red
if (diffDays <= 2 && diffDays > 1) {
return {
color: "yellow",
};
}
if (diffDays <= 1) {
return {
color: "red",
};
}
return {
disabled: false,
};
}
if (diffDays === 0) {
return "orange.8";
}
return "green.8";
return { disabled: true };
};
return (
<div
onClick={() => onDealSummaryClick()}
className={styles["container"]}>
<Indicator
position={"top-end"}
withBorder
{...getIndicatorProps()}
>
<div
className={classNames(
styles["flex-row"],
styles["flex-row-left"]
)}>
<div className={styles["flex-item"]}>
<Text
size={"sm"}
c={"gray.6"}>
Клиент: {dealSummary.clientName}
</Text>
</div>
<div className={styles["flex-item"]}>
<Text
size={"md"}
c={"blue.5"}>
onClick={() => onDealSummaryClick()}
className={styles["container"]}>
<Flex direction={"column"} flex={1} gap={rem(3)}>
<Flex justify={"space-between"}>
<Text
c={"gray.6"}
size={"xs"}
>
{dealSummary.clientName}
</Text>
</Flex>
<Text c={"blue.5"} size={"sm"}>
{dealSummary.name}
</Text>
{dealSummary.shipmentWarehouseName && (
<Flex
// align={"center"}
direction={"column"}
justify={"space-between"}
>
<Text
size={"sm"}
c={"gray.6"}>
{dealSummary.shipmentWarehouseName}
{dealSummary.shipmentWarehouseName || "Склад не указан"}
</Text>
)}
</div>
<div className={styles["flex-item"]}>
<Text
size={"sm"}
c={"gray.6"}>
{dealSummary.totalPrice.toLocaleString("ru-RU")} руб,{" "}
{dealSummary.totalProducts.toLocaleString("ru-RU")} тов.
</Text>
</div>
<Text
c={"gray.6"}
size={"sm"}
>
{dealSummary.totalPrice.toLocaleString("ru-RU")} руб,{" "}
</Text>
<Text
c={"gray.6"}
size={"sm"}>
{dealSummary.totalProducts.toLocaleString("ru-RU")} тов.
</Text>
</Flex>
<Flex direction={"column"}>
{dealSummary.deliveryDate && (
<Text
c={"gray.6"}
size={"sm"}>
Доставка: {(new Date(dealSummary.deliveryDate)).toLocaleDateString("ru-RU")}
</Text>
)}
{dealSummary.receivingSlotDate && (
<Text
c={"gray.6"}
size={"sm"}>
Приемка: {(new Date(dealSummary.receivingSlotDate)).toLocaleDateString("ru-RU")}
</Text>
)}
</Flex>
<Flex align={"center"} justify={"space-between"}>
<CopyButton value={dealSummary.id.toString()}>
{({ copy, copied }) => (
<Popover
opened={copied}
withArrow>
<Popover.Target>
<div
onClick={e => {
e.stopPropagation();
copy();
}}
className={styles["flex-item"]}>
<Badge
variant={"light"}
radius={"sm"}>
ID: {dealSummary.id}
</Badge>
</div>
</Popover.Target>
<Popover.Dropdown>
<Flex
justify={"center"}
align={"center"}
gap={rem(5)}>
<FontAwesomeIcon
bounce
style={{ animationIterationCount: 1 }}
icon={faCheck}
/>
<Text size={"xs"}>
ID сделки скопирован
</Text>
</Flex>
</Popover.Dropdown>
</Popover>
)}
</CopyButton>
<ActionIcon variant={"transparent"}>
<Image
src={dealSummary.baseMarketplace?.iconUrl || ""}
/>
</ActionIcon>
</Flex>
</Flex>
</div>
<div
className={classNames(
styles["flex-row"],
styles["flex-row-right"]
)}>
<div className={styles["flex-item"]}>
<ActionIcon variant={"transparent"}>
<Image
src={dealSummary.baseMarketplace?.iconUrl || ""}
/>
</ActionIcon>
</div>
<div className={styles["flex-item"]}>
<Text
size={"sm"}
c={getDeadlineTextColor(dealSummary.deadline)}>
{new Date(dealSummary.deadline)
.toLocaleString("ru-RU")
.slice(0, -3)}
</Text>
</div>
<CopyButton value={"https://google.com"}>
{({ copy, copied }) => (
<Popover
opened={copied}
withArrow>
<Popover.Target>
<div
onClick={e => {
e.stopPropagation();
copy();
}}
className={styles["flex-item"]}>
<Badge
variant={"light"}
radius={"sm"}>
ID: {dealSummary.id}
</Badge>
</div>
</Popover.Target>
<Popover.Dropdown>
<Flex
justify={"center"}
align={"center"}
gap={rem(5)}>
<FontAwesomeIcon
bounce
style={{ animationIterationCount: 1 }}
icon={faCheck}
/>
<Text size={"xs"}>
ID сделки скопирован
</Text>
</Flex>
</Popover.Dropdown>
</Popover>
)}
</CopyButton>
</div>
</div>
</Indicator>
);
};
export default DealSummaryCard;

10
src/components/HideNavbarAffix/HideNavbarAffix.module.css Normal file
View File

@@ -0,0 +1,10 @@
.icon {
box-shadow: 3px 3px 20px 2px rgb(0 0 0 / 8%), -3px -3px 20px 2px rgba(0, 0, 0, 0.08);
@mixin dark {
background-color: #454545;
}
@mixin light {
background-color: #f1f6f8;
color: var(--mantine-color-dark-3);
}
}

52
src/components/HideNavbarAffix/HideNavbarAffix.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { ActionIcon, Affix, AffixProps, rem, Transition } from "@mantine/core";
import { IconArrowRight } from "@tabler/icons-react";
import { useSelector } from "react-redux";
import { RootState, useAppDispatch } from "../../redux/store.ts";
import { setHideNavbar } from "../../features/uiSlice.ts";
import { FC } from "react";
import stylesCss from "./HideNavbarAffix.module.css";
type Props = AffixProps;
const HideNavbarAffix: FC<Props> = (props) => {
const uiState = useSelector((state: RootState) => state.ui);
const dispatch = useAppDispatch();
return (
<>
{/*{uiState.hideNavbar && (*/}
<Transition
transition={"slide-right"}
mounted={uiState.hideNavbar}
>
{styles => (
<Affix
style={styles}
position={{
top: "50%",
left: rem(20),
}}
{...props}
>
<ActionIcon
onClick={() => {
dispatch(setHideNavbar(false));
}}
className={stylesCss["icon"]}
// color={"#2d2d2d"}
radius="xl"
size={45}>
<IconArrowRight
stroke={1.5}
// size={30}
/>
</ActionIcon>
</Affix>)}
</Transition>
{/*)*/}
{/*}*/}
</>
);
};
export default HideNavbarAffix;

25
src/components/Navbar/Navbar.tsx
View File

@@ -1,14 +1,6 @@
import { Center, Flex, Image, rem, Stack, Tooltip, UnstyledButton, useMantineColorScheme } from "@mantine/core";
import {
Center,
Flex,
Image,
rem,
Stack,
Tooltip,
UnstyledButton,
useMantineColorScheme,
} from "@mantine/core";
import {
IconArrowLeft,
IconBarcode,
IconBox,
IconBuildingWarehouse,
@@ -26,6 +18,7 @@ import classes from "./Navbar.module.css";
import { useAppDispatch } from "../../redux/store.ts";
import { logout } from "../../features/authSlice.ts";
import { useNavigate, useRouterState } from "@tanstack/react-router";
import { setHideNavbar } from "../../features/uiSlice.ts";
interface NavbarLinkProps {
icon: typeof IconHome2;
@@ -118,6 +111,7 @@ export function Navbar() {
};
const links = mockdata.map((link, index) => (
<NavbarLink
{...link}
index={index}
key={link.label}
@@ -130,7 +124,9 @@ export function Navbar() {
<nav className={classes.navbar}>
<Flex
direction={"column"}
align={"center"}
gap={rem(30)}>
<Center p={rem(5)}>
<Image
flex={1}
@@ -183,6 +179,15 @@ export function Navbar() {
icon={IconLogout}
label="Выйти"
/>
<NavbarLink
icon={IconArrowLeft}
href={"#"}
index={-1}
label={"Свернуть"}
onClick={() => {
dispatch(setHideNavbar(true));
}}
/>
</Stack>
</nav>
);

7
src/features/uiSlice.ts
View File

@@ -2,10 +2,12 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
interface UIState {
isLoading: boolean;
hideNavbar: boolean;
}
const initialState: UIState = {
isLoading: false,
hideNavbar: false,
};
const uiSlice = createSlice({
@@ -15,8 +17,11 @@ const uiSlice = createSlice({
setIsLoading: (state, action: PayloadAction<boolean>) => {
state.isLoading = action.payload;
},
setHideNavbar: (state, action: PayloadAction<boolean>) => {
state.hideNavbar = action.payload;
},
},
});
export default uiSlice.reducer;
export const { setIsLoading } = uiSlice.actions;
export const { setIsLoading, setHideNavbar} = uiSlice.actions;

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

@@ -25,10 +25,11 @@ import { ButtonCopyControlled } from "../../../../../components/ButtonCopyContro
import { useClipboard } from "@mantine/hooks";
import ButtonCopy from "../../../../../components/ButtonCopy/ButtonCopy.tsx";
import FileSaver from "file-saver";
import { getCurrentDateTimeForFilename } from "../../../../../shared/lib/date.ts";
import { dateWithoutTimezone, getCurrentDateTimeForFilename } from "../../../../../shared/lib/date.ts";
import { IconBarcode, IconPrinter } from "@tabler/icons-react";
import styles from "../../../ui/LeadsPage.module.css";
import { base64ToBlob } from "../../../../../shared/lib/utils.ts";
import { DatePickerInput } from "@mantine/dates";
type Props = {
deal: DealSchema;
@@ -41,7 +42,17 @@ const Content: FC<Props> = ({ deal }) => {
const clipboard = useClipboard();
const queryClient = useQueryClient();
const initialValues: FormType = deal;
// ignore typescript
const initialValues: FormType = {
...deal,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
deliveryDate: deal.deliveryDate ? new Date(deal.deliveryDate) : null,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
receivingSlotDate: deal.receivingSlotDate ? new Date(deal.receivingSlotDate) : null,
};
const form = useForm<FormType>({
initialValues: initialValues,
validate: {
@@ -85,7 +96,14 @@ const Content: FC<Props> = ({ deal }) => {
await updateClientInfo(values);
}
// updating deal info
await updateDealInfo(values);
// get shimpent warehouse name from object if its object, otherwise just pass it
const shippingWarehouse = isShippingWarehouse(values.shippingWarehouse) ? values.shippingWarehouse.name : values.shippingWarehouse;
await updateDealInfo({
...values,
deliveryDate: values.deliveryDate ? dateWithoutTimezone(new Date(values.deliveryDate)) : null,
receivingSlotDate: values.receivingSlotDate ? dateWithoutTimezone(new Date(values.receivingSlotDate)) : null,
shippingWarehouse: shippingWarehouse,
});
};
const isShippingWarehouse = (
value: ShippingWarehouseSchema | string | null | undefined,
@@ -171,6 +189,21 @@ const Content: FC<Props> = ({ deal }) => {
).onChange(event);
}}
/>
<DatePickerInput
minDate={new Date()}
placeholder={"Укажите дату передачи в доставку"}
label={"Дата передачи в доставку"}
{...form.getInputProps("deliveryDate")}
/>
<DatePickerInput
minDate={new Date()}
placeholder={"Укажите слот приемки"}
label={"Слот приемки"}
{...form.getInputProps("receivingSlotDate")}
/>
</Flex>
</Fieldset>
<Flex

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

@@ -8,7 +8,7 @@ import PageBlock from "../../../components/PageBlock/PageBlock.tsx";
import DealEditDrawer from "../drawers/DealEditDrawer/DealEditDrawer.tsx";
import { DealPageContextProvider } from "../contexts/DealPageContext.tsx";
import { modals } from "@mantine/modals";
import { DealService, DealSummary, DealSummaryReorderRequest } from "../../../client";
import { DealService, DealSummaryReorderRequest } from "../../../client";
import { ActionIcon, Flex, NumberInput, rem, Text } from "@mantine/core";
import classNames from "classnames";
import { notifications } from "../../../shared/lib/notifications.ts";
@@ -19,6 +19,7 @@ import BaseMarketplaceSelect from "../../../components/Selects/BaseMarketplaceSe
import ClientSelectNew from "../../../components/Selects/ClientSelectNew/ClientSelectNew.tsx";
import DealsTable from "../../DealsPage/components/DealsTable/DealsTable.tsx";
import { motion } from "framer-motion";
import { dateWithoutTimezone } from "../../../shared/lib/date.ts";
enum DisplayMode {
BOARD,
@@ -31,11 +32,11 @@ export const LeadsPage: FC = () => {
const { summariesRaw, refetch } = useDealSummaries();
const [summaries, setSummaries] = useState(summariesRaw);
const [displayMode, setDisplayMode] = useState<DisplayMode>(
DisplayMode.BOARD
DisplayMode.BOARD,
);
const [isDragEnded, setIsDragEnded] = useState(true);
const [selectedDeals, setSelectedDeals] = useState<DealSummary[]>([]);
// const [selectedDeals, setSelectedDeals] = useState<DealSummary[]>([]);
useEffect(() => {
setSummaries(summariesRaw);
@@ -129,19 +130,18 @@ export const LeadsPage: FC = () => {
});
return;
}
modals.openContextModal({
modal: "enterDeadline",
title: "Необходимо указать дедлайн",
innerProps: {
onSubmit: event =>
DealService.reorderDealSummaries({
requestBody: event,
}).then(async response => {
setSummaries(response.summaries);
await refetch();
}),
request: request,
DealService.reorderDealSummaries({
requestBody: {
dealId: dealId,
status: status,
index: result.destination.index,
comment: "",
deadline: dateWithoutTimezone(new Date()),
},
}).then(async response => {
setSummaries(response.summaries);
await refetch();
});
};
const getTableBody = () => {
@@ -151,7 +151,9 @@ export const LeadsPage: FC = () => {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.2 }}>
<DealsTable items={data} onSelectionChange={setSelectedDeals} />
<DealsTable items={data}
// onSelectionChange={setSelectedDeals}
/>
</motion.div>
);
};
@@ -188,6 +190,15 @@ export const LeadsPage: FC = () => {
droppableId={"AWAITING_ACCEPTANCE"}
color={"#4A90E2"}
/>
<Board
summaries={summaries.filter(
summary =>
summary.status == DealStatus.READY_FOR_WORK,
)}
title={"Готов к работе"}
droppableId={"READY_FOR_WORK"}
color={"#D3D3D3"}
/>
<Board
summaries={summaries.filter(
summary =>
@@ -207,6 +218,15 @@ export const LeadsPage: FC = () => {
droppableId={"AWAITING_SHIPMENT"}
color={"#7ED321"}
/>
<Board
summaries={summaries.filter(
summary =>
summary.status == DealStatus.IN_DELIVERY,
)}
title={"В доставке"}
droppableId={"IN_DELIVERY"}
color={"#6A0DAD"}
/>
<Board
summaries={summaries.filter(
summary =>

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

@@ -4,12 +4,14 @@ import { useSelector } from "react-redux";
import { RootState } from "../../redux/store.ts";
import styles from "./PageWrapper.module.css";
import { Navbar } from "../../components/Navbar/Navbar.tsx";
import HideNavbarAffix from "../../components/HideNavbarAffix/HideNavbarAffix.tsx";
export type Props = {
children: ReactNode;
};
const PageWrapper: FC<Props> = ({ children }) => {
const authState = useSelector((state: RootState) => state.auth);
const uiState = useSelector((state: RootState) => state.ui);
return (
<AppShell
layout={"alt"}
@@ -17,10 +19,12 @@ const PageWrapper: FC<Props> = ({ children }) => {
navbar={
authState.isAuthorized && !authState.isGuest
? {
width: "130px",
breakpoint: "sm",
}
width: "130px",
breakpoint: "sm",
collapsed: { desktop: uiState.hideNavbar },
}
: undefined
}>
<AppShell.Navbar>
{authState.isAuthorized && !authState.isGuest && (
@@ -42,6 +46,7 @@ const PageWrapper: FC<Props> = ({ children }) => {
}
className={styles["main-container"]}>
<div className={styles["container"]}>{children}</div>
<HideNavbarAffix />
</AppShell.Main>
</AppShell>
);

16
src/shared/enums/DealStatus.ts
View File

@@ -1,11 +1,13 @@
export enum DealStatus {
CREATED = 0,
AWAITING_ACCEPTANCE = 1,
PACKAGING = 2,
AWAITING_SHIPMENT = 3,
AWAITING_PAYMENT = 4,
COMPLETED = 5,
CANCELLED = 6,
READY_FOR_WORK = 2,
PACKAGING = 3,
AWAITING_SHIPMENT = 4,
IN_DELIVERY = 5,
AWAITING_PAYMENT = 6,
COMPLETED = 7,
CANCELLED = 8,
}
export const getDealStatusByName = (name: string): DealStatus => {
@@ -14,8 +16,10 @@ export const getDealStatusByName = (name: string): DealStatus => {
export const DealStatusDictionary = {
[DealStatus.CREATED]: "Создан",
[DealStatus.AWAITING_ACCEPTANCE]: "Ожидает приемки",
[DealStatus.READY_FOR_WORK]: "Готов к работе",
[DealStatus.PACKAGING]: "Упаковка",
[DealStatus.AWAITING_SHIPMENT]: "Ожидает отгрузки",
[DealStatus.IN_DELIVERY]: "В доставке",
[DealStatus.AWAITING_PAYMENT]: "Ожидает оплаты",
[DealStatus.COMPLETED]: "Завершена",
[DealStatus.CANCELLED]: "Отменена",
@@ -25,7 +29,7 @@ export type DealStatusType = {
name: string;
};
export const DealStatuses: DealStatusType[] = Object.entries(
DealStatusDictionary
DealStatusDictionary,
).map(([key, value]) => {
return { id: parseInt(key), name: value };
});