add: domain key

src/partials/Admin/AddAccess.tsx

@@ -3,15 +3,14 @@ import Button from "../../components/Button/Button";
 import { Grid } from "../../components/Grid/Grid";
 import Textfield from "../../components/Textfeild/Textfeild";
 import { useForm, Controller } from "react-hook-form";
-import { zValidateString } from "../../data/getFormTypeErrors";
+import { zValidateNumber, zValidateString } from "../../data/getFormTypeErrors";
 import { z } from "zod";
 import { useApiMutation } from "../../utils/useApiRequest";
 import { useToast } from "../../hooks/useToast";
 import { useModalStore } from "../../context/zustand-store/appStore";
-import AutoComplete from "../../components/AutoComplete/AutoComplete";
-import { useEffect, useState } from "react";
-import { getFaPermissions } from "../../utils/getFaPermissions";
 import Checkbox from "../../components/CheckBox/CheckBox";
+import { FormApiBasedAutoComplete } from "../../components/FormItems/FormApiBasedAutoComplete";
+import { getFaPermissions } from "../../utils/getFaPermissions";
 
 type FormValues = z.infer<typeof schema>;
 type AddAccessProps = {
@@ -22,9 +21,8 @@ type AddAccessProps = {
 const schema = z.object({
   access: zValidateString("نام صفحه"),
   description: zValidateString("توضیحات"),
-  selectedPageId: z
-    .array(z.union([z.string(), z.number()]))
-    .min(1, { message: "لطفاً یک صفحه انتخاب کنید." }),
+  selectedPageId: zValidateNumber("صفحه"),
+  domain: z.union([z.string(), z.number()]).optional(),
   modify_state: z.boolean(),
 });
 
@@ -32,80 +30,28 @@ export const AddAccess = ({ getData, item }: AddAccessProps) => {
   const showToast = useToast();
   const { closeModal } = useModalStore();
 
-  const [selectedKeys, setSelectedKeys] = useState<(string | number)[]>([]);
-  const [data, setData] = useState<any>([]);
-  const [pagesData, setPagesData] = useState<any>(null);
-
   const {
     control,
     handleSubmit,
     setValue,
+    trigger,
     formState: { errors },
   } = useForm<FormValues>({
     resolver: zodResolver(schema),
     defaultValues: {
       access: item?.name || "",
       description: item?.description || "",
-      selectedPageId: [],
+      selectedPageId: item?.page_data?.id || "",
+      domain: item?.domain?.id || item?.page_data?.domain?.id || "",
       modify_state: item?.modify_state || false,
     },
   });
 
-  useEffect(() => {
-    if (selectedKeys.length > 0) {
-      setValue("selectedPageId", selectedKeys);
-    }
-  }, [selectedKeys, setValue]);
-
-  useEffect(() => {
-    if (pagesData?.results && item?.page) {
-      const matchingPage = pagesData.results.find(
-        (page: any) => page.name === item.page,
-      );
-      if (matchingPage) {
-        const keys = [matchingPage.id];
-        setSelectedKeys(keys);
-        setValue("selectedPageId", keys);
-      }
-    }
-  }, [pagesData, item, setValue]);
-
-  const handleChangeComplete = (newSelectedKeys: (number | string)[]) => {
-    setSelectedKeys(newSelectedKeys);
-  };
-
-  const mutationPages = useApiMutation({
-    api: "/auth/api/v1/page/",
-    method: "get",
-  });
-
   const mutation = useApiMutation({
     api: `/auth/api/v1/permission/${item ? item?.id + "/" : ""}`,
     method: item ? "put" : "post",
   });
 
-  const getPages = async () => {
-    const data = await mutationPages.mutateAsync({
-      page: 1,
-      page_size: 1000,
-    });
-    setPagesData(data);
-  };
-
-  useEffect(() => {
-    getPages();
-  }, []);
-
-  useEffect(() => {
-    if (pagesData?.results) {
-      const d = pagesData.results.map((page: any) => ({
-        key: page.id,
-        value: `${getFaPermissions(page.name)} (${page.name})`,
-      }));
-      setData(d);
-    }
-  }, [pagesData]);
-
   const onSubmit = async (data: FormValues) => {
     try {
       await mutation.mutateAsync({
@@ -113,7 +59,8 @@ export const AddAccess = ({ getData, item }: AddAccessProps) => {
         description: data.description,
         category: "api",
         meta: {},
-        page: selectedKeys[0],
+        page: data.selectedPageId,
+        domain: data.domain,
         modify_state: data?.modify_state,
       });
       showToast("عملیات با موفقیت انجام شد", "success");
@@ -132,17 +79,21 @@ export const AddAccess = ({ getData, item }: AddAccessProps) => {
         <Controller
           name="selectedPageId"
           control={control}
-          render={({ field }) => (
-            <AutoComplete
-              data={data}
-              selectedKeys={selectedKeys}
-              onChange={(newSelectedKeys) => {
-                handleChangeComplete(newSelectedKeys);
-                field.onChange(newSelectedKeys);
-              }}
+          render={() => (
+            <FormApiBasedAutoComplete
+              defaultKey={item?.page_id}
               title="انتخاب صفحه"
+              api="auth/api/v1/page/"
+              keyField="id"
+              valueFieldFunction={(item) => getFaPermissions(item?.name)}
+              secondaryKey={["domain", "id"]}
+              onChange={(selectedPage) => {
+                setValue("selectedPageId", selectedPage?.key1 || "");
+                setValue("domain", selectedPage?.key2 || "");
+                trigger("selectedPageId");
+              }}
               error={!!errors.selectedPageId}
-              helperText={errors.selectedPageId?.message}
+              errorMessage={errors.selectedPageId?.message}
             />
           )}
         />