chore: updated layout

benborla · Nov 19, 2023 · be3b785 · be3b785
1 parent cf6e17e
commit be3b785
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 30 deletions.
diff --git a/app/src/layouts/Default.vue b/app/src/layouts/Default.vue
@@ -11,6 +11,5 @@
 
 <script lang="ts" setup>
 import Nav from "@/components/Nav.vue";
-import Heads from "@/components/Heads.vue";
 import Footer from "@/components/Footer.vue";
 </script>
diff --git a/app/src/layouts/Page.vue b/app/src/layouts/Page.vue
diff --git a/app/src/views/Favorites.vue b/app/src/views/Favorites.vue
@@ -13,7 +13,7 @@
         <tbody>
           <tr v-for="(favorite, index) in favorites" :key="index">
             <td>{{ index + 1 }}</td>
-            <td>{{ favorite.fruit_name }}</td>
+            <td><router-link :to="'/fruit/' + favorite.fruit_id + '/view'">{{ favorite.fruit_name }}</router-link></td>
             <td>{{ getFormattedDate(favorite.dateAdded.date) }}</td>
             <td>
               <a href="#" @click="removeFavorite(favorite.fruit_id)">Remove</a>
@@ -43,7 +43,7 @@ export default defineComponent({
       await FruitsApi.favorites()
         .then((response: any) => {
           this.favorites = response.data
-        console.log(response.data)
+          console.log(response.data)
         })
     },
     async removeFavorite(id: number) {

diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
@@ -1,23 +1,24 @@
 <template>
   <div class="row offset-md-3 col-md-9 mb-5 align-items-end">
     <div class="col">
+      <label class="form-label">Sort By</label>
       <select class="form-select" aria-label="select order" v-model="orderBy" @change="retrieveData">
-        <option value="name" selected>Order by</option>
-        <option value="name">Name</option>
+        <option value="name" selected>Name</option>
         <option value="family">Family</option>
+        <option value="id">ID</option>
       </select>
     </div>
     <div class="col">
+      <label class="form-label">Order</label>
       <select class="form-select" aria-label="select direction" v-model="direction" @change="retrieveData">
-        <option value="asc" selected>Order</option>
-        <option value="asc">Ascending</option>
+        <option value="asc" selected>Ascending</option>
         <option value="desc">Descending</option>
       </select>
     </div>
     <div class="col">
+      <label class="form-label">Rows</label>
       <select class="form-select" aria-label="select rows" v-model="size" @change="retrieveData">
-        <option value="5" selected>Rows</option>
-        <option value="5">5</option>
+        <option value="5" selected>5</option>
         <option value="10">10</option>
         <option value="20">20</option>
       </select>
@@ -48,6 +49,7 @@
             <th scope="col">Genus</th>
             <th scope="col">Family</th>
             <th scope="col">Order</th>
+            <th scope="col">Date Added</th>
             <th scope="col">Actions</th>
           </tr>
         </thead>
@@ -58,6 +60,7 @@
             <td>{{ fruit.genus }}</td>
             <td>{{ fruit.family }}</td>
             <td>{{ fruit.fruitOrder }}</td>
+            <td>{{ getFormattedDate(fruit.createdAt.date) }}</td>
             <td>
               <a href="#" @click="addToFavorite(fruit)">
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill"
@@ -68,7 +71,7 @@
               </a> |
               <router-link :to="'/fruit/' + fruit.id + '/view'">View</router-link> |
               <router-link :to="'/fruit/' + fruit.id">Edit</router-link> |
-              <a href="#" @click="deleteFruit(fruit.id)">Delete</a>
+              <button class="btn btn-link" @click="deleteFruit(fruit.id)">Delete</button>
             </td>
           </tr>
         </tbody>
@@ -79,8 +82,8 @@
             <button type="button" class="page-link" @click="previous" tabindex="-1"
               :aria-disabled="this.page <= 1 && 'true'">Previous</button>
           </li>
-          <li class="page-item" v-for="n in this.paginationCount">
-            <button class="page-link" @click="goto(n)">{{ n }}</button>
+          <li class="page-item" v-for="n in this.paginationCount" :class="this.page === n && 'active'">
+            <button class="page-link" @click="goto(n)" :aria-disabled="this.page === n && 'disabled'">{{ n }}</button>
           </li>
           <li class="page-item" :class="this.page >= this.paginationCount && 'disabled'">
             <button class="page-link" @click="next"
@@ -161,15 +164,17 @@ export default defineComponent({
             this.message = `${fruit.name} has already been added as favorite`
             this.isSuccessful = false
           }
-
         })
         .catch((e: Error) => {
           console.log(e);
           const { favorites } = e.response.data.errors
           this.message = favorites[0]
           this.isSuccessful = false
         })
-    }
+    },
+    getFormattedDate(date: string) {
+      return new Date(date).toISOString().slice(0, 19).replace("T", " ");
+    },
   },
   mounted() {
     this.retrieveData();