Merge pull request #113 from HGU-WALAB/#110_upstream_reserve

#110 upstream reserve
HGU-WALAB · Jan 24, 2024 · 564a297 · 564a297
2 parents 2c30183 + 2e8a798
commit 564a297
Show file tree

Hide file tree

Showing 36 changed files with 864 additions and 1,323 deletions.
diff --git a/src/api/deptApi.ts b/src/api/deptApi.ts
@@ -1,16 +1,6 @@
 import { IDeptAdd, IDeptRead } from 'src/types/dept';
 import axiosInstance, { endpoints } from 'src/utils/axios';
 
-export const createDept = async (data: IDeptAdd) => {
-  // console.log("추가로 저장되는 기관들 정보 확인", data);
-  const response = await axiosInstance.post(endpoints.dept.create, data, {
-    headers: {
-      'Content-Type': 'multipart/form-data',
-    },
-  });
-  return response;
-};
-
 // ToDo: backend에서 개발 완료 되면 연결해보기
 export const updateDept = async (data: IDeptRead, deptId: Number) => {
   console.log('수정할 기관 정보', data);

diff --git a/src/api/reserveApi.ts b/src/api/reserveApi.ts
@@ -1,6 +1,8 @@
 import axiosInstance, { endpoints } from 'src/utils/axios';
 import { ICalendarEvent } from 'src/types/calendar';
 import { palette as themePalette } from 'src/theme/palette';
+import { isEmpty } from 'lodash';
+import { DailyReserveAdd, RegularReserveAdd } from 'src/types/reserve';
 
 const palette = themePalette('light');
 
@@ -24,8 +26,8 @@ export const GetReserveListByDept = async (deptId: number) => {
 };
 
 // dashboard calander (ReserveFindeByMember)
-export const GetReserveListByMember = async (deptId: string) => {
-  const response = axiosInstance.get(`${endpoints.reserve.member}/${deptId}`); // Member 예약 전체 리스트 (admin)
+export const GetReserveListByMember = async (deptId: number) => {
+  const response = axiosInstance.get(`${endpoints.reserve.deptmember}/${deptId}`); // Member 예약 전체 리스트 (user)
 
   const selectData: ICalendarEvent[] = (await response).data.map((item: any) => ({
     id: item.reserveId,
@@ -41,3 +43,35 @@ export const GetReserveListByMember = async (deptId: string) => {
 
   return selectData;
 };
+
+// reserve list (spadeId)
+export const GetReserve = async (spaceId: number) => {
+  const response = await axiosInstance.get(`${endpoints.reserve.schedule}/${spaceId}`);
+  return response;
+};
+
+// daily reserve
+export const createReserve = async (data: DailyReserveAdd) => {
+  console.log('예약 추가 정보 확인', data);
+  const response = await axiosInstance.post(endpoints.reserve.create, data);
+  return response;
+};
+
+// regularly reserve
+export const regularCreateReserve = async (data: RegularReserveAdd) => {
+  console.log('예약 추가 정보 확인', data);
+  const response = await axiosInstance.post(endpoints.reserve.regularcreate, data);
+  return response;
+};
+
+// reservedlist by date
+// ToDo: api 수정 시 date 넘겨주기
+export const reservedListByDate = async (deptId: number, selectedDate: string) => {
+  const response = await axiosInstance.get(`${endpoints.reserve.datelist}/${deptId}`, {
+    params: {
+      reserveDate: selectedDate,
+    },
+  });
+  console.log('날짜에 따른 예약된 정보 확인', response);
+  return response;
+};
diff --git a/src/hooks/use-mocked-user.ts b/src/hooks/use-mocked-user.ts
@@ -27,7 +27,7 @@ export function useMockedUser() {
     city: 'San Francisco',
     zipCode: '94116',
     about: 'Praesent turpis. Phasellus viverra nulla ut metus varius laoreet. Phasellus tempus.',
-    role: 'admin',
+    role: '관리자',
     isPublic: true,
   };
 

diff --git a/src/layouts/dashboard/dept-button.tsx b/src/layouts/dashboard/dept-button.tsx
@@ -188,7 +188,7 @@ export default function DeptHeaderButton() {
                   {option.deptName}
                 </Container>
 
-                {option.deptMemberResponse[0]?.deptRole === 'ADMIN' ? <IoMdKey /> : <div />}
+                {option.deptMemberResponse[0]?.deptRole === '관리자' ? <IoMdKey /> : <div />}
               </Rows>
             </DeptButton>
           </MenuItem>

diff --git a/src/layouts/dashboard/nav-mini.tsx b/src/layouts/dashboard/nav-mini.tsx
@@ -50,7 +50,7 @@ export default function NavMini() {
         <NavSectionMini
           data={navData}
           config={{
-            currentRole: user?.role || 'admin',
+            currentRole: user?.role || '관리자',
           }}
         />
       </Stack>

diff --git a/src/layouts/dashboard/nav-vertical.tsx b/src/layouts/dashboard/nav-vertical.tsx
@@ -72,18 +72,18 @@ export default function NavVertical({ openNav, onCloseNav }: Props) {
       <Box style={{ height: '10px' }} />
 
       {typeof userDeptInfo === 'object' &&
-      userDeptInfo.deptMemberResponse[0]?.deptRole === 'ADMIN' ? (
+      userDeptInfo.deptMemberResponse[0]?.deptRole === '관리자' ? (
         <NavSectionVertical
           data={navData}
           config={{
-            currentRole: user?.role || 'admin',
+            currentRole: user?.role || '관리자',
           }}
         />
       ) : (
         <NavSectionVertical
           data={userNavData}
           config={{
-            currentRole: user?.role || 'user',
+            currentRole: user?.role || '사용자',
           }}
         />
       )}

diff --git a/src/pages/dashboard/dashboard.tsx b/src/pages/dashboard/dashboard.tsx
@@ -15,7 +15,7 @@ export default function Page() {
       </Helmet>
 
       {typeof userDeptInfo === 'object' &&
-      userDeptInfo.deptMemberResponse[0]?.deptRole === 'ADMIN' ? (
+      userDeptInfo.deptMemberResponse[0]?.deptRole === '관리자' ? (
         <AdminDashboardView />
       ) : (
         <UserDashboardView />

diff --git a/src/sections/dashboard/calendar/calendar-toolbar.tsx b/src/sections/dashboard/calendar/calendar-toolbar.tsx
@@ -91,7 +91,9 @@ export default function CalendarToolbar({
             <Iconify icon="eva:arrow-ios-back-fill" />
           </IconButton>
 
-          <Typography variant="h6">{year}년 {month}월 {day}일</Typography>
+          <Typography variant="h6">
+            {year}년 {month}월 {day}일
+          </Typography>
 
           <IconButton onClick={onNextDate}>
             <Iconify icon="eva:arrow-ios-forward-fill" />

diff --git a/src/sections/dashboard/calendar/hooks/admin-calendar.ts b/src/sections/dashboard/calendar/hooks/admin-calendar.ts
@@ -24,7 +24,7 @@ export default function useAdminCalendar() {
 
   const [selectedRange, setSelectedRange] = useState<ICalendarRange>(null);
 
-  const [view, setView] = useState<ICalendarView>('timeGridDay');
+  const [view, setView] = useState<ICalendarView>('listWeek');
 
   const onOpenForm = useCallback(() => {
     setOpenForm(true);
@@ -40,7 +40,7 @@ export default function useAdminCalendar() {
     if (calendarEl) {
       const calendarApi = calendarEl.getApi();
 
-      const newView = 'timeGridDay';
+      const newView = 'listWeek';
       calendarApi.changeView(newView);
       setView(newView);
     }

diff --git a/src/sections/dashboard/calendar/view/user-calendar-view.tsx b/src/sections/dashboard/calendar/view/user-calendar-view.tsx
@@ -104,7 +104,7 @@ export default function UserCalendarView() {
     // ToDo : ReserveBySpaceId List API
     const fetchData = async () => {
       try {
-        const data = await GetReserveListByMember(deptId);
+        const data = await GetReserveListByMember(Number(deptId));
         setEventData(data);
         // console.log("data" ,data);
       } catch (error) {

diff --git a/src/sections/dashboard/timeline/user-timeline.tsx b/src/sections/dashboard/timeline/user-timeline.tsx
@@ -38,7 +38,7 @@ export default function UserTimeLine() {
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const data = await GetReserveListByMember(deptId);
+        const data = await GetReserveListByMember(Number(deptId));
         setEventData(data);
       } catch (error) {
         console.error('Error fetching data:', error);

diff --git a/src/sections/department_c/dept-form.tsx b/src/sections/department_c/dept-form.tsx
@@ -1,7 +1,8 @@
+import { yupResolver } from '@hookform/resolvers/yup';
 // react
 import { useCallback, useState } from 'react';
 import styled from 'styled-components';
-import { createDept } from 'src/api/deptApi';
+import axiosInstance, { endpoints } from 'src/utils/axios';
 // @mui
 import Box from '@mui/material/Box';
 import LoadingButton from '@mui/lab/LoadingButton';
@@ -15,54 +16,80 @@ import { useForm } from 'react-hook-form';
 import DynamicTextField from '../reserve/dynamic-textfield';
 import DeptPopover from './dept-popover';
 import DepartmentCreateSuccessDialog from './dept-dialog';
+import { FormSchema } from './schema';
 
 const Div = styled.div`
   display: flex;
   align-items: center;
   margin: 28px 0;
 `;
 // ———————————————————————————————————
-export const defaultValues = {
-  siteName: '',
-  deptName: '',
-  logoImage: '',
-  deptImage: '',
-  userAccept: false,
-  maxRserveCount: 0,
-  link: '',
-  extraInfo: '',
-};
-
 export default function DepartmentForm() {
+  const defaultValues = {
+    siteName: '',
+    deptName: '',
+    deptImage: '',
+    userAccept: false,
+    maxRserveCount: 0,
+    link: '',
+    extraInfo: '',
+  };
+  const [extraInfomation, setExtraInfomation] = useState('');
+  const [open, setOpen] = useState<boolean>(false);
+  const updateExtraInfo = (newExtraInfo: string) => {
+    setExtraInfomation(newExtraInfo);
+  };
+
   const methods = useForm({
+    resolver: yupResolver(FormSchema),
     defaultValues,
   });
-  const { reset, setValue, handleSubmit } = methods;
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [deptImage, setDeptImage] = useState('');
-  const [maxRserveCount, setMaxRserveCount] = useState<number | undefined>();
-  const [extraInfo, setExtraInfo] = useState('');
-  const [open, setOpen] = useState<boolean>(false);
+  const { watch, reset, setValue, handleSubmit } = methods;
 
-  const updateExtraInfo = (newExtraInfo: string) => {
-    setExtraInfo(newExtraInfo);
-  };
+  const imageFile = watch('deptImage');
 
   const onSubmit = handleSubmit(async (data) => {
-    try {
-      data.maxRserveCount = maxRserveCount ?? 0;
-      data.extraInfo = extraInfo;
-      data.logoImage = '';
-      await createDept(data);
-      reset();
-      setMaxRserveCount(undefined);
-      setExtraInfo('');
-      // modal
-      setOpen(true);
-    } catch (error) {
-      console.error(error);
-    }
+    console.log('submit!');
+    console.log(data);
+
+    const formData = new FormData();
+    formData.append('siteName', data.siteName);
+    formData.append('deptName', data.deptName);
+    formData.append('userAccept', data.userAccept.toString());
+    formData.append('maxRserveCount', data.maxRserveCount.toString());
+    formData.append('link', data.link);
+    formData.append('extraInfo', extraInfomation);
+    formData.append('deptImage', imageFile);
+    console.log(formData.forEach((value, key) => console.log(key, value)));
+
+    reset();
+    await axiosInstance
+      .post(endpoints.dept.create, formData, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      })
+      .catch((e) => {
+        console.log('error');
+        console.log(e);
+      });
+    setOpen(true);
+
+    // ToDo: 기관 생성 api 연결
+    // try {
+    //   data.maxRserveCount = maxRserveCount ?? 0;
+    //   data.extraInfo = extraInfo;
+    //   data.logoImage = '';
+    //   await createDept(data);
+    //   reset();
+    //   setMaxRserveCount(undefined);
+    //   setExtraInfo('');
+    //   // modal
+    //   setOpen(true);
+    // } catch (error) {
+    //   console.error(error);
+    // }
   });
 
   const handleDropSingleFile = useCallback(
@@ -74,17 +101,14 @@ export default function DepartmentForm() {
       });
 
       if (newFile) {
-        setValue('deptImage', file.name, { shouldValidate: true });
-        console.log('파일 이름 정확히 들어갔나', newFile);
-        setDeptImage(file.name);
+        setValue('deptImage', newFile, { shouldValidate: true });
       }
     },
     [setValue]
   );
 
   return (
     <>
-      <DepartmentCreateSuccessDialog open={open} onClose={() => setOpen(false)} />
       <FormProvider methods={methods} onSubmit={onSubmit}>
         <Box
           gap={5}
@@ -121,13 +145,7 @@ export default function DepartmentForm() {
                 name="maxRserveCount"
                 label="사용자 최대 예약 가능 날짜를 입력해주세요."
                 type="number"
-                value={maxRserveCount}
-                onChange={(newValue) => {
-                  const numericValue = parseFloat(newValue.target.value);
-                  setMaxRserveCount(numericValue);
-                }}
               />
-              {/* <DeptPopover filed="maxRserveCount"/> */}
             </Block>
             <Block label="URL 이름">
               <RHFTextField name="link" label="URL 이름을 입력해주세요." />
@@ -142,7 +160,7 @@ export default function DepartmentForm() {
             <RHFUpload
               name="deptImage"
               onDrop={handleDropSingleFile}
-              onDelete={() => setValue('deptImage', '', { shouldValidate: true })}
+              onDelete={() => setValue('deptImage', null, { shouldValidate: true })}
               helperText="기관 대표 이미지를 선택해주세요"
             />
             <LoadingButton fullWidth color="primary" size="large" type="submit" variant="soft">
@@ -151,6 +169,8 @@ export default function DepartmentForm() {
           </Stack>
         </Box>
       </FormProvider>
+
+      <DepartmentCreateSuccessDialog open={open} onClose={() => setOpen(false)} />
     </>
   );
 }