feat: deal attributes with select and options

src/app/module-editor/[moduleId]/components/shared/AttrOptionSelect/AttrOptionSelect.tsx

@@ -0,0 +1,51 @@
+import { useEffect, useState } from "react";
+import { omit } from "lodash";
+import useAttributeOptionsList from "@/app/module-editor/[moduleId]/components/shared/AttrOptionSelect/useAttributeOptionsList";
+import ObjectSelect from "@/components/selects/ObjectSelect/ObjectSelect";
+import { AttrOptionSchema } from "@/lib/client";
+
+type Props = {
+    value: any;
+    onChange: (val: any) => void;
+    selectId: number;
+    error?: string;
+    label?: string;
+};
+
+const AttrOptionSelect = (props: Props) => {
+    const { options } = useAttributeOptionsList(props);
+
+    const [selectedOption, setSelectedOption] = useState<AttrOptionSchema>();
+
+    useEffect(() => {
+        if (!props.value) {
+            setSelectedOption(undefined);
+            return;
+        }
+        setSelectedOption(options.find(option => option.value === props.value));
+    }, [props.value, options]);
+
+    const restProps = omit(props, ["value, onChange", "selectId"]);
+
+    return (
+        <ObjectSelect
+            label={"Значение"}
+            {...restProps}
+            data={options}
+            value={selectedOption}
+            onChange={option => {
+                setSelectedOption(option);
+                props.onChange(option.value);
+            }}
+            onClear={() => {
+                setSelectedOption(undefined);
+                props.onChange(null);
+            }}
+            getLabelFn={option => option.label}
+            clearable
+            searchable
+        />
+    );
+};
+
+export default AttrOptionSelect;

src/app/module-editor/[moduleId]/components/shared/AttrOptionSelect/useAttributeOptionsList.ts

@@ -0,0 +1,19 @@
+import { useQuery } from "@tanstack/react-query";
+import { getAttrSelectOptionsOptions } from "@/lib/client/@tanstack/react-query.gen";
+
+type Props = {
+    selectId: number;
+};
+
+const useAttributeSelectsList = ({ selectId }: Props) => {
+    const { data, refetch } = useQuery(
+        getAttrSelectOptionsOptions({ path: { selectId } })
+    );
+
+    return {
+        options: data?.items ?? [],
+        refetch,
+    };
+};
+
+export default useAttributeSelectsList;

src/app/module-editor/[moduleId]/components/shared/AttrSelectSelect/AttrSelectSelect.tsx

@@ -0,0 +1,24 @@
+import ObjectSelect, { ObjectSelectProps } from "@/components/selects/ObjectSelect/ObjectSelect";
+import { AttributeSelectSchema } from "@/lib/client";
+import useAttributeSelectsList from "./useAttributeSelectsList";
+
+
+type Props = Omit<
+    ObjectSelectProps<AttributeSelectSchema>,
+    "data" | "getLabelFn"
+>;
+
+const AttrSelectSelect = (props: Props) => {
+    const { selects } = useAttributeSelectsList();
+
+    return (
+        <ObjectSelect
+            label={"Объект для выбора"}
+            getLabelFn={select => select.label}
+            data={selects}
+            {...props}
+        />
+    );
+};
+
+export default AttrSelectSelect;

src/app/module-editor/[moduleId]/components/shared/AttrSelectSelect/useAttributeSelectsList.ts

@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import { getAttrSelectsOptions } from "@/lib/client/@tanstack/react-query.gen";
+
+const useAttributeSelectsList = () => {
+    const { data, refetch } = useQuery(getAttrSelectsOptions());
+
+    return {
+        selects: data?.items ?? [],
+        refetch,
+    };
+};
+
+export default useAttributeSelectsList;

src/app/module-editor/[moduleId]/components/shared/AttributesTable/useAttributesTableColumns.tsx

@@ -20,6 +20,10 @@ const useAttributesTableColumns = () => {
                 {
                     title: "Тип",
                     accessor: "type.name",
+                    render: attr =>
+                        attr.type.type === "select"
+                            ? `Выбор "${attr.label}"`
+                            : attr.type.name,
                 },
                 {
                     accessor: "actions",

src/app/module-editor/[moduleId]/components/shared/DefaultAttributeValueInput/DefaultAttributeValueInput.tsx

@@ -1,11 +1,12 @@
 import { Checkbox, NumberInput, TextInput } from "@mantine/core";
 import { DatePickerInput, DateTimePicker } from "@mantine/dates";
 import { UseFormReturnType } from "@mantine/form";
-import { UpdateAttributeSchema } from "@/lib/client";
+import AttrOptionSelect from "@/app/module-editor/[moduleId]/components/shared/AttrOptionSelect/AttrOptionSelect";
+import { AttributeSchema } from "@/lib/client";
 import { naiveDateTimeStringToUtc } from "@/utils/datetime";
 
 type Props = {
-    form: UseFormReturnType<Partial<UpdateAttributeSchema>>;
+    form: UseFormReturnType<Partial<AttributeSchema>>;
 };
 
 const DefaultAttributeValueInput = ({ form }: Props) => {
@@ -87,8 +88,18 @@ const DefaultAttributeValueInput = ({ form }: Props) => {
                 }
             />
         );
+    } else if (type === "select") {
+        if (!form.values.select?.id) return <></>;
+        return (
+            <AttrOptionSelect
+                label={"Значение по умолчанию"}
+                {...form.getInputProps("defaultValue")}
+                value={form.values.defaultValue}
+                onChange={value => form.setFieldValue("defaultValue", value)}
+                selectId={form.values.select?.id}
+            />
+        );
     }
-
     return <></>;
 };
 

src/app/module-editor/[moduleId]/components/shared/ModuleAttribute/ModuleAttribute.tsx

@@ -40,7 +40,10 @@ const ModuleAttribute: FC<Props> = ({ attribute }) => {
                 align={"center"}>
                 <Stack gap={7}>
                     <>{getAttrLabelText()}</>
-                    <Text>Тип: {attribute.type.name}</Text>
+                    <Text>
+                        Тип: {attribute.type.name}{" "}
+                        {attribute.select && `"${attribute.select.label}"`}
+                    </Text>
                 </Stack>
                 <Group
                     justify={"end"}