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 22:53:31 +03:00
parent 100af0aa06
commit f202e9b9fa
4 changed files with 52 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,5 +8,7 @@ export type DealGeneralInfoSchema = {
isCompleted: boolean; isCompleted: boolean;
comment: string; comment: string;
shippingWarehouse?: (string | null); shippingWarehouse?: (string | null);
deliveryDate?: (string | null);
receivingSlotDate?: (string | null);
}; };

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

@@ -3,6 +3,7 @@
/* tslint:disable */ /* tslint:disable */
/* eslint-disable */ /* eslint-disable */
import type { BaseMarketplaceSchema } from './BaseMarketplaceSchema'; import type { BaseMarketplaceSchema } from './BaseMarketplaceSchema';
import type { DealBillRequestSchema } from './DealBillRequestSchema';
export type DealSummary = { export type DealSummary = {
id: number; id: number;
name: string; name: string;
@@ -19,5 +20,6 @@ export type DealSummary = {
shipmentWarehouseName: (string | null); shipmentWarehouseName: (string | null);
deliveryDate?: (string | null); deliveryDate?: (string | null);
receivingSlotDate?: (string | null); receivingSlotDate?: (string | null);
billRequest?: (DealBillRequestSchema | null);
}; };

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

@@ -13,11 +13,13 @@ import {
Popover, Popover,
rem, rem,
Text, Text,
Tooltip,
} from "@mantine/core"; } from "@mantine/core";
import { useDealPageContext } from "../../../pages/LeadsPage/contexts/DealPageContext.tsx"; import { useDealPageContext } from "../../../pages/LeadsPage/contexts/DealPageContext.tsx";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCheck } from "@fortawesome/free-solid-svg-icons"; import { faCheck } from "@fortawesome/free-solid-svg-icons";
import { DealStatus } from "../../../shared/enums/DealStatus.ts"; import { DealStatus } from "../../../shared/enums/DealStatus.ts";
import { IconCheck } from "@tabler/icons-react";
type Props = { type Props = {
dealSummary: DealSummary; dealSummary: DealSummary;
@@ -31,8 +33,6 @@ const DealSummaryCard: FC<Props> = ({ dealSummary }) => {
}); });
}; };
const getIndicatorProps = (): IndicatorProps => { 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) if (!dealSummary.deliveryDate)
return { disabled: true }; return { disabled: true };
@@ -42,7 +42,6 @@ const DealSummaryCard: FC<Props> = ({ dealSummary }) => {
const diffDays = Math.ceil(diff / (1000 * 3600 * 24)); const diffDays = Math.ceil(diff / (1000 * 3600 * 24));
if (dealSummary.status < DealStatus.IN_DELIVERY) { 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) { if (diffDays <= 2 && diffDays > 1) {
return { return {
color: "yellow", color: "yellow",
@@ -124,43 +123,53 @@ const DealSummaryCard: FC<Props> = ({ dealSummary }) => {
)} )}
</Flex> </Flex>
<Flex align={"center"} justify={"space-between"}> <Flex align={"center"} justify={"space-between"}>
<CopyButton value={dealSummary.id.toString()}> <Flex align={"center"} gap={rem(5)}>
{({ copy, copied }) => ( <CopyButton value={dealSummary.id.toString()}>
<Popover {({ copy, copied }) => (
opened={copied} <Popover
withArrow> opened={copied}
<Popover.Target> withArrow>
<div <Popover.Target>
onClick={e => { <div
e.stopPropagation(); onClick={e => {
copy(); e.stopPropagation();
}} copy();
className={styles["flex-item"]}> }}
<Badge className={styles["flex-item"]}>
variant={"light"} <Badge
radius={"sm"}> variant={"light"}
ID: {dealSummary.id} radius={"sm"}>
</Badge> ID: {dealSummary.id}
</div> </Badge>
</Popover.Target> </div>
<Popover.Dropdown> </Popover.Target>
<Flex <Popover.Dropdown>
justify={"center"} <Flex
align={"center"} justify={"center"}
gap={rem(5)}> align={"center"}
<FontAwesomeIcon gap={rem(5)}>
bounce <FontAwesomeIcon
style={{ animationIterationCount: 1 }} bounce
icon={faCheck} style={{ animationIterationCount: 1 }}
/> icon={faCheck}
<Text size={"xs"}> />
ID сделки скопирован <Text size={"xs"}>
</Text> ID сделки скопирован
</Flex> </Text>
</Popover.Dropdown> </Flex>
</Popover> </Popover.Dropdown>
</Popover>
)}
</CopyButton>
{dealSummary.billRequest?.paid && (
<Tooltip label={"Оплачен"}>
<IconCheck />
</Tooltip>
)} )}
</CopyButton> </Flex>
<ActionIcon variant={"transparent"}> <ActionIcon variant={"transparent"}>
<Image <Image
src={dealSummary.baseMarketplace?.iconUrl || ""} src={dealSummary.baseMarketplace?.iconUrl || ""}

5
src/components/HideNavbarAffix/HideNavbarAffix.tsx
View File

@@ -12,7 +12,6 @@ const HideNavbarAffix: FC<Props> = (props) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
return ( return (
<> <>
{/*{uiState.hideNavbar && (*/}
<Transition <Transition
transition={"slide-right"} transition={"slide-right"}
mounted={uiState.hideNavbar} mounted={uiState.hideNavbar}
@@ -32,18 +31,14 @@ const HideNavbarAffix: FC<Props> = (props) => {
}} }}
className={stylesCss["icon"]} className={stylesCss["icon"]}
// color={"#2d2d2d"}
radius="xl" radius="xl"
size={45}> size={45}>
<IconArrowRight <IconArrowRight
stroke={1.5} stroke={1.5}
// size={30}
/> />
</ActionIcon> </ActionIcon>
</Affix>)} </Affix>)}
</Transition> </Transition>
{/*)*/}
{/*}*/}
</> </>
); );