Skip to content

Commit

Permalink
feat :: 외출 급식 여부, 심자 핸드폰 여부 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
@wjzlskxk
wjzlskxk committed Nov 12, 2024
1 parent 76f3b7c commit 3605ee5
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 79 deletions.
84 changes: 37 additions & 47 deletions src/components/Out/OutGoing/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,37 @@
import { Button, SearchBar, Select } from "@b1nd/b1nd-dodamdodam-ui";
import { Suspense, useState } from "react";
import Calendars from "components/common/Calendars";
import * as S from "./style";
import { useRecoilState } from "recoil";
import { Button, SearchBar, Select } from '@b1nd/b1nd-dodamdodam-ui';
import { Suspense, useState } from 'react';
import Calendars from 'components/common/Calendars';
import * as S from './style';
import { useRecoilState } from 'recoil';
import {
SelectApprovalAtom,
SelectGradeAtom,
OutGoingSelectIdAtom,
UploadDateAtom,
SelectMealDemand,
} from "stores/Out/out.store";
import TableAttribute from "components/common/TableAttribute";
import { OUT_GOING_ITEMS } from "constants/Out/offbase.constant";
import ErrorBoundary from "components/common/ErrorBoundary";
import OffBasePassItem from "./OutGoingItem";
import { changeGrade } from "utils/Member/changeGrade";
import { changeApproval } from "utils/Out/changeApproval";
import useOffBasePass from "hooks/Out/OutGoing/useOutGoing";
import { GRADE_ITEMS } from "constants/Grade/grade.constant";
import { APPROVAL_ITEMS } from "constants/Approval/approval.constant";
import SkeletonComponent from "components/common/Skeleton";
import { CsvButtonContainer } from "components/Bus/BusModal/BusPassenger/style";
import CsvButton from "components/common/ExtractCsvData";
import dayjs from "dayjs";
import { PointSelectRoom } from "stores/Point/point.store";
import { Flex } from "components/common/Flex/Flex";
import { useGetOutGoingQuery } from "queries/OutGoing/outgoing.query";
import { offBaseMemberCalc } from "utils/Out/offbaseMemberCalc";
import { useGetMealDemandQuery } from "queries/OffBaseMeal/offbasemeal.query";
import { changeMealDemand } from "utils/Out/changeMealDemand";
} from 'stores/Out/out.store';
import TableAttribute from 'components/common/TableAttribute';
import { OUT_GOING_ITEMS } from 'constants/Out/offbase.constant';
import ErrorBoundary from 'components/common/ErrorBoundary';
import OffBasePassItem from './OutGoingItem';
import { changeGrade } from 'utils/Member/changeGrade';
import { changeApproval } from 'utils/Out/changeApproval';
import useOffBasePass from 'hooks/Out/OutGoing/useOutGoing';
import { GRADE_ITEMS } from 'constants/Grade/grade.constant';
import { APPROVAL_ITEMS } from 'constants/Approval/approval.constant';
import SkeletonComponent from 'components/common/Skeleton';
import { CsvButtonContainer } from 'components/Bus/BusModal/BusPassenger/style';
import CsvButton from 'components/common/ExtractCsvData';
import dayjs from 'dayjs';
import { PointSelectRoom } from 'stores/Point/point.store';
import { Flex } from 'components/common/Flex/Flex';
import { useGetOutGoingQuery } from 'queries/OutGoing/outgoing.query';
import { offBaseMemberCalc } from 'utils/Out/offbaseMemberCalc';
import { useGetMealDemandQuery } from 'queries/OffBaseMeal/offbasemeal.query';
import { changeMealDemand } from 'utils/Out/changeMealDemand';

