From f164a29e0a1e02117d803455e6554124d7c3a2c8 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Mon, 13 Jun 2022 15:51:27 +0800
Subject: [PATCH] fix dashboard content

---
 src/components/Dashboard.vue             |  87 +++++++++--------
 src/components/dashboard/Karat.vue       |   9 +-
 src/components/dashboard/LelongNext.vue  | 118 ++++++++---------------
 src/components/dashboard/LelongToday.vue | 100 +++++++------------
 4 files changed, 128 insertions(+), 186 deletions(-)

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index fe16c32..0b69d29 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -22,54 +22,40 @@
     <div class="container">
       <div class="row justify-content-center">
         <div class="col-7">
-          <LelongToday :key="componentKey"/>
-          <h6><button class="badge mt-2 btn-secondary" @click="forceRerender">Reload Component <i class="bi bi-arrow-up"></i></button></h6>
-          <LelongNext />
+          <!-- <LelongToday :key="componentKey"/> -->
+          <div class="card text-center">
+            <div class="card-header fw-bold text-uppercase">
+              Lelongan Hari Ini : {{ tarikh }}
+            </div>
+            <div class="card-body">
+              <LelongToday :key="componentKey" />
+            </div>
+            <div class="card-footer text-muted">
+              <router-link class="btn btn-primary" to="/list"
+                >Lihat Senarai</router-link
+              >
+            </div>
+          </div>
+          <!-- <h6>
+            <button class="badge mt-2 btn-secondary" @click="forceRerender">
+              Reload Component <i class="bi bi-arrow-up"></i>
+            </button>
+          </h6> -->
+          <div class="card text-center mt-5">
+            <div class="card-header fw-bold text-uppercase">
+              Lelongan Seterusnya
+            </div>
+            <div class="card-body">
+              <LelongNext />
+            </div>
+          </div>
         </div>
         <div class="col-5 p-5 pt-0">
           <Karat />
         </div>
       </div>
     </div>
-    <div>
-      <!-- <form @submit.prevent="validate">
-        <div class="form-group">
-          <input
-            type="text"
-            class="form-control"
-            v-bind:class="{ 'is-invalid': nameError }"
-            id="name"
-            placeholder="Your name"
-            v-model="name"
-          />
-          <div class="invalid-feedback" id="feedback-1" v-if="errors[0]">
-            {{ errors[0].message }}
-          </div>
-        </div>
-        <div class="form-group">
-          <input
-            type="text"
-            class="form-control"
-            v-bind:class="{ 'is-invalid': nameError }"
-            id="name"
-            placeholder="Your name"
-            v-model="name"
-          />
-          <div class="invalid-feedback" id="feedback-1" v-if="errors[0]">
-            {{ errors[0].message }}
-          </div>
-        </div>
-        <div class="form-group">
-          <textarea
-            class="form-control"
-            id="comment"
-            placeholder="Your comment"
-          ></textarea>
-        </div>
-        <button class="btn btn-primary" type="submit">Validate</button>
-      </form> -->
-    </div>
-    <!-- <Todos /> -->
+    <div></div>
     <Footer />
   </div>
 </template>
