From fd6001a035cbc094e25b430102d38f57ade64d1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=B5=9C=EC=A4=80=ED=9D=A0?= <choi.jh@prime-idc.jp>
Date: Wed, 31 Aug 2022 17:10:54 +0900
Subject: [PATCH] =?UTF-8?q?Vue2=5FFrontend=20=EC=88=98=EC=A0=951...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                     |  1 +
 jsconfig.json                            | 11 +--
 src/components/common/LoginComponent.vue | 20 +++---
 src/components/todo/InputComponent.vue   | 16 ++---
 src/components/todo/ListComponent.vue    | 91 +++++++++++++++++-------
 5 files changed, 86 insertions(+), 53 deletions(-)

diff --git a/.env b/.env
index 67fbf7d..05c1a6f 100644
--- a/.env
+++ b/.env
@@ -7,6 +7,7 @@
 VUE_APP_BACKEND_HOST="http://localhost:3000"
 VUE_APP_BACKEND_HEADERS_Content_Type="application/json;charset=utf-8"
 VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin="*"
+VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Method="GET,PUT,POST,DELETE,PATCH,OPTIONS"
 
 #LocalStorage는 Edge 브라우저의 개발툴 > 응용프로그램 > 로컬 저장소에서 확인가능
 VUE_APP_LOCALSTORAGE_NAME="access_token"
diff --git a/jsconfig.json b/jsconfig.json
index 4aafc5f..b6bd4c8 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -5,15 +5,8 @@
     "baseUrl": "./",
     "moduleResolution": "node",
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   }
 }
diff --git a/src/components/common/LoginComponent.vue b/src/components/common/LoginComponent.vue
index 5d00c47..3d081ea 100644
--- a/src/components/common/LoginComponent.vue
+++ b/src/components/common/LoginComponent.vue
@@ -100,8 +100,8 @@ export default {
         this.$router.replace(
           sessionStorage.getItem(
             process.env.VUE_APP_SESSIONSTORAGE_REDIRECT_NAME
-          )
-        ) || '/'
+          ) || '/'
+        )
         //저장된 정보 CLear
         this.onReset()
       }
