vue2_frontend...

src/components/todo/ListComponent.vue

@@ -49,7 +49,7 @@
     <b-table
       ref="BTable"
       :page="page"
-      :items="getRows"
+      :items="rows"
       :fields="fields"
       :per-page="perPage"
       :sort-by.sync="sortBy"
@@ -60,7 +60,6 @@
       label-sort-clear=""
       :select-mode="selectedRowMode"
       selectable
-      @row-selected="rowSelectedToggle"
       :sticky-header="commonTableAttributes.stickyHeader"
       :no-border-collapse="commonTableAttributes.noBorderCollapse"
       :striped="commonTableAttributes.striped"
@@ -88,7 +87,7 @@
       <!-- Row의 Index 이용한 번호 출력용 -->
       <template #cell(id)="row">
         <b-link ref="edit/{{row.item.id}}">
-          {{ getTotal - (page * perPage + row.index) + Number(perPage) }}
+          {{ total - (page * perPage + row.index) + Number(perPage) }}
         </b-link>
       </template>
       <!-- 제목부분 출력용 -->
@@ -117,12 +116,12 @@
     <b-container fluid>
       <b-row>
         <b-col>
-          <p>{{ selectedRows }}</p>
+          <p>{{ selected }}</p>
         </b-col>
         <b-col>
           <b-pagination
             :page="page"
-            :total-rows="getTotal"
+            :total-rows="total"
             :per-page="perPage"
             @page-click="pageClick"
             last-number
@@ -142,7 +141,16 @@ const todoStore = createNamespacedHelpers('TodoStore')
 export default {
   components: {},
   computed: {
-    ...todoStore.mapGetters(['getTotal', 'getRows'])
+    ...todoStore.mapState(['total', 'rows', 'selected']),
+    selected: {
+      get() {
+        return this.$store.state.selected
+      },
+      set(value) {
+        console.log(value)
+        this.$store.commit('AuthStore/setSelected', value)
+      }
+    }
   },
   created: function () {
     this.setDatas()
@@ -294,9 +302,6 @@ export default {
       this.filterField = 'is_done'
       this.setDatas()
     },
-    rowSelectedToggle(selectedRow) {
-      this.selectedRows = selectedRow
-    },
     rowSelectAllToggle() {
       if (this.selectedRowAllToggle) {
         this.$refs.BTable.clearSelected()

src/components/todo/ListComponentOriginal.vue

@@ -0,0 +1,320 @@
+<template>
+  <div>
+    <!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
+    <b-container fluid>
+      <b-row>
+        <b-col cols="6" 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-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>
+            <b-form-select
+              class="d-flex flex-nowrap"
+              v-model="filterDateField"
+              :options="filterDateFieldOptions"
+            ></b-form-select>
+            <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>
+            <b-form-select
+              v-model="perPage"
+              :options="perPageOptions"
+              @change="perPageClick"
+            ></b-form-select>
+          </b-input-group>
+        </b-col>
+      </b-row>
+    </b-container>
+    <b-table
+      ref="BTable"
+      :page="page"
+      :items="rows"
+      :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=""
+      :select-mode="selectedRowMode"
+      selectable
+      @row-selected="rowSelectedToggle"
+      :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(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}}">
+          {{ total - (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="total"
+            :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>
+import todoService from '@/service/todo.service'
+import { createNamespacedHelpers } from 'vuex'
+const todoStore = createNamespacedHelpers('TodoStore')
+export default {
+  components: {},
+  computed: {
+    ...todoStore.mapStates(['total', 'rows'])
+  },
+  created: function () {
+    this.setDatas()
+  },
+  data: function () {
+    return {
+      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
+        }
+      ],
+      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 }
+      ],
+      // 속성옵션
+      commonTableAttributes: {
+        stickyHeader: '50%',
+        //noBorderCollapse: false,
+        striped: true,
+        hover: true,
+        noLocalSorting: true,
+        bordered: true,
+        dark: false,
+        headVariant: 'light'
+      },
+      sortBy: 'id',
+      sortDesc: true,
+      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: '',
+      selectedRows: [],
+      selectedRowAllToggle: false,
+      selectedRowMode: 'multi' //'multi', 'single', 'range'
+    }
+  },
+  methods: {
+    async setDatas(page = 1) {
+      try {
+        const params = {
+          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
+        }
+        const datas = await todoService.getDatas(params)
+        this.$store.dispatch('TodoStore/setDatas', datas)
+      } catch (e) {
+        alert(e.message)
+      }
+    },
+    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()
+    },
+    sortClick(event) {
+      //console.log(event)
+      this.sortBy = event.sortBy
+      this.sortDesc = event.sortDesc
+      this.setDatas()
+    },
+    dateClick() {
+      this.filterField = this.filterDateField
+      this.setDatas()
+    },
+    isDoneClick() {
+      this.filter = this.filterIsDone
+      this.filterField = 'is_done'
+      this.setDatas()
+    },
+    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)
+    // }
+  }
+}
+</script>
+<style scoped></style>

src/store/todo.store.js

@@ -1,6 +1,7 @@
 const state = {
   total: 0,
-  rows: []
+  rows: [],
+  selected: []
 }
 const getters = {
   getTotal: function (state) {
@@ -14,6 +15,9 @@ const mutations = {
   setDatas: async function (state, datas) {
     state.total = datas.total
     state.rows = datas.rows
+  },
+  setSelected: function (state, datas) {
+    state.selected = datas
   }
 }
 const actions = {