KoPKB/lelong-web-pembida
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edit dashboard

Browse Source
This commit is contained in:
Amir
2022-05-19 08:40:22 +08:00
parent 9498faa57c
commit 29fd84a7a3
6 changed files with 284 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dashboard.vue
+80 -10
View File
@@ -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>
src/components/Footer.vue
+5 -2
View File
@@ -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>
src/components/Navbar.vue
+42 -7
View File
@@ -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>
src/components/dashboard/Karat.vue
+13 -8
View File
@@ -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);
src/components/dashboard/LelongNext.vue
+118
View File
@@ -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>
src/components/dashboard/Card.vue → src/components/dashboard/LelongToday.vue
+26 -9
View File
@@ -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>