From b3433bcef68e420da4ffcc668ea10960b9485c51 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, 25 Aug 2022 15:26:15 +0900
Subject: [PATCH] vue2_frontend init..

---
 src/components/__VLS_template.1.js      |   7 -
 src/components/__VLS_template.js        |   7 -
 src/components/common/ListComponent.vue |   3 +
 src/views/todo/listView.vue             | 195 +++++++++++++++---------
 4 files changed, 127 insertions(+), 85 deletions(-)
 delete mode 100644 src/components/__VLS_template.1.js
 delete mode 100644 src/components/__VLS_template.js
 create mode 100644 src/components/common/ListComponent.vue

diff --git a/src/components/__VLS_template.1.js b/src/components/__VLS_template.1.js
deleted file mode 100644
index 00a53f2..0000000
--- a/src/components/__VLS_template.1.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default (await import('vue')).defineComponent({
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-})
-const __VLS_template = () => ({})
diff --git a/src/components/__VLS_template.js b/src/components/__VLS_template.js
deleted file mode 100644
index 00a53f2..0000000
--- a/src/components/__VLS_template.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default (await import('vue')).defineComponent({
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-})
-const __VLS_template = () => ({})
diff --git a/src/components/common/ListComponent.vue b/src/components/common/ListComponent.vue
new file mode 100644
index 0000000..ce3da53
--- /dev/null
+++ b/src/components/common/ListComponent.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>ListComponent</div>
+</template>
diff --git a/src/views/todo/listView.vue b/src/views/todo/listView.vue
index 289edba..1fec79c 100644
--- a/src/views/todo/listView.vue
+++ b/src/views/todo/listView.vue
@@ -3,57 +3,75 @@
   <div>
     <b-container fluid>
       <b-row>
-        <b-col> </b-col>
-        <b-col>
-          <b-form-group>
-            <b-input-group>
-              <label class="input-group-text">Filter</label>
-              <b-form-input
-                id="filter-input"
-                v-model="filter"
-                type="text"
-                placeholder="Type to Filter"
-              ></b-form-input>
-              <b-input-group-append>
-                <b-button :disabled="!filter" @click="filter = ''"
-                  >Clear</b-button
-                >
-              </b-input-group-append>
-            </b-input-group>
-          </b-form-group>
+        <b-col class="border">
+          <b-input-group>
+            <label class="input-group-text">
+              <b-form-checkbox @change="rowSelectAllToggle"
+                >All</b-form-checkbox
+              >
+            </label>
+            <b-form-select
+              v-model="selectMode"
+              :options="selectModes"
+            ></b-form-select>
+          </b-input-group>
         </b-col>
-        <b-col>
-          <div class="input-group justify-content-end">
+        <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="filterOn"
+                :options="filterOptions"
+              ></b-form-checkbox-group>
+            </label>
+            <b-form-input
+              v-model="filter"
+              type="text"
+              placeholder="Type to Filter"
+            ></b-form-input>
+            <b-button :disabled="!filter" @click="filter = ''">Clear</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"
             ></b-form-select>
-          </div>
+          </b-input-group>
         </b-col>
       </b-row>
       <b-row class="overflow-auto">
-        <b-table
+        <b-table-lite
+          ref="selectableTable"
           :items="items"
           :fields="fields"
           :per-page="perPage"
           :current-page="currentPage"
           :filter="filter"
           :filter-included-fields="filterOn"
+          @filtered="onFiltered"
           :sort-by.sync="sortBy"
           :sort-desc.sync="sortDesc"
           :sort-direction="sortDirection"
-          :busy="isBusy"
-          :striped="table_Attributes.striped"
-          :hover="table_Attributes.hover"
-          :bordered="table_Attributes.bordered"
-          :dark="table_Attributes.dark"
-          :head-variant="table_Attributes.headVariant"
           label-sort-asc=""
           label-sort-desc=""
           label-sort-clear=""
