Merge branch '81' of github.com:kossiecoder/vue3-basic into main

Author: kossiecoder

src/App.vue

@@ -1,17 +1,5 @@
 <template>
-  <nav class="navbar navbar-expand-lg navbar-light bg-light">
-    <router-link class="navbar-brand" :to="{ name: 'Home'}">
-      Kossie Coder
-    </router-link>
-
-    <ul class="navbar-nav mr-auto">
-      <li class="nav-item active">
-        <router-link class="nav-link" :to="{ name: 'Todos'}">
-          Todos
-        </router-link>
-      </li>
-    </ul>
-  </nav>
+  <Navbar />
   <div class="container">
       <router-view/>
   </div>
@@ -21,10 +9,12 @@
 
 <script>
 import Toast from '@/components/Toast.vue';
+import Navbar from '@/components/Navbar.vue';
 
 export default {
   components: {
-    Toast
+    Toast,
+    Navbar
   },
 }
 </script>

src/components/Navbar.vue

@@ -0,0 +1,25 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <router-link class="navbar-brand" :to="{ name: 'Home'}">
+      Kossie Coder
+    </router-link>
+
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+        <router-link class="nav-link" :to="{ name: 'Todos'}">
+          Todos
+        </router-link>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/components/Pagination.vue

@@ -0,0 +1,65 @@
+<template>
+  <nav aria-label="Page navigation example">
+      <ul class="pagination">
+        <li v-if="currentPage !== 1" class="page-item">
+            <a 
+                style="cursor: pointer" 
+                class="page-link" 
+                @click="onClick(currentPage - 1)"
+            >
+                Previous
+            </a>
+        </li>
+        <li
+          v-for="page in numberOfPages"
+          :key="page" 
+          class="page-item"
+          :class="currentPage === page ? 'active' : ''"
+        >
+            <a 
+                style="cursor: pointer" 
+                class="page-link" 
+                @click="onClick(page)"
+            >{{page}}</a>
+        </li>
+        <li v-if="numberOfPages !== currentPage" class="page-item">
+            <a 
+                style="cursor: pointer" 
+                class="page-link" 
+                @click="onClick(currentPage + 1)"
+            >Next</a>
+        </li>
+      </ul>
+    </nav>
+</template>
+
+<script>
+import { useContext } from 'vue';
+export default {
+    props: {
+        numberOfPages: {
+            type: Number,
+            required: true
+        },
+        currentPage: {
+            type: Number,
+            required: true
+        }
+    },
+    emits: ['click'],
+    setup() {
+        const { emit } = useContext();
+        const onClick = (page) => {
+            emit('click', page)
+        };
+
+        return {
+            onClick
+        }
+    }
+}
+</script>
+
+<style>
+
+</style>

src/pages/todos/index.vue

@@ -28,26 +28,12 @@
       @delete-todo="deleteTodo"
     />
     <hr />
-    <nav aria-label="Page navigation example">
-      <ul class="pagination">
-        <li v-if="currentPage !== 1" class="page-item">
-          <a style="cursor: pointer" class="page-link" @click="getTodos(currentPage - 1)">
-            Previous
-          </a>
-        </li>
-        <li
-          v-for="page in numberOfPages"
-          :key="page" 
-          class="page-item"
-          :class="currentPage === page ? 'active' : ''"
-        >
-          <a style="cursor: pointer" class="page-link" @click="getTodos(page)">{{page}}</a>
-        </li>
-        <li v-if="numberOfPages !== currentPage" class="page-item">
-          <a style="cursor: pointer" class="page-link" @click="getTodos(currentPage + 1)">Next</a>
-        </li>
-      </ul>
-    </nav>
+    <Pagination 
+      v-if="todos.length"
+      :numberOfPages="numberOfPages"
+      :currentPage="currentPage"
+      @click="getTodos"
+    />
   </div>
 </template>
 
@@ -57,10 +43,12 @@ import TodoList from '@/components/TodoList.vue';
 import axios from '@/axios';
 import { useToast } from '@/composables/toast';
 import {useRouter} from 'vue-router';
+import Pagination from '@/components/Pagination.vue';
 
 export default {
   components: {
     TodoList,
+    Pagination
   },
   setup() {
     const router = useRouter();