feat: deal attributes editing

src/app/deals/drawers/DealEditorDrawer/tabs/CustomTab/CustomTab.tsx

@@ -0,0 +1,141 @@
+import React, {
+    FC,
+    ReactNode,
+    useCallback,
+    useEffect,
+    useMemo,
+    useState,
+} from "react";
+import { Flex, Group } from "@mantine/core";
+import AttributeValueInput from "@/app/deals/drawers/DealEditorDrawer/components/AttributeValueInput";
+import useDealAttributeValuesActions from "@/app/deals/drawers/DealEditorDrawer/hooks/useDealAttributeValuesActions";
+import FormFlexRow from "@/components/ui/FormFlexRow/FormFlexRow";
+import InlineButton from "@/components/ui/InlineButton/InlineButton";
+import {
+    DealModuleAttributeSchema,
+    DealSchema,
+    ModuleSchemaOutput,
+    UpdateDealModuleAttributeSchema,
+} from "@/lib/client";
+
+type Props = {
+    module: ModuleSchemaOutput;
+    deal: DealSchema;
+};
+
+type Value = {
+    value?: any;
+};
+
+const CustomTab: FC<Props> = ({ module, deal }) => {
+    const { dealAttributes, updateAttributeValues } =
+        useDealAttributeValuesActions({
+            moduleId: module.id,
+            dealId: deal.id,
+        });
+
+    const [attributeValuesMap, setAttributeValuesMap] = useState<
+        Map<number, Value | null>
+    >(new Map());
+    const [attributeErrorsMap, setAttributeErrorsMap] = useState<
+        Map<number, string>
+    >(new Map());
+
+    useEffect(() => {
+        const values = new Map<number, Value | null>();
+        for (const dealAttr of dealAttributes) {
+            values.set(dealAttr.attributeId, dealAttr?.value);
+        }
+        setAttributeValuesMap(values);
+    }, [dealAttributes]);
+
+    const onSubmit = () => {
+        let isErrorFound = false;
+        for (const attr of dealAttributes) {
+            const value = attributeValuesMap.get(attr.attributeId);
+            if (!attr.isNullable && (value === null || value === undefined)) {
+                attributeErrorsMap.set(attr.attributeId, "Обязательное поле");
+                isErrorFound = true;
+            }
+        }
+        setAttributeErrorsMap(new Map(attributeErrorsMap));
+        if (isErrorFound) return;
+
+        const attributeValues: UpdateDealModuleAttributeSchema[] =
+            attributeValuesMap
+                .entries()
+                .map(
+                    ([attributeId, value]) =>
+                        ({
+                            attributeId,
+                            value,
+                        }) as UpdateDealModuleAttributeSchema
+                )
+                .toArray();
+
+        updateAttributeValues(attributeValues);
+    };
+
+    const getAttributeElement = useCallback(
+        (attribute: DealModuleAttributeSchema) => (
+            <AttributeValueInput
+                key={attribute.attributeId}
+                attrInfo={attribute}
+                value={attributeValuesMap.get(attribute.attributeId)?.value}
+                onChange={value => {
+                    attributeValuesMap.set(attribute.attributeId, { value });
+                    setAttributeValuesMap(new Map(attributeValuesMap));
+                    attributeErrorsMap.delete(attribute.attributeId);
+                    setAttributeErrorsMap(new Map(attributeErrorsMap));
+                }}
+                style={{ flex: 1 }}
+                error={attributeErrorsMap.get(attribute.attributeId)}
+            />
+        ),
+        [attributeValuesMap, attributeErrorsMap]
+    );
+
+    const attributesRows = useMemo(() => {
+        if (!dealAttributes) return [];
+        const boolAttributes = dealAttributes.filter(
+            a => a.type.type === "bool"
+        );
+        const otherAttributes = dealAttributes.filter(
+            a => a.type.type !== "bool"
+        );
+
+        const rows: ReactNode[] = [];
+        for (let i = 0; i < otherAttributes.length; i += 2) {
+            const rightIdx = i + 1;
+
+            rows.push(
+                <FormFlexRow key={`row${i}`}>
+                    {getAttributeElement(otherAttributes[i])}
+                    {rightIdx < otherAttributes.length &&
+                        getAttributeElement(otherAttributes[rightIdx])}
+                </FormFlexRow>
+            );
+        }
+
+        for (const attr of boolAttributes) {
+            rows.push(getAttributeElement(attr));
+        }
+
+        return rows;
+    }, [dealAttributes, getAttributeElement]);
+
+    return (
+        <Flex
+            direction={"column"}
+            gap={"xs"}
+            py={"xs"}
+            px={"md"}>
+            {attributesRows}
+            <Group>
+                <InlineButton onClick={onSubmit}>Сохранить</InlineButton>
+            </Group>
+        </Flex>
+    );
+};
+
+export default CustomTab;