feat(client/preset): add preset delete button

- 백엔드 api를 사용하여 preset을 삭제할 수 있는 버튼을 만들었습니다 feat #368
innovationacademy-kr · Aug 4, 2022 · 4db34b1 · 4db34b1
1 parent 8ecbec5
commit 4db34b1
Show file tree

Hide file tree

Showing 10 changed files with 77 additions and 148 deletions.
diff --git a/packages/client/src/dashboard/application/services/useBoard.tsx b/packages/client/src/dashboard/application/services/useBoard.tsx
@@ -9,6 +9,8 @@ import PresetService from '../../domain/preset/preset.service';
 import sectionDatasStore from '../../infrastructure/store/sectionDatas.store';
 import stickerDatasStore from '../../infrastructure/store/stickerDatas.store';
 import presetStore from '../../infrastructure/store/preset.store';
+import PresetListService from '../../domain/presetList/presetList.service';
+import presetListRepository from '../../infrastructure/presetList.repository';
 
 const boardDataService = new BoardDataService(boardDataRepository);
 const presetService = new PresetService(presetRepository);
@@ -19,6 +21,7 @@ function useBoard() {
   boardDataStore.subscribeToBoardData((newBoardData: BoardDataType) => {
     setBoardData(newBoardData);
   });
+
   const handleSavePreset = () => {
     const preset = presetStore.getPreset();
     if (!preset) return;
@@ -36,6 +39,11 @@ function useBoard() {
       info: preset.info,
     });
   };
+
+  const handleDeletePreset = async (id: string) => {
+    await presetService.deletePreset(id);
+  };
+
   const handleSectionAdd = (sectionId: string | undefined) => {
     if (sectionId === undefined) return;
     const newLayout = [
@@ -74,6 +82,7 @@ function useBoard() {
     handleSectionLayoutChange,
     handleSectionRemove,
     handleSavePreset,
+    handleDeletePreset,
   };
 }
 

diff --git a/packages/client/src/dashboard/application/services/usePreset.tsx b/packages/client/src/dashboard/application/services/usePreset.tsx
@@ -41,25 +41,6 @@ function usePreset() {
   });
 
   useEffect(() => {
-    // 나중에 지울 코드!
-    // await axios
-    //   .get('http://localhost:3000/user-information/getAllPreSet', {
-    //     withCredentials: true,
-    //   })
-    //   .then((res) => {
-    //     const deletePreset = async (id: string) => {
-    //       await axios.delete(
-    //         'http://localhost:3000/user-information/deleteOnePreSet/${id}',
-    //         {
-    //           withCredentials: true,
-    //         },
-    //       );
-    //     };
-    //     for (let i = 0; i < res.data.length; i++) {
-    //       deletePreset(res.data[i].id);
-    //       console.log('deletePreset : ', res.data[i].id);
-    //     }
-    //   });
     const fetchPresetList = async () => {
       const presetList = await presetListService.getPresetList();
       if (presetList.presetInfos.length !== 0) {
@@ -116,6 +97,10 @@ function usePreset() {
     setControlMode('edit');
   };
 
+  // const deletePreset = async (id: string) => {
+  //   await presetService.deletePreset(id);
+  // };
+
   const changePresetLabel = async (id: string, label: string) => {
     const presetData = await presetService.getPreset(id);
     if (presetData && presetList) {
@@ -137,7 +122,14 @@ function usePreset() {
       });
     }
   };
-  return { preset, presetList, createPreset, changePreset, changePresetLabel };
+  return {
+    preset,
+    presetList,
+    createPreset,
+    changePreset,
+    // deletePreset,
+    changePresetLabel,
+  };
 }
 
 export default usePreset;
diff --git a/packages/client/src/dashboard/domain/preset/preset.repository.interface.ts b/packages/client/src/dashboard/domain/preset/preset.repository.interface.ts
@@ -4,7 +4,7 @@ interface PresetRepositoryInterface {
   getPreset(id: string): Promise<PresetType | null>;
   setPreset(preset: PresetType): Promise<void>;
   addPreset(preset: PresetType): Promise<void>;
-  // deletePreset(id: string): Promise<void>;
+  deletePreset(id: string): Promise<void>;
 }
 
 export default PresetRepositoryInterface;
diff --git a/packages/client/src/dashboard/domain/preset/preset.service.ts b/packages/client/src/dashboard/domain/preset/preset.service.ts
@@ -16,9 +16,9 @@ class PresetService {
     return this.presetRepository.addPreset(preset);
   }
 
-  // deletePreset(id: string): Promise<void> {
-  //   return this.presetRepository.deletePreset(id);
-  // }
+  public async deletePreset(id: string): Promise<void> {
+    return this.presetRepository.deletePreset(id);
+  }
 }
 
 export default PresetService;
diff --git a/packages/client/src/dashboard/infrastructure/preset.repository.ts b/packages/client/src/dashboard/infrastructure/preset.repository.ts
@@ -33,7 +33,7 @@ class PresetRepository implements PresetRepositoryInterface {
       });
     if (isExist) {
       await axios.put(
-        'http://localhost:3000/user-information/updateOnePreSet/${id}',
+        `http://localhost:3000/user-information/updateOnePreSet/${id}`,
         preset,
         {
           withCredentials: true,
@@ -49,6 +49,16 @@ class PresetRepository implements PresetRepositoryInterface {
       );
     }
   }
+
+  public async deletePreset(id: string): Promise<void> {
+    await axios
+      .delete(`http://localhost:3000/user-information/deleteOnePreset/${id}`, {
+        withCredentials: true,
+      })
+      .then((res) => {
+        console.log('delete result: ', res);
+      });
+  }
 }
 
 export default new PresetRepository();
