Files
Fulfillment-Frontend/src/components/Dnd/Cards/CardAttributesInSummaryItem/CardAttributesInSummaryItem.tsx

74 lines
2.4 KiB
TypeScript

import { CardAttributeSchema, CardSummary } from "../../../../client";
import { Flex, Text } from "@mantine/core";
import { formatDate, formatDateTime } from "../../../../types/utils.ts";
import { useProjectsContext } from "../../../../contexts/ProjectsContext.tsx";
type Props = {
cardSummary: CardSummary;
}
const CardAttributesInSummaryItem = ({ cardSummary }: Props) => {
const { selectedProject } = useProjectsContext();
const attributeIds = new Set(selectedProject?.attributes.map(attr => attr.id));
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;
};
const isHighlightNeeded = (cardAttr: CardAttributeSchema): boolean => {
const type = cardAttr.attribute.type.type;
if (!cardAttr.attribute.isHighlightIfExpired) return false;
if (type !== "datetime" && type !== "date") return false;
const datetime = new Date(cardAttr.value as string);
const curr = new Date();
if (type === "datetime") {
return datetime < curr;
}
curr.setHours(0, 0, 0, 0);
return datetime < curr;
};
return (
<Flex direction={"column"}>
{cardSummary.attributes
.filter(cardAttr => (
cardAttr.attribute.isShownOnDashboard &&
cardAttr.value !== null &&
attributeIds.has(cardAttr.attribute.id)
))
.map(cardAttr => {
const isHighlight = isHighlightNeeded(cardAttr);
return (
<Text
key={cardAttr.attribute.id}
c={isHighlight ? "red" : "gray.6"}
size={"sm"}
>
{cardAttr.attribute.label}: {getAttrValueValue(cardAttr)}
</Text>
);
})
}
</Flex>
);
};
export default CardAttributesInSummaryItem;