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

fix list

Browse Source
This commit is contained in:
Amir
2022-10-11 04:41:20 +08:00
parent 00e64f97c9
commit 64bfad8f09
3 changed files with 302 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cart/CartListNew.vue
+36 -20
View File
@@ -980,11 +980,15 @@ export default {
this.$emit("reloadComponent");
} else if (response.data.success == false) {
console.log(response);
this.$toast.add({
severity: "error",
summary: "Error",
detail: "Please refresh page to get latest data.",
life: 3000,
this.$swal.fire({
toast: true,
icon: "error",
title: "Gagal! Sila refresh page semula.",
animation: false,
position: "bottom",
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
});
this.$emit("reloadComponent");
}
@@ -1032,11 +1036,15 @@ export default {
})
.catch((error) => {
console.log(error);
this.$toast.add({
severity: "error",
summary: "Error",
detail: "Please refresh page to get latest data.",
life: 3000,
this.$swal.fire({
toast: true,
icon: "error",
title: "Gagal! Sila refresh page semula.",
animation: false,
position: "bottom",
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
});
this.isLoadingUbah = false;
});
@@ -1076,11 +1084,15 @@ export default {
} else {
this.isLoadingDaftar = false;
console.log(response);
this.$toast.add({
severity: "error",
summary: "Error",
detail: "Please refresh page to get latest data.",
life: 3000,
this.$swal.fire({
toast: true,
icon: "error",
title: "Gagal! Sila refresh page semula.",
animation: false,
position: "bottom",
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
});
}
})
@@ -1088,11 +1100,15 @@ export default {
// this.$refs.daftarBidaanClose.click();
// this.loading = false;
console.log(error);
this.$toast.add({
severity: "error",
summary: "Error",
detail: "Please refresh page to get latest data.",
life: 3000,
this.$swal.fire({
toast: true,
icon: "error",
title: "Gagal! Sila refresh page semula.",
animation: false,
position: "bottom",
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
});
});
} else {
src/components/list/ListItem.vue
+265 -113
View File
@@ -1,10 +1,10 @@
<template>
<div
v-if="loading"
class="container"
class="row fadein animation-duration-400"
style="
min-height: 70vh;
min-width: 70vh;
min-width: 90vh;
display: grid;
place-items: center;
"
@@ -14,87 +14,75 @@
</div>
</div>
<div v-else class="row">
<div v-else class="fadein animation-duration-400">
<div v-if="this.status">
<div class="">
<div class="container">
<div class="text-center">
<InlineMessage class="m-1" severity="info">
Jumlah Surat: {{ numberSag }}
</InlineMessage>
<InlineMessage class="m-1" severity="info">
Masa Mula Lelong: {{ lelong_details.masamula_lelong }}
</InlineMessage>
<InlineMessage class="m-1" severity="info">
Masa Tamat Lelong: {{ lelong_details.masatamat_lelong }}
</InlineMessage>
</div>
<div class="row clearfix">
<div v-for="sag in sags" :key="sag.id" class="col-12 lg:col-4">
<!-- <div class="card card-body"> -->
<Card>
<template #content>
<div class="">
<div
class="mb-3 product-image"
style="border: 1px solid rgba(0, 0, 0, 0.125)"
>
-gambar marhun-
</div>
<div class="">
<div class="product_details">
<div class="grid text-center">
<div class="col-12">
<h6 class="text-primary">
{{ sag.norujukan }}
</h6>
</div>
<div class="col-12">
<p>{{ sag.berat }}g</p>
</div>
</div>
<!-- <ul class="product_price list-unstyled">
<li class="old_price">{{ sag.berat }}g</li>
<li class="old_price">
<b
>RM{{
sag.hargaasas
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}</b
>
</li>
</ul> -->
<div class="flex justify-content-between">
<div class="text-2xl font-bold">
RM{{
sag.hargaasas
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</div>
<Button
data-bs-toggle="modal"
data-bs-target="#bidaModal"
@click="clickModal(sag)"
icon="pi pi-plus p-button-sm"
class="p-button-rounded"
/>
</div>
<!-- <div class="text-center">
<InlineMessage class="m-1" severity="info">
Jumlah Surat: {{ numberSag }}
</InlineMessage>
<InlineMessage class="m-1" severity="info">
Masa Mula Lelong: {{ lelong_details.masamula_lelong }}
</InlineMessage>
<InlineMessage class="m-1" severity="info">
Masa Tamat Lelong: {{ lelong_details.masatamat_lelong }}
</InlineMessage>
</div> -->
<div class="row justify-content-center">
<div
v-for="sag in sags"
:key="sag.id"
class="col-10 sm:col-8 md:col-6 lg:col-4"
>
<Card>
<template #content>
<div class="overflow-x-auto">
<div class="flex justify-content-center">
<div
class="flex align-items-center"
style="
border: 1px solid rgba(0, 0, 0, 0.125);
height: 250px;
width: 250px;
min-height: 250px;
min-width: 250px;
"
></div>
</div>
<div class="">
<div class="product_details">
<div class="grid text-center">
<div class="col-12 mt-2 pb-0 text-primary">
{{ sag.norujukan }}
</div>
<div class="col-12 pt-0">{{ sag.berat }}g</div>
</div>
<div class="flex justify-content-between">
<div class="text-2xl align-self-center font-bold">
RM{{
sag.hargaasas
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</div>
<Button
data-bs-toggle="modal"
data-bs-target="#bidaModal"
@click="clickModal(sag)"
icon="pi pi-plus p-button-sm"
class="p-button-rounded p-custom-button"
/>
</div>
</div>
</template>
</Card>
</div>
<!-- </div> -->
</div>
</div>
</div>
</template>
</Card>
</div>
</div>
</div>
<div v-else>
<div class="container">
<div class="row">
<Message severity="info" :closable="false"
>Sila isi ruangan pilih cawangan di atas.
</Message>
@@ -108,21 +96,7 @@
<div class="flex justify-content-center mt-3">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-between mt-3">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 p-3 lg:col-4">
<div class="card p-2">
<div class="field">
<div class="custom-skeleton">
<div class="flex mb-3"></div>
<Skeleton width="100%" height="150px"></Skeleton>
<div class="flex justify-content-center mt-3">
<div class="flex justify-content-center mt-1">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-between mt-3">
@@ -142,6 +116,29 @@
<div class="flex justify-content-center mt-3">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-center mt-1">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-between mt-3">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 p-3 lg:col-4">
<div class="card p-2">
<div class="field">
<div class="custom-skeleton">
<div class="flex mb-3"></div>
<Skeleton width="100%" height="150px"></Skeleton>
<div class="flex justify-content-center mt-3">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-center mt-1">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-between mt-3">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
@@ -181,7 +178,129 @@
</div>
<div class="modal-body">
<div class="row m-2">
<div class="grid">
<div
class="col-12 lg:col-6"
style="
display: flex;
justify-content: center;
align-items: center;
border: 1px solid rgba(0, 0, 0, 0.125);
min-height: 300px;
min-width: 300px;
max-height: 600px;
max-width: 600px;
"
>
-gambar marhun-
</div>
<div class="col-12 text-center lg:col-6">
<div class="overflow-x-auto">
<table class="table table-bordered">
<tbody>
<tr class="table-light">
<td>Bil</td>
<td style="min-width: 115px">Jenis Marhun</td>
<td style="min-width: 42px">Karat</td>
<td style="min-width: 42px">Berat</td>
<td style="min-width: 102px">Harga Asas</td>
</tr>
<tr v-for="(marhun, index) in marhuns" :key="marhun.id">
<td>{{ index + 1 }}</td>
<td>{{ marhun.marhun_desc }}</td>
<td>{{ marhun.karat }}</td>
<td>{{ marhun.berat }}g</td>
<td>
RM{{
marhun.hargaasas
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</td>
</tr>
<tr style="text-transform: uppercase">
<td colspan="3">Jumlah</td>
<td>{{ norujukan.berat }}g</td>
<td class="disabled-bg"></td>
</tr>
</tbody>
</table>
</div>
<div class="row justify-content-center">
<div class="col-6">
<label class="col-form-label text-end"
>Jumlah Harga Asas (A)</label
>
</div>
<div class="col-6">
<div class="input-group mb-3">
<span class="input-group-text">RM</span>
<div
style="background-color: #e9ecef"
class="form-control text-start justify-content-start"
disabled
>
{{
norujukan.hargaasas
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-6">
<label class="col-form-label text-end">Jumlah Harga Bida (B)</label>
</div>
<div class="col-6">
<div class="input-group mb-3">
<span class="input-group-text">RM</span>
<input
type="text"
class="form-control"
v-model="form.hargabida"
@keyup="calcDiff()"
/>
</div>
</div>
</div>
<div class="row justify-content-center mb-3">
<div class="col-6">
<label class="col-form-label text-end">Beza (B-A)</label>
</div>
<div class="col-6">
<div class="input-group">
<span class="input-group-text">RM</span>
<input
v-model="tambahan"
type="text"
id="tambahanbida"
class="form-control"
disabled
/>
</div>
</div>
<div class="row justify-content-end">
<div class="col-7">
<div
style="font-size: 13px"
class="fst-italic text-danger"
v-if="v$.tambahan.$error"
>
<div class="text-end">
*Minimum beza harga adalah RM1.
</div>
<div class="text-end">
*Gandaan ringgit sahaja dibenarkan.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="row m-2">
<div
class="col"
style="
@@ -196,8 +315,6 @@
-gambar marhun-
</div>
<div class="col">
<!-- <p>Marhun: {{ norujukan.marhun }}</p> -->
<!-- <p>Jumlah Berat: {{ norujukan.berat }}g</p> -->
<table class="table table-bordered">
<tbody>
<tr class="table-light">
@@ -300,10 +417,10 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
<div class="modal-footer">
<button
<!-- <button
type="submit"
class="btn btn-danger me-2"
data-bs-dismiss="modal"
@@ -312,7 +429,22 @@
</button>
<button type="submit" class="btn btn-success" @click="addToCart()">
Tambah Ke Troli
</button>
</button> -->
<Button
class="p-button-sm p-button-text"
label="Kembali"
data-bs-dismiss="modal"
icon="pi pi-times"
iconPos="right"
/>
<Button
class="p-button-sm"
label="Tambah Ke Troli"
icon="pi pi-check"
iconPos="right"
:loading="isLoadingButton"
@click="addToCart()"
/>
</div>
</div>
</div>
@@ -322,7 +454,6 @@
<script>
import axios from "axios";
// import Senarai from "../list/Senarai.vue";
import useVuelidate from "@vuelidate/core";
import { required, integer, numeric, minValue } from "@vuelidate/validators";
import { mapGetters, mapActions } from "vuex";
@@ -338,6 +469,7 @@ export default {
layout: "grid",
status: false,
v$: useVuelidate(),
isLoadingButton: false,
loading: false,
tambahabError: false,
errors: [],
@@ -435,8 +567,7 @@ export default {
addToCart() {
this.v$.$validate();
if (!this.v$.$error) {
this.$refs.tambahClose.click();
this.loading = true;
this.isLoadingButton = true;
axios
.post("/addToCart", this.form, {
headers: {
@@ -444,24 +575,49 @@ export default {
},
})
.then((response) => {
console.log(response);
this.loading = false;
this.$emit("reloadComponent");
this.isLoadingButton = false;
if (response.data.success == true) {
this.$refs.tambahClose.click();
this.$emit("reloadComponent");
this.$swal.fire({
toast: true,
icon: "success",
title: "Berjaya Tambah Ke Troli",
animation: false,
position: "bottom",
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
});
} else {
console.log(response);
this.$swal.fire({
toast: true,
icon: "error",
title: "Gagal! Sila refresh page semula.",
animation: false,
position: "bottom",
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
});
}
// location.reload();
})
.catch((error) => {
// this.loading = false;
this.isLoadingButton = false;
console.log(error);
this.$swal.fire({
toast: true,
icon: "success",
title: "Berjaya Tambah Ke Troli",
icon: "error",
title: "Gagal! Sila refresh page semula.",
animation: false,
position: "bottom",
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
});
// location.reload();
})
.catch((error) => {
this.loading = false;
console.log(error);
});
} else {
// alert("Failed");
@@ -477,10 +633,6 @@ export default {
background-color: rgb(233, 236, 239);
}
::v-deep(.p-dataview .p-dataview-content) {
background: none;
}
.product-image {
min-height: 200px;
min-width: 200px;
src/components/list/TheList.vue
+1 -1
View File
@@ -20,7 +20,7 @@
"
>
<div v-if="isSuccess">
<div class="container">
<div class="row">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">Cawangan</span>
<select class="form-select" @change="pilihCawangan($event)">