領収証発行依頼一覧 検索項目ステータスをプルダウン化

SATE_RECEIPT-21 領収証発行依頼一覧

src/pages/dashboard/receipt-issuing-order/custom/hello-techno/list.tsx

@@ -25,10 +25,22 @@ import {
   ReceiptIssuingOrderHTCustom,
   getReceiptIssuingOrders,
 } from "api/custom/hello-techno/receipt-issuing-order";
+import { receiptIssuingOrderStatusNames } from "api/receipt-issuing-order";
 import { getFullUrl } from "api/url";
 import { PageID, TabID } from "codes/page";
-import { FormProvider, RHFCheckbox, RHFTextField } from "components/hook-form";
+import {
+  FormProvider,
+  RHFCheckbox,
+  RHFSelect,
+  RHFTextField,
+} from "components/hook-form";
+import RHFAutoComplete, {
+  AutoCompleteOption,
+  AutoCompleteOptionType,
+  getValue,
+} from "components/hook-form/RHFAutoComplete";
 import RHFDatePicker from "components/hook-form/RHFDatePicker";
+import { SelectOptionProps } from "components/hook-form/RHFSelect";
 import { TableHeadCustom } from "components/table";
 import { HeadLabelProps } from "components/table/TableHeadCustom";
 import { SearchConditionContextProvider } from "contexts/SearchConditionContext";
@@ -39,6 +51,7 @@ import useDashboard from "hooks/useDashBoard";
 import useNavigateCustom from "hooks/useNavigateCustom";
 import useSearchConditionContext from "hooks/useSearchConditionContext";
 import useTable, { UseTableReturn } from "hooks/useTable";
+import { isEqual } from "lodash";
 import { useEffect, useMemo, useState } from "react";
 import { useForm } from "react-hook-form";
 import { getPath } from "routes/path";
@@ -114,6 +127,17 @@ function SearchBox({ table }: CommonProps) {
 
   const [openDateDialog, setOpenDateDialog] = useState(false);
 
+  const [lastSendSearchCondition, setLastSendSearchCondition] =
+    useState<object>({});
+
+  const [statusNames, setStatusNames] = useState<string[]>([]);
+  const statusNameOptions: SelectOptionProps[] = useMemo(() => {
+    return [
+      { value: "", label: "-" },
+      ...statusNames.map((ele) => ({ value: ele })),
+    ];
+  }, [statusNames]);
+
   const form = useForm<FormProps>({
     defaultValues: {
       customer_name: "",
@@ -128,10 +152,21 @@ function SearchBox({ table }: CommonProps) {
     },
   });
 
+  const {
+    callAPI: callReceiptIssuingOrderStatusNames,
+    sending: sendingReceiptIssuingOrderStatusNames,
+  } = useAPICall({
+    apiMethod: receiptIssuingOrderStatusNames,
+
+    onSuccess: (res) => {
+      setStatusNames(res.data);
+    },
+  });
+
   const {
     callAPI: callGetReceiptIssuingOrders,
     makeSendData,
-    sending,
+    sending: sendingGetReceiptIssuingOrders,
   } = useAPICall({
     apiMethod: getReceiptIssuingOrders,
     form,
@@ -143,6 +178,7 @@ function SearchBox({ table }: CommonProps) {
   const includeDone = form.watch("include_done");
   const orderDateFrom = form.watch("order_date_from");
   const orderDateTo = form.watch("order_date_to");
+  const statusName = form.watch("status");
 
   const isSetOrderDateConditions = useMemo(() => {
     return !!orderDateFrom || !!orderDateTo;
@@ -199,7 +235,11 @@ function SearchBox({ table }: CommonProps) {
       // 完了を含む場合は、条件設定しない。含まない場合は未完了のみとする
       done: data.include_done === "1" ? "" : "0",
     });
-    callGetReceiptIssuingOrders(sendData);
+
+    if (!isEqual(sendData, lastSendSearchCondition)) {
+      setLastSendSearchCondition(sendData);
+      callGetReceiptIssuingOrders(sendData);
+    }
   };
 
   // 初期値設定
@@ -226,12 +266,21 @@ function SearchBox({ table }: CommonProps) {
 
   // バックドロップ
   useEffect(() => {
+    const sending =
+      sendingReceiptIssuingOrderStatusNames || sendingGetReceiptIssuingOrders;
     setShowBackDrop(sending);
-  }, [sending]);
+  }, [sendingGetReceiptIssuingOrders, sendingReceiptIssuingOrderStatusNames]);
 
   useEffect(() => {
     addCondition(form.getValues());
-  }, [includeDone, orderDateFrom, orderDateTo]);
+  }, [includeDone, orderDateFrom, orderDateTo, statusName]);
+
+  // ステータス名選択肢の取得
+  useEffect(() => {
+    if (initialized) {
+      callReceiptIssuingOrderStatusNames({});
+    }
+  }, [initialized]);
 
   return (
     <FormProvider methods={form} onSubmit={form.handleSubmit(handleSubmit)}>
@@ -259,7 +308,12 @@ function SearchBox({ table }: CommonProps) {
           <Grid item xs={3} lg={2}>
             <Stack>
               <Typography>ステータス</Typography>
-              <RHFTextField name={SearchParam.STATUS} onBlur={handleBlur} />
+              {/* <RHFTextField name={SearchParam.STATUS} onBlur={handleBlur} /> */}
+              <RHFSelect
+                name={SearchParam.STATUS}
+                options={statusNameOptions}
+                size="small"
+              />
             </Stack>
           </Grid>
           <Grid item>