feat(client): 기간 필터 적용

- 필터 적용을 위해 SectionDataType 변경, StickerDataType 변경 - 기다 필터 적용을 위한 컴포넌트들 전체 수정 #443
innovationacademy-kr · Aug 8, 2022 · 05e0a26 · 05e0a26
1 parent 8889cec
commit 05e0a26
Show file tree

Hide file tree

Showing 27 changed files with 385 additions and 185 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -34,6 +34,7 @@ services:
         networks:
             - default
             - our_net
+        shm_size: "1g"
         # network_mode: "host"
         # volumes:
         #     - D:/postgresql/data/:/var/lib/postgresql/data

diff --git a/packages/client/src/dashboard/application/services/useDataset.tsx b/packages/client/src/dashboard/application/services/useDataset.tsx
@@ -1,17 +1,93 @@
 import { DocumentNode, useQuery } from '@apollo/client';
+import createQueryForChart, {
+  createBachelorQuery,
+  createQueryForTable,
+} from '../../infrastructure/http/graphql/createQuery';
 import { FilterConfigType } from '../../presentation/components/Sticker/Filter.type';
+import { StickerContentType } from '../../presentation/components/Sticker/StickerContent.type';
 
 export interface QueryVariablesType {
   [filterName: string]: FilterConfigType;
 }
 
+export interface ChartQueryIngredientType {
+  filterNames: string[];
+  labels: string[];
+  filterSetsPerData: string[][];
+  startDate?: Date;
+  endDate?: Date;
+}
+
+export interface TableQueryIngredientType {
+  filterNames: string[];
+  fields: (string | object)[];
+  startDate?: Date;
+  endDate?: Date;
+  skip?: number;
+  take?: number;
+}
+
+export interface BachelorQueryIngredientType {
+  filterNames: string[];
+}
+
+export type QueryIngredientType =
+  | ChartQueryIngredientType
+  | TableQueryIngredientType
+  | BachelorQueryIngredientType;
+
 export interface QueryDataType {
-  query: DocumentNode;
+  stickerContentType: StickerContentType;
+  queryIngredient: QueryIngredientType;
   filters: QueryVariablesType;
 }
 
