Vue2_Frontend 수정1...

2022-08-31 17:10:54 +09:00 · 2022-08-31 17:10:54 +09:00 · fd6001a035
commit fd6001a035
parent 1a3426a7cb
5 changed files with 86 additions and 53 deletions
--- 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"
--- 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"]
  }
 }
--- 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)
--- 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)
--- 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)