수정 4번째...

src/main.js

@@ -6,5 +6,4 @@ import { BootstrapVue3 } from 'bootstrap-vue-3'
 
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue-3/dist/bootstrap-vue-3.css'
-
 createApp(App).use(store).use(router).use(BootstrapVue3).mount('#app')

src/views/3_api/todo/listView.vue

@@ -1,85 +1,140 @@
 <template>
   <!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
   <div>
-    <div class="row">
-      <div class="col justify-content-md-center">
-        <div class="input-group">
-          <span class="input-group-text" id="basic-addon3">PerPage</span>
-          <input type="text" class="form-control" v-model="perPage" />
-        </div>
-      </div>
-      <div class="col">
-        <div class="input-group flex-nowrap">
-          <input type="text" class="form-control" v-model="searchString" />
-          <span class="input-group-text" id="basic-addon2" @click="searchClick"
-            >검색</span
+    <b-container fluid>
+      <b-row>
+        <b-col lg="6" class="my-1">
+          <b-form-group
+            label="Sort"
+            label-for="sort-by-select"
+            label-cols-sm="3"
+            label-align-sm="right"
+            label-size="sm"
+            class="mb-0"
+            v-slot="{ ariaDescribedby }"
           >
+            <b-input-group size="sm">
+              <b-form-select
+                id="sort-by-select"
+                v-model="sortBy"
+                :options="sortOptions"
+                :aria-describedby="ariaDescribedby"
+                class="w-75"
+              >
+                <template #first>
+                  <option value="">-- none --</option>
+                </template>
+              </b-form-select>
+
+              <b-form-select
+                v-model="sortDesc"
+                :disabled="!sortBy"
+                :aria-describedby="ariaDescribedby"
+                size="sm"
+                class="w-25"
+              >
+                <option :value="false">Asc</option>
+                <option :value="true">Desc</option>
+              </b-form-select>
+            </b-input-group>
+          </b-form-group>
+        </b-col>
+        <b-col sm="5" md="6" class="my-1">
+          <b-form-group
+            label="Per page"
+            label-for="per-page-select"
+            label-cols-sm="6"
+            label-cols-md="4"
+            label-cols-lg="3"
+            label-align-sm="right"
+            label-size="sm"
+            class="mb-0"
+          >
+            <b-form-select
+              id="per-page-select"
+              v-model="perPage"
+              :options="perPageOptions"
+              size="sm"
+            ></b-form-select>
+          </b-form-group>
+        </b-col>
+        <div class="col">
+          <div class="input-group flex-nowrap">
+            <input type="text" class="form-control" v-model="searchString" />
+            <span
+              class="input-group-text"
+              id="basic-addon2"
+              @click="searchClick"
+              >검색</span
+            >
+          </div>
         </div>
-      </div>
-    </div>
-    <div class="overflow-auto">
-      <b-table
-        :fields="fields"
-        :items="items"
-        :per-page="perPage"
-        :current-page="currentPage"
-        :striped="striped"
-        :hover="hover"
-        :bordered="bordered"
-        :dark="dark"
-        :head-variant="headVariant"
-      >
-        <template #cell(index)="data">
-          {{ data.index + 1 }}
-        </template>
-      </b-table>
-      <b-pagination
-        @page-click="pageClick"
-        v-model="currentPage"
-        :total-rows="getTotal"
-        :per-page="perPage"
-        first-text="First"
-        prev-text="Prev"
-        next-text="Next"
-        last-text="Last"
-        use-router
-      ></b-pagination>
-      {{ total }}
-    </div>
+      </b-row>
+      <b-row class="overflow-auto">
+        <b-table
+          :items="items"
+          :fields="fields"
+          :per-page="perPage"
+          :current-page="currentPage"
+          :filter="filter"
+          :filter-included-fields="filterOn"
+          :filtered="onFiltered"
+          :sort-direction="sortDirection"
+          :busy="isBusy"
+          :striped="striped"
+          :hover="hover"
+          :bordered="bordered"
+          :dark="dark"
+          :head-variant="headVariant"
+        >
+          <template #cell(index)="data">
+            {{ data.index + 1 }}
+          </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-pagination
+          @page-click="pageClick"
+          v-model="currentPage"
+          :total-rows="total"
+          :per-page="perPage"
+        ></b-pagination>
+      </b-row>
+      <b-button @click="toggleBusy">Toggle Busy State</b-button>
+    </b-container>
   </div>
 </template>
 
 <script>