-          @filtered="onFiltered"
+          :select-mode="selectMode"
+          selectable
+          @row-selected="rowSelectedToggle"
+          :busy="isBusy"
+          :sticky-header="commonTableAttributes.stickyHeader"
+          :no-border-collapse="commonTableAttributes.noBorderCollapse"
+          :striped="commonTableAttributes.striped"
+          :hover="commonTableAttributes.hover"
+          :bordered="commonTableAttributes.bordered"
+          :dark="commonTableAttributes.dark"
+          :head-variant="commonTableAttributes.headVariant"
         >
+          <!-- 각 Cell/Field별 속성 추가용 -->
           <template #table-colgroup="scope">
             <col
               v-for="field in scope.fields"
@@ -61,22 +79,27 @@
               :style="{ width: field.width }"
             />
           </template>
-          <template #cell(selected)="row">
-            <input
-              type="checkbox"
-              :value="row.item.id"
-              @change="checkedIdsToggle(row.item.id)"
-            />
+          <!-- 비/선택 Row를 토글용 -->
+          <template #cell(rowSelect)="{ rowSelected }">
+            <template v-if="rowSelected">
+              <span aria-hidden="true">✓</span>
+            </template>
+            <template v-else>
+              <span aria-hidden="true">&nbsp;</span>
+            </template>
           </template>
+          <!-- Row의 Index를 이용한 번호 출력 -->
           <template #cell(index)="row">
             {{ total - (currentPage * perPage + row.index) + perPage }}
           </template>
+          <!-- 제목부분 출력용 -->
           <template #cell(title)="row">
             {{ row.item.title }}
             <b-button size="sm" @click="row.toggleDetails" class="mr-2">
               {{ row.detailsShowing ? 'Hide' : 'Show' }} Details
             </b-button>
           </template>
+          <!-- 상세 내용 출력용 -->
           <template #row-details="row">
             <b-card>
               <b-row class="mb-2">
@@ -87,13 +110,14 @@
               >
             </b-card>
           </template>
+          <!-- 데이터 로딩중 출력용 -->
           <template #table-busy>
             <div class="text-center text-danger my-2">
               <b-spinner class="align-middle"></b-spinner>
               <strong>Loading...</strong>
             </div>
           </template>
-        </b-table>
+        </b-table-lite>
       </b-row>
       <b-row>
         <b-col>
@@ -104,52 +128,59 @@
           ></b-pagination>
         </b-col>
         <b-col>
-          <div class="input-group">
+          <b-input-group>
             <label class="input-group-text">DB</label>
             <input type="text" class="form-control" v-model="search" />
-            <span class="input-group-text" @click="searchClick">검색</span>
-          </div>
+            <span class="input-group-text" @click="searchForDB">검색</span>
+          </b-input-group>
         </b-col>
         <b-col>
-          <div class="input-group justify-content-end">
+          <b-input-group class="justify-content-end">
             <b-button @click="busyToggle">Toggle Busy State</b-button>
-          </div>
+          </b-input-group>
         </b-col>
       </b-row>
     </b-container>
+    <p>
+      Selected Rows:<br />
+      {{ selectedRows }}
+    </p>
   </div>
 </template>
-
 <script>
 // 참조 : https://vuejsexamples.com/vuejs-tables-and-select-all-checkbox/
 import axios from 'axios'
