From 8aea00a6ef0b113086f83c6c2942e79c5a253671 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: Mon, 22 Aug 2022 19:59:22 +0900
Subject: [PATCH] =?UTF-8?q?=EC=88=98=EC=A0=95=203=EB=B2=88=EC=A7=B8...?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/HeaderLayout.vue |   2 +-
 src/router/index.js                    |   4 +-
 src/views/3_api/todo/listView.vue      | 168 +++++++++++++++----------
 3 files changed, 102 insertions(+), 72 deletions(-)

diff --git a/src/components/layout/HeaderLayout.vue b/src/components/layout/HeaderLayout.vue
index 36e4b06..25ca7f8 100644
--- a/src/components/layout/HeaderLayout.vue
+++ b/src/components/layout/HeaderLayout.vue
@@ -93,7 +93,7 @@
             </ul>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="/api/todo/list">Todo</a>
+            <a class="nav-link" href="/api/todo">Todo</a>
           </li>
         </ul>
         <form class="d-flex" role="search">
diff --git a/src/router/index.js b/src/router/index.js
index ebdacd3..e991460 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -113,11 +113,11 @@ const routes = [
       )
   },
   {
-    path: '/api/todo/list',
+    path: '/api/todo',
     name: 'TodoListView',
     component: () =>
       import(
-        /* webpackChunkName: "apicall", webpackPrefetch:true */ '../views/3_api/todo/listView.vue'
+        /* webpackChunkName: "api", webpackPrefetch:true */ '../views/3_api/todo/listView.vue'
       )
   }
 ]
diff --git a/src/views/3_api/todo/listView.vue b/src/views/3_api/todo/listView.vue
index 0b617e5..ff1f1e8 100644
--- a/src/views/3_api/todo/listView.vue
+++ b/src/views/3_api/todo/listView.vue
@@ -1,51 +1,51 @@
 <template>
   <!-- 참조: https://codesandbox.io/s/3v0m1?file=/src/components/board/BoardList.vue -->
   <div>
-    <div class="container text-center">
-      <div class="row">
-        <div class="col">total:{{ length }} / {{ total }}</div>
-        <div class="col">
-          <form class="d-flex" role="search">
-            <input
-              class="form-control me-2"
-              type="search"
-              v-model="searchString"
-              placeholder="통합검색"
-              aria-label="Search"
-            />
-            <button class="btn btn-outline-success" type="submit">
-              Search
-            </button>
-          </form>
+    <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 class="col">
-          <select name="" id="" v-model="perPage">
-            <option value="">--라인수--</option>
-            <option :value="value" :key="idx" v-for="(value, idx) in total">
-              {{ value }}
-            </option>
-          </select>
+      </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
+          >
         </div>
       </div>
     </div>
-    <table class="table table-striped table-bordered table-hover">
-      <thead class="table-light">
-        <tr>
-          <th scope="col" :key="field.key" v-for="field in fields">
-            {{ field.label }}
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr :key="row.id" v-for="row in rows">
-          <td>{{ row.id }}</td>
-          <td>{{ row.title }}</td>
-          <td>{{ row.is_done }}</td>
-          <td>{{ row.createdAt }}</td>
-        </tr>
-      </tbody>
-    </table>
-    <button :disabled="loading" @click="list">Get posts</button>
+    <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>
   </div>
 </template>
 
@@ -55,56 +55,86 @@ export default {
   components: {},
   data() {
     return {
-      loading: null,
+      perPage: 5, // 페이지당 보여줄 갯수
+      currentPage: 1, // 현재 페이지
       total: 0,
-      length: 0,
-      page: 0, // 현재 페이지
-      perPage: 0, // 페이지당 보여줄 갯수
       searchString: '',
+      striped: true,
+      hover: true,
+      bordered: true,
+      dark: false,
+      headVariant: 'dark',
       fields: [
         {
-          key: 'id',
+          key: 'index',
           label: '번호'
         },
         {
           key: 'title',
-          label: '제목'
+          label: '타이틀',
+          sortable: true,
+          sortDirection: 'desc'
         },
+        { key: 'content', label: '내용' },
         {
           key: 'is_done',
-          label: '글쓴이'
+          label: '사용여부',
+          formatter: (value) => {
+            return value.toLowerCase() === 'true' ? 'Yes' : 'No'
+          },
+          sortable: true,
+          sortByFormatted: true,
+          filterByFormatted: true
         },
-        {
-          key: 'created_at',
-          label: '작성일'
-        }
+        // { key: 'updateAt', label: '수정일' },
+        { key: 'createdAt', label: '登録日時' }
       ],
-      rows: []
+      items: []
     }
   },
   setup() {},
   created() {
-    const url = 'http://localhost:3000/todo'
-    this.list(url)
+    this.list()
   },
   mounted() {},
   unmounted() {},
   methods: {
-    async list(url) {
-      this.loading = null
-      await axios.get(url).then((response) => {
-        if (response.statusText === 'OK') {
-          console.log(response)
-          this.page = response.data.query.page
-          this.per_page = response.data.query.per_page
-          this.searchString = response.data.query.searchString
-          this.total = response.data.total
-          this.rows = response.data.rows
-          this.length = response.data.rows.length
-        } else {
-          throw new Error(`Network response was not ok. \n url => ${url}`)
+    list() {
+      const parameters = {
+        params: {
+          page: parseInt(this.currentPage),
+          per_page: parseInt(this.perPage),
+          searchString: this.searchString
         }
-      })
+      }
+      console.log(parameters)
+      axios
+        .get('http://localhost:3000/todo', parameters)
+        .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
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+    },
+    pageClick(button, page) {
+      console.log(button)
+      this.currentPage = page
+      this.list()
+    },
+    searchClick() {
+      this.currentPage = 1
+      this.list()
+    }
+  },
+  computed: {
+    getTotal() {
+      return this.total
     }
   }
 }