From 1bc1fb16719d01d6ba6675f67ac23aa488a164cd Mon Sep 17 00:00:00 2001
From: jihyun jo <jihyun.jo@iarkdata.com>
Date: Tue, 6 Feb 2024 14:28:35 +0900
Subject: [PATCH] module filter

---
 src/views/Summery.vue  | 107 ++++++++++++++++++---------
 src/views/Summery2.vue | 162 -----------------------------------------
 2 files changed, 73 insertions(+), 196 deletions(-)
 delete mode 100644 src/views/Summery2.vue

diff --git a/src/views/Summery.vue b/src/views/Summery.vue
index 0f45ad3..6c481bc 100644
--- a/src/views/Summery.vue
+++ b/src/views/Summery.vue
@@ -3,31 +3,32 @@ import {pipeline, table} from "@/store/fetchData.js";
 
 export default {
   name: "Summery",
-  data(){
-    return{
-      pipelineList:[],
-      tableList:[],
-      pipelineFilter:[],
+  data() {
+    return {
+      pipelineList: [],
+      tableList: [],
+      pipelineFilter: [],
       // watch 로 변경 감시할 예정
       // 추후 기본값은 all 으로 설정예정
       // null 값을 넣을시 incluedes 에러가 난다
-      pipelineSelected: []
+      pipelineSelected: [],
+      moduleFilter: ""
     }
   },
-  methods:{
-    async getPipeline(){
+  methods: {
+    async getPipeline() {
       this.pipelineList = (await pipeline()).data.data;
 
     },
 
-    getFilter(){
+    getFilter() {
       this.pipelineFilter = this.pipelineList.map(item => ({name: item.name, key: item.key}));
       console.log(this.pipelineFilter)
 
     },
 
 
-    async getTable(){
+    async getTable() {
       for (const pipelineKey of this.pipelineList.map((item) => item.key)) {
         const response = (await table(pipelineKey)).data.data
         response.forEach(item => this.tableList.push(item));
@@ -47,37 +48,65 @@ export default {
       }
 
       // 새로운 값 추가
+      // watch 에서 push 안먹히는 이유 찾기 (제거는 먹힘) : watch 는 배열을 인식못하고 options 을 줘야 인식함
       this.pipelineSelected.push(pipelineKey);
       console.log(this.pipelineSelected)
     },
 
     // 필터는 모두 한번에 구현해서 watch 에 넣기
     async filterTable() {
-      // `pipelineSelected` 값을 사용하여 테이블 데이터 필터링
+      // `pipelineSelected` 값을 사용하여 테이블 데이터 파이프라인 필터링 : 새 업데이트
       this.tableList = []; // 테이블 데이터 초기화
+      let filteredTableList = [];
       for (const pipelineSelectedKey of this.pipelineSelected) {
         // 비동기 함수 호출은 async/await 사용
         const response = (await table(pipelineSelectedKey)).data.data;
-        response.forEach(item => this.tableList.push(item));
+        // tableList 가 아닌 tableList 로 바로 모듈 필터 적용
+        response.forEach(item => filteredTableList.push(item));
         console.log(pipelineSelectedKey);
-        //
-
       }
-    },
 
-    // 그다음 watch 에 넣어서 변경사항을 감시하고 자동 업데이트 시키도록 해야한다.
+      //   테이블 데이터 모듈 필터링 : 기존 데이터에 필터
+      console.log("filteredTableList : " + filteredTableList);
+      console.log("filteredTableList Array : " + Array.isArray(filteredTableList));
 
+      // filteredTableList 배열에 map 함수가 적용하여 moduleType 출력
+      for (const moduleType of filteredTableList.map((item) => item.moduleType)) {
+        console.log("moduleType : " + moduleType);
+      }
+      //   출력된 moduleType 으로 if 조건절로 필터링
+      if (this.moduleFilter === "") {
+        console.log(filteredTableList)
+        this.tableList = filteredTableList
+      } else {
+        console.log(filteredTableList.filter((item) => item.moduleType === this.moduleFilter))
+        this.tableList = filteredTableList.filter((item) => item.moduleType === this.moduleFilter)
+      }
+      // else if (this.moduleFilter === "Extract") {
+      //   return filteredTableList.filter((item) => item === "Extract")
+      // } else if (this.moduleFilter === "Send") {
+      //   return filteredTableList.filter((item) => item === "Send")
+      // } else {
+      //   return filteredTableList.filter((item) => item === "Post")
+      // }
+    }
   },
 
+  // 그다음 watch 에 넣어서 변경사항을 감시하고 자동 업데이트 시키도록 해야한다.
+
   watch: {
     pipelineSelected() {
       this.filterTable();
+    },
+    moduleFilter(){
+      this.filterTable();
     }
-  },
+  }
+  ,
 
 
-  // create 은 바로 실행이기 때문에 순차실행을 위해 async await 을 걸어준다.
-  async created(){
+// create 은 바로 실행이기 때문에 순차실행을 위해 async await 을 걸어준다.
+  async created() {
     await this.getPipeline();
     await this.getTable();
     await this.getFilter();
@@ -87,36 +116,46 @@ export default {
 
 <template>
   <h1>Summery</h1>
-
+<!--파이프라인 선택-->
   <fieldset>
     <legend>파이프라인</legend>
     <div v-for="pipeline in pipelineFilter" :key="pipeline.key">
-      <input type="checkbox" :id="pipeline.name" v-on:click="setPipelineSelected(pipeline.key)" :value="pipeline.key" />
-      <label :for="pipeline.name">{{pipeline.name}}</label>
+      <input type="checkbox" :id="pipeline.name" v-on:click="setPipelineSelected(pipeline.key)" :value="pipeline.key"/>
+      <label :for="pipeline.name">{{ pipeline.name }}</label>
     </div>
   </fieldset>
   <p>Selected pipeline names: {{ pipelineSelected }}</p>
 
-  <!--  -->
   <button @click="filterTable()">click</button>
-
+<!--모듈 필터-->
+  <div class="moduleFilter">
+    <label for="moduleFilter">모듈</label>
+    <select id="moduleFilter" v-model="moduleFilter">
+      <option v-for="(module,i) in $store.state.moduleColumns" :key="i" :value="module.value">
+        {{ module.name }}
+      </option>
+    </select>
+
+    {{ moduleFilter }}
+  </div>
+<!--테이블 출력-->
   <table class="table">
     <thead class="thead">
     <tr>
-      <th v-for="column in $store.state.columns" :key="column">{{column}}</th>
+      <th v-for="column in $store.state.tableColumns" :key="column">{{ column }}</th>
     </tr>
     </thead>
     <tbody class="tbody">
     <tr v-for="list in tableList" :key="list.insert">
-      <td>{{list.moduleName}}</td>
-      <td>{{list.moduleType}}</td>
-      <td>{{list.tableName}}</td>
-      <td>{{list.tableMap}}</td>
-      <td>{{list.insert}}</td>
-      <td>{{list.update}}</td>
-      <td>{{list.delete}}</td>
-      <td>{{list.discard}}</td>
-      <td>{{list.filtered}}</td>
+      <td>{{ list.moduleName }}</td>
+      <td>{{ list.moduleType }}</td>
+      <td>{{ list.tableName }}</td>
+      <td>{{ list.tableMap }}</td>
+      <td>{{ list.insert }}</td>
+      <td>{{ list.update }}</td>
+      <td>{{ list.delete }}</td>
+      <td>{{ list.discard }}</td>
+      <td>{{ list.filtered }}</td>
     </tr>
     </tbody>
   </table>
diff --git a/src/views/Summery2.vue b/src/views/Summery2.vue
deleted file mode 100644
index 4a92f0b..0000000
--- a/src/views/Summery2.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<script>
-import {pipeline, table} from "@/store/fetchData.js";
-
-export default {
-  name: "Summery",
-  data() {
-    return {
-      pipelineList: [],
-      tableList: [],
-      pipelineFilter: [],
-      // watch 로 변경 감시할 예정
-      // 추후 기본값은 all 으로 설정예정
-      // null 값을 넣을시 incluedes 에러가 난다
-      pipelineSelected: [],
-      moduleFilter: ""
-    }
-  },
-  methods: {
-    async getPipeline() {
-      this.pipelineList = (await pipeline()).data.data;
-
-    },
-
-    async getTable() {
-      for (const pipelineKey of this.pipelineList.map((item) => item.key)) {
-        const response = (await table(pipelineKey)).data.data
-        response.forEach(item => this.tableList.push(item));
-        console.log("pipelineKey : " + pipelineKey);
-        console.log("tableList : " + this.tableList)
-      }
-    },
-  },
-
-  // click 이벤트로 받은 선택된 값을 pipelinekey 로 바로 변경적용시킴
-  setPipelineSelected(pipelineKey) {
-    // 이미 선택된 값인지 확인
-    const isAlreadySelected = this.pipelineSelected.includes(pipelineKey);
-
-    // 선택된 값이면 제거
-    if (isAlreadySelected) {
-      this.pipelineSelected = this.pipelineSelected.filter(item => item !== pipelineKey);
-      return;
-    }
-
-    // 새로운 값 추가
-    this.pipelineSelected.push(pipelineKey);
-    console.log(this.pipelineSelected)
-  },
-
-  // // 필터는 모두 한번에 해서 watch 에 넣기
-  async filterTable() {
-    // `pipelineSelected` 값을 사용하여 테이블 데이터 필터링
-    let selectedModule = []; // 타입추론용 빈배열;
-
-    this.tableList = []; // 테이블 데이터 초기화 : 기존값 제거 (중복방지)
-    for (const pipelineSelectedKey of this.pipelineSelected) {
-      // 비동기 함수 호출은 async/await 사용
-      const response = (await table(pipelineSelectedKey)).data.data;
-      response.forEach(item => this.tableList.push(item));
-      console.log(pipelineSelectedKey);
-
-
-      //   새로운 변수를 만들어서 선택된 모듈 적용
-      // all 인지 아닌지 체크하고
-      //   체크된 값을 filter 걸어서 this.table 리스트에 넣을때
-      this.tableList = selectedModule;
-      console.log(selectedModule)
-
-      // get module Filter
-      // store.js 에 module columns 를 만들고
-      // select option 에서 v-? 로 들고오고
-      // tableList 로 출력된 데이터를 불러와서
-      // .map 으로 .moduleFilter 만 찝어와서
-      // for (const moduleList of this.tableList.map((item) => item.moduleType)) {
-      //   console.log("moduleList : " + moduleList);
-
-
-      // if 조건문으로 만약 moduleFilter 의 이름이 extract 이면 노출해주는 필터링 걸기
-      // 필터 선택을 안했을때 기본값을 all
-      if (this.moduleFilter === "") {
-        return selectedModule;
-      } else if(this.moduleFilter === "Extract"){
-        return selectedModule.filter(item => item.moduleType === "Extract");
-      }else if (this.moduleFilter === "Send") {
-        return selectedModule.filter(item => item.moduleType === "Send");
-      }else {
-        return selectedModule.filter(item => item.moduleType === "Post");
-      }
-
-    }
-  },
-
-  // 그다음 watch 에 넣어서 변경사항을 감시하고 자동 업데이트 시키도록 해야한다.
-
-  watch: {
-    // pipelineSelected 와 시간,모듈 필터 모두 watch 에 넣어서 감시 : watch 가 변경을 감지하고 실시간 데이터 반영
-    pipelineSelected() {
-      this.filterTable();
-    },
-  },
-
-
-  // create 은 바로 실행이기 때문에 순차실행을 위해 async await 을 걸어준다.
-  async created() {
-    await this.getPipeline();
-    await this.getTable();
-  }
-}
-</script>
-
-<template>
-  <h1>Summery</h1>
-
-  <div class="pipelineFilter">
-    <fieldset>
-      <legend>파이프라인</legend>
-      <div v-for="pipeline in pipelineFilter" :key="pipeline.key">
-        <input type="checkbox" :id="pipeline.key" v-on:click="setPipelineSelected(pipeline.key)" :value="pipeline.key"/>
-        <label :for="pipeline.key">{{ pipeline.name }}</label>
-      </div>
-    </fieldset>
-    <p>Selected pipeline names: {{ pipelineSelected }}</p>
-  </div>
-
-  <div class="moduleFilter">
-    <label for="moduleFilter">모듈</label>
-    <select id="moduleFilter" v-model="moduleFilter">
-      <option v-for="(module,i) in $store.state.moduleColumns" :key="i" :value="module.value">
-        {{ module.name }}
-      </option>
-    </select>
-
-    {{ moduleFilter }}
-  </div>
-
-
-  <table class="table">
-    <thead class="thead">
-    <tr>
-      <th v-for="column in $store.state.tableColumns" :key="column">{{ column }}</th>
-    </tr>
-    </thead>
-    <tbody class="tbody">
-    <tr v-for="list in tableList" :key="list.insert">
-      <td>{{ list.moduleName }}</td>
-      <td>{{ list.moduleType }}</td>
-      <td>{{ list.tableName }}</td>
-      <td>{{ list.tableMap }}</td>
-      <td>{{ list.insert }}</td>
-      <td>{{ list.update }}</td>
-      <td>{{ list.delete }}</td>
-      <td>{{ list.discard }}</td>
-      <td>{{ list.filtered }}</td>
-    </tr>
-    </tbody>
-  </table>
-
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
-- 
GitLab