+// 참조 : https://cdmoro.github.io/bootstrap-vue-3/components/
 import axios from 'axios'
 export default {
   components: {},
   data() {
     return {
-      perPage: 5, // 페이지당 보여줄 갯수
-      currentPage: 1, // 현재 페이지
-      total: 0,
-      searchString: '',
-      striped: true,
-      hover: true,
-      bordered: true,
-      dark: false,
-      headVariant: 'dark',
+      items: [],
       fields: [
-        {
-          key: 'index',
-          label: '번호'
-        },
+        { key: 'index', label: '번호' },
         {
           key: 'title',
           label: '타이틀',
           sortable: true,
           sortDirection: 'desc'
         },
-        { key: 'content', label: '내용' },
+        {
+          key: 'content',
+          label: '내용',
+          sortable: true,
+          sortDirection: 'desc'
+        },
         {
           key: 'is_done',
           label: '사용여부',
-          formatter: (value) => {
+          formatter: (value, key, item) => {
             return value.toLowerCase() === 'true' ? 'Yes' : 'No'
           },
           sortable: true,
@@ -87,20 +142,47 @@ export default {
           filterByFormatted: true
         },
         // { key: 'updateAt', label: '수정일' },
-        { key: 'createdAt', label: '登録日時' }
+        {
+          key: 'createdAt',
+          label: '登録日時',
+          sortable: true,
+          sortDirection: 'desc'
+        }
       ],
-      items: []
+      total: 0,
+      perPage: 5, // 페이지당 보여줄 갯수
+      perPageOptions: [5, 10, 15, { value: 100, text: 'Show a lot' }],
+      currentPage: 1, // 현재 페이지
+      searchString: '',
+      // 속성옵션
+      striped: true,
+      hover: true,
+      bordered: true,
+      dark: false,
+      headVariant: 'dark',
+      isBusy: false,
+      sortBy: '',
+      sortDesc: false,
+      sortDirection: 'asc',
+      filter: null,
+      filterOn: []
     }
   },
   setup() {},
-  created() {
-    this.list()
+  created() {},
+  mounted() {
+    // var vm = this
+    // setTimeout(function () {
+    //   vm.records = vm.getDatas()
+    // }, 1000)
+    this.getDatas()
+    this.total = this.items.length
   },
-  mounted() {},
   unmounted() {},
   methods: {
-    list() {
-      axios
+    async getDatas() {
+      this.isBusy = true
+      const items = await axios
         .get('http://localhost:3000/todo', {
           params: {
             page: parseInt(this.currentPage),
@@ -109,30 +191,52 @@ export default {
           }
         })
         .then((response) => {
-          // console.log(response)
-          this.currentPage = response.data.page
-          this.perPage = response.data.per_page
-          this.searchString = response.data.searchString
-          this.total = response.data.total
-          this.items = response.data.rows
+          return response.status === 200 ? response.data : []
         })
         .catch((err) => {
           console.log(err)
+          return []
         })
+      console.log(items)
+
+      this.total = items.total
+      // console.log(this.total)
+      this.items = items.rows
+      // console.log(JSON.stringify(items))
+      this.isBusy = false
+    },
+    searchClick() {
+      this.currentPage = 1
+      this.getDatas()
     },
     pageClick(button, page) {
       console.log(button)
       this.currentPage = page
-      this.list()
+      this.getDatas()
     },
-    searchClick() {
+    toggleBusy() {
+      this.isBusy = !this.isBusy
+      console.log('isBusy:' + this.isBusy)
+    },
+    sortingChanged(ctx) {
+      // ctx.sortBy   ==> Field key for sorting by (or null for no sorting)
+      // ctx.sortDesc ==> true if sorting descending, false otherwise
+    },
+    onFiltered(filteredItems) {
+      // Trigger pagination to update the number of buttons/pages due to filtering
+      console.logs(filteredItems)
+      this.totalRows = filteredItems.length
       this.currentPage = 1
-      this.list()
     }
   },
   computed: {
-    getTotal() {
-      return this.total
+    sortOptions() {
+      // Create an options list from our fields
+      return this.fields
+        .filter((f) => f.sortable)
+        .map((f) => {
+          return { text: f.label, value: f.key }
+        })
     }
   }
 }