From 29fd84a7a349e194f3137038d932cb43e2369b75 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Thu, 19 May 2022 08:40:22 +0800
Subject: [PATCH] edit dashboard

---
 src/components/Dashboard.vue                  |  90 +++++++++++--
 src/components/Footer.vue                     |   7 +-
 src/components/Navbar.vue                     |  49 ++++++--
 src/components/dashboard/Karat.vue            |  21 ++--
 src/components/dashboard/LelongNext.vue       | 118 ++++++++++++++++++
 .../dashboard/{Card.vue => LelongToday.vue}   |  35 ++++--
 6 files changed, 284 insertions(+), 36 deletions(-)
 create mode 100644 src/components/dashboard/LelongNext.vue
 rename src/components/dashboard/{Card.vue => LelongToday.vue} (65%)

diff --git a/src/components/Dashboard.vue b/src/components/Dashboard.vue
index cf62ae9..6201198 100644
--- a/src/components/Dashboard.vue
+++ b/src/components/Dashboard.vue
@@ -1,40 +1,110 @@
 <template>
   <Navbar />
   <div class="container-fluid" style="margin-top: 100px">
-    <div class="row justify-content-center">
+    <!-- <div class="row justify-content-center">
       <div class="col-5 p-2 mb-5">
         <Result />
       </div>
-    </div>
-    <div class="row justify-content-center">
-      <div class="col-5">
-        <Card />
+    </div> -->
+    <!-- <div class="container mb-5">
+      <div class="row">
+        <div class="col">
+          <h1 class="text-capitalize text-start">
+            Bersiap sedia untuk membida dengan
+            <span class="text-primary">Sistem Lelong</span>
+          </h1>
+        </div>
+        <div class="col">
+          <LelongToday />
+        </div>
       </div>
-      <div class="col-5">
-        <Karat />
+    </div> -->
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-7">
+          <LelongToday :key="componentKey"/>
+          <button class="button btn-primary" @click="forceRerender">try</button>
+          <LelongNext />
+        </div>
+        <div class="col-5 p-5 pt-0">
+          <Karat />
+        </div>
       </div>
     </div>
-  <Footer />
+    <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 /> -->
+    <Footer />
   </div>
 </template>
 
 <script>
 import Navbar from "./Navbar.vue";
 import Footer from "./Footer.vue";
-import Card from "./dashboard/Card.vue";
+import LelongToday from "./dashboard/LelongToday.vue";
+import LelongNext from "./dashboard/LelongNext.vue";
 import Accordion from "./dashboard/Accordion.vue";
 import Karat from "./dashboard/Karat.vue";
 import Result from "./dashboard/Result.vue";
