From 5fd60169bfbfc6b9fe48e8b4184be36dac1f3454 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: Thu, 8 Sep 2022 13:42:12 +0900
Subject: [PATCH] Store_Vuex init...

---
 src/components/common/ListComponent.vue       | 175 ++++++++++++++++++
 src/components/common/TableComponent          | 104 -----------
 src/components/common/TableComponent.vue      | 144 ++++++++++++++
 ...aderComponent => TableHeaderComponent.vue} |  55 ++----
 4 files changed, 335 insertions(+), 143 deletions(-)
 create mode 100644 src/components/common/ListComponent.vue
 delete mode 100644 src/components/common/TableComponent
 create mode 100644 src/components/common/TableComponent.vue
 rename src/components/common/{TableHeaderComponent => TableHeaderComponent.vue} (55%)

diff --git a/src/components/common/ListComponent.vue b/src/components/common/ListComponent.vue
new file mode 100644
index 0000000..b93eca4
--- /dev/null
+++ b/src/components/common/ListComponent.vue
@@ -0,0 +1,175 @@
+<template>
+  <div>
+    <TableHeaderComponent
+      :searchFields="searchFields"
+      :search="search"
+      :searchFieldOptions="searchFieldOptions"
+      :filterDateField="filterDateField"
+      :filterDateFieldOptions="filterDateFieldOptions"
+      :filterDateStart="filterDateStart"
+      :filterDateEnd="filterDateEnd"
+      :perPage="perPage"
+      :perPageOptions="perPageOptions"
+    />
+    <TableComponent
+      :getTotal="getTotal"
+      :getRows="getRows"
+      :fields="fields"
+      :tableAttributes="tableAttributes"
+      :page="page"
+      :perPage="perPage"
+    />
+  </div>
+</template>
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const todoStore = createNamespacedHelpers('TodoStore')
+import TableComponent from '@/components/common/TableComponent.vue'
+import TableHeaderComponent from '@/components/common/TableHeaderComponent.vue'
+export default {
+  components: { TableHeaderComponent, TableComponent },
+  computed: {
+    ...todoStore.mapGetters(['getTotal', 'getRows'])
+  },
+  created: function () {
+    this.setDatas()
+  },
+  data: function () {
+    return {
+      //Table용
+      fields: [
+        {
+          key: 'rowSelect',
+          label: '✓',
+          thStyle: { width: '55px', backgroundColor: 'yellow' }
+        },
+        {
+          key: 'id',
+          label: '번호',
+          thStyle: { width: '75px' },
+          variant: 'primary',
+          sortable: true
+        },
+        {
+          key: 'title',
+          label: '제목',
+          sortable: true
+        },
+        {
+          key: 'content',
+          label: '내용',
+          sortable: true
+        },
+        {
+          key: 'is_done',
+          label: '사용여부',
+          thStyle: { width: '105px' },
+          formatter: (value) => {
+            return value == true ? 'YES' : 'NO'
+          },
+          Options: [
+            { text: '사용여부 선택', value: '' },
+            { text: 'YES', value: true },
+            { text: 'NO', value: false }
+          ],
+          sortable: true,
+          sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
+        },
+        // { key: 'updateAt', label: '수정일' },
+        {
+          key: 'createdAt',
+          label: '등록일',
+          thStyle: { width: '125px' },
+          formatter: (value) => {
+            return value.replace(
+              /([0-9]{4})-([0-9]{2})-([0-9]{2}).*/gi,
+              '$1-$2-$3'
+            )
+          },
+          sortable: true,
+          sortByFormatted: true //fomatter결과에따른 Sort가 필요시 true
+        }
+      ],
+      // 속성옵션
+      tableAttributes: {
+        stickyHeader: '50%',
+        //noBorderCollapse: false,
+        striped: true,
+        hover: true,
+        noLocalSorting: true,
+        bordered: true,
+        dark: false,
+        headVariant: 'light'
+      },
+      //Table용
+      page: 1, // 현재 페이지
+      perPage: process.env.VUE_APP_TABLE_DEFAULT_PERPAGE, // 페이지당 보여줄 갯수
+      perPageOptions: [
+        { text: '5줄', value: 5 },
+        { text: '10줄', value: 10 },
+        { text: '30줄', value: 30 },
+        { text: '60줄', value: 60 },
+        { text: '100줄', value: 100 }
+      ],
+      search: null,
+      searchFields: ['title', 'content'],
+      searchFieldOptions: [
+        { text: '제목', value: 'title' },
+        { text: '내용', value: 'content' }
+      ],
+      filter: null,
+      filterField: null,
+      filterDateStart: null,
+      filterDateEnd: null,
+      filterDateField: 'createdAt',
+      filterDateFieldOptions: [
+        { text: '수정일', value: 'updatedAt' },
+        { text: '등록일', value: 'createdAt' }
+      ],
+      filterIsDone: ''
+    }
+  },
+  methods: {
+    setDatas(page = 1) {
+      this.$store
+        .dispatch('TodoStore/setData', {
+          page: page,
+          perPage: this.perPage,
+          sortBy: this.sortBy,
+          sortDesc: this.sortDesc,
+          searchFields: this.searchFields,
+          search: this.search,
+          filter: this.filter,
+          filterField: this.filterField,
+          filterDateStart: this.filterDateStart,
+          filterDateEnd: this.filterDateEnd
+        })
+        .catch((error) => {
+          alert(error)
+        })
+    },
+    searchClick() {
+      this.setDatas()
+    },
+    pageClick(event, page) {
+      //console.log(event)
+      this.setDatas(page)
+      // event.preventDefault()
+    },
+    perPageClick(perPage) {
+      this.perPage = perPage
+      //console.log(this.perPage)
+      this.setDatas()
+    },
+    dateClick() {
+      this.filterField = this.filterDateField
+      this.setDatas()
+    },
+    isDoneClick() {
+      this.filter = this.filterIsDone
+      this.filterField = 'is_done'
+      this.setDatas()
+    }
+  }
+}
+</script>
diff --git a/src/components/common/TableComponent b/src/components/common/TableComponent
deleted file mode 100644
index da38f3a..0000000
--- a/src/components/common/TableComponent
+++ /dev/null
@@ -1,104 +0,0 @@
-<template>
-  <!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
-  <b-table
-    ref="BTable"
-    :page="page"
-    :items="items"
-    :fields="fields"
-    :per-page="perPage"
-    :sort-by.sync="sortBy"
-    :sort-desc.sync="sortDesc"
-    @sort-changed="sortClick"
-    selectable
-    select-mode="multi"
-    @row-selected="selectedRowToggle"
-    :sticky-header="commonTableAttributes.stickyHeader"
-    :no-border-collapse="commonTableAttributes.noBorderCollapse"
-    :striped="commonTableAttributes.striped"
-    :hover="commonTableAttributes.hover"
-    :no-local-sorting="commonTableAttributes.noLocalSorting"
-    :bordered="commonTableAttributes.bordered"
-    :dark="commonTableAttributes.dark"
-    :head-variant="commonTableAttributes.headVariant"
-  >
-    <!-- Field별 Filter용 -->
-    <template #head(is_done)="fields">
-      <b-form-select
-        :value="filterIsDone"
-        :options="fields.field.Options"
-        @change="isDoneClick"
-      ></b-form-select>
-    </template>
-    <!-- 비/선택 Row 토글용 -->
-    <template #cell(rowSelect)="{ rowSelected }">
-      <template v-if="rowSelected">✓</template>
-    </template>
-    <!-- Row의 Index 이용한 번호 출력용 -->
-    <template #cell(id)="row">
-      <b-link ref="edit/{{row.item.id}}">
-        {{ total - (page * perPage + row.index) + parseInt(perPage) }}
-      </b-link>
-    </template>
-    <!-- 제목부분 출력용 -->
-    <template #cell(title)="row">
-      {{ row.item.title }}
-    </template>
-    <!-- 상세 내용 출력용 -->
-    <template #cell(content)="row">
-      <b-button size="sm" @click="row.toggleDetails" class="mr-2">
-        [{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
-      </b-button>
-    </template>
-    <template #row-details="row">
-      <b-card>
-        <b-row>
-          <b-col v-html="row.item.content"></b-col>
-        </b-row>
-        <b-button size="sm" @click="row.toggleDetails">숨기기</b-button>
-      </b-card>
-    </template>
-    <!-- 사용여부 출력용 -->
-    <template #cell(is_done)="row">
-      {{ row.value }}
-    </template>
-  </b-table>
-</template>
-<script>
-export default {
-  name: 'TableComponent',
-  props: [
-    'fields',
-    'items',
-    'total',
-    'page',
-    'perPage',
-    'selectedRows',
-    'filterIsDone'
-  ],
-  data: function () {
-    return {
-      perPageOptions: [
-        { text: '5줄', value: 5 },
-        { text: '10줄', value: 10 },
-        { text: '30줄', value: 30 },
-        { text: '60줄', value: 60 },
-        { text: '100줄', value: 100 }
-      ],
-      // 속성옵션
-      commonTableAttributes: {
-        stickyHeader: '50%',
-        //noBorderCollapse: false,
-        striped: true,
-        hover: true,
-        noLocalSorting: true,
-        bordered: true,
-        dark: false,
-        headVariant: 'light'
-      },
-      sortBy: 'id',
-      sortDesc: true
-    }
-  }
-}
-</script>
-<style scoped></style>
diff --git a/src/components/common/TableComponent.vue b/src/components/common/TableComponent.vue
new file mode 100644
index 0000000..01adc31
--- /dev/null
+++ b/src/components/common/TableComponent.vue
@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <b-table
+      ref="BTable"
+      :page="page"
+      :items="getRows"
+      :fields="fields"
+      :per-page="perPage"
+      :sort-by.sync="sortBy"
+      :sort-desc.sync="sortDesc"
+      @sort-changed="sortClick"
+      label-sort-asc=""
+      label-sort-desc=""
+      label-sort-clear=""
+      selectable
+      :select-mode="selectedRowMode"
+      @row-selected="rowSelectedToggle"
+      :sticky-header="tableAttributes.stickyHeader"
+      :no-border-collapse="tableAttributes.noBorderCollapse"
+      :striped="tableAttributes.striped"
+      :hover="tableAttributes.hover"
+      :no-local-sorting="tableAttributes.noLocalSorting"
+      :bordered="tableAttributes.bordered"
+      :dark="tableAttributes.dark"
+      :head-variant="tableAttributes.headVariant"
+    >
+      <!-- Field별 Filter용 -->
+      <template #head(rowSelect)>
+        <b-form-checkbox @change="rowSelectAllToggle">All</b-form-checkbox>
+      </template>
+      <template #head(is_done)="fields">
+        <b-form-select
+          v-model="filterIsDone"
+          :options="fields.field.Options"
+          @change="isDoneClick"
+        ></b-form-select>
+      </template>
+      <!-- 비/선택 Row 토글용 -->
+      <template #cell(rowSelect)="{ rowSelected }">
+        <template v-if="rowSelected">✓</template>
+      </template>
+      <!-- Row의 Index 이용한 번호 출력용 -->
+      <template #cell(id)="row">
+        <b-link ref="edit/{{row.item.id}}">
+          {{ getTotal - (page * perPage + row.index) + Number(perPage) }}
+        </b-link>
+      </template>
+      <!-- 제목부분 출력용 -->
+      <template #cell(title)="row">
+        {{ row.item.title }}
+      </template>
+      <!-- 상세 내용 출력용 -->
+      <template #cell(content)="row">
+        <b-button size="sm" @click="row.toggleDetails" class="mr-2">
+          [{{ row.item.id }}] {{ row.detailsShowing ? '숨기기' : '보기' }}
+        </b-button>
+      </template>
+      <template #row-details="row">
+        <b-card>
+          <b-row>
+            <b-col v-html="row.item.content"></b-col>
+          </b-row>
+          <b-button size="sm" @click="row.toggleDetails">숨기기</b-button>
+        </b-card>
+      </template>
+      <!-- 사용여부 출력용 -->
+      <template #cell(is_done)="row">
+        {{ row.value }}
+      </template>
+    </b-table>
+    <b-container fluid>
+      <b-row>
+        <b-col>
+          <p>{{ selectedRows }}</p>
+        </b-col>
+        <b-col>
+          <b-pagination
+            :page="page"
+            :total-rows="getTotal"
+            :per-page="perPage"
+            @page-click="pageClick"
+            last-number
+            class="justify-content-center"
+          >
+          </b-pagination>
+        </b-col>
+        <b-col> </b-col>
+      </b-row>
+    </b-container>
+  </div>
+</template>
+<script>
+// 참조 : https://vuejsexamples.com/vuejs-tables-and-select-all-checkbox/
+export default {
+  name: 'TableHeaderComponent',
+  props: [
+    'getTotal',
+    'getRows',
+    'fields',
+    'tableAttributes',
+    'page',
+    'perPage'
+  ],
+  components: {},
+  data: function () {
+    return {
+      sortBy: 'id',
+      sortDesc: true,
+      selectedRows: [],
+      selectedRowMode: 'multi',
+      selectedRowAllToggle: false
+    }
+  },
+  method: {
+    rowSelectedToggle(selectedRow) {
+      this.selectedRows = selectedRow
+    },
+    rowSelectAllToggle() {
+      if (this.selectedRowAllToggle) {
+        this.$refs.BTable.clearSelected()
+        this.selectedRowAllToggle = false
+      } else {
+        this.$refs.BTable.selectAllRows()
+        this.selectedRowAllToggle = true
+      }
+    },
+    // rowSelectSet(id) {
+    //   // Rows are indexed from 0, so the third row is index 2
+    //   this.$refs.BTable.selectRow(id)
+    // },
+    // rowSelectUnSet(id) {
+    //   // Rows are indexed from 0, so the third row is index 2
+    //   this.$refs.BTable.unselectRow(id)
+    // }
+    sortClick(event) {
+      //console.log(event)
+      this.sortBy = event.sortBy
+      this.sortDesc = event.sortDesc
+      //this.setDatas()
+    }
+  }
+}
+</script>
+<style scoped></style>
diff --git a/src/components/common/TableHeaderComponent b/src/components/common/TableHeaderComponent.vue
similarity index 55%
rename from src/components/common/TableHeaderComponent
rename to src/components/common/TableHeaderComponent.vue
index feede3a..96c0ea2 100644
--- a/src/components/common/TableHeaderComponent
+++ b/src/components/common/TableHeaderComponent.vue
@@ -1,26 +1,17 @@
 <template>
   <b-container fluid>
     <b-row>
-      <b-col class="border">
+      <b-col>
         <b-input-group>
-          <label class="input-group-text">
-            <b-form-checkbox @change="selectedRowAllToggle"
-              >All</b-form-checkbox
-            >
-          </label>
-        </b-input-group>
-      </b-col>
-      <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="searchFieldOptions"
-            ></b-form-checkbox-group>
-          </label>
+          <b-form-select
+            class="d-flex flex-nowrap"
+            :value="searchFields"
+            :options="searchFieldOptions"
+            multiple
+            :select-size="1"
+          ></b-form-select>
           <b-form-input
-            v-model="search"
+            :value="search"
             type="text"
             placeholder="검색어"
             @keydown.enter="searchClick"
@@ -28,7 +19,7 @@
           <b-button @click="searchClick">검색</b-button>
         </b-input-group>
       </b-col>
-      <b-col cols="4" class="border">
+      <b-col>
         <b-input-group>
           <b-form-select
             class="d-flex flex-nowrap"
@@ -41,7 +32,7 @@
           <b-button @click="dateClick">선택</b-button>
         </b-input-group>
       </b-col>
-      <b-col class="border">
+      <b-col>
         <b-input-group class="justify-content-end">
           <label class="input-group-text">줄수</label>
           <b-form-select
@@ -59,29 +50,15 @@ export default {
   name: 'TableHeaderComponent',
   props: [
     'searchFields',
+    'search',
     'searchFieldOptions',
     'filterDateField',
     'filterDateFieldOptions',
     'filterDateStart',
-    'filterDateEnd'
-  ],
-  data: function () {
-    return {
-      perPageOptions: [
-        { text: '5줄', value: 5 },
-        { text: '10줄', value: 10 },
-        { text: '30줄', value: 30 },
-        { text: '60줄', value: 60 },
-        { text: '100줄', value: 100 }
-      ],
-      search: null,
-      filter: null,
-      filterField: null,
-      filterDateStart: null,
-      filterDateEnd: null,
-      selectedRowAll: false
-    }
-  }
+    'filterDateEnd',
+    'perPage',
+    'perPageOptions'
+  ]
 }
 </script>
 <style scoped></style>