@@ -122,16 +122,16 @@ export default {
     async callAPI(url, params) {
       console.log('CallAPI..', [url, params])
       axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
-      //전송 Header에 CORP정보 추가
-      axios.defaults.headers.post['Content-Type'] =
-        process.env.VUE_APP_BACKEND_HEADERS_Content_Type
-      axios.defaults.headers.post['Access-Control-Allow-Origin'] =
-        process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
       //전송 Header에 추가
       const headers = {
-        // Authorization:
-        //   'Bearer ' +
-        //   localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
+        // 'Content-Type': process.env.VUE_APP_BACKEND_HEADERS_Content_Type,
+        // 'Access-Control-Allow-Origin':
+        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin,
+        // 'Access-Control-Allow-Methods':
+        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Method,
+        Authorization:
+          'Bearer ' +
+          localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
       }
       return await axios
         .post(url, params, headers)
diff --git a/src/components/todo/InputComponent.vue b/src/components/todo/InputComponent.vue
index 9f1543a..8a34791 100644
--- a/src/components/todo/InputComponent.vue
+++ b/src/components/todo/InputComponent.vue
@@ -140,16 +140,16 @@ export default {
     async callAPI(url, params) {
       console.log('CallAPI..', [url, params])
       axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
-      //전송 Header에 CORP정보 추가
-      axios.defaults.headers.post['Content-Type'] =
-        process.env.VUE_APP_BACKEND_HEADERS_Content_Type
-      axios.defaults.headers.post['Access-Control-Allow-Origin'] =
-        process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
       //전송 Header에 추가
       const headers = {
-        // Authorization:
-        //   'Bearer ' +
-        //   localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
+        // 'Content-Type': process.env.VUE_APP_BACKEND_HEADERS_Content_Type,
+        // 'Access-Control-Allow-Origin':
+        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin,
+        // 'Access-Control-Allow-Methods':
+        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Method,
+        Authorization:
+          'Bearer ' +
+          localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
       }
       return await axios
         .post(url, params, headers)
diff --git a/src/components/todo/ListComponent.vue b/src/components/todo/ListComponent.vue
index d757124..44e56e6 100644
--- a/src/components/todo/ListComponent.vue
+++ b/src/components/todo/ListComponent.vue
@@ -11,28 +11,44 @@
               >
             </label>
             <b-form-select
-              v-model="selectMode"
-              :options="selectModes"
+              v-model="selectedRowMode"
+              :options="selectedRowModes"
             ></b-form-select>
           </b-input-group>
         </b-col>
-        <b-col cols="6" class="border">
+        <b-col cols="4" class="border">
           <b-input-group>
             <label class="input-group-text">
               <b-form-checkbox-group
                 class="d-flex flex-nowrap"
                 v-model="searchFields"
-                :options="searchOptions"
+                :options="searchFieldOptions"
               ></b-form-checkbox-group>
             </label>
             <b-form-input
               v-model="search"
               type="text"
               placeholder="검색어"
+              @keydown.enter="searchClick"
             ></b-form-input>
             <b-button @click="searchClick">검색</b-button>
           </b-input-group>
         </b-col>
+        <b-col cols="4" class="border">
+          <b-input-group>
+            <label class="input-group-text">
+              <b-form-select
+                class="d-flex flex-nowrap"
+                v-model="filterDateField"
+                :options="filterDateFieldOptions"
+              ></b-form-select>
+            </label>
+            <b-form-input v-model="filterDateStart" type="date"></b-form-input>
+            ~
+            <b-form-input v-model="filterDateEnd" type="date"></b-form-input>
+            <b-button @click="dateClick">선택</b-button>
+          </b-input-group>
+        </b-col>
         <b-col class="border">
           <b-input-group class="justify-content-end">
             <label class="input-group-text">줄수</label>
@@ -53,12 +69,11 @@
           :per-page="perPage"
           :sort-by.sync="sortBy"
           :sort-desc.sync="sortDesc"
-          :sort-direction="sortDirection"
           @sort-changed="sortClick"
           label-sort-asc=""
           label-sort-desc=""
           label-sort-clear=""
-          :select-mode="selectMode"
+          :select-mode="selectedRowMode"
           selectable
           @row-selected="rowSelectedToggle"
           :busy="isBusy"
@@ -71,6 +86,14 @@
           :dark="commonTableAttributes.dark"
           :head-variant="commonTableAttributes.headVariant"
         >
+          <!-- Column별 Filter용 -->
+          <template #thead-top>
+            <b-tr>
+              <b-th colspan="4"> </b-th>
+              <b-th>Type 2</b-th>
+              <b-th></b-th>
+            </b-tr>
+          </template>
           <!-- 비/선택 Row를 토글용 -->
           <template #cell(rowSelect)="{ rowSelected }">
             <template v-if="rowSelected">
@@ -213,19 +236,25 @@ export default {
       isBusy: false,
       sortBy: 'id',
       sortDesc: true,
-      sortDirection: 'desc',
-      search: null, //DB검색
+      search: null,
       searchFields: ['title', 'content'],
-      searchOptions: [
+      searchFieldOptions: [
         { text: '제목', value: 'title' },
-        { text: '내용', value: 'content' },
+        { text: '내용', value: 'content' }
+      ],
+      filter: null,
+      filterField: null,
+      filterDateStart: null,
+      filterDateEnd: null,
+      filterDateField: 'createdAt',
+      filterDateFieldOptions: [
         { text: '수정일', value: 'updatedAt' },
         { text: '등록일', value: 'createdAt' }
       ],
-      selectModes: ['multi', 'single', 'range'],
-      selectMode: 'multi',
-      selectedAllToggle: false,
-      selectedRows: []
+      selectedRows: [],
+      selectedRowAllToggle: false,
+      selectedRowMode: 'multi',
+      selectedRowModes: ['multi', 'single', 'range']
     }
   },
   setup: function () {},
@@ -239,12 +268,16 @@ export default {
       this.isBusy = true
       const results = await this.callAPI('/todo', {
         params: {
+          page: page,
+          perPage: this.perPage,
           sortBy: this.sortBy,
           sortDesc: this.sortDesc,
           searchFields: this.searchFields,
           search: this.search,
-          page: page,
-          perPage: this.perPage
+          filter: this.filter,
+          filterField: this.filterField,
+          filterDateStart: this.filterDateStart,
+          filterDateEnd: this.filterDateEnd
         }
       })
       //console.log(JSON.stringify(results))
@@ -276,6 +309,11 @@ export default {
       this.sortDesc = event.sortDesc
       this.getDatas()
     },
+    dateClick(event) {
+      console.log(event)
+      this.filterField = this.filterDateField
+      this.getDatas()
+    },
     busyToggle() {
       this.isBusy = !this.isBusy
     },
@@ -283,12 +321,12 @@ export default {
       this.selectedRows = selectedRow
     },
     rowSelectAllToggle() {
-      if (this.selectedAllToggle) {
+      if (this.selectedRowAllToggle) {
         this.$refs.todoTable.clearSelected()
-        this.selectedAllToggle = false
+        this.selectedRowAllToggle = false
       } else {
         this.$refs.todoTable.selectAllRows()
-        this.selectedAllToggle = true
+        this.selectedRowAllToggle = true
       }
     },
     // rowSelectSet(id) {
@@ -302,15 +340,16 @@ export default {
     async callAPI(url, params) {
       console.log('CallAPI..', [url, params])
       axios.defaults.baseURL = process.env.VUE_APP_BACKEND_HOST
-      axios.defaults.headers.post['Content-Type'] =
-        process.env.VUE_APP_BACKEND_HEADERS_Content_Type
-      axios.defaults.headers.post['Access-Control-Allow-Origin'] =
-        process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin
       //전송 Header에 추가
       const headers = {
-        // Authorization:
-        //   'Bearer ' +
-        //   localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
+        // 'Content-Type': process.env.VUE_APP_BACKEND_HEADERS_Content_Type,
+        // 'Access-Control-Allow-Origin':
+        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Origin,
+        // 'Access-Control-Allow-Methods':
+        //   process.env.VUE_APP_BACKEND_HEADERS_Access_Control_Allow_Method,
+        Authorization:
+          'Bearer ' +
+          localStorage.getItem(process.env.VUE_APP_LOCALSTORAGE_NAME)
       }
       return await axios
         .get(url, params, headers)