const OutGoing = () => {
const [studentName, setStudentName] = useState("");
const [studentName, setStudentName] = useState('');
const [isOpen, setIsOpen] = useState(false);
const [uploadDate, setUploadDate] = useRecoilState<string>(UploadDateAtom);
const [selectedIds, setSelectedIds] = useRecoilState<number[]>(OutGoingSelectIdAtom);
Expand All @@ -48,27 +48,27 @@ const OutGoing = () => {
return (
<>
<S.OffBaseHeaderContainer>
<div style={{ display: "flex" }}>
<div style={{ display: 'flex' }}>
<SearchBar value={studentName} onChange={setStudentName} />

<Calendars isOpen={isOpen} setIsOpen={setIsOpen} uploadDate={uploadDate} setUploadDate={setUploadDate} />
<Flex
customStyle={{
flexDirection: "column",
alignItems: "flex-start",
gap: "10px",
flexDirection: 'column',
alignItems: 'flex-start',
gap: '10px',
marginLeft: 10,
}}
>
<span>
{offBaseMemberCalc(offBasePass?.data!).length === 0
? "현재 외출한 학생이 존재하지 않습니다."
? '현재 외출한 학생이 존재하지 않습니다.'
: `현재 외출자 수 : ${offBaseMemberCalc(offBasePass?.data!).length}명`}
</span>
<span>
{mealDemand?.data.eatersCount! > 0
? `오늘의 석식 희망자 수 : ${mealDemand?.data.eatersCount}`
: "오늘은 석식 희망자가 없습니다."}
: '오늘은 석식 희망자가 없습니다.'}
</span>
</Flex>
{selectedIds.length !== 0 && (
Expand Down Expand Up @@ -104,36 +104,26 @@ const OutGoing = () => {

<S.SelectContainer>
<CsvButtonContainer>
<CsvButton
csvData={[
...offbaseInfo.data,
{
이름: "인원수",
반번호: offbaseInfo.length.toString(),
비고: "",
},
]}
fileName={dayjs().format("YYYY-MM-DD") + "외출 중인 학생"}
/>
<CsvButton csvData={[...offbaseInfo.data]} fileName={dayjs().format('YYYY-MM-DD') + '외출 중인 학생'} />
</CsvButtonContainer>
<Select
items={["석식희망여부", "석식 희망", "석식 비희망"]}
items={['석식희망여부', '석식 희망', '석식 비희망']}
value={selectMealDemand}
onChange={setSelectMealDemand}
zIndex={2}
/>
<Select items={APPROVAL_ITEMS} value={selectApproval} onChange={setSelectApproval} zIndex={2} />
<Select items={GRADE_ITEMS} value={selectGrade} onChange={setSelectGrade} zIndex={2} />
<Select
items={["모든 학반", "1반", "2반", "3반", "4반"]}
value={room || "학반을 선택해주세요"}
items={['모든 학반', '1반', '2반', '3반', '4반']}
value={room || '학반을 선택해주세요'}
onChange={setRoom}
zIndex={2}
/>
</S.SelectContainer>
</S.OffBaseHeaderContainer>

<TableAttribute constant={OUT_GOING_ITEMS} thStyle={{ width: "14%" }}>
<TableAttribute constant={OUT_GOING_ITEMS} thStyle={{ width: '14%' }}>
<ErrorBoundary fallback={<>외출한 학생을 불러오지 못했습니다.</>}>
<Suspense fallback={<SkeletonComponent height={60} />}>
<OffBasePassItem
Expand Down
26 changes: 13 additions & 13 deletions src/hooks/NightStudy/useNightStudyStudentList.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import { useGetNightStudyList } from "queries/NightStudy/nightstudy.query";
import { useEffect, useState } from "react";
import { useRecoilValue } from "recoil";
import { NightStudyDataAtom } from "stores/NightStudy/nightstudy.store";
import { NightStudyType } from "types/NightStudy/nightstudy.type";
import { useGetNightStudyList } from 'queries/NightStudy/nightstudy.query';
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { NightStudyDataAtom } from 'stores/NightStudy/nightstudy.store';
import { NightStudyType } from 'types/NightStudy/nightstudy.type';

export const useNightStudyStudentList = () => {
const { data: NightStudyToday } = useGetNightStudyList();

const NightStudyData = useRecoilValue(NightStudyDataAtom);
const [NightStudyInfo, setNightStudyInfo] = useState([
{
이름: "",
반번호: "",
심자체크: "",
복귀체크: "",
비고: "",
이름: '',
반번호: '',
심자체크: '',
복귀체크: '',
핸드폰여부: '',
},
]);

Expand All @@ -23,9 +23,9 @@ export const useNightStudyStudentList = () => {
const newData = NightStudyToday.data.map((data: NightStudyType) => ({
이름: data.student.name,
반번호: `${data.student.grade}학년 ${data.student.room}반 ${data.student.number}번`,
심자체크: "",
복귀체크: "",
비고: "",
심자체크: '',
복귀체크: '',
핸드폰여부: data.doNeedPhone ? 'O' : 'X',
}));
setNightStudyInfo(newData);
}
Expand Down
38 changes: 19 additions & 19 deletions src/hooks/Out/OutGoing/useOutGoing.ts
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import { B1ndToast } from "@b1nd/b1nd-toastify";
import { B1ndToast } from '@b1nd/b1nd-toastify';
import {
useGetOutGoingQuery,
usePatchApproval,
usePatchApprovalCancel,
usePatchCancel,
} from "queries/OutGoing/outgoing.query";
import { useQueryClient } from "react-query";
import { QUERY_KEYS } from "queries/queryKey";
import { useRecoilState } from "recoil";
import { UploadDateAtom } from "stores/Out/out.store";
import { useEffect, useState } from "react";
import { OutListType } from "types/Out/out.type";
import ConvertDateTime from "utils/Time/ConvertDateTime";
} from 'queries/OutGoing/outgoing.query';
import { useQueryClient } from 'react-query';
import { QUERY_KEYS } from 'queries/queryKey';
import { useRecoilState } from 'recoil';
import { UploadDateAtom } from 'stores/Out/out.store';
import { useEffect, useState } from 'react';
import { OutListType } from 'types/Out/out.type';
import ConvertDateTime from 'utils/Time/ConvertDateTime';

const useOutGoing = () => {
const queryClient = useQueryClient();
Expand All @@ -27,13 +27,13 @@ const useOutGoing = () => {
onSuccess: () => {
switch (query) {
case patchApprovals:
B1ndToast.showSuccess("외출 승인 성공");
B1ndToast.showSuccess('외출 승인 성공');
break;
case patchApprovalCancel:
B1ndToast.showSuccess("외출 승인 취소 성공");
B1ndToast.showSuccess('외출 승인 취소 성공');
break;
case patchCancel:
B1ndToast.showSuccess("외출 거절 성공");
B1ndToast.showSuccess('외출 거절 성공');
break;
default:
break;
Expand All @@ -42,18 +42,18 @@ const useOutGoing = () => {
queryClient.invalidateQueries(QUERY_KEYS.outgoing.getOutGOing(uploadDate));
},
onError: () => {
B1ndToast.showError("실패");
B1ndToast.showError('실패');
},
});
};

const [offbaseInfo, setOffBaseInfo] = useState({
data: [
{
이름: "",
반번호: "",
도착시간: "",
비고: "",
이름: '',
반번호: '',
도착시간: '',
석식여부: '',
},
],
length: 0,
Expand All @@ -64,8 +64,8 @@ const useOutGoing = () => {
const newData = OffBasePass.data.map((data: OutListType) => ({
이름: data.student.name,
반번호: `${data.student.grade}학년 ${data.student.room}반 ${data.student.number}번`,
도착시간: `${ConvertDateTime.getDateTime(new Date(data.endAt), "time")}`,
비고: "",
도착시간: `${ConvertDateTime.getDateTime(new Date(data.endAt), 'time')}`,
석식여부: data.dinnerOrNot ? 'O' : 'X',
}));
setOffBaseInfo({ data: newData, length: OffBasePass.data.length });
}
Expand Down

0 comments on commit 3605ee5

Please sign in to comment.