feat: colors for card tags

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<ObjectSelectProps<CardTagColorSchema>, "data" | "getValueFn" | "getLabelFn">;
+
+const TagColorInput = (props: Props) => {
+    const { objects: colors } = useTagColorsList();
+    const colorsMap = new Map<string, CardTagColorSchema>(
+        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 (
+            <Group flex="1" gap="md">
+                <CardTag tag={tag} />
+                {option.label}
+                {checked && <IconCheck style={{ marginInlineStart: "auto" }} />}
+            </Group>
+        );
+    };
+
+    return (
+        <ObjectSelect
+            label={"Цвет"}
+            renderOption={renderSelectOption}
+            getValueFn={color => color.id.toString()}
+            getLabelFn={color => color.label}
+            data={colors}
+            searchable
+            {...props}
+        />
+    );
+};
+
+export default TagColorInput;

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<MRT_ColumnDef<CardTagSchema>[]>(
@@ -8,7 +9,20 @@ const useTagsTableColumns = () => {
             {
                 header: "Название",
                 accessorKey: "name",
+                size: 200,
+            },
+            {
+                header: "Цвет",
+                accessorKey: "tagColor.label",
+                size: 200,
+            },
+            {
+                header: "Пример",
+                accessorKey: "tagColor",
                 size: 1000,
+                Cell: ({ row }) => (
+                    <CardTag tag={row.original} />
+                ),
             },
         ],
         [],

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;

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,
                 }
             },
         });

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<CardTagSchema>;
 
@@ -18,12 +19,14 @@ const CardTagModal = ({
         ? innerProps.element
         : {
             name: "",
+            tagColor: undefined,
         };
 
     const form = useForm<Partial<CardTagSchema>>({
         initialValues: initialValue,
         validate: {
             name: name => !name && "Необходимо указать название тега",
+            tagColor: tagColor => !tagColor && "Необходимо указать цвет тега",
         },
     });
 
@@ -34,11 +37,17 @@ const CardTagModal = ({
             onClose={() => context.closeContextModal(id)}
             {...innerProps}>
             <BaseFormModal.Body>
-                <TextInput
-                    label={"Название"}
-                    placeholder={"Введите название тега"}
-                    {...form.getInputProps("name")}
-                />
+                <Stack>
+                    <TextInput
+                        label={"Название"}
+                        placeholder={"Введите название тега"}
+                        {...form.getInputProps("name")}
+                    />
+                    <TagColorInput
+                        placeholder={"Укажите цвет"}
+                        {...form.getInputProps("tagColor")}
+                    />
+                </Stack>
             </BaseFormModal.Body>
         </BaseFormModal>
     );