feat: printing attributes in cards on dashboard

src/components/Dnd/Cards/CardSummaryItem/CardSummaryItem.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { CardService, CardSummary } from "../../../../client";
+import { CardAttributeSchema, CardService, CardSummary } from "../../../../client";
 import styles from "./CardSummaryItem.module.css";
 
 import { ActionIcon, Badge, CopyButton, Flex, Image, Popover, rem, Text, ThemeIcon, Tooltip } from "@mantine/core";
@@ -12,6 +12,7 @@ import useCardSummaryState from "./useCardSummaryState.tsx";
 import isModuleInProject, { Modules } from "../../../../modules/utils/isModuleInProject.ts";
 import { useProjectsContext } from "../../../../contexts/ProjectsContext.tsx";
 import CardTags from "../CardTags/CardTags.tsx";
+import { formatDate, formatDateTime } from "../../../../types/utils.ts";
 
 type Props = {
     cardSummary: CardSummary;
@@ -38,6 +39,40 @@ const CardSummaryItem: FC<Props> = ({ cardSummary, color }) => {
     const isLockedInsideGroup = () => {
         return cardSummary.group && !cardSummary.group.billRequest;
     };
+
+    const attributeValues = () => {
+        return (
+            <Flex direction={"column"}>
+                {cardSummary.attributes
+                    .filter(cardAttr => cardAttr.attribute.isShownOnDashboard && cardAttr.value !== null)
+                    .map(cardAttr => (
+                        <Text c={"gray.6"} size={"sm"}>
+                            {cardAttr.attribute.label}: {getAttrValueValue(cardAttr)}
+                        </Text>
+                    ))
+                }
+            </Flex>
+        );
+    };
+
+    const getAttrValueValue = (cardAttr: CardAttributeSchema) => {
+        const value = cardAttr.value;
+        if (value === null) return;
+
+        const type = cardAttr.attribute.type.type;
+        if (type === "datetime") {
+            return formatDateTime(value as string);
+        }
+        if (type === "date") {
+            return formatDate(value as string);
+        }
+        if (type === "bool") {
+            return value ? "да" : "нет";
+        }
+
+        return value;
+    };
+
     return (
         <div
             onContextMenu={showContextMenu([
@@ -101,8 +136,9 @@ const CardSummaryItem: FC<Props> = ({ cardSummary, color }) => {
                         </Text>
                     </Flex>
                 )}
+                {attributeValues()}
                 {!cardSummary.group?.id && (
-                    <CardTags cardId={cardSummary.id} tags={cardSummary.tags}/>
+                    <CardTags cardId={cardSummary.id} tags={cardSummary.tags} />
                 )}
                 <Flex align={"center"} justify={"space-between"}>
                     <Flex align={"center"} gap={rem(5)}>