fix(client): error if entityName & column is empty

packages/client/src/dashboard/infrastructure/http/graphql/createQuery.ts

@@ -135,6 +135,5 @@ export function createBachelorQuery(filterNames: string[], labels: string[]) {
     ${returnQuerys(filterNames).join('\n')}
   }
   `;
-  console.log(query);
   return query;
 }

packages/client/src/dashboard/presentation/components/Dialog/RequestButton.tsx

@@ -19,11 +19,9 @@ export default function RequestButton(props: RequestButtonProps) {
     createSaveModifiedDataQuery(entityName),
   );
 
-  console.log(error, loading, data);
   if (error) return <Button disabled={true}>{error.message}.</Button>;
   if (loading) return <Button disabled={true}>데이터 저장중...</Button>;
   if (data) {
-    console.log(data);
     if (data['saveModifiedDataFromSheet'] === SUCCESS)
       return (
         <Alert

packages/client/src/dashboard/presentation/components/Dialog/SaveButton.tsx

@@ -19,7 +19,6 @@ export default function SaveButton(props: SaveButtonProps) {
   if (loading) return <Button disabled={true}>데이터 로딩중...</Button>;
   if (data) {
     window.open(data['getDataToModifyFromDB'], '_blank');
-    console.log(data);
     return (
       <Alert
         onClick={saveModification}

packages/client/src/dashboard/presentation/components/Modal/Dataset.tsx

@@ -48,7 +48,6 @@ export default function Dataset({
       prev[id] = event.target.value;
       return prev;
     });
-    console.log(datasetNames);
   };
 
   return (

packages/client/src/dashboard/presentation/components/Modal/QueryFilterAttribute.tsx

@@ -1,8 +1,5 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
 import { Button } from '@mui/material';
-import { useLazyQuery } from '@apollo/client';
-import createValueQuery from '../../../infrastructure/http/graphql/createValueQuery';
 import {
   ColumnType,
   EntityNameType,
@@ -13,9 +10,10 @@ import {
 import FilterAttribute from './filterAttributes/FilterAttribute';
 import returnColumns from './filterAttributes/menuItems/returnColumns';
 import returnOperators from './filterAttributes/menuItems/returnOperators';
-import returnValues from './filterAttributes/menuItems/returnValues';
 import LatestAttribute from './filterAttributes/LatestAttribute';
 import returnEntities from './filterAttributes/menuItems/returnEntities';
+import { useState } from 'react';
+import ValueAttribute from './filterAttributes/ValueAttribute';
 
 const Section = styled.div`
   margin-top: 1rem;
