From 99aa6002308ffb078d10dff280d87a56b78f7c4a Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Thu, 19 May 2022 11:39:14 +0800
Subject: [PATCH] fix home ui

---
 src/components/Dashboard.vue             |  2 +-
 src/components/Modal.vue                 | 48 ++++++++++++++++++++++++
 src/components/dashboard/LelongToday.vue | 15 ++++++--
 3 files changed, 60 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Modal.vue

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index 6201198..bec06f2 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -23,7 +23,7 @@
       <div class="row justify-content-center">
         <div class="col-7">
           <LelongToday :key="componentKey"/>
-          <button class="button btn-primary" @click="forceRerender">try</button>
+          <button class="btn mt-2 btn-info" @click="forceRerender">Reload Component <i class="bi bi-arrow-up"></i></button>
           <LelongNext />
         </div>
         <div class="col-5 p-5 pt-0">
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000..85085eb
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,48 @@
+<template>
+  <!-- Button trigger modal -->
+  <button
+    type="button"
+    class="btn btn-primary"
+    data-toggle="modal"
+    data-target="#exampleModal"
+  >
+    Launch demo modal
+  </button>
+
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="exampleModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="exampleModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">...</div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">
+            Close
+          </button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
\ No newline at end of file
diff --git a/src/components/dashboard/LelongToday.vue b/src/components/dashboard/LelongToday.vue
index e9be879..673ec02 100644
--- a/src/components/dashboard/LelongToday.vue
+++ b/src/components/dashboard/LelongToday.vue
@@ -1,6 +1,11 @@
 <template>
-  <div class="spinner-border" v-if="loading" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div
+    v-if="loading"
+    style="min-height: 20vh; display: grid; place-items: center"
+  >
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
   </div>
   <div v-else class="card text-center">
     <div class="card-header fw-bold text-uppercase">
@@ -17,7 +22,7 @@
         </thead>
         <tbody>
           <tr v-for="(item, index) in response" :key="item.id">
-            <td>{{index + 1}}</td>
+            <td>{{ index + 1 }}</td>
             <td>{{ item.lelongbid[0].cawangan.caw_name }}</td>
             <td>{{ item.masamula_lelong }}</td>
           </tr>
@@ -33,7 +38,9 @@
       <!-- <a href="#" class="btn btn-primary">Lihat Marhun</a> -->
     </div>
     <div class="card-footer text-muted">
-      <router-link class="btn btn-primary" to="/list">Lihat Senarai</router-link>
+      <router-link class="btn btn-primary" to="/list"
+        >Lihat Senarai</router-link
+      >
     </div>
   </div>
 </template>