From e32ec1ff23af14a886feac3372f065c2c916ae7b Mon Sep 17 00:00:00 2001 From: AlexSserb Date: Thu, 13 Mar 2025 19:28:12 +0400 Subject: [PATCH] feat: colors for card tags --- src/client/index.ts | 4 ++ src/client/models/BaseCardTagSchema.ts | 1 + src/client/models/CardTagSchema.ts | 3 ++ src/client/models/GetTagColorsResponse.ts | 9 ++++ src/client/services/CardTagService.ts | 12 +++++ src/components/CardTag/CardTag.tsx | 30 +++++++++++++ .../Cards/CardSummaryItem/CardSummaryItem.tsx | 5 +++ .../Dnd/Cards/CardTags/CardTags.module.css | 23 +++++++--- .../Dnd/Cards/CardTags/CardTags.tsx | 22 +++------ .../tabs/Tags/components/TagColorInput.tsx | 45 +++++++++++++++++++ .../tabs/Tags/hooks/tagsTableColumns.tsx | 14 ++++++ .../tabs/Tags/hooks/useTagColorList.tsx | 11 +++++ .../tabs/Tags/hooks/useTags.tsx | 8 +++- .../tabs/Tags/modals/CardTagModal.tsx | 21 ++++++--- 14 files changed, 177 insertions(+), 31 deletions(-) create mode 100644 src/client/models/GetTagColorsResponse.ts create mode 100644 src/components/CardTag/CardTag.tsx create mode 100644 src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/components/TagColorInput.tsx create mode 100644 src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/useTagColorList.tsx diff --git a/src/client/index.ts b/src/client/index.ts index 9d70c32..a1df743 100644 --- a/src/client/index.ts +++ b/src/client/index.ts @@ -102,6 +102,7 @@ export type { CardStatusHistorySchema } from './models/CardStatusHistorySchema'; export type { CardSummary } from './models/CardSummary'; export type { CardSummaryReorderRequest } from './models/CardSummaryReorderRequest'; export type { CardSummaryResponse } from './models/CardSummaryResponse'; +export type { CardTagColorSchema } from './models/CardTagColorSchema'; export type { CardTagSchema } from './models/CardTagSchema'; export type { CardUpdateGeneralInfoRequest } from './models/CardUpdateGeneralInfoRequest'; export type { CardUpdateGeneralInfoResponse } from './models/CardUpdateGeneralInfoResponse'; @@ -215,6 +216,8 @@ export type { FinishPauseByUserIdResponse } from './models/FinishPauseByUserIdRe export type { FinishShiftByIdResponse } from './models/FinishShiftByIdResponse'; export type { FinishShiftResponse } from './models/FinishShiftResponse'; export type { FullProjectSchema } from './models/FullProjectSchema'; +export type { GenerateInviteCodeRequest } from './models/GenerateInviteCodeRequest'; +export type { GenerateInviteCodeResponse } from './models/GenerateInviteCodeResponse'; export type { GetAllBarcodeTemplateAttributesResponse } from './models/GetAllBarcodeTemplateAttributesResponse'; export type { GetAllBarcodeTemplateSizesResponse } from './models/GetAllBarcodeTemplateSizesResponse'; export type { GetAllBarcodeTemplatesResponse } from './models/GetAllBarcodeTemplatesResponse'; @@ -259,6 +262,7 @@ export type { GetProjectsResponse } from './models/GetProjectsResponse'; export type { GetResidualBoxResponse } from './models/GetResidualBoxResponse'; export type { GetResidualPalletResponse } from './models/GetResidualPalletResponse'; export type { GetServiceKitSchema } from './models/GetServiceKitSchema'; +export type { GetTagColorsResponse } from './models/GetTagColorsResponse'; export type { GetTimeTrackingRecordsRequest } from './models/GetTimeTrackingRecordsRequest'; export type { GetTimeTrackingRecordsResponse } from './models/GetTimeTrackingRecordsResponse'; export type { GetTransactionTagsResponse } from './models/GetTransactionTagsResponse'; diff --git a/src/client/models/BaseCardTagSchema.ts b/src/client/models/BaseCardTagSchema.ts index 4db2641..d15fa57 100644 --- a/src/client/models/BaseCardTagSchema.ts +++ b/src/client/models/BaseCardTagSchema.ts @@ -5,5 +5,6 @@ export type BaseCardTagSchema = { name: string; projectId: number; + tagColorId: number; }; diff --git a/src/client/models/CardTagSchema.ts b/src/client/models/CardTagSchema.ts index 8008529..5320dbc 100644 --- a/src/client/models/CardTagSchema.ts +++ b/src/client/models/CardTagSchema.ts @@ -2,9 +2,12 @@ /* istanbul ignore file */ /* tslint:disable */ /* eslint-disable */ +import type { CardTagColorSchema } from './CardTagColorSchema'; export type CardTagSchema = { name: string; projectId: number; + tagColorId: number; id: number; + tagColor: CardTagColorSchema; }; diff --git a/src/client/models/GetTagColorsResponse.ts b/src/client/models/GetTagColorsResponse.ts new file mode 100644 index 0000000..f114be8 --- /dev/null +++ b/src/client/models/GetTagColorsResponse.ts @@ -0,0 +1,9 @@ +/* generated using openapi-typescript-codegen -- do not edit */ +/* istanbul ignore file */ +/* tslint:disable */ +/* eslint-disable */ +import type { CardTagColorSchema } from './CardTagColorSchema'; +export type GetTagColorsResponse = { + colors: Array; +}; + diff --git a/src/client/services/CardTagService.ts b/src/client/services/CardTagService.ts index c981439..48ec8f1 100644 --- a/src/client/services/CardTagService.ts +++ b/src/client/services/CardTagService.ts @@ -5,6 +5,7 @@ import type { CreateTagRequest } from '../models/CreateTagRequest'; import type { CreateTagResponse } from '../models/CreateTagResponse'; import type { DeleteTagResponse } from '../models/DeleteTagResponse'; +import type { GetTagColorsResponse } from '../models/GetTagColorsResponse'; import type { SwitchTagRequest } from '../models/SwitchTagRequest'; import type { SwitchTagResponse } from '../models/SwitchTagResponse'; import type { UpdateTagRequest } from '../models/UpdateTagRequest'; @@ -94,4 +95,15 @@ export class CardTagService { }, }); } + /** + * Get Colors + * @returns GetTagColorsResponse Successful Response + * @throws ApiError + */ + public static getColors(): CancelablePromise { + return __request(OpenAPI, { + method: 'GET', + url: '/card-tag/colors', + }); + } } diff --git a/src/components/CardTag/CardTag.tsx b/src/components/CardTag/CardTag.tsx new file mode 100644 index 0000000..d686ee1 --- /dev/null +++ b/src/components/CardTag/CardTag.tsx @@ -0,0 +1,30 @@ +import { CardTagSchema } from "../../client"; +import { Pill, useMantineColorScheme } from "@mantine/core"; + +type Props = { + tag: Partial; +} + +const CardTag = ({ tag }: Props) => { + const theme = useMantineColorScheme(); + + let color = "lightgray"; + if (tag?.tagColor?.backgroundColor === "inherit" && theme.colorScheme == "light") { + color = "gray"; + } + + return ( + + {tag.name} + + ); +}; + +export default CardTag; diff --git a/src/components/Dnd/Cards/CardSummaryItem/CardSummaryItem.tsx b/src/components/Dnd/Cards/CardSummaryItem/CardSummaryItem.tsx index e53526b..115e2c4 100644 --- a/src/components/Dnd/Cards/CardSummaryItem/CardSummaryItem.tsx +++ b/src/components/Dnd/Cards/CardSummaryItem/CardSummaryItem.tsx @@ -83,6 +83,11 @@ const CardSummaryItem: FC = ({ cardSummary, color }) => { direction={"column"} justify={"space-between"} > + + {cardSummary.shipmentWarehouseName || "Склад не указан"} + { ); - const pills = tags.map(tag => { - return ( - - {tag.name} - - ); - }); - return ( {addTagButton} - {pills} + {tags.map(tag => ( + + ))} ); }; diff --git a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/components/TagColorInput.tsx b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/components/TagColorInput.tsx new file mode 100644 index 0000000..33a3915 --- /dev/null +++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/components/TagColorInput.tsx @@ -0,0 +1,45 @@ +import { Group, SelectProps } from "@mantine/core"; +import { IconCheck } from "@tabler/icons-react"; +import useTagColorsList from "../hooks/useTagColorList.tsx"; +import ObjectSelect, { ObjectSelectProps } from "../../../../../../../components/ObjectSelect/ObjectSelect.tsx"; +import { CardTagColorSchema } from "../../../../../../../client"; +import CardTag from "../../../../../../../components/CardTag/CardTag.tsx"; + +type Props = Omit, "data" | "getValueFn" | "getLabelFn">; + +const TagColorInput = (props: Props) => { + const { objects: colors } = useTagColorsList(); + const colorsMap = new Map( + colors.map(color => [color.id.toString(), color] as [string, CardTagColorSchema]), + ); + + const renderSelectOption: SelectProps["renderOption"] = ({ option, checked }) => { + const tag = { + id: Number.parseInt(option.value), + name: "Тег-пример", + tagColor: colorsMap.get(option.value), + }; + + return ( + + + {option.label} + {checked && } + + ); + }; + + return ( + color.id.toString()} + getLabelFn={color => color.label} + data={colors} + searchable + {...props} + /> + ); +}; + +export default TagColorInput; diff --git a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/tagsTableColumns.tsx b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/tagsTableColumns.tsx index 4b60d5d..a9aa837 100644 --- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/tagsTableColumns.tsx +++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/tagsTableColumns.tsx @@ -1,6 +1,7 @@ import { useMemo } from "react"; import { MRT_ColumnDef } from "mantine-react-table"; import { CardTagSchema } from "../../../../../../../client"; +import CardTag from "../../../../../../../components/CardTag/CardTag.tsx"; const useTagsTableColumns = () => { return useMemo[]>( @@ -8,7 +9,20 @@ const useTagsTableColumns = () => { { header: "Название", accessorKey: "name", + size: 200, + }, + { + header: "Цвет", + accessorKey: "tagColor.label", + size: 200, + }, + { + header: "Пример", + accessorKey: "tagColor", size: 1000, + Cell: ({ row }) => ( + + ), }, ], [], diff --git a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/useTagColorList.tsx b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/useTagColorList.tsx new file mode 100644 index 0000000..dd99b5d --- /dev/null +++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/useTagColorList.tsx @@ -0,0 +1,11 @@ +import { CardTagService } from "../../../../../../../client"; +import ObjectList from "../../../../../../../hooks/objectList.tsx"; + +const useTagColorsList = () => + ObjectList({ + queryFn: CardTagService.getColors, + getObjectsFn: response => response.colors, + queryKey: "useTagColorsList", + }); + +export default useTagColorsList; diff --git a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/useTags.tsx b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/useTags.tsx index bea4475..42b1d59 100644 --- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/useTags.tsx +++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/hooks/useTags.tsx @@ -56,7 +56,12 @@ const useTags = () => { const onChange = (tag: CardTagSchema) => { const response = CardTagService.updateTag({ - requestBody: { tag }, + requestBody: { + tag: { + ...tag, + tagColorId: tag.tagColor.id, + } + }, }); processResponse(response); @@ -81,6 +86,7 @@ const useTags = () => { tag: { name: tag.name, projectId: project.id, + tagColorId: tag.tagColor.id, } }, }); diff --git a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/modals/CardTagModal.tsx b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/modals/CardTagModal.tsx index 95f3227..6477a48 100644 --- a/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/modals/CardTagModal.tsx +++ b/src/pages/CardsPage/drawers/ProjectEditDrawer/tabs/Tags/modals/CardTagModal.tsx @@ -4,7 +4,8 @@ import BaseFormModal, { } from "../../../../../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx"; import { CardTagSchema } from "../../../../../../../client"; import { useForm } from "@mantine/form"; -import { TextInput } from "@mantine/core"; +import { Stack, TextInput } from "@mantine/core"; +import TagColorInput from "../components/TagColorInput.tsx"; type Props = CreateEditFormProps; @@ -18,12 +19,14 @@ const CardTagModal = ({ ? innerProps.element : { name: "", + tagColor: undefined, }; const form = useForm>({ initialValues: initialValue, validate: { name: name => !name && "Необходимо указать название тега", + tagColor: tagColor => !tagColor && "Необходимо указать цвет тега", }, }); @@ -34,11 +37,17 @@ const CardTagModal = ({ onClose={() => context.closeContextModal(id)} {...innerProps}> - + + + + );