diff --git a/packages/client/src/dashboard/infrastructure/presetList.repository.ts b/packages/client/src/dashboard/infrastructure/presetList.repository.ts
@@ -17,6 +17,7 @@ class PresetListRepository implements PresetListRepositoryInterface {
           presetInfos.push(res.data[i].info);
         }
       });
+    console.log('presetList: ', presetInfos);
     return { presetInfos };
   }
 

diff --git a/packages/client/src/dashboard/presentation/components/SideBar/PresetListItem.tsx b/packages/client/src/dashboard/presentation/components/SideBar/PresetListItem.tsx
@@ -1,10 +1,12 @@
 import { SvgIconComponent } from '@mui/icons-material';
 import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
 import useMode from '../../../application/services/useMode';
 import { useState } from 'react';
 import TextField from '@mui/material/TextField';
-
+import useBoard from '../../../application/services/useBoard';
+import usePreset from '../../../application/services/usePreset';
 export interface PresetListItemProps {
   icon: SvgIconComponent; // mui/icons-material 에 있는 아이콘 타입
   label: string;
@@ -20,6 +22,7 @@ function PresetListItem(props: PresetListItemProps) {
   const [edit, setEdit] = useState(false);
   const [presetLabel, setPresetLabel] = useState(label);
   const { getControlMode } = useMode();
+  const { handleDeletePreset } = useBoard();
   const IconType = icon;
 
   function myOnClickHandler(e: any) {
@@ -29,6 +32,11 @@ function PresetListItem(props: PresetListItemProps) {
     setEdit(!edit);
   }
 
+  async function deletePreset(id: string) {
+    await handleDeletePreset(id);
+    console.log('deletePreset: ', id);
+  }
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPresetLabel(event.target.value);
   };
@@ -39,7 +47,11 @@ function PresetListItem(props: PresetListItemProps) {
       selected={selected || false}
     >
       <ListItemIcon>
-        <IconType />
+        {selected && getControlMode() === 'edit' && !edit ? (
+          <DeleteIcon color="disabled" onClick={() => deletePreset(id)} />
+        ) : (
+          <IconType />
+        )}
       </ListItemIcon>
       {selected && getControlMode() === 'edit' && !edit ? (
         <>

diff --git a/packages/client/src/dashboard/presentation/pages/DashBoardPage.tsx b/packages/client/src/dashboard/presentation/pages/DashBoardPage.tsx
@@ -73,7 +73,6 @@ function DashBoardPage() {
         <Board />
         <Footer />
       </MainArea>
-      <ModeDial />
       <ModificationDialog open={open} setOpen={setOpen} />
     </Box>
   );

diff --git a/packages/server/src/schema.gql b/packages/server/src/schema.gql
@@ -25,7 +25,6 @@ type JoinedTable {
   intra_no: Int!
   name: String
   start_process_date: DateTime
-  start_process: DateTime
   uniqueness: String
   userAccessCardInformation: [UserAccessCardInformation!]
   userBlackhole: [UserBlackhole!]
@@ -46,130 +45,37 @@ type JoinedTable {
 }
 
 type Mutation {
-  deleteUserInformation(
-    column: String!
-    entityName: String!
-    intra_no: Int!
-    pk: Int!
-    value: String!
-  ): Boolean!
-  recoverUserInformaiton(
-    column: String!
-    entityName: String!
-    intra_no: Int!
-    pk: Int!
-    value: String!
-  ): Boolean!
-  softDeleteRemoveWithdrawTest(
-    column: String!
-    entityName: String!
-    intra_no: Int!
-    pk: Int!
-    value: String!
-  ): [JoinedTable!]!
-  updateUserInformation(
-    column: String!
-    entityName: String!
-    intra_no: Int!
-    pk: Int!
-    value: String!
-  ): Boolean!
+  deleteUserInformation(column: String!, entityName: String!, intra_no: Int!, pk: Int!, value: String!): Boolean!
+  recoverUserInformaiton(column: String!, entityName: String!, intra_no: Int!, pk: Int!, value: String!): Boolean!
+  softDeleteRemoveWithdrawTest(column: String!, entityName: String!, intra_no: Int!, pk: Int!, value: String!): [JoinedTable!]!
+  updateUserInformation(column: String!, entityName: String!, intra_no: Int!, pk: Int!, value: String!): Boolean!
 }
 
 type Query {
   extractDataIntoSpreadsheet: String!
   getDataToModifyFromDB(sheetName: String!): String!
-  getDomainOfColumnFilter(
-    endDate: DateTime
-    filters: [Filter!]!
-    skip: Int
-    startDate: DateTime
-    take: Int
-  ): [JoinedTable!]!
+  getDomainOfColumnFilter(endDate: DateTime, filters: [Filter!]!, skip: Int, startDate: DateTime, take: Int): [JoinedTable!]!
   getLatestData: String!
-  getNumOfPeopleByFilter(
-    endDate: DateTime
-    filters: [Filter!]!
-    skip: Int
-    startDate: DateTime
-    take: Int
-  ): Int!
-  getPeopleByFilter(
-    endDate: DateTime
-    filters: [Filter!]!
-    skip: Int
-    startDate: DateTime
-    take: Int
-  ): [JoinedTable!]!
-  getPeopleByFilterForAdmin(
-    endDate: DateTime
-    filters: [Filter!]!
-    skip: Int
-    startDate: DateTime
-    take: Int
-  ): [JoinedTable!]!
+  getNumOfPeopleByFilter(endDate: DateTime, filters: [Filter!]!, skip: Int, startDate: DateTime, take: Int): Int!
+  getPeopleByFilter(endDate: DateTime, filters: [Filter!]!, skip: Int, startDate: DateTime, take: Int): [JoinedTable!]!
+  getPeopleByFilterForAdmin(endDate: DateTime, filters: [Filter!]!, skip: Int, startDate: DateTime, take: Int): [JoinedTable!]!
   getUser(column: String, duplicated: String!): [User!]!
-  getUserAccessCardInformation(
-    column: String
-    duplicated: String!
-  ): [UserAccessCardInformation!]!
+  getUserAccessCardInformation(column: String, duplicated: String!): [UserAccessCardInformation!]!
   getUserBlackhole(column: String, duplicated: String!): [UserBlackhole!]!
-  getUserComputationFund(
-    column: String
-    duplicated: String!
-  ): [UserComputationFund!]!
-  getUserCourseExtension(
-    column: String
-    duplicated: String!
-  ): [UserCourseExtension!]!
-  getUserEducationFundState(
-    column: String
-    duplicated: String!
-  ): [UserEducationFundState!]!
-  getUserEmploymentStatus(
-    column: String
-    duplicated: String!
-  ): [UserEmploymentStatus!]!
-  getUserHrdNetUtilize(
-    column: String
-    duplicated: String!
-  ): [UserHrdNetUtilize!]!
-  getUserHrdNetUtilizeConsent(
-    column: String
-    duplicated: String!
-  ): [UserHrdNetUtilizeConsent!]!
-  getUserInterruptionOfCourse(
-    column: String
-    duplicated: String!
-  ): [UserInterruptionOfCourse!]!
-  getUserLapiscineInformation(
-    column: String
-    duplicated: String!
-  ): [UserLapiscineInformation!]!
-  getUserLearningDataAPI(
-    column: String
-    duplicated: String!
-  ): [UserLearningDataAPI!]!
-  getUserLeaveOfAbsence(
-    column: String
-    duplicated: String!
-  ): [UserLeaveOfAbsence!]!
-  getUserLoyaltyManagement(
-    column: String
-    duplicated: String!
-  ): [UserLoyaltyManagement!]!
-  getUserOtherEmploymentStatus(
-    column: String
-    duplicated: String!
-  ): [UserOtherEmploymentStatus!]!
-  getUserOtherInformation(
-    column: String
-    duplicated: String!
-  ): [UserOtherInformation!]!
-  getUserPersonalInformation(
-    column: String
-    duplicated: String!
-  ): [UserPersonalInformation!]!
+  getUserComputationFund(column: String, duplicated: String!): [UserComputationFund!]!
+  getUserCourseExtension(column: String, duplicated: String!): [UserCourseExtension!]!
+  getUserEducationFundState(column: String, duplicated: String!): [UserEducationFundState!]!
+  getUserEmploymentStatus(column: String, duplicated: String!): [UserEmploymentStatus!]!
+  getUserHrdNetUtilize(column: String, duplicated: String!): [UserHrdNetUtilize!]!
+  getUserHrdNetUtilizeConsent(column: String, duplicated: String!): [UserHrdNetUtilizeConsent!]!
+  getUserInterruptionOfCourse(column: String, duplicated: String!): [UserInterruptionOfCourse!]!
+  getUserLapiscineInformation(column: String, duplicated: String!): [UserLapiscineInformation!]!
+  getUserLearningDataAPI(column: String, duplicated: String!): [UserLearningDataAPI!]!
+  getUserLeaveOfAbsence(column: String, duplicated: String!): [UserLeaveOfAbsence!]!
+  getUserLoyaltyManagement(column: String, duplicated: String!): [UserLoyaltyManagement!]!
+  getUserOtherEmploymentStatus(column: String, duplicated: String!): [UserOtherEmploymentStatus!]!
+  getUserOtherInformation(column: String, duplicated: String!): [UserOtherInformation!]!
+  getUserPersonalInformation(column: String, duplicated: String!): [UserPersonalInformation!]!
   saveModifiedDataFromSheet(sheetName: String!): String!
   sendRequestToSpreadWithGoogleAPI: String!
   tempFunction: [JoinedTable!]!
@@ -390,4 +296,4 @@ type UserPersonalInformation {
   region: String!
   social_security_key: String!
   validate_date: DateTime!
-}
+}
diff --git a/packages/server/src/user_information/user_information.controller.ts b/packages/server/src/user_information/user_information.controller.ts
@@ -171,9 +171,9 @@ export class UserInformationController {
     // 당연히 bocal에서도 삭제될것. (실제 DB에서 fk를 가진 튜플을 삭제한거니까)
     // 이 경우는 onDelete 옵션 안써도 되는거
     const preSet = await preSetRepository.delete({
-      id: Equal(uuid),
+      id: uuid,
     });
-    if (preSet) return 'entity not found!';
+    if (!preSet) return 'entity not found!';
     return 'delete success';
   }
-Original file line number
+Diff line change
@@ Expand Up @@
               presetInfos.push(res.data[i].info);
             }
           });
+        console.log('presetList: ', presetInfos);
         return { presetInfos };
       }
@@ Expand Down @@