+import Todos from "./dashboard/Todos.vue";
 export default {
   name: "Dashboard",
 
   components: {
     Navbar,
-    Card,
+    LelongToday,
+    LelongNext,
     Footer,
     Accordion,
     Karat,
     Result,
+    Todos,
+  },
+  data() {
+    return {
+      componentKey: 0,
+    };
+  },
+  methods: {
+    forceRerender() {
+      this.componentKey += 1;
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index e1695ac..17ec5ee 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid" style="bottom: 0">
+  <div class="container-fluid bg-light " style="bottom: 0">
     <footer
       class="
         d-flex
@@ -34,6 +34,9 @@
 
       <ul class="nav col-md-4 justify-content-center">
         <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">Permodalan Kelantan Berhad</a>
+        </li>
+        <!-- <li class="nav-item">
           <a href="#" class="nav-link px-2 text-muted">Home</a>
         </li>
         <li class="nav-item">
@@ -47,7 +50,7 @@
         </li>
         <li class="nav-item">
           <a href="#" class="nav-link px-2 text-muted">About</a>
-        </li>
+        </li> -->
       </ul>
     </footer>
   </div>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index fe5f02b..54f4369 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
   <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
     <div class="container-fluid">
-      <a class="navbar-brand text-primary fw-bold" href="#">Sistem Lelong</a>
+      <a class="navbar-brand text-primary fw-bold" href="/">Sistem Lelong</a>
       <button
         class="navbar-toggler"
         type="button"
@@ -19,20 +19,31 @@
             <router-link class="nav-link" to="/">Home</router-link>
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" to="/list">List</router-link>
+            <router-link class="nav-link" to="/list">Senarai</router-link>
           </li>
-          <li class="nav-item">
+          <!-- <li class="nav-item">
             <router-link class="nav-link" to="/cart">Cart</router-link>
+          </li> -->
+          <li class="nav-item">
+            <router-link class="nav-link" to="/pay">Bayar</router-link>
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" to="/pay">Pay</router-link>
+            <router-link class="nav-link" to="/profile">Profil</router-link>
           </li>
           <router-view />
         </ul>
 
-      <router-link class="btn btn-outline-secondary me-2" to="/profile">Profil</router-link>
-
-        <button class="btn btn-primary" type="submit" @click="doLogout">
+        <router-link class="btn btn-primary me-5" to="/cart"
+          >Cart <i class="bi bi-cart-fill"></i
+          ><span class="span_cart">{{
+            this.allCarts.length
+          }}</span></router-link
+        >
+        <button
+          class="btn btn-outline-secondary"
+          type="submit"
+          @click="doLogout"
+        >
           Logout
         </button>
       </div>
@@ -42,9 +53,18 @@
 
 <script>
 import axios from "axios";
+import { mapGetters, mapActions } from "vuex";
 
 export default {
   name: "Navbar",
+  // props: {
+  //   cart: Number,
+  // },
+  data() {
+    return {
+      cart: localStorage.getItem("cart"),
+    };
+  },
   methods: {
     doLogout() {
       axios
@@ -66,6 +86,21 @@ export default {
           console.log(error);
         });
     },
+    ...mapActions(["fetchCarts"]),
+    
+  },
+  computed: { ...mapGetters(["allCarts"]), },
+  created() {
+    this.fetchCarts();
   },
 };
 </script>
+
+<style scoped>
+.span_cart {
+  background-color: #06367D;
+  margin-left: 8px;
+  padding: 6px;
+  border-radius: 24px;
+}
+</style>
diff --git a/src/components/dashboard/Karat.vue b/src/components/dashboard/Karat.vue
index 7d8fb4c..6119ab9 100644
--- a/src/components/dashboard/Karat.vue
+++ b/src/components/dashboard/Karat.vue
@@ -11,15 +11,15 @@
             <th>No.</th>
             <th>Karat</th>
             <th>Keterangan</th>
-            <th>dariharga916</th>
+            <th>Harga</th>
           </tr>
         </thead>
-        <tbody v-for="karats in karat" :key="karats.id">
+        <tbody v-for="(karats, index) in karat" :key="karats.id">
           <tr>
-            <td scope="row">{{ karats.id }}</td>
+            <td scope="row">{{ index + 1 }}</td>
             <td scope="row">{{ karats.karat }}</td>
             <td scope="row">{{ karats.keterangan }}</td>
-            <td scope="row">{{ karats.dariharga916 }}</td>
+            <td scope="row">RM{{ karats.harga }}</td>
           </tr>
         </tbody>
       </table>
@@ -43,12 +43,17 @@ export default {
   },
   methods: {
     async getKarat() {
-      this.loading=true;
+      this.loading = true;
       await axios
-        .get("/jeniskarat")
+        .get("/karat", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
         .then((response) => {
-          this.karat = response.data.karat;
-          this.loading=false;
+          this.karat = response.data;
+          this.loading = false;
+          console.log(response);
         })
         .catch((error) => {
           console.log(error);
diff --git a/src/components/dashboard/LelongNext.vue b/src/components/dashboard/LelongNext.vue
new file mode 100644
index 0000000..57f283f
--- /dev/null
+++ b/src/components/dashboard/LelongNext.vue
@@ -0,0 +1,118 @@
+<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>
+    <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>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  name: "Card",
+  props: {
+    msg: String,
+    masa: String,
+  },
+  data() {
+    return {
+      response: Array,
+      cawangan: String,
+      loading: false,
+    };
+  },
+  mounted: function () {
+    // this.liveData();
+  },
+  methods: {
+    liveData() {
+      this.loading = true;
+      axios
+        .get("/lelongDetails/today", {
+          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;
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/dashboard/Card.vue b/src/components/dashboard/LelongToday.vue
similarity index 65%
rename from src/components/dashboard/Card.vue
rename to src/components/dashboard/LelongToday.vue
index 183fdd5..e9be879 100644
--- a/src/components/dashboard/Card.vue
+++ b/src/components/dashboard/LelongToday.vue
@@ -3,21 +3,38 @@
     <span class="visually-hidden">Loading...</span>
   </div>
   <div v-else class="card text-center">
-    <div class="card-header fw-bold text-uppercase">Lelongan Seterusnya</div>
+    <div class="card-header fw-bold text-uppercase">
+      Lelongan Hari Ini : 17/05/2022
+    </div>
     <div class="card-body">
-      <div class="card" v-for="item in response" :key="item.id">
-        <p>Cawangan: hkjhkjk</p>
-        <p>Tarikh Lelong: {{item.tarikh_lelong}}</p>
-        <p>JBG: {{ item.jbg }}</p>
-        <p>Masa Mula Lelongan: {{item.masamula_lelong}}</p>
-      </div>
+      <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>{{ item.lelongbid[0].cawangan.caw_name }}</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> -->
-      <router-link class="btn btn-primary" to="/list">Lihat Item</router-link>
     </div>
-    <div class="card-footer text-muted">Kemaskini 2 hari lepas.</div>
+    <div class="card-footer text-muted">
+      <router-link class="btn btn-primary" to="/list">Lihat Senarai</router-link>
+    </div>
   </div>
 </template>