@@ -30,16 +28,11 @@ interface DatasetFilterProps {
 
 export default function QueryFilterAttribute(props: DatasetFilterProps) {
   const { saveSelectedFilter } = props;
-  const [entityName, setEntityName] = React.useState<EntityNameType>('User');
-  const [column, setColumn] = React.useState<ColumnType>('coalition');
-  const [operator, setOperator] = React.useState<OperatorType>('=');
-  const [givenValue, setGivenValue] = React.useState<GivenValueType>('');
-  const [latest, setLatest] = React.useState<boolean>(true);
-  const [getValues, { data, loading, error }] = useLazyQuery(
-    createValueQuery(entityName, column),
-  );
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p>Error :</p>;
+  const [entityName, setEntityName] = useState<EntityNameType>('');
+  const [column, setColumn] = useState<ColumnType>('');
+  const [operator, setOperator] = useState<OperatorType>('=');
+  const [givenValue, setGivenValue] = useState<GivenValueType>('');
+  const [latest, setLatest] = useState<boolean>(true);
 
   const checkEmptyAttribute = () => {
     if (!entityName || !column || !operator || !givenValue || !latest) {
@@ -50,12 +43,14 @@ export default function QueryFilterAttribute(props: DatasetFilterProps) {
   };
 
   const handleEntityNameChange = (event: any) => {
+    setGivenValue('');
+    setColumn('');
     setEntityName(event.target.value);
   };
 
   const handleColumnChange = (event: any) => {
-    setColumn(event.target.value);
-    getValues();
+    setGivenValue('');
+    setColumn(event.target.value || '');
   };
 
   const handleOperatorChange = (event: any) => {
@@ -90,11 +85,12 @@ export default function QueryFilterAttribute(props: DatasetFilterProps) {
         onChange={handleOperatorChange}
         menuItems={returnOperators()}
       />
-      <FilterAttribute
+      <ValueAttribute
         id={'GivenValue'}
         value={givenValue}
         onChange={handleGivenValueChange}
-        menuItems={returnValues({ entityName, column, data })}
+        entityName={entityName || 'None'}
+        column={column || 'None'}
       />
       <LatestAttribute
         id={'Latest'}

packages/client/src/dashboard/presentation/components/Modal/StickerStepper.tsx

@@ -11,7 +11,6 @@ import InputDatasets from './InputDatasets';
 import { FilterConfigType } from '../Sticker/Filter.type';
 import { useMemo } from 'react';
 import StepButtons from './stepper/StepButtons';
-import StepHeader from './stepper/StepHeader';
 import Step from '@mui/material/Step';
 import StepLabel from '@mui/material/StepLabel';
 
@@ -57,12 +56,10 @@ export default function StickerStepper(props: ModalDatasType) {
   const [datasetFocus, setDatasetFocus] = React.useState(0);
 
   const handleNext = () => {
-    console.log('handlenext');
     setActiveStep((prevActiveStep) => prevActiveStep + 1);
   };
 
   const handleBack = () => {
-    console.log('handleback');
     setActiveStep((prevActiveStep) => prevActiveStep - 1);
   };
 

packages/client/src/dashboard/presentation/components/Modal/filterAttributes/FilterAttribute.tsx

@@ -10,14 +10,17 @@ export interface GivenValueFormPropsType {
 export default function FilterAttribute(props: GivenValueFormPropsType) {
   const { id, value, onChange, menuItems } = props;
 
+  const menuItemsElement = menuItems();
+
   return (
     <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
       <InputLabel id={id}>{id}</InputLabel>
       <Select labelId={id} id={id} value={value} onChange={onChange} label={id}>
-        <MenuItem value="">
-          <em>None</em>
-        </MenuItem>
-        {menuItems()}
+        {menuItemsElement ?? (
+          <MenuItem value="None">
+            <em>None</em>
+          </MenuItem>
+        )}
       </Select>
     </FormControl>
   );

packages/client/src/dashboard/presentation/components/Modal/filterAttributes/ValueAttribute.tsx

@@ -0,0 +1,34 @@
+import { useQuery } from '@apollo/client';
+import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
+import createValueQuery from '../../../../infrastructure/http/graphql/createValueQuery';
+import returnValues from './menuItems/returnValues';
+
+export interface ValueAttributeProps {
+  id: string;
+  value: string;
+  entityName: string;
+  column: string;
+  onChange: (event: any) => void;
+}
+
+export default function ValueAttribute(props: ValueAttributeProps) {
+  const { id, value, onChange, entityName, column } = props;
+  const { data, loading, error } = useQuery(
+    createValueQuery(entityName, column),
+  );
+
+  if (loading) return <p>Loading...</p>;
+  console.log(entityName, column, data);
+  return (
+    <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
+      <InputLabel id={id}>{id}</InputLabel>
+      <Select labelId={id} id={id} value={value} onChange={onChange} label={id}>
+        {returnValues({ column, entityName, data }) ?? (
+          <MenuItem value="None">
+            {error && !column ? <em>error :( </em> : <em>None</em>}
+          </MenuItem>
+        )}
+      </Select>
+    </FormControl>
+  );
+}

packages/client/src/dashboard/presentation/components/Modal/filterAttributes/menuItems/returnColumns.tsx

@@ -5,15 +5,13 @@ type EntityColumnType = typeof EntityColumn;
 
 export default function returnColumns(dependencies: { [key: string]: string }) {
   const { entityName } = dependencies;
-  return () => {
-    if (entityName)
-      return EntityColumn[entityName as keyof EntityColumnType].map(
-        (column: { spName: string; dbName: string }) => (
-          <MenuItem key={column.dbName} value={column.dbName}>
-            {column.spName}
-          </MenuItem>
-        ),
-      );
-    return null;
-  };
+  if (entityName === 'None' || !entityName) return () => null;
+  return () =>
+    EntityColumn[entityName as keyof EntityColumnType].map(
+      (column: { spName: string; dbName: string }) => (
+        <MenuItem key={column.dbName} value={column.dbName}>
+          {column.spName}
+        </MenuItem>
+      ),
+    );
 }

packages/client/src/dashboard/presentation/components/Modal/filterAttributes/menuItems/returnValues.tsx

@@ -9,22 +9,17 @@ export default function returnValues(dependencies: {
   const findValue = (data: any, entityName: string, column: string) => {
     if (data) {
       const entity = 'get' + entityName;
-      const datasets = [];
-      for (let i = 0; i < data[entity].length; i++) {
-        datasets.push(data[entity][i][column]);
-      }
-      return datasets;
+      const values: object[] = data[entity];
+      return values.map((val: any) => val[column]);
     }
     return [];
   };
 
-  return () => {
-    if (data && column && entityName)
-      return findValue(data, entityName, column).map((value: string) => (
-        <MenuItem key={value} value={value}>
-          {value}
-        </MenuItem>
-      ));
-    return null;
-  };
+  if (data && column && entityName)
+    return findValue(data, entityName, column).map((value: string) => (
+      <MenuItem key={value} value={value}>
+        {value}
+      </MenuItem>
+    ));
+  return null;
 }

packages/client/src/dashboard/presentation/components/SideBar/PresetListItem.tsx

@@ -25,7 +25,6 @@ function PresetListItem(props: PresetListItemProps) {
   function myOnClickHandler(e: any) {
     e.stopPropagation();
     changePresetLabel(id, presetLabel);
-    console.log('edit');
     setEdit(!edit);
   }
 

packages/client/src/dashboard/presentation/components/Sticker/Filter.type.ts

@@ -1,17 +1,9 @@
+import { EntityColumn } from 'common/src';
+
 export type EntityNameType =
-  | 'User'
-  | 'UserPersonalInformation'
-  | 'UserProcessProgress'
-  | 'UserLeaveOfAbsence'
-  | 'UserBlackhole'
-  | 'UserReasonOfBreak'
-  | 'UserOtherInformation'
-  | 'UserLapiscineInformation'
-  | 'UserEmploymentAndFound'
-  | 'UserHrdNetUtilize'
-  | 'UserEducationFundState'
-  | 'UserComputationFund'
-  | 'UserAccessCardInformation';
+  | Extract<keyof typeof EntityColumn, string>
+  | 'None'
+  | '';
 
 export type ColumnType = string;