From c7fa19fcd4b9564208ace95388f492d78d2c34f3 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: Fri, 16 Sep 2022 19:03:31 +0900
Subject: [PATCH] vue2_frontend...

---
 src/components/todo/ListComponent.vue         |  17 +-
 src/components/todo/ListComponentOriginal.vue | 320 ------------------
 2 files changed, 6 insertions(+), 331 deletions(-)
 delete mode 100644 src/components/todo/ListComponentOriginal.vue

diff --git a/src/components/todo/ListComponent.vue b/src/components/todo/ListComponent.vue
index b27fb6e..ff04847 100644
--- a/src/components/todo/ListComponent.vue
+++ b/src/components/todo/ListComponent.vue
@@ -60,6 +60,7 @@
       label-sort-clear=""
       :select-mode="selectedRowMode"
       selectable
+      @row-selected="rowSelectedToggle"
       :sticky-header="commonTableAttributes.stickyHeader"
       :no-border-collapse="commonTableAttributes.noBorderCollapse"
       :striped="commonTableAttributes.striped"
@@ -116,7 +117,7 @@
     <b-container fluid>
       <b-row>
         <b-col>
-          <p>{{ selected }}</p>
+          <p>{{ selectedRows }}</p>
         </b-col>
         <b-col>
           <b-pagination
@@ -141,16 +142,7 @@ const todoStore = createNamespacedHelpers('TodoStore')
 export default {
   components: {},
   computed: {
-    ...todoStore.mapState(['total', 'rows', 'selected']),
-    selected: {
-      get() {
-        return this.$store.state.selected
-      },
-      set(value) {
-        console.log(value)
-        this.$store.commit('AuthStore/setSelected', value)
-      }
-    }
+    ...todoStore.mapStates(['total', 'rows'])
   },
   created: function () {
     this.setDatas()
@@ -302,6 +294,9 @@ export default {
       this.filterField = 'is_done'
       this.setDatas()
     },
+    rowSelectedToggle(selectedRow) {
+      this.selectedRows = selectedRow
+    },
     rowSelectAllToggle() {
       if (this.selectedRowAllToggle) {
         this.$refs.BTable.clearSelected()
diff --git a/src/components/todo/ListComponentOriginal.vue b/src/components/todo/ListComponentOriginal.vue
deleted file mode 100644
index ff04847..0000000
--- a/src/components/todo/ListComponentOriginal.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<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>