@@ -99,12 +85,29 @@ export default {
   data() {
     return {
       componentKey: 0,
+      tarikh: "",
     };
   },
+  mounted: function () {
+    this.currentDate();
+  },
   methods: {
     forceRerender() {
       this.componentKey += 1;
     },
+    currentDate() {
+      var today = new Date();
+      var yyyy = today.getFullYear();
+      let mm = today.getMonth() + 1; // Months start at 0!
+      let dd = today.getDate();
+
+      if (dd < 10) dd = "0" + dd;
+      if (mm < 10) mm = "0" + mm;
+
+      today = dd + "/" + mm + "/" + yyyy;
+
+      this.tarikh = today;
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/dashboard/Karat.vue b/src/components/dashboard/Karat.vue
index 6119ab9..5eaf070 100644
--- a/src/components/dashboard/Karat.vue
+++ b/src/components/dashboard/Karat.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: 60vh; 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">Karat Semasa</div>
diff --git a/src/components/dashboard/LelongNext.vue b/src/components/dashboard/LelongNext.vue
index 57f283f..13bc997 100644
--- a/src/components/dashboard/LelongNext.vue
+++ b/src/components/dashboard/LelongNext.vue
@@ -1,61 +1,35 @@
 <template>
-  <div class="spinner-border" v-if="loading" role="status">
-    <span class="visually-hidden">Loading...</span>
-  </div>
-  <div v-else class="card text-center mt-5">
-    <div class="card-header fw-bold text-uppercase">
-      Lelongan Seterusnya
+  <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 class="card-body">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>Bil</th>
-            <th>Cawangan</th>
-            <th>Tarikh</th>
-            <th>Masa Mula</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>1</td>
-            <td>OneStop</td>
-            <td>11/06/2022</td>
-            <td>12:05:20</td>
-          </tr>
-          <tr>
-            <td>2</td>
-            <td>OneStop</td>
-            <td>11/06/2022</td>
-            <td>12:05:20</td>
-          </tr>
-          <tr>
-            <td>3</td>
-            <td>OneStop</td>
-            <td>11/06/2022</td>
-            <td>12:05:20</td>
-          </tr>
-          <tr>
-            <td>4</td>
-            <td>OneStop</td>
-            <td>11/06/2022</td>
-            <td>12:05:20</td>
-          </tr>
-        </tbody>
-      </table>
-      <!-- <div class="card" v-for="item in response" :key="item.id">
-        <p>Cawangan: {{ item.lelongbid[0].cawangan.caw_name }}</p>
-        <p>Masa Mula Lelongan: {{ item.masamula_lelong }}</p>
-      </div> -->
-      <!-- <p>{{ msg }}</p>
-        <p>{{ masa }}</p> -->
-      <!-- <p id="demo"></p> -->
-      <!-- <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 Item</router-link>
-    </div> -->
   </div>
+  <table v-else class="table table-bordered table-hover">
+    <thead class="table-light">
+      <tr>
+        <th>Bil</th>
+        <th>Cawangan</th>
+        <th>Tarikh</th>
+        <th>Masa Mula</th>
+      </tr>
+    </thead>
+    <tbody v-if="responseData">
+      <tr v-for="(data, index) in response" :key="data.id">
+        <td>{{ index + 1 }}</td>
+        <td>{{ data.caw_name }}</td>
+        <td>{{ data.tarikh_lelong }}</td>
+        <td>{{ data.masamula_lelong }}</td>
+      </tr>
+    </tbody>
+    <tbody v-else>
+      <tr>
+        <td colspan="4">Tiada Data</td>
+      </tr>
+    </tbody>
+  </table>
 </template>
 
 <script>
@@ -72,42 +46,30 @@ export default {
       response: Array,
       cawangan: String,
       loading: false,
+      responseData: false,
     };
   },
   mounted: function () {
-    // this.liveData();
+    this.liveData();
   },
   methods: {
     liveData() {
       this.loading = true;
       axios
-        .get("/lelongDetails/today", {
+        .get("/listcawlelongnext", {
           headers: {
             Authorization: "Bearer " + localStorage.getItem("token"),
           },
         })
         .then((response) => {
-          this.response = response.data;
-          console.log(response.data);
-          // this.cawangan = response.data[0].lelongbid[0].cawangan.caw_dbname;
-          // console.log(this.cawangan);
-
-          // let text = "";
-          // const data = this.response;
-          // data.forEach(myFunction);
-
-          //   // document.getElementById("demo").innerHTML = text;
-          // function myFunction(item) {
-          //   text +=
-          //     "Tarikh: " +
-          //     item.tarikh_lelong +
-          //     ", " +
-          //     item.lelongbid[0].cawangan.caw_dbname +
-          //     ", JBG: " +
-          //     item.jbg +
-          //     "<br>";
-          // }
-          this.loading = false;
+          if (response.data.success == true) {
+            this.responseData = true;
+            this.response = response.data.lelong;
+            console.log(response.data);
+            this.loading = false;
+          } else {
+            this.loading = false;
+          }
         })
         .catch((error) => {
           console.log(error);
diff --git a/src/components/dashboard/LelongToday.vue b/src/components/dashboard/LelongToday.vue
index cb4b3d8..961cbfd 100644
--- a/src/components/dashboard/LelongToday.vue
+++ b/src/components/dashboard/LelongToday.vue
@@ -7,42 +7,27 @@
       <span class="visually-hidden">Loading...</span>
     </div>
   </div>
-  <div v-else class="card text-center">
-    <div class="card-header fw-bold text-uppercase">
-      Lelongan Hari Ini : {{ tarikh }}
-    </div>
-    <div class="card-body">
-      <table class="table">
-        <thead>
-          <tr>
-            <th>Bil</th>
-            <th>Cawangan</th>
-            <th>Masa Mula</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(item, index) in response" :key="item.id">
-            <td>{{ index + 1 }}</td>
-            <td>nama cawangan</td>
-            <td>{{ item.masamula_lelong }}</td>
-          </tr>
-        </tbody>
-      </table>
-      <!-- <div class="card" v-for="item in response" :key="item.id">
-        <p>Cawangan: {{ item.lelongbid[0].cawangan.caw_name }}</p>
-        <p>Masa Mula Lelongan: {{ item.masamula_lelong }}</p>
-      </div> -->
-      <!-- <p>{{ msg }}</p>
-        <p>{{ masa }}</p> -->
-      <!-- <p id="demo"></p> -->
-      <!-- <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
-      >
-    </div>
-  </div>
+  <table v-else class="table table-bordered table-hover">
+    <thead class="table-light">
+      <tr>
+        <th>Bil</th>
+        <th>Cawangan</th>
+        <th>Masa Mula</th>
+      </tr>
+    </thead>
+    <tbody v-if="responseData">
+      <tr v-for="(item, index) in response" :key="item.id">
+        <td>{{ index + 1 }}</td>
+        <td>{{ item.caw_name }}</td>
+        <td>{{ item.masamula_lelong }}</td>
+      </tr>
+    </tbody>
+    <tbody v-else>
+      <tr>
+        <td colspan="3">Tiada Data</td>
+      </tr>
+    </tbody>
+  </table>
 </template>
 
 <script>
@@ -59,7 +44,7 @@ export default {
       response: Array,
       cawangan: String,
       loading: false,
-      tarikh: "",
+      responseData: false,
     };
   },
   mounted: function () {
@@ -68,39 +53,26 @@ export default {
   methods: {
     liveData() {
       this.loading = true;
-
-      var formatted_date = new Date().toJSON().slice(0, 10).replace(/-/g, "/");
-
-      this.tarikh = formatted_date;
       axios
-        .get("/lelongDetails/today", {
+        .get("/listcawlelongtoday", {
           headers: {
             Authorization: "Bearer " + localStorage.getItem("token"),
           },
         })
         .then((response) => {
-          this.response = response.data;
-          console.log(response.data);
-          localStorage.setItem("lelong_id", response.data[0].id);
-          // this.cawangan = response.data[0].lelongbid[0].cawangan.caw_dbname;
-          // console.log(this.cawangan);
-
-          // let text = "";
-          // const data = this.response;
-          // data.forEach(myFunction);
-
-          //   // document.getElementById("demo").innerHTML = text;
-          // function myFunction(item) {
-          //   text +=
-          //     "Tarikh: " +
-          //     item.tarikh_lelong +
-          //     ", " +
-          //     item.lelongbid[0].cawangan.caw_dbname +
-          //     ", JBG: " +
-          //     item.jbg +
-          //     "<br>";
-          // }
-          this.loading = false;
+          if (response.data.success == true) {
+            this.responseData = true;
+            this.response = response.data.lelong;
+            console.log(response.data);
+            localStorage.setItem(
+              "lelong_id",
+              response.data.lelong[0].lelong_id
+            );
+            this.loading = false;
+          } else {
+            this.loading = false;
+            console.log(response.data.success);
+          }
         })
         .catch((error) => {
           console.log(error);