+// import ListComponent from '@/components/common/ListComponent.vue'
 axios.defaults.baseURL = 'http://localhost:3000'
 axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
 axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*'
 export default {
-  components: {},
-  data() {
+  components: {
+    //ListComponent: ListComponent
+  },
+  data: function () {
     return {
       items: [],
       fields: [
+        { key: 'rowSelect', label: '✓', width: '55px' },
         {
-          key: 'selected',
-          label: '',
-          width: '10px'
+          key: 'index',
+          label: '번호',
+          width: '55px',
+          variant: 'primary'
         },
-        { key: 'index', label: '번호', width: '55px' },
         {
           key: 'title',
           label: '제목',
           sortable: true,
-          sortDirection: 'desc',
+          sortByFormatted: true,
           filterByFormatted: true
         },
         // {
         //   key: 'content',
         //   label: '내용',
         //   sortable: true,
-        //   sortDirection: 'desc',
+        //   sortByFormatted: true,
         //   filterByFormatted: true
         // },
         {
@@ -161,13 +192,12 @@ export default {
             return value ? 'Yes' : 'No'
           },
           sortable: true,
-          sortByFormatted: true,
           filterByFormatted: true
         },
         // { key: 'updateAt', label: '수정일' },
         {
           key: 'createdAt',
-          label: '登録日時',
+          label: '등록일',
           width: '105px',
           formatter: (value) => {
             return value.replace(
@@ -175,7 +205,8 @@ export default {
               '$1-$2-$3'
             )
           },
-          sortable: true
+          sortable: true,
+          sortByFormatted: true
           // filterByFormatted: true
         }
       ],
@@ -184,31 +215,43 @@ export default {
       perPageOptions: [
         { value: 5, text: '5줄' },
         { value: 10, text: '10줄' },
-        { value: 15, text: '15줄' },
-        { value: 100, text: 'Show a lot' }
+        { value: 30, text: '30줄' },
+        { value: 60, text: '60줄' },
+        { value: 100, text: '100줄' }
       ],
       currentPage: 1, // 현재 페이지
+      search: null, //DB검색
       // 속성옵션
-      table_Attributes: {
+      commonTableAttributes: {
+        stickyHeader: false,
+        noBorderCollapse: false,
         striped: true,
         hover: true,
         bordered: true,
         dark: false,
-        headVariant: 'null'
+        headVariant: 'light'
       },
       isBusy: false,
       sortBy: 'id',
       sortDesc: false,
       sortDirection: 'asc',
       filter: null,
-      filterOn: [],
-      search: null,
-      checkedIds: []
+      filterOn: ['title', 'content'],
+      filterOptions: [
+        { text: '제목', value: 'title' },
+        { text: '내용', value: 'content' },
+        { text: '수정일', value: 'updateAt', disabled: true },
+        { text: '등록일', value: 'createdAt' }
+      ],
+      selectModes: ['multi', 'single', 'range'],
+      selectMode: 'multi',
+      selectedAllToggle: false,
+      selectedRows: []
     }
   },
-  setup() {},
-  created() {},
-  mounted() {
+  setup: function () {},
+  created: function () {},
+  mounted: function () {
     // var vm = this
     // setTimeout(function () {
     //   vm.records = vm.getDatas()
@@ -238,7 +281,7 @@ export default {
       this.items = items.rows
       this.isBusy = false
     },
-    searchClick() {
+    searchForDB() {
       this.currentPage = 1
       this.getDatas()
     },
@@ -250,16 +293,26 @@ export default {
       this.total = filteredItems.length
       this.currentPage = 1
     },
-    checkedIdsToggle(id) {
-      console.log(this)
-      //console.log(this.checkedIds)
-      if (!this.checkedIds.includes(id)) {
-        this.checkedIds.push(id)
+    rowSelectedToggle(selectedRow) {
+      this.selectedRows = selectedRow
+    },
+    rowSelectAllToggle() {
+      if (this.selectedAllToggle) {
+        this.$refs.selectableTable.clearSelected()
+        this.selectedAllToggle = false
       } else {
-        this.checkedIds = this.checkedIds.filter((e) => e !== id)
+        this.$refs.selectableTable.selectAllRows()
+        this.selectedAllToggle = true
       }
-      console.log(this.checkedIds)
     }
+    // rowSelectSet(id) {
+    //   // Rows are indexed from 0, so the third row is index 2
+    //   this.$refs.selectableTable.selectRow(id)
+    // },
+    // rowSelectUnSet(id) {
+    //   // Rows are indexed from 0, so the third row is index 2
+    //   this.$refs.selectableTable.unselectRow(id)
+    // }
   },
   computed: {
     sortOptions() {