add : 외출 수락 및 외출자 조회

DSM-PICK · Apr 18, 2024 · ce511a3 · ce511a3
2 parents 3a691e7 + 80ff490
commit ce511a3
Show file tree

Hide file tree

Showing 9 changed files with 480 additions and 27 deletions.
diff --git a/src/api/outList/index.ts b/src/api/outList/index.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { instance } from "..";
-import { applicationOK, earlyReturnHome } from "../type";
+import { Accept, ClassProp, applicationOK, earlyReturnHome } from "../type";
 
 export const Application = () => {
   return useQuery<applicationOK[]>({
@@ -36,3 +36,34 @@ export const ReturnSchool = () => {
     },
   });
 };
+
+export const GetClass = () => {
+  return useMutation<applicationOK[], Error, ClassProp>({
+    mutationFn: async (param: ClassProp) => {
+      try {
+        const response = await instance.get(
+          `${param.type}/grade?grade=${param.grade}&class_num=${param.class}`
+        );
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+};
+export const OutAcceptApi = () => {
+  return useMutation<void, Error, Accept>({
+    mutationFn: async (param) => {
+      try {
+        const response = await instance.patch(`${param.type}/status`, {
+          type: param.type,
+          status: param.status,
+          ids: param.ids,
+        });
+        return response.data;
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+};
diff --git a/src/api/type.ts b/src/api/type.ts
@@ -6,6 +6,7 @@ export interface applicationOK {
   grade: number;
   class_num: number;
   num: number;
+  reason: string;
 }
 
 export interface earlyReturnHome {
@@ -15,4 +16,17 @@ export interface earlyReturnHome {
   grade: number;
   class_num: number;
   num: number;
+  reason: string;
+}
+
+export interface Accept {
+  type: string;
+  status: "OK" | "NO";
+  ids: string[];
+}
+
+export interface ClassProp {
+  grade: number;
+  class: number;
+  type: string;
 }
diff --git a/src/app/outAccept/page.tsx b/src/app/outAccept/page.tsx
@@ -0,0 +1,262 @@
+"use client";
+import { OutAcceptApi, GetClass } from "@/api/outList";
+import { applicationOK, earlyReturnHome } from "@/api/type";
+import BackGround from "@/components/background";
+import Button from "@/components/button";
+import Dropdown from "@/components/dropdown";
+import NonReturn from "@/components/list/application";
+import Modal from "@/components/modal";
+import { getFullToday } from "@/util/date";
+import { getStudentString } from "@/util/util";
+import React, { useEffect, useState } from "react";
+
+const OutAccept = () => {
+  const [selectedTab, setSelectedTab] = useState<boolean>(true);
+  const [applicationData, setApplicationData] = useState<applicationOK[]>();
+  const [earlyData, setEarlyData] = useState<earlyReturnHome[]>();
+  const [selectGrade, setSelectGrade] = useState<number>(1);
+  const [selectClass, setSelectClass] = useState<number>(1);
+  const [selectedStudents, setSelectedStudents] = useState<string[]>([]);
+  const [acmodal, setAcModal] = useState<boolean>(false);
+  const [nomodal, setNomodal] = useState<boolean>(false);
+  const [selectedStudentName, setSelectedStudentName] = useState<string[]>([]);
+  const { mutate: outAcceptMutate } = GetClass();
+  const { mutate: AcceptMutate } = OutAcceptApi();
+
+  useEffect(() => {
+    AcceptDataList();
+  }, [selectedTab]);
+
+  useEffect(() => {
+    AcceptDataList();
+  }, [selectGrade, selectClass]);
+
+  const handleGradeChange = (selectedOption: number) => {
+    if (selectedOption === 5) {
+      setSelectGrade(5);
+      setSelectClass(5);
+    } else {
+      setSelectGrade(selectedOption);
+    }
+  };
+
+  const handleClassChange = (selectedOption: number) => {
+    if (selectGrade === 5) {
+      alert("학년을 선택해주세요");
+      setSelectClass(selectedOption);
+    } else {
+      setSelectClass(selectedOption);
+    }
+  };
+
+  const AcceptDataList = async () => {
+    try {
+      if (selectGrade && selectClass) {
+        const reqOption = selectedTab ? "application" : "early-return";
+        await outAcceptMutate(
+          {
+            type: reqOption,
+            grade: selectGrade,
+            class: selectClass,
+          },
+          {
+            onSuccess: (data) => {
+              setApplicationData(data);
+            },
+            onError: (error) => {
+              console.log(error);
+            },
+          }
+        );
+      }
+    } catch (error) {
+      console.error("Out accept error", error);
+    }
+  };
+
+  const handleAcceptListClick = (id: string, name: string) => {
+    const isStudentSelected = selectedStudents.includes(id);
+    if (isStudentSelected) {
+      setSelectedStudents((prevSelectedStudents) =>
+        prevSelectedStudents.filter((selectedStudent) => selectedStudent !== id)
+      );
+      setSelectedStudentName((prevSelectedStudentName) =>
+        prevSelectedStudentName.filter(
+          (selectedStudentName) => selectedStudentName !== name
+        )
+      );
+    } else {
+      setSelectedStudents((prevSelectedStudents) => [
+        ...prevSelectedStudents,
+        id,
+      ]);
+      setSelectedStudentName((prevSelectedStudentName) => [
+        ...prevSelectedStudentName,
+        name,
+      ]);
+    }
+  };
+
+  const Accept = () => {
+    setAcModal(true);
+  };
+
+  const onCancel = () => {
+    setAcModal(false);
+    setNomodal(false);
+  };
+
+  const No = () => {
+    setNomodal(true);
+  };
+
+  const onClickTab = (tab: boolean) => {
+    setSelectedTab(tab);
+  };
+
+  const confirmReturn = async () => {
+    try {
+      if (selectGrade && selectClass) {
+        const reqOption = selectedTab ? "application" : "early-return";
+        await AcceptMutate(
+          {
+            type: reqOption,
+            status: "NO",
+            ids: selectedStudents,
+          },
+          {
+            onSuccess: () => {
+              setNomodal(false);
+            },
+            onError: (error) => {
+              console.error("Out accept error", error);
+              setNomodal(false);
+            },
+          }
+        );
+      }
+    } catch (error) {
+      alert("외출 거절에 실패하였습니다");
+      setNomodal(false);
+    }
+  };
+
+  const Acceptconfirm = async () => {
+    try {
+      if (selectGrade && selectClass) {
+        const reqOption = selectedTab ? "application" : "early-return";
+        await AcceptMutate(
+          {
+            type: reqOption,
+            status: "OK",
+            ids: selectedStudents,
+          },
+          {
+            onSuccess: () => {
+              setAcModal(false);
+              // location.reload();
+            },
+            onError: (error) => {
+              console.error("Out accept error", error);
+              setAcModal(false);
+            },
+          }
+        );
+      }
+    } catch (error) {
+      alert("외출 수락에 실패하였습니다");
+      setAcModal(false);
+    }
+  };
+
+  return (
+    <BackGround
+      title="외출자 수락"
+      subTitle={getFullToday()}
+      TabOK={true}
+      TabOnclick={onClickTab}
+      Dropdown={
+        <div className=" flex w-full justify-between min-w-fit items-center gap-1">
+          <div className=" flex gap-2">
+            <Dropdown type="all" onChange={handleGradeChange} />
+            <Dropdown type="class" onChange={handleClassChange} />
+          </div>
+          <div className=" flex gap-2 w-32">
+            <Button colorType="red" buttonSize="extraSmall2" onClick={No}>
+              거절
+            </Button>
+            <Button
+              colorType="primary"
+              buttonSize="extraSmall2"
+              onClick={Accept}
+            >
+              수락
+            </Button>
+          </div>
+        </div>
+      }
+    >
+      <div className=" overflow-y-scroll gap-4 flex flex-col">
+        {selectedTab
+          ? applicationData?.map((item, index) => (
+              <NonReturn
+                id={item.id}
+                type="accept"
+                key={index}
+                returnTime={`${item.start_time}~${item.end_time}`}
+                name={getStudentString(item)}
+                onClick={() => handleAcceptListClick(item.id, item.username)}
+                reason={item.reason}
+              />
+            ))
+          : applicationData?.map((item, index) => (
+              <NonReturn
+                id={item.id}
+                type="accept"
+                key={index}
+                returnTime={`${item.start_time}~`}
+                name={getStudentString(item)}
+                onClick={() => handleAcceptListClick(item.id, item.username)}
+                reason={item.reason}
+              />
+            ))}
+      </div>
+      {acmodal && (
+        <Modal
+          type="button"
+          buttonMessage="수락"
+          onConfirm={Acceptconfirm}
+          onCancel={onCancel}
+          heading1={`${
+            selectedStudentName.length > 1
+              ? `${selectedStudentName[0]} 학생 외 ${
+                  selectedStudentName.length - 1
+                }명`
+              : selectedStudentName.length === 1
+              ? `${selectedStudentName[0]} 학생`
+              : ""
+          }`}
+        />
+      )}
+      {nomodal && (
+        <Modal
+          type="button"
+          buttonMessage="거절"
+          onConfirm={confirmReturn}
+          onCancel={onCancel}
+          heading1={`${
+            selectedStudentName.length > 1
+              ? `${selectedStudentName[0]} 학생 외 ${
+                  selectedStudentName.length - 1
+                }명`
+              : selectedStudentName.length === 1
+              ? `${selectedStudentName[0]} 학생`
+              : ""
+          }`}
+        />
+      )}
+    </BackGround>
+  );
+};
+
+export default OutAccept;
diff --git a/src/app/outList/page.tsx b/src/app/outList/page.tsx
@@ -29,7 +29,7 @@ const OutList = () => {
 
   return (
     <BackGround
-      title="외출자보기"
+      title="외출자 목록"
       subTitle={getFullToday()}
       TabOK={true}
       TabOnclick={onClickTab}
@@ -43,6 +43,7 @@ const OutList = () => {
                 key={index}
                 returnTime={item.end_time}
                 name={getStudentString(item)}
+                reason={item.reason}
               />
             ))
           : earlyData?.map((item, index) => (
@@ -51,6 +52,7 @@ const OutList = () => {
                 key={index}
                 name={getStudentString(item)}
                 type="early-return"
+                reason={item.reason}
               />
             ))}
       </div>

diff --git a/src/components/button/index.tsx b/src/components/button/index.tsx
@@ -67,7 +67,7 @@ const Button: React.FC<ButtonProp> = ({
       case "medium":
         return "w-42 min-w-20 h-13 text-Button-M";
       case "small":
-        return "w-38 h-12 text-Button-S";
+        return "w-34 h-11 text-Button-S";
       case "extraSmall":
         return "w-30 h-9 text-Button-S";
       case "extraSmall2":
@@ -78,7 +78,7 @@ const Button: React.FC<ButtonProp> = ({
   return (
     <div
       onClick={onClick}
-      className={`flex ${getColorClass()} ${getSizeClass()} justify-center items-center cursor-pointer`}
+      className={`flex ${getColorClass()} ${getSizeClass()}  justify-center items-center cursor-pointer`}
     >
       <div>{children}</div>
       <div>{Icon && <img src={Icon.src} width={20} height={20} />}</div>

diff --git a/src/components/dropdown/index.tsx b/src/components/dropdown/index.tsx
@@ -64,6 +64,7 @@ const Dropdown: React.FC<DropdownProp> = ({ type, onChange }) => {
           break;
       }
     }
+    setIsDropdownVisible(false);
   };
 
   const generateOptions = (options: any[]) => {
-Original file line number
+Diff line change
@@ Expand Up @@
               break;
           }
         }
+        setIsDropdownVisible(false);
       };
       const generateOptions = (options: any[]) => {
@@ Expand Down @@