-function useChartDataset(queryData: QueryDataType) {
-  const { query, filters } = queryData;
+function useGqlQuery(queryData: QueryDataType) {
+  const { stickerContentType, queryIngredient, filters } = queryData;
+  let query: DocumentNode;
+  if (
+    stickerContentType === 'pieChart' ||
+    stickerContentType === 'barChart' ||
+    stickerContentType === 'lineChart'
+  ) {
+    const {
+      filterNames,
+      filterSetsPerData,
+      labels,
+      endDate,
+      startDate,
+    }: ChartQueryIngredientType = queryIngredient as ChartQueryIngredientType;
+    query = createQueryForChart(
+      filterNames,
+      labels,
+      filterSetsPerData,
+      endDate,
+      startDate,
+    );
+  } else if (stickerContentType === 'table') {
+    const {
+      filterNames,
+      fields,
+      startDate,
+      endDate,
+      skip,
+      take,
+    }: TableQueryIngredientType = queryIngredient as TableQueryIngredientType;
+    query = createQueryForTable(
+      filterNames,
+      fields,
+      startDate,
+      endDate,
+      skip,
+      take,
+    );
+  } else if (stickerContentType === 'bachelor') {
+    const { filterNames }: BachelorQueryIngredientType =
+      queryIngredient as BachelorQueryIngredientType;
+    query = createBachelorQuery(filterNames);
+  } else {
+    throw new Error('쿼리를 사용할 수 없는 스티커 타입입니다.');
+  }
 
   const { data, loading, error } = useQuery(query, {
     variables: filters,
@@ -20,4 +96,4 @@ function useChartDataset(queryData: QueryDataType) {
   return { data, loading, error };
 }
 
-export default useChartDataset;
+export default useGqlQuery;
diff --git a/packages/client/src/dashboard/application/services/useSectionDatas.tsx b/packages/client/src/dashboard/application/services/useSectionDatas.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import SectionDatasService from '../../domain/sectionDatas/sectionData.service';
-import SectionDataType from '../../domain/sectionDatas/sectionData.type';
+import SectionDataType, {
+  PeriodFilterType,
+} from '../../domain/sectionDatas/sectionData.type';
 import sectionDatasRepository from '../../infrastructure/sectionDatas.repository';
 import sectionDatasStore from '../../infrastructure/store/sectionDatas.store';
 import { Layout } from 'react-grid-layout';
@@ -19,9 +21,19 @@ function useSections() {
     },
   );
 
-  const addSectionData = (sectionDatas: SectionDataType | undefined) => {
-    if (sectionDatas === undefined) return;
-    return sectionDatasService.addSectionData(sectionDatas);
+  const addSectionData = (sectionData: SectionDataType | undefined) => {
+    if (sectionData === undefined) return;
+    return sectionDatasService.addSectionData(sectionData);
+  };
+
+  const handlePreriodFilterUpdate = (
+    id: string,
+    periodFilter: PeriodFilterType,
+  ) => {
+    const section = sectionDatasStore.getSectionDataById(id);
+    if (!section) return new Error('Section not found');
+    section.periodFilter = periodFilter;
+    sectionDatasService.updateSectionData(section);
   };
 
   const removeSectionData = (id: string) => {
@@ -92,6 +104,7 @@ function useSections() {
     handleStickerAdd,
     handleStickerRemove,
     handleStickerLayoutChange,
+    handlePreriodFilterUpdate,
   };
 }
 

diff --git a/packages/client/src/dashboard/application/services/useStickers.tsx b/packages/client/src/dashboard/application/services/useStickers.tsx
@@ -21,15 +21,33 @@ function useStickers() {
     return stickersService.getStickerData(id);
   };
 
+  const updateStickerDatas = (stickerDatas: Array<StickerDataType>) => {
+    stickersStore.setStickerDatas(stickerDatas);
+  };
+
   const addStickerData = async (newSticker: StickerDataType) => {
     return await stickersService.addStickerData(newSticker);
   };
 
+  const updateStickerData = async (newStickerData: StickerDataType) => {
+    return await stickersService.updateStickerData(
+      newStickerData.id,
+      newStickerData,
+    );
+  };
+
   const removeSticker = async (id: string) => {
     return await stickersService.removeStickerData(id);
   };
 
-  return { stickerDatas, getSticker, addStickerData, removeSticker };
+  return {
+    stickerDatas,
+    getSticker,
+    addStickerData,
+    updateStickerData,
+    updateStickerDatas,
+    removeSticker,
+  };
 }
 
 export default useStickers;
diff --git a/packages/client/src/dashboard/application/utils/DEFAULT_BACHELOR_PROPS.ts b/packages/client/src/dashboard/application/utils/DEFAULT_BACHELOR_PROPS.ts
@@ -1,5 +1,8 @@
-import { createBachelorQuery } from '../../infrastructure/http/graphql/createQuery';
-import { QueryVariablesType } from '../services/useDataset';
+import {
+  BachelorQueryIngredientType,
+  QueryDataType,
+  QueryVariablesType,
+} from '../services/useDataset';
 
 const filters: QueryVariablesType = {
   registration: {
@@ -75,13 +78,19 @@ const labels: string[] = [
 const datasetNames = ['학적현황', '코어현황'];
 const options = {};
 
+const bachelorQueryIngredient: BachelorQueryIngredientType = {
+  filterNames: entityNamesArray,
+};
+const queryData: QueryDataType = {
+  stickerContentType: 'bachelor',
+  queryIngredient: bachelorQueryIngredient,
+  filters,
+};
+
 const DEFAULT_BACHELOR_PROPS = {
   labels,
   datasetNames,
-  queryData: {
-    query: createBachelorQuery(entityNamesArray, entityNamesArray),
-    filters,
-  },
+  queryData,
   options,
 };
 

diff --git a/packages/client/src/dashboard/application/utils/DEFAULT_TABLE_PROPS.ts b/packages/client/src/dashboard/application/utils/DEFAULT_TABLE_PROPS.ts
@@ -4,7 +4,7 @@ import { ColumnDataType } from '../../presentation/components/Table/Table';
 import { QueryVariablesType } from '../services/useDataset';
 import camelize from './camelize';
 
-const createAllColumnDatas = () => {
+export const createAllColumnDatas = () => {
   const allColumns: ColumnDataType[] = [];
   for (const value of Object.values(EntityColumn)) {
     value.forEach((column) => {
@@ -17,7 +17,7 @@ const createAllColumnDatas = () => {
   return allColumns;
 };
 
-const createFieldsLiterals = () => {
+export const createFieldsLiterals = () => {
   const fieldLiterals: string[] = [];
 
   for (const [key, value] of Object.entries(EntityColumn)) {
@@ -33,15 +33,15 @@ const createFieldsLiterals = () => {
   return fieldLiterals;
 };
 
-const createAllEntityNamesArray = () => {
+export const createAllEntityNamesArray = () => {
   const allEntityNames: string[] = [];
   for (const key of Object.keys(EntityColumn)) {
     allEntityNames.push(key);
   }
   return allEntityNames;
 };
 
-const createAllEntityFilters = () => {
+export const createAllEntityFilters = () => {
   const allEntityFilters: QueryVariablesType = {};
   for (const key of Object.keys(EntityColumn)) {
     allEntityFilters[key] = {

diff --git a/packages/client/src/dashboard/application/utils/tableQueryParse.js b/packages/client/src/dashboard/application/utils/tableQueryParse.js
@@ -4,8 +4,10 @@ const destructObjectToArray = (prev, element) => {
   const newarr = [];
   toArr.forEach((item) => {
     if (Array.isArray(item)) {
-      const { __typename, ...cells } = item[0];
-      newarr.push(...Object.values(cells));
+      if (item.length !== 0) {
+        const { __typename, ...cells } = item[0];
+        newarr.push(...Object.values(cells));
+      }
     } else {
       newarr.push(item);
     }

diff --git a/packages/client/src/dashboard/domain/sectionDatas/sectionData.type.ts b/packages/client/src/dashboard/domain/sectionDatas/sectionData.type.ts
@@ -1,10 +1,13 @@
 import { Layout } from 'react-grid-layout';
 
+export interface PeriodFilterType {
+  startDate?: Date;
+  endDate?: Date;
+  grade?: string;
+}
 interface SectionDataType {
   id: string;
-  startDate?: string;
-  endDate?: string;
-  grade?: string;
+  periodFilter: PeriodFilterType;
   stickerIds: string[];
   stickerLayouts: Layout[];
 }

diff --git a/packages/client/src/dashboard/domain/stickerDatas/stickerDatas.repository.interface.ts b/packages/client/src/dashboard/domain/stickerDatas/stickerDatas.repository.interface.ts
@@ -2,6 +2,7 @@ import StickerDataType from './stickerData.type';
 
 export default interface StickersDatasRepositoryInterface {
   getStickerData: (id: string) => StickerDataType;
+  updateStickerData: (id: string, newStickerData: StickerDataType) => void;
   addStickerData: (newStickerData: StickerDataType) => void;
   removeStickerData: (id: string) => void;
 }
diff --git a/packages/client/src/dashboard/domain/stickerDatas/stickerDatas.service.ts b/packages/client/src/dashboard/domain/stickerDatas/stickerDatas.service.ts
@@ -12,6 +12,13 @@ class StickerDatasService {
     return this.stickerDatasRepository.addStickerData(newStickerData);
   }
 
+  public async updateStickerData(
+    id: string,
+    newStickerData: StickerDataType,
+  ): Promise<void> {
+    return this.stickerDatasRepository.updateStickerData(id, newStickerData);
+  }
+
   public async removeStickerData(id: string): Promise<void> {
     return this.stickerDatasRepository.removeStickerData(id);
   }

diff --git a/packages/client/src/dashboard/infrastructure/http/graphql/createQuery.ts b/packages/client/src/dashboard/infrastructure/http/graphql/createQuery.ts
@@ -56,9 +56,15 @@ function returnVariables(
   skip?: number,
   take?: number,
 ) {
+  console.log('STARTDATE', typeof startDate);
+  console.log('ENDDATE', typeof endDate);
   const filterNamesLiteral = `filters: [${returnFilters(filterNames)}]`;
-  const startDateLiteral = startDate ? `startDate: ${startDate}` : '';
-  const endDateLiteral = endDate ? `endDate: ${endDate}` : '';
+  const startDateLiteral = startDate
+    ? `startDate: "${new Date(startDate).toISOString().slice(0, 10)}"`
+    : '';
+  const endDateLiteral = endDate
+    ? `endDate: "${new Date(endDate).toISOString().slice(0, 10)}"`
+    : '';
   const skipLiteral = skip ? `skip: ${skip}` : '';
   const takeLiteral = take ? `take: ${take}` : '';
 
@@ -84,20 +90,26 @@ function returnVariables(
  *   alias: getNumOfPeopleByFilter(filters: [$filtersGrade])
  * }`
  */
-export default function createQuery(
+export default function createQueryForChart(
   filterNames: string[],
   labels: string[],
   filterSetsPerData: string[][],
-  startDate?: string,
-  endDate?: string,
+  startDate?: Date,
+  endDate?: Date,
 ) {
   //TODO : error handlers
 
+  const startDateStr = startDate
+    ? new Date(startDate).toISOString().slice(0, 10)
+    : undefined;
+  const endDateStr = endDate
+    ? new Date(endDate).toISOString().slice(0, 10)
+    : undefined;
   const query = `query GetDatasets(
     ${returnFilterVariables(filterNames).join('\n')}
   ) {
     ${filterSetsPerData
-      .map(returnRequest(labels, startDate, endDate))
+      .map(returnRequest(labels, startDateStr, endDateStr))
       .join('\n')}
   }`;
   console.log('query', query);
@@ -128,6 +140,7 @@ export function createQueryForTable(
        }
     }
   `;
+  console.log(query);
   return gql(query);
 }
 
@@ -137,7 +150,7 @@ function returnQuerys(filterNames: string[]) {
   });
 }
 
-export function createBachelorQuery(filterNames: string[], labels: string[]) {
+export function createBachelorQuery(filterNames: string[]) {
   const query = gql` query getData(
     ${returnFilterVariables(filterNames).join('\n')}
   ) {

diff --git a/packages/client/src/dashboard/infrastructure/stickerDatas.repository.ts b/packages/client/src/dashboard/infrastructure/stickerDatas.repository.ts
@@ -18,6 +18,13 @@ class StickerDatasRepository implements StickersDatasRepositoryInterface {
     stickerDatasStore.setStickerDatas(stickerDatas);
   }
 
+  public async updateStickerData(id: string, newStickerData: StickerDataType) {
+    const stickerDatas = stickerDatasStore
+      .getStickerDatas()
+      .filter((stickerData) => stickerData.id !== id);
+    stickerDatasStore.setStickerDatas([...stickerDatas, newStickerData]);
+  }
+
   public async removeStickerData(id: string) {
     const stickerDatas = stickerDatasStore