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

DONE: fix invoice not found issue, UI enhancement

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-10-19 12:52:53 +08:00
parent 7c87ee803d
commit 7e9401bbfc
14 changed files with 672 additions and 934 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/bid-record/BidRecordList.vue
+60 -65
View File
@@ -1,6 +1,6 @@
<template>
<div>
<VueSidebarMenuAkahon />
<VueSidebarMenuAkahon />
</div>
<div v-if="isLoading" class="fadein animation-duration-400">
<div class="flex align-items-center justify-content-center container-height">
@@ -16,24 +16,25 @@
<template #title>
<div class="grid justify-content-between">
<div class="font-normal">Rekod Bidaan Hari Ini : <span class="white-space-nowrap">{{ date }}</span></div>
<div class="text-xs align-self-center fst-italic fw-lighter text-danger">*Sistem akan menjana pemenang setelah masa bidaan tamat pada {{lelongDetail.masatamat_lelong}}</div>
<div class="text-xs align-self-center fst-italic fw-lighter text-danger">*Sistem akan menjana pemenang
setelah masa bidaan tamat pada {{ lelongDetail.masatamat_lelong }}</div>
</div>
</template>
<template #content>
<Accordion :multiple="true">
<AccordionTab v-for="bid in listBid" v-bind:key="bid">
<Accordion :multiple="true" class="bid-accordion">
<AccordionTab v-for="bid in listBid" :key="bid.caw_name || bid.id">
<template #header>
<div class="flex justify-content-between w-100">
<div class="align-self-center" style="margin: 5px">
<div class="bid-accordion-header">
<span class="bid-accordion-title">
{{ bid.caw_name }}
</div>
<div class="style-info">
</span>
<span class="style-info">
Jumlah RM{{
bid.total_bidaan
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</div>
</span>
</div>
</template>
<div class="overflow-x-auto">
@@ -46,19 +47,12 @@
<td>Berat</td>
<td style="min-width: 120px">Harga Bida</td>
</tr>
<tr
v-for="(item, index) in bid.lelongbid"
v-bind:key="item"
>
<tr v-for="(item, index) in bid.lelongbid" v-bind:key="item">
<td>{{ index + 1 }}</td>
<td>
<a
href="#"
data-bs-toggle="modal"
data-bs-target="#marhunModal"
v-on:click="marhunModal(item)"
>{{ item.norujukan }}</a
>
<a href="#" data-bs-toggle="modal" data-bs-target="#marhunModal"
v-on:click="marhunModal(item)">{{
item.norujukan }}</a>
</td>
<td>{{ item.masa_bidaan }}</td>
<td>{{ item.berat }}g</td>
@@ -91,9 +85,7 @@
</div>
</div>
<div v-else>
<div
class="flex align-items-center justify-content-center container-height"
>
<div class="flex align-items-center justify-content-center container-height">
<div class="grid justify-content-center">
<div class="col-12 mb-4 text-center">
<i class="pi pi-book text-8xl text-400"></i>
@@ -102,43 +94,28 @@
<span class="text-400">Tiada Rekod Bidaan Hari Ini.</span>
</div>
<div class="col-12 text-center">
<span class="text-400"
>Sila rujuk halaman
<span class="text-400">Sila rujuk halaman
<router-link v-bind:to="{ name: 'home' }">Utama</router-link>
untuk jadual lelongan.</span
>
untuk jadual lelongan.</span>
</div>
</div>
</div>
</div>
<!-- MARHUN MODAL -->
<div
class="modal fade"
id="marhunModal"
tabindex="-1"
aria-labelledby="marhunModalLabel"
aria-hidden="true"
data-bs-backdrop="static"
>
<div class="modal fade" id="marhunModal" tabindex="-1" aria-labelledby="marhunModalLabel" aria-hidden="true"
data-bs-backdrop="static">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="marhunModalLabel">
{{ theData.norujukan }}
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="grid">
<div
class="col-12 lg:col-6"
style="
<div class="col-12 lg:col-6" style="
display: flex;
justify-content: center;
align-items: center;
@@ -146,14 +123,10 @@
min-width: 300px;
max-height: 600px;
max-width: 600px;
"
>
<item-master-image-modal
v-if="theData.filemarhun"
v-bind:key="reloadImageComponent"
">
<item-master-image-modal v-if="theData.filemarhun" v-bind:key="reloadImageComponent"
v-bind:norujukan="theData.norujukan"
v-bind:filemarhun_id="theData.filemarhun[0].id"
></item-master-image-modal>
v-bind:filemarhun_id="theData.filemarhun[0].id"></item-master-image-modal>
<p v-else style="text-align: center; width: 100%">
Image Unavailable
</p>
@@ -169,10 +142,7 @@
<th style="min-width: 42px">Berat</th>
<th style="min-width: 102px">Harga Asas</th>
</tr>
<tr
v-for="(marhun, index) in theData.lelongbidmarhun"
v-bind:key="marhun"
>
<tr v-for="(marhun, index) in theData.lelongbidmarhun" v-bind:key="marhun">
<td>{{ index + 1 }}</td>
<td>{{ marhun.marhun }}</td>
<td>{{ marhun.karat }}</td>
@@ -218,11 +188,7 @@
</div>
</div>
<div class="modal-footer">
<Button
class="p-button-sm"
label="Kembali"
data-bs-dismiss="modal"
/>
<Button class="p-button-sm" label="Kembali" data-bs-dismiss="modal" />
</div>
</div>
</div>
@@ -304,17 +270,46 @@ export default {
min-height: 70vh;
}
.bid-accordion :deep(.p-accordion-header-link) {
display: flex;
align-items: center;
gap: 0.75rem;
}
.bid-accordion :deep(.p-accordion-toggle-icon) {
flex-shrink: 0;
margin-right: 0;
}
.bid-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1 1 auto;
min-width: 0;
gap: 0.75rem;
}
.bid-accordion-title {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.style-info {
background: #e4f8f0;
border: solid #1ea97c;
border-width: 0px;
border-width: 0.1px;
color: #1ea97c;
font-size: 1rem;
font-size: 0.95rem;
align-items: center;
display: flex;
padding: 0.4rem 0.9rem;
display: inline-flex;
padding: 0.35rem 0.75rem;
margin: 0;
border-radius: 6px;
font-weight: 400;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
</style>
src/components/cart/CartListNew.vue
+214 -328
View File
@@ -1,18 +1,12 @@
<template>
<div v-if="isLoading" class="fadein animation-duration-400">
<div
class="flex align-items-center justify-content-center container-height"
>
<div class="flex align-items-center justify-content-center container-height">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div
v-else
style="min-height: 70vh"
class="container fadein animation-duration-400"
>
<div v-else style="min-height: 70vh" class="container fadein animation-duration-400">
<div v-if="isSuccess" class="row">
<div class="col-12 lg:col-9">
<Card>
@@ -20,24 +14,24 @@
<div class="font-normal">Senarai Troli</div>
</template>
<template #content>
<Accordion :multiple="true">
<AccordionTab v-for="item in listItems" v-bind:key="item">
<Accordion :multiple="true" class="cart-accordion">
<AccordionTab v-for="item in listItems" :key="item.caw_name || item.id">
<template #header>
<div class="flex justify-content-between w-100">
<div class="align-self-center" style="margin: 5px">
<div class="cart-accordion-header">
<span class="cart-accordion-title">
{{ item.caw_name }}
</div>
<div class="style-info">
</span>
<span class="style-info">
Jumlah RM{{
item.total_bidaan
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</div>
</span>
</div>
</template>
<div class="overflow-x-auto">
<table class="table text-center table-bordered table-hover">
<table class="table text-center table-bordered table-hover mb-0">
<tbody>
<tr class="table-light">
<td>Bil</td>
@@ -48,18 +42,11 @@
<td style="min-width: 170px">Tambahan Bidaan</td>
<td>Tindakan</td>
</tr>
<tr
v-for="(surat, index) in item.lelongbid"
:key="surat.id"
>
<tr v-for="(surat, index) in item.lelongbid" :key="surat.id">
<td>{{ index + 1 }}</td>
<td>
<a
href="#"
data-bs-toggle="modal"
data-bs-target="#marhunModal"
v-on:click="openModal(surat)"
>
<a href="#" data-bs-toggle="modal" data-bs-target="#marhunModal"
v-on:click="openModal(surat)">
{{ surat.norujukan }}
</a>
</td>
@@ -78,28 +65,18 @@
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</td>
<th>
<td class="font-bold">
RM{{
surat.tambahanbidaan
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</th>
<td>
<Button
icon="pi pi-trash"
data-bs-toggle="modal"
data-bs-target="#deleteModal"
v-on:click="openModal(surat)"
class="p-button-text p-button-danger"
/>
<Button
icon="pi pi-file-edit"
data-bs-toggle="modal"
data-bs-target="#editModal"
v-on:click="openModal(surat)"
class="p-button-warning p-button-text"
/>
</td>
<td class="white-space-nowrap">
<Button icon="pi pi-trash" data-bs-toggle="modal" data-bs-target="#deleteModal"
v-on:click="openModal(surat)" class="p-button-text p-button-danger" />
<Button icon="pi pi-file-edit" data-bs-toggle="modal" data-bs-target="#editModal"
v-on:click="openModal(surat)" class="p-button-warning p-button-text" />
</td>
</tr>
<tr style="text-transform: uppercase">
@@ -130,15 +107,11 @@
</template>
<template #content>
<div>
<i class="pi pi-paperclip text-primary"
><span class="ml-1">Jumlah Surat</span></i
>
<i class="pi pi-paperclip text-primary"><span class="ml-1">Jumlah Surat</span></i>
<p>{{ masterTotalSurat }}</p>
</div>
<div>
<i class="pi pi-wallet text-primary"
><span class="ml-1">Jumlah Kesuluruhan Bidaan</span></i
>
<i class="pi pi-wallet text-primary"><span class="ml-1">Jumlah Kesuluruhan Bidaan</span></i>
<p class="font-bold text-xl">
RM{{
@@ -148,17 +121,10 @@
}}
</p>
</div>
<Button
label="Teruskan"
class="p-button-sm w-full"
v-on:click="openModalNew()"
/>
<Button label="Teruskan" class="p-button-sm w-full" v-on:click="openModalNew()" />
<div class="bounce-up-down">
<div class="info-teruskan-icon">
<i
class="pi pi-arrow-circle-up text-3xl"
style="color: #ff5757"
></i>
<i class="pi pi-arrow-circle-up text-3xl" style="color: #ff5757"></i>
</div>
<div class="info-teruskan">
Sila klik 'Teruskan' jika pasti untuk meneruskan bidaan ini.
@@ -169,9 +135,7 @@
</div>
</div>
<div v-else>
<div
class="flex align-items-center justify-content-center container-height"
>
<div class="flex align-items-center justify-content-center container-height">
<div class="grid justify-content-center">
<div class="col-12 mb-4 text-center">
<i class="pi pi-shopping-cart text-8xl text-400"></i>
@@ -180,43 +144,28 @@
<span class="text-400">Tiada Data Dalam Troli.</span>
</div>
<div class="col-12 text-center">
<span class="text-400"
>Sila rujuk halaman
<span class="text-400">Sila rujuk halaman
<router-link v-bind:to="{ name: 'list' }">Senarai</router-link>
untuk tambah item ke troli.</span
>
untuk tambah item ke troli.</span>
</div>
</div>
</div>
</div>
<!-- MARHUN MODAL -->
<div
class="modal fade"
id="marhunModal"
tabindex="-1"
aria-labelledby="marhunModalLabel"
aria-hidden="true"
data-bs-backdrop="static"
>
<div class="modal fade" id="marhunModal" tabindex="-1" aria-labelledby="marhunModalLabel" aria-hidden="true"
data-bs-backdrop="static">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="marhunModalLabel">
{{ theSurat.norujukan }}
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="grid">
<div
class="col-12 lg:col-6"
style="
<div class="col-12 lg:col-6" style="
display: flex;
justify-content: center;
align-items: center;
@@ -224,14 +173,10 @@
min-width: 300px;
max-height: 600px;
max-width: 600px;
"
>
<item-master-image-modal
v-if="theSurat.filemarhun"
v-bind:key="reloadImageComponent"
">
<item-master-image-modal v-if="theSurat.filemarhun" v-bind:key="reloadImageComponent"
v-bind:norujukan="theSurat.norujukan"
v-bind:filemarhun_id="theSurat.filemarhun[0].id"
></item-master-image-modal>
v-bind:filemarhun_id="theSurat.filemarhun[0].id"></item-master-image-modal>
<p v-else style="text-align: center; width: 100%">
Image Unavailable
</p>
@@ -247,10 +192,7 @@
<td style="min-width: 42px">Berat</td>
<td style="min-width: 102px">Harga Asas</td>
</tr>
<tr
v-for="(data, index) in theSurat.lelongbidmarhun"
v-bind:key="data"
>
<tr v-for="(data, index) in theSurat.lelongbidmarhun" v-bind:key="data">
<td>{{ index + 1 }}</td>
<td>{{ data.marhun }}</td>
<td>{{ data.karat }}</td>
@@ -292,59 +234,30 @@
</div>
</div>
</div>
<Button
icon="pi pi-trash"
label="Padam Surat"
data-bs-toggle="modal"
iconPos="right"
data-bs-target="#deleteModal"
v-on:click="openModal(theSurat)"
class="p-button-text p-button-danger"
/>
<Button
icon="pi pi-file-edit"
label="Ubah Bidaan"
data-bs-toggle="modal"
iconPos="right"
data-bs-target="#editModal"
v-on:click="openModal(theSurat)"
class="p-button-warning p-button-text"
/>
<Button icon="pi pi-trash" label="Padam Surat" data-bs-toggle="modal" iconPos="right"
data-bs-target="#deleteModal" v-on:click="openModal(theSurat)"
class="p-button-text p-button-danger" />
<Button icon="pi pi-file-edit" label="Ubah Bidaan" data-bs-toggle="modal" iconPos="right"
data-bs-target="#editModal" v-on:click="openModal(theSurat)" class="p-button-warning p-button-text" />
</div>
</div>
</div>
<div class="modal-footer">
<Button
class="p-button-sm"
label="Kembali"
data-bs-dismiss="modal"
/>
<Button class="p-button-sm" label="Kembali" data-bs-dismiss="modal" />
</div>
</div>
</div>
</div>
<!-- EDIT MODAL -->
<div
class="modal fade"
id="editModal"
tabindex="-1"
aria-labelledby="editModalLabel"
aria-hidden="true"
data-bs-backdrop="static"
>
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true"
data-bs-backdrop="static">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editModalLabel">
{{ theSurat.norujukan }}
</h5>
<button
type="button"
class="btn-close"
ref="editClose"
data-bs-dismiss="modal"
aria-label="Close"
></button>
<button type="button" class="btn-close" ref="editClose" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
@@ -352,18 +265,13 @@
<div class="col">
<div class="row justify-content-center">
<div class="col-6">
<label class="col-form-label text-end"
>Jumlah Harga Asas (A)</label
>
<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; padding-bottom: 0px"
class="form-control text-start justify-content-start"
disabled
>
<div style="background-color: #e9ecef; padding-bottom: 0px"
class="form-control text-start justify-content-start" disabled>
{{
theSurat.hargaasas
?.toString()
@@ -375,19 +283,12 @@
</div>
<div class="row justify-content-center">
<div class="col-6">
<label class="col-form-label text-end"
>Jumlah Harga Bida (B)</label
>
<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="jumlahBidaan"
v-on:keyup="calcDiff()"
/>
<input type="text" class="form-control" v-model="jumlahBidaan" v-on:keyup="calcDiff()" />
</div>
</div>
</div>
@@ -422,43 +323,21 @@
</div>
</div>
<div class="modal-footer">
<Button
class="p-button-sm p-button-danger m-1"
label="Batal"
data-bs-dismiss="modal"
/>
<Button
class="p-button-sm p-button-success m-1"
icon="pi pi-file-edit"
iconPos="right"
label="Ubah"
:loading="isLoadingUbah"
@click="updateItem(theSurat)"
/>
<Button class="p-button-sm p-button-danger m-1" label="Batal" data-bs-dismiss="modal" />
<Button class="p-button-sm p-button-success m-1" icon="pi pi-file-edit" iconPos="right" label="Ubah"
:loading="isLoadingUbah" @click="updateItem(theSurat)" />
</div>
</div>
</div>
</div>
<!-- DELETE MODAL -->
<div
class="modal fade"
id="deleteModal"
tabindex="-1"
aria-labelledby="deleteModalLabel"
aria-hidden="true"
data-bs-backdrop="static"
data-bs-keyboard="false"
>
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true"
data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center">
<div class="modal-header">
<button
type="button"
class="btn-close"
ref="deleteClose"
data-bs-dismiss="modal"
aria-label="Close"
></button>
<button type="button" class="btn-close" ref="deleteClose" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
@@ -491,44 +370,22 @@
</p>
</div>
<div class="modal-footer">
<Button
class="p-button-sm p-button-danger mr-2"
label="Batal"
data-bs-dismiss="modal"
/>
<Button
class="p-button-sm p-button-success"
icon="pi pi-trash"
iconPos="right"
label="Padam"
:loading="isLoadingPadam"
@click="deleteItem(theSurat)"
/>
<Button class="p-button-sm p-button-danger mr-2" label="Batal" data-bs-dismiss="modal" />
<Button class="p-button-sm p-button-success" icon="pi pi-trash" iconPos="right" label="Padam"
:loading="isLoadingPadam" @click="deleteItem(theSurat)" />
</div>
</div>
</div>
</div>
<!-- DAFTAR BIDAAN MODAL -->
<div
class="modal fade"
id="bidModal"
tabindex="-1"
aria-labelledby="bidModalLabel"
aria-hidden="true"
data-bs-backdrop="static"
data-bs-keyboard="false"
>
<div class="modal fade" id="bidModal" tabindex="-1" aria-labelledby="bidModalLabel" aria-hidden="true"
data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content text-center">
<div class="modal-header">
<h5 class="modal-title" id="bidModalLabel">Daftar Bidaan</h5>
<button
type="button"
class="btn-close"
ref="daftarBidaanClose"
data-bs-dismiss="modal"
aria-label="Close"
></button>
<button type="button" class="btn-close" ref="daftarBidaanClose" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
@@ -541,11 +398,7 @@
jam 4:00pm hari ini.
<p>Jika tidak selesai, saya akan dibanned.</p>
</div>
<div
class="alert alert-danger"
role="alert"
v-if="v$.akadLelong.$error"
>
<div class="alert alert-danger" role="alert" v-if="v$.akadLelong.$error">
Sila tick kotak akad lelong sebelum meneruskan.
</div>
</div>
@@ -554,36 +407,20 @@
</p>
</div>
<div class="modal-footer">
<button
type="submit"
class="btn btn-danger me-2"
data-bs-dismiss="modal"
>
<button type="submit" class="btn btn-danger me-2" data-bs-dismiss="modal">
Tidak
</button>
<button
type="submit"
class="btn btn-success"
v-on:click="bidderSelectBidItem()"
>
<button type="submit" class="btn btn-success" v-on:click="bidderSelectBidItem()">
Ya
</button>
<p
class="fst-italic mt-3 fw-lighter"
style="text-align: right; font-size: small"
></p>
<p class="fst-italic mt-3 fw-lighter" style="text-align: right; font-size: small"></p>
</div>
</div>
</div>
</div>
<!-- DAFTAR BIDAAN MODAL - PRIMEVUE -->
<Dialog
header="Daftar Bidaan"
v-model:visible="displayModal"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }"
:style="{ width: '50vw' }"
:modal="true"
>
<Dialog header="Daftar Bidaan" v-model:visible="displayModal" :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
:style="{ width: '50vw' }" :modal="true">
<div class="text-center">
<h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
<h3>ADAKAH ANDA PASTI?</h3>
@@ -610,14 +447,14 @@
</table>
</div>
<div class="mt-3 mb-1">
<label>
<label class="akad-checkbox">
<input type="checkbox" v-model="akadLelong" />
Saya bersetuju untuk membayar kesemua bidaan yang menang.
</label>
</div>
<InlineMessage v-if="v$.akadLelong.$error"
>Anda mestilah bersetuju dengan akad lelong.</InlineMessage
>
<InlineMessage v-if="showAkadError" severity="error">
Anda mestilah bersetuju dengan akad lelong.
</InlineMessage>
</div>
<div class="text-center mt-5">
<p class="text-danger">
@@ -625,42 +462,25 @@
</p>
</div>
<template #footer>
<Button
label="Tidak"
icon="pi pi-times"
iconPos="right"
@click="closeModalNew()"
class="p-button-text"
/>
<Button label="Tidak" icon="pi pi-times" iconPos="right" @click="closeModalNew()" class="p-button-text" />
<Button
label="Ya"
icon="pi pi-check"
iconPos="right"
:loading="isLoadingDaftar"
:disabled="!akadLelong"
v-on:click="bidderSelectBidItem()"
/>
</template>
</Dialog>
<!-- GAGAL DAFTAR BIDAAN MODAL -->
<div
class="modal fade"
id="gagalDaftarBidaanModal"
tabindex="-1"
aria-labelledby="gagalDaftarBidaanModalLabel"
aria-hidden="true"
data-bs-backdrop="static"
data-bs-keyboard="false"
>
<div class="modal fade" id="gagalDaftarBidaanModal" tabindex="-1" aria-labelledby="gagalDaftarBidaanModalLabel"
aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="gagalDaftarBidaanModalLabel"></h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h1><i class="bi bi-x-circle text-danger"></i></h1>
@@ -669,11 +489,7 @@
<p>Sila tambah surat ke dalam troli anda.</p>
</div>
<div class="modal-footer">
<button
type="submit"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
<button type="submit" class="btn btn-secondary" data-bs-dismiss="modal">
Kembali
</button>
</div>
@@ -685,9 +501,10 @@
<script>
import { useAuthenticationUserStore } from "@/store/modules/authentication";
import { useCartStore } from "@/store/modules/cart";
import axios from "axios";
import useVuelidate from "@vuelidate/core";
import { required, integer, numeric, minValue } from "@vuelidate/validators";
import { required, integer, numeric, minValue, sameAs } from "@vuelidate/validators";
import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
export default {
@@ -711,7 +528,8 @@ export default {
tambahanBidaan: "",
reloadImageComponent: 0,
jumlahBidaan: "",
akadLelong: null,
akadLelong: false,
showAkadError: false,
hargaAsas: "",
formDelete: {
userId: "",
@@ -732,19 +550,30 @@ export default {
validations() {
return {
tambahanBidaan: { required, numeric, integer, minValue: minValue(1) },
akadLelong: { required },
akadLelong: { checked: sameAs(true) },
};
},
watch: {
akadLelong(value) {
if (value) {
this.showAkadError = false;
}
},
},
mounted: function () {
this.listCart();
},
methods: {
openModalNew() {
this.displayModal = true;
this.akadLelong = null;
this.akadLelong = false;
this.showAkadError = false;
this.isLoadingDaftar = false;
},
closeModalNew() {
this.displayModal = false;
this.akadLelong = false;
this.showAkadError = false;
},
listCart() {
this.isLoading = true;
@@ -799,6 +628,7 @@ export default {
allowOutsideClick: false,
allowEscapeKey: false,
});
useCartStore().fetchCount();
this.$emit("reloadComponent");
} else if (response.data.success == false) {
console.log(response);
@@ -812,6 +642,7 @@ export default {
timer: 5000,
timerProgressBar: true,
});
useCartStore().fetchCount();
this.$emit("reloadComponent");
}
})
@@ -875,67 +706,13 @@ export default {
}
},
bidderSelectBidItem() {
if (this.isSuccess == true) {
this.v$.$validate();
if (!this.v$.akadLelong.$error) {
// this.loading = true;
this.isLoadingDaftar = true;
axios
.post("/bidder/biditem", this.formRegisterBid, {
headers: {
Authorization: "Bearer " + useAuthenticationUserStore().token,
},
})
.then((response) => {
// console.log("bidderSelectBidItem", response);
if (response.data.success == "success") {
this.isLoadingDaftar = false;
this.$refs.daftarBidaanClose.click();
this.$swal.fire({
icon: "success",
title: "Bidaan Berjaya Didaftarkan",
text: "Sila ke halaman rekod untuk senarai rekod bidaan.",
confirmButtonColor: "#344871",
confirmButtonText: "OK",
allowOutsideClick: false,
allowEscapeKey: false,
});
// this.loading = false;
this.$emit("reloadComponent");
} else {
this.isLoadingDaftar = false;
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,
});
}
})
.catch((error) => {
// this.$refs.daftarBidaanClose.click();
// this.loading = false;
console.log(error);
this.$swal.fire({
toast: true,
icon: "error",
title: "Gagal! Sila refresh page semula.",
animation: false,
position: "bottom",
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
});
});
} else {
}
} else {
this.$refs.daftarBidaanClose.click();
if (!this.akadLelong) {
this.showAkadError = true;
return;
}
if (this.isSuccess != true) {
this.closeModalNew();
this.$swal.fire({
icon: "error",
title: "Gagal Daftar Bidaan",
@@ -945,7 +722,61 @@ export default {
allowOutsideClick: false,
allowEscapeKey: false,
});
return;
}
this.showAkadError = false;
this.isLoadingDaftar = true;
axios
.post("/bidder/biditem", this.formRegisterBid, {
headers: {
Authorization: "Bearer " + useAuthenticationUserStore().token,
},
})
.then((response) => {
// console.log("bidderSelectBidItem", response);
this.isLoadingDaftar = false;
if (response.data.success == "success") {
this.closeModalNew();
this.$swal.fire({
icon: "success",
title: "Bidaan Berjaya Didaftarkan",
text: "Sila ke halaman rekod untuk senarai rekod bidaan.",
confirmButtonColor: "#344871",
confirmButtonText: "OK",
allowOutsideClick: false,
allowEscapeKey: false,
});
useCartStore().fetchCount();
this.$emit("reloadComponent");
} 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,
});
}
})
.catch((error) => {
this.isLoadingDaftar = false;
console.log(error);
this.$swal.fire({
toast: true,
icon: "error",
title: "Gagal! Sila refresh page semula.",
animation: false,
position: "bottom",
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
});
});
},
},
};
@@ -956,6 +787,49 @@ export default {
min-height: 70vh;
}
.cart-accordion :deep(.p-accordion-header-link) {
display: flex;
align-items: center;
gap: 0.75rem;
}
.cart-accordion :deep(.p-accordion-toggle-icon) {
flex-shrink: 0;
margin-right: 0;
}
.cart-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1 1 auto;
min-width: 0;
gap: 0.75rem;
}
.cart-accordion-title {
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.style-info {
background: #e4f8f0;
border: solid #1ea97c;
border-width: 0.1px;
color: #1ea97c;
font-size: 0.95rem;
align-items: center;
display: inline-flex;
padding: 0.35rem 0.75rem;
margin: 0;
border-radius: 6px;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
.info-teruskan {
background: #ffe7e6;
border: solid #ff5757;
@@ -976,4 +850,16 @@ export default {
.icon-color {
color: #ff5757;
}
.akad-checkbox {
display: inline-flex;
align-items: flex-start;
gap: 0.5rem;
text-align: left;
cursor: pointer;
}
.akad-checkbox input {
margin-top: 0.25rem;
}
</style>
src/components/home/CurrentKarat.vue
+5 -4
View File
@@ -1,7 +1,7 @@
<template>
<Card style="margin-bottom: 1em">
<template #title>
<div class="flex justify-content-center flex-wrap card-container">
<div class="flex align-items-center justify-content-center flex-wrap gap-2 card-container">
<div class="font-normal">Harga Emas Lelongan</div>
<Button
class="button-standard p-button-rounded p-button-outlined"
@@ -37,9 +37,10 @@ export default {
</script>
<style scoped>
/* Shrink icon-only button; reset theme padding so the icon stays centered. */
.button-standard {
height: 30px !important;
width: 30px !important;
margin-top: 3px !important;
width: 2rem;
height: 2rem;
padding: 0;
}
</style>
src/components/home/LelongNext.vue
+8 -6
View File
@@ -1,14 +1,15 @@
<template>
<Card style="margin-bottom: 1em">
<template #title>
<div class="flex justify-content-center flex-wrap card-container purple-container">
<div class="flex align-items-center justify-content-center flex-wrap gap-2 card-container purple-container">
<div class="font-normal">Lelongan Seterusnya</div>
<Button
class="button-standard p-button-rounded p-button-outlined"
icon="pi pi-refresh"
@click="toggleReloadComponent()"
/></div
></template>
/>
</div>
</template>
<template #content>
<lelong-next-detail v-bind:key="componentKey"></lelong-next-detail>
</template>
@@ -37,9 +38,10 @@ export default {
</script>
<style scoped>
/* Shrink icon-only button; reset theme padding so the icon stays centered. */
.button-standard {
height: 30px !important;
width: 30px !important;
margin-top: 3px !important;
width: 2rem;
height: 2rem;
padding: 0;
}
</style>
src/components/home/LelongToday.vue
+7 -9
View File
@@ -1,13 +1,10 @@
<template>
<Card style="margin-bottom: 1em">
<template #title>
<div class="flex justify-content-center flex-wrap card-container">
<div class="flex align-items-center justify-content-center flex-wrap gap-2 card-container">
<div class="font-semibold">Lelongan Hari Ini : <span class="white-space-nowrap">{{ date }}</span></div>
<Button
class="button-standard p-button-rounded p-button-outlined"
icon="pi pi-refresh"
@click="toggleReloadComponent()"
/>
<Button class="button-standard p-button-rounded p-button-outlined" icon="pi pi-refresh"
@click="toggleReloadComponent()" />
</div>
</template>
<template #content>
@@ -51,9 +48,10 @@ export default {
</script>
<style scoped>
/* Shrink icon-only button; reset theme padding so the icon stays centered. */
.button-standard {
height: 30px !important;
width: 30px !important;
margin-top: 3px !important;
width: 2rem;
height: 2rem;
padding: 0;
}
</style>
src/components/layouts/TheHeader.vue
+93 -140
View File
@@ -1,65 +1,45 @@
<template>
<!-- Navbar for laptop screen size (width>992px) -->
<div class="card sticky-top lg:flex hidden border-none">
<Toast :breakpoints="{ '992px': { display: 'none' }, }"/>
<Toast :breakpoints="{ '992px': { display: 'none' }, }" />
<div class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color">
<div class="flex align-items-center justify-content-center">
<div class="company-title" type="button" v-on:click="toHome()">
<!-- <div class="logo-title">E-Rahn Lelong</div> -->
<!-- <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" /> -->
<img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()"/>
<img class="logo-img" src="/img/e-rahn-lelong.png" alt="arrahn-logo" type="button" v-on:click="toHome()" />
</div>
</div>
<div class="flex align-items-center justify-content-center">
<nav class="main-nav">
<router-link class="nav-button" v-bind:to="{ name: 'home' }"
>Utama</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'list' }"
>Senarai</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'cart' }"
>Troli</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'bid-record' }"
>Rekod</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'result' }"
>Keputusan</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'policy' }"
>Polisi</router-link
>
<router-link class="nav-button" v-bind:to="{ name: 'home' }">Utama</router-link>
<router-link class="nav-button" v-bind:to="{ name: 'list' }">Senarai</router-link>
<router-link class="nav-button cart-nav-link" v-bind:to="{ name: 'cart' }">
Troli
<span v-if="cartStore.hasItems" class="cart-count-badge">{{ cartStore.badgeLabel }}</span>
</router-link>
<router-link class="nav-button" v-bind:to="{ name: 'bid-record' }">Rekod</router-link>
<router-link class="nav-button" v-bind:to="{ name: 'result' }">Keputusan</router-link>
<router-link class="nav-button" v-bind:to="{ name: 'policy' }">Polisi</router-link>
</nav>
</div>
<div class="flex align-items-center justify-content-center">
<div class="profile-title hidden lg:flex">
<div class="dropdown">
<div
class="dropdown-toggle"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<div class="dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-person-circle me-1"></i>{{ username }}
</div>
<ul class="dropdown-menu">
<li>
<div
type="button"
class="dropdown-item"
v-on:click="toProfile()"
>
<div type="button" class="dropdown-item" v-on:click="toProfile()">
Profil <i class="bi bi-person-workspace"></i>
</div>
</li>
<li><hr class="dropdown-divider" /></li>
<li>
<div
type="button"
v-on:click="doLogout()"
class="dropdown-item"
>
<hr class="dropdown-divider" />
</li>
<li>
<div type="button" v-on:click="doLogout()" class="dropdown-item">
Log Keluar <i class="bi bi-box-arrow-right"></i>
</div>
</li>
@@ -71,8 +51,7 @@
</div>
<!-- Navbar for phone, tab screen size (width<992px) -->
<div class="card sticky-top lg:hidden md:flex border-none">
<div
class="
<div class="
flex
justify-content-between
px-3
@@ -80,14 +59,9 @@
h-3rem
flex-wrap
main-color
"
>
">
<div class="flex align-items-center justify-content-center">
<i
class="pi pi-bars text-white lg:hidden mr-3"
style="cursor: pointer"
@click="visibleRight = true"
></i>
<i class="pi pi-bars text-white lg:hidden mr-3" style="cursor: pointer" @click="visibleRight = true"></i>
<div class="company-title" type="button" v-on:click="toHome()">
<div class="logo-title">E-Rahn Lelong</div>
<!-- <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" /> -->
@@ -95,34 +69,19 @@
</div>
<div class="flex align-items-center justify-content-center">
<!-- <i
class="pi pi-shopping-cart text-white lg:hidden"
style="cursor: pointer"
@click="visibleRight = true"
></i> -->
<!-- <i
class="pi pi-shopping-cart mr-1 p-text-primary"
style="font-size: 1.5rem; color: #eaf0f9"
v-badge.success="itemInCart"
v-on:click="toCart()"
v-if="isSuccessCart"
></i> -->
<i
class="pi pi-shopping-cart mr-1 p-text-primary"
style="font-size: 1.5rem; color: #eaf0f9"
v-on:click="toCart()"
></i>
<span class="cart-nav-icon" v-on:click="toCart()">
<i class="pi pi-shopping-cart p-text-primary" style="font-size: 1.5rem; color: #eaf0f9"></i>
<span v-if="cartStore.hasItems" class="cart-count-badge">{{ cartStore.badgeLabel }}</span>
</span>
</div>
</div>
<div v-if="lelongOnline != ''">
<div
class="
<div class="
flex
align-items-center
justify-content-center
notification-mobile
"
>
">
<i class="blink pi pi-info-circle mr-2"></i> Lelongan akan tamat pada
{{ lelongOnline }}
</div>
@@ -136,53 +95,29 @@
</div>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'home' }"
>Utama</router-link
>
<router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'home' }">Utama</router-link>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'list' }"
>Senarai</router-link
>
<router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'list' }">Senarai</router-link>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'cart' }"
>Troli</router-link
>
<router-link class="main-nav-link main-nav-link-sidebar cart-nav-link" v-bind:to="{ name: 'cart' }">
Troli
<span v-if="cartStore.hasItems" class="cart-count-badge cart-count-badge-sidebar">{{ cartStore.badgeLabel
}}</span>
</router-link>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'bid-record' }"
>Rekod</router-link
>
<router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'bid-record' }">Rekod</router-link>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'result' }"
>Keputusan</router-link
>
<router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'result' }">Keputusan</router-link>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'policy' }"
>Polisi</router-link
>
<router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'policy' }">Polisi</router-link>
</div>
<div class="col-12">
<router-link
class="main-nav-link main-nav-link-sidebar"
v-bind:to="{ name: 'profile' }"
>Profil</router-link
>
<router-link class="main-nav-link main-nav-link-sidebar" v-bind:to="{ name: 'profile' }">Profil</router-link>
</div>
<div class="col-12">
<!-- <router-link
@@ -192,12 +127,8 @@
> -->
</div>
<div class="col-12">
<a
class="main-nav-link main-nav-link-sidebar"
v-on:click="doLogout()"
href="#"
><i class="bi bi-box-arrow-right me-1"></i> Log Keluar</a
>
<a class="main-nav-link main-nav-link-sidebar" v-on:click="doLogout()" href="#"><i
class="bi bi-box-arrow-right me-1"></i> Log Keluar</a>
</div>
</div>
</Sidebar>
@@ -205,7 +136,8 @@
<script>
import axios from "axios";
import { useAuthenticationUserStore } from "@/store/modules/authentication"
import { useAuthenticationUserStore } from "@/store/modules/authentication";
import { useCartStore } from "@/store/modules/cart";
export default {
data() {
@@ -213,18 +145,22 @@ export default {
username: useAuthenticationUserStore().username,
visibleRight: false,
lelongOnline: "",
isSuccessCart: false,
itemInCart: 0,
};
},
setup() {
const authenticationStore = useAuthenticationUserStore()
const authenticationStore = useAuthenticationUserStore();
const cartStore = useCartStore();
return { authenticationStore }
return { authenticationStore, cartStore };
},
mounted: function () {
mounted() {
this.getLelongOnline();
// this.getItemInCart();
this.cartStore.fetchCount();
},
watch: {
"$route.fullPath"() {
this.cartStore.fetchCount();
},
},
methods: {
async doLogout() {
@@ -233,6 +169,7 @@ export default {
} catch (error) {
console.log(error);
} finally {
this.cartStore.clear();
this.authenticationStore.clearSession();
this.$router.push({ name: "login" });
}
@@ -270,31 +207,6 @@ export default {
console.log(error);
});
},
getItemInCart() {
this.loading = true;
axios
.get("/itemInCart", {
headers: {
Authorization: "Bearer " + useAuthenticationUserStore().token,
},
params: {
user_id: useAuthenticationUserStore().id,
},
})
.then((response) => {
// console.log('getItemInCart', response);
if (response.data.success === true) {
this.isSuccessCart = true;
this.itemInCart = response.data.cart;
} else {
this.isSuccessCart = false;
}
})
.catch((error) => {
console.log(error);
});
},
},
};
</script>
@@ -338,6 +250,7 @@ router-link:hover {
height: 2.5rem;
padding: 25px 10px;
}
.main-color {
background-color: #0D908B;
}
@@ -431,4 +344,44 @@ a.router-link-exact-active:hover {
.arrow-logo {
font-size: 0.5rem;
}
.cart-nav-link,
.cart-nav-icon {
position: relative;
display: inline-flex;
align-items: center;
}
.cart-nav-icon {
cursor: pointer;
}
.cart-count-badge {
position: absolute;
top: -0.45rem;
right: -0.7rem;
min-width: 1.15rem;
height: 1.15rem;
padding: 0 0.3rem;
border-radius: 999px;
background: #ef4444;
color: #ffffff;
font-size: 0.7rem;
font-weight: 700;
line-height: 1.15rem;
text-align: center;
box-shadow: 0 0 0 1.5px #0d908b;
pointer-events: none;
}
.cart-count-badge-sidebar {
position: static;
margin-left: 0.5rem;
box-shadow: none;
}
a.router-link-exact-active .cart-count-badge {
box-shadow: 0 0 0 1.5px #fae79a;
color: #ffffff;
}
</style>
src/components/list/ListItem.vue
+2
View File
@@ -419,6 +419,7 @@ import { read } from "@popperjs/core";
import ItemMasterImage from "./ItemMasterImage.vue";
import ItemMultipleImage from "./ItemMultipleImage.vue";
import ItemMasterImageModal from "./ItemMasterImageModal.vue";
import { useCartStore } from "@/store/modules/cart";
export default {
components: {
@@ -555,6 +556,7 @@ export default {
if (response.data.success == true) {
this.$refs.tambahClose.click();
this.$emit("reloadComponent");
useCartStore().fetchCount();
this.$swal.fire({
toast: true,
icon: "success",
src/components/pay/SelectOutlet.vue
+26 -7
View File
@@ -212,13 +212,16 @@
:modal="true"
>
<div class="text-center">
<div>Lakukan bayaran ke akaun tersebut.</div>
<div>Lakukan bayaran ke akaun cawangan {{ cawanganPilihan }}.</div>
<div class="div-card-bank">
<div class="card-bank">
<div>
<div>Koperasi Permodalan Kelantan Berhad</div>
<div>1102084986</div>
<div>BANK RAKYAT</div>
<div class="bank-label">Nama Bank</div>
<div>{{ cawanganBank.nama_bank || "-" }}</div>
<div class="bank-label">No Akaun Bank</div>
<div>{{ cawanganBank.bank_acc_no || "-" }}</div>
<div class="bank-label">Nama Akaun</div>
<div>{{ cawanganBank.bank_acc || "-" }}</div>
</div>
</div>
</div>
@@ -290,6 +293,11 @@ export default {
isDisplayFileUpload: false,
isLoading: false,
cawanganPilihan: "",
cawanganBank: {
nama_bank: "",
bank_acc: "",
bank_acc_no: "",
},
hargaBidaanPilihan: "",
hargaBidaanPilihanTambahFi: "",
lelongDetails: "",
@@ -368,6 +376,11 @@ export default {
// if (current_time < limit_datetime_bayaran === true) {
this.isDisplayPaymentMethod = true;
this.cawanganPilihan = value.cawangan;
this.cawanganBank = {
nama_bank: value.nama_bank || "",
bank_acc: value.bank_acc || "",
bank_acc_no: value.bank_acc_no || "",
};
this.form.kodcaw = value.kodcaw;
this.hargaBidaanPilihan = value.total_hargabida;
let convertHargaBidaanPilihan =
@@ -488,8 +501,7 @@ export default {
this.$router.push({
name: "detail",
params: {
lelongId: this.lelongIdProps,
statusPayment: null,
lelongId: String(this.lelongIdProps),
},
});
},
@@ -533,10 +545,17 @@ export default {
background: #2f68c51c;
color: #2f68c5f2;
width: 300px;
height: 125px;
min-height: 125px;
border-radius: 16px;
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
}
.bank-label {
margin-top: 8px;
font-size: 12px;
opacity: 0.7;
}
</style>
src/components/pay/ThePay.vue
+16 -32
View File
@@ -1,9 +1,7 @@
<template>
<the-template>
<div v-if="isLoading" class="fadein animation-duration-400">
<div
class="flex align-items-center justify-content-center container-height"
>
<div class="flex align-items-center justify-content-center container-height">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
@@ -15,18 +13,14 @@
<template #title>
<div class="font-normal">
<div class="flex">
<Button
class="
<Button class="
p-button-sm
button-custom
p-button-secondary p-button-outlined
align-self-center
mr-2
"
icon="pi pi-arrow-left"
v-on:click="clickCancelButton()"
/>
Pembayaran Bidaan
" icon="pi pi-arrow-left" v-on:click="clickCancelButton()" />
Pembayaran Bidaan 1
</div>
</div>
<div class="font-normal text-base">
@@ -34,22 +28,17 @@
</div>
</template>
<template #content>
<select-outlet
v-bind:namaCawangan="lists"
v-bind:lelongIdProps="lelongId"
></select-outlet>
<select-outlet v-bind:namaCawangan="lists" v-bind:lelongIdProps="lelongId"></select-outlet>
</template>
</Card>
</div>
<div v-else>
<div
class="
<div class="
flex
align-items-center
justify-content-center
container-height
"
>
">
<div class="grid justify-content-center">
<div class="col-12 mb-4 text-center">
<i class="pi pi-book text-8xl text-400"></i>
@@ -58,13 +47,9 @@
<span class="text-400">Tiada Data.</span>
</div>
<div class="col-12 text-center">
<span class="text-400"
>Sila rujuk halaman
<router-link v-bind:to="{ name: 'result' }"
>Keputusan</router-link
>
untuk maklumat rekod bidaan menang.</span
>
<span class="text-400">Sila rujuk halaman
<router-link v-bind:to="{ name: 'result' }">Keputusan</router-link>
untuk maklumat rekod bidaan menang.</span>
</div>
</div>
</div>
@@ -122,14 +107,14 @@ export default {
methods: {
liveData() {
this.isLoading = true;
if(this.lelongId != null){
if (this.lelongId != null) {
axios
.get(
"/bayarBaki/" +
useAuthenticationUserStore().id +
// "/1" ,
"/" +
this.lelongId,
useAuthenticationUserStore().id +
// "/1" ,
"/" +
this.lelongId,
{
headers: {
Authorization: "Bearer " + useAuthenticationUserStore().token,
@@ -158,8 +143,7 @@ export default {
this.$router.push({
name: "detail",
params: {
lelongId: this.lelongId,
statusPayment: null,
lelongId: String(this.lelongId),
},
});
},
src/components/pay/ThePayCdm.vue
+23 -59
View File
@@ -1,9 +1,7 @@
<template>
<the-template>
<div v-if="isLoading" class="fadein animation-duration-400">
<div
class="flex align-items-center justify-content-center container-height"
>
<div class="flex align-items-center justify-content-center container-height">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
@@ -14,17 +12,13 @@
<Card>
<template #title>
<div class="flex">
<Button
class="
<Button class="
p-button-sm
button-custom
p-button-secondary p-button-outlined
align-self-center
mr-2
"
icon="pi pi-arrow-left"
v-on:click="clickCancelButton()"
/>
" icon="pi pi-arrow-left" v-on:click="clickCancelButton()" />
<div class="font-normal">Pembayaran Bidaan Menggunakan CDM</div>
</div>
<div class="font-normal text-base">
@@ -39,8 +33,7 @@
<div class="font-medium p-0">No Account Bank: 1102084986 (BANK RAKYAT)</div>
<span class="text-xs fst-italic text-danger">
*Sila buat bayaran menggunakan nombor akaun ini sahaja dan muat
naik gambar resit dibawah.</span
>
naik gambar resit dibawah.</span>
<div class="overflow-x-auto">
<table class="mt-5 table text-center table-bordered">
@@ -67,26 +60,13 @@
</tbody>
</table>
</div>
<Button
class="p-button-sm mb-3"
label="Muat Naik Resit"
icon="pi pi-plus-circle"
iconPos="right"
@click="openModalFileUpload()"
/>
<list-receipt
v-bind:key="componentKey"
v-bind:lelong_id="lelongId"
v-on:reloadComponent="toggleReloadComponent"
></list-receipt>
<Button class="p-button-sm mb-3" label="Muat Naik Resit" icon="pi pi-plus-circle" iconPos="right"
@click="openModalFileUpload()" />
<list-receipt v-bind:key="componentKey" v-bind:lelong_id="lelongId"
v-on:reloadComponent="toggleReloadComponent"></list-receipt>
<Dialog
header="Muat Naik Resit Baharu"
v-model:visible="isDisplayFileUpload"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }"
:style="{ width: '50vw' }"
:modal="true"
>
<Dialog header="Muat Naik Resit Baharu" v-model:visible="isDisplayFileUpload"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :modal="true">
<div class="text-center m-2">
<input class="form-control" type="file" accept="image/*" v-on:change="selectPhoto" />
<!-- <FileUpload
@@ -99,32 +79,21 @@
/> -->
</div>
<template #footer>
<Button
class="p-button-sm p-button-secondary"
label="Kembali"
@click="closeModalFileUpload()"
/>
<Button
class="p-button-sm p-button-success"
label="Simpan"
icon="pi pi-check"
iconPos="right"
@click="addPhotoResit()"
/>
<Button class="p-button-sm p-button-secondary" label="Kembali" @click="closeModalFileUpload()" />
<Button class="p-button-sm p-button-success" label="Simpan" icon="pi pi-check" iconPos="right"
@click="addPhotoResit()" />
</template>
</Dialog>
</template>
</Card>
</div>
<div v-else>
<div
class="
<div class="
flex
align-items-center
justify-content-center
container-height
"
>
">
<div class="grid justify-content-center">
<div class="col-12 mb-4 text-center">
<i class="pi pi-book text-8xl text-400"></i>
@@ -133,13 +102,9 @@
<span class="text-400">Tiada Data.</span>
</div>
<div class="col-12 text-center">
<span class="text-400"
>Sila rujuk halaman
<router-link v-bind:to="{ name: 'result' }"
>Keputusan</router-link
>
untuk maklumat rekod bidaan menang.</span
>
<span class="text-400">Sila rujuk halaman
<router-link v-bind:to="{ name: 'result' }">Keputusan</router-link>
untuk maklumat rekod bidaan menang.</span>
</div>
</div>
</div>
@@ -186,10 +151,10 @@ export default {
axios
.get(
"/bayarBaki/" +
useAuthenticationUserStore().id +
// "/1" ,
"/" +
this.lelongId,
useAuthenticationUserStore().id +
// "/1" ,
"/" +
this.lelongId,
{
headers: {
Authorization: "Bearer " + useAuthenticationUserStore().token,
@@ -267,8 +232,7 @@ export default {
this.$router.push({
name: "detail",
params: {
lelongId: this.lelongId,
statusPayment: null,
lelongId: String(this.lelongId),
},
});
},
src/components/result/ResultDetail.vue
+156 -243
View File
@@ -1,9 +1,6 @@
<template>
<the-template>
<div
v-if="loading"
style="min-height: 70vh; display: grid; place-items: center"
>
<div v-if="loading" style="min-height: 70vh; display: grid; place-items: center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
@@ -15,21 +12,14 @@
<template #title>
<div class="grid justify-content-between">
<div class="flex">
<Button
class="
<Button class="
p-button-sm
button-custom
p-button-secondary p-button-outlined
align-self-center
mr-2
"
icon="pi pi-arrow-left"
v-on:click="clickBackButton()"
/>
<div
class="font-normal"
style="font-size: 1.5rem; font-weight: 700"
>
" icon="pi pi-arrow-left" v-on:click="clickBackButton()" />
<div class="font-normal" style="font-size: 1.5rem; font-weight: 700">
Keputusan Tarikh Lelongan: {{ tarikhLelong }}
</div>
</div>
@@ -42,95 +32,59 @@
:disabled="disabled == 1"
v-on:click="clickPayCdmButton(lelongId)"
/> -->
<Button
label="Pembayaran"
icon="pi pi-dollar"
iconPos="right"
class="p-button-sm"
:disabled="disabled == 1"
v-on:click="clickPayButton(lelongId)"
/>
<Button label="Pembayaran" icon="pi pi-dollar" iconPos="right" class="p-button-sm"
:disabled="disabled == 1" v-on:click="clickPayButton(lelongId)" />
</div>
</div>
<div class="row" v-if="disabled != 1">
<div
class="
<div class="
text-xs
align-self-center
fst-italic
fw-lighter
text-danger
md:text-right
"
>
">
*Sila klik butang diatas untuk lakukan bayaran.
</div>
</div>
</template>
<template #content>
<Accordion :multiple="true">
<AccordionTab v-for="list in lists" v-bind:key="list">
<Accordion :multiple="true" class="result-accordion">
<AccordionTab v-for="list in lists" :key="list.cawangan || list.kodcaw">
<template #header>
<div class="flex justify-content-between w-100">
<div class="align-self-center" style="margin: 5px">
<div class="result-accordion-header">
<span class="result-accordion-title">
{{ list.cawangan }}
<span
v-if="list.status_payment_cawangan.status === null"
>
<Tag
value="Belum Bayar"
icon="pi pi-times"
severity="danger"
></Tag>
<span v-if="list.status_payment_cawangan.status === null">
<Tag value="Belum Bayar" icon="pi pi-times" severity="danger"></Tag>
</span>
<span
v-else-if="list.status_payment_cawangan.status == 9"
>
<Tag
value="Tunggu Pengesahan"
icon="pi pi-stopwatch"
severity="warning"
></Tag>
<span v-else-if="list.status_payment_cawangan.status == 9">
<Tag value="Tunggu Pengesahan" icon="pi pi-stopwatch" severity="warning"></Tag>
</span>
<span
v-else-if="list.status_payment_cawangan.status == 1"
>
<Tag
value="Selesai Bayar"
icon="pi pi-check"
severity="success"
></Tag>
<span v-else-if="list.status_payment_cawangan.status == 1">
<Tag value="Selesai Bayar" icon="pi pi-check" severity="success"></Tag>
</span>
</div>
<div class="style-info">
</span>
<span class="style-info">
Jumlah RM{{
list.total_hargabida
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</div>
</span>
</div>
</template>
<Button
label="Surat Hak Kepemilikan Barang"
icon="pi pi-verified"
iconPos="right"
class="p-button-sm mb-3"
v-on:click="downloadPdf(list.kodcaw)"
v-if="list.status_payment_cawangan.status == 1"
/>
<div
v-if="
list.status_payment_cawangan.status == 1 ||
list.status_payment_cawangan.status == 9
"
>
<div
class="m-2"
v-if="
list.status_payment_cawangan.payment_method_opt == 2
"
>
<Button label="Surat Hak Kepemilikan Barang" icon="pi pi-verified" iconPos="right"
class="p-button-sm mb-3" v-on:click="downloadPdf(list.kodcaw)"
v-if="list.status_payment_cawangan.status == 1" />
<div v-if="
list.status_payment_cawangan.status == 1 ||
list.status_payment_cawangan.status == 9
">
<div class="m-2" v-if="
list.status_payment_cawangan.payment_method_opt == 2
">
<div>
<div class="row">
<div>Cara Bayaran: FPX</div>
@@ -143,12 +97,9 @@
</div>
</div>
</div>
<div
class="m-2"
v-else-if="
list.status_payment_cawangan.payment_method_opt == 1
"
>
<div class="m-2" v-else-if="
list.status_payment_cawangan.payment_method_opt == 1
">
<div>
<div class="row">
<div>Cara Bayaran: TUNAI DI CAWANGAN</div>
@@ -161,36 +112,22 @@
</div>
</div>
</div>
<div
class="mt-2 mb-2"
v-else-if="
list.status_payment_cawangan.payment_method_opt == 3
"
>
<div class="mt-2 mb-2" v-else-if="
list.status_payment_cawangan.payment_method_opt == 3
">
<div>
<div class="row mb-3">
<div>Cara Bayaran: CDM</div>
</div>
<div
v-if="
list.status_payment_cawangan.status == 9 &&
list.status_payment_cawangan.file_resit.length < 15
"
>
<Button
class="p-button-sm mb-1"
label="Tambah Resit Baharu"
icon="pi pi-plus-circle"
iconPos="right"
@click="openModalFileUpload(list.kodcaw)"
/>
<Dialog
header="Muat Naik Resit Baharu"
v-model:visible="isDisplayFileUpload"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }"
:style="{ width: '50vw' }"
:modal="true"
>
<div v-if="
list.status_payment_cawangan.status == 9 &&
list.status_payment_cawangan.file_resit.length < 15
">
<Button class="p-button-sm mb-1" label="Tambah Resit Baharu" icon="pi pi-plus-circle"
iconPos="right" @click="openModalFileUpload(list.kodcaw)" />
<Dialog header="Muat Naik Resit Baharu" v-model:visible="isDisplayFileUpload"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }"
:modal="true">
<div class="text-center">
<div>Lakukan bayaran ke akaun tersebut.</div>
<div class="div-card-bank">
@@ -203,62 +140,39 @@
</div>
</div>
</div>
<div class="mt-5">Sila muat naik gambar resit dalam bentuk <strong>PNG</strong> atau <strong>JPG</strong>.</div>
<div class="mt-5">Sila muat naik gambar resit dalam bentuk <strong>PNG</strong> atau
<strong>JPG</strong>.
</div>
<div>Pastikan gambar yang dimuat naik adalah <strong>JELAS.</strong></div>
<div class="text-center m-2">
<input
class="form-control"
type="file"
accept="image/png, image/jpg, image/jpeg"
v-on:change="selectPhoto"
/>
<div
style="font-size: 13px"
class="fst-italic text-danger row"
v-if="v$.fileSize.$error"
>
<input class="form-control" type="file" accept="image/png, image/jpg, image/jpeg"
v-on:change="selectPhoto" />
<div style="font-size: 13px" class="fst-italic text-danger row" v-if="v$.fileSize.$error">
<div>
Jenis gambar yang diterima adalah PNG dan JPG.
</div>
</div>
</div>
<template #footer>
<Button
class="p-button-sm p-button-secondary"
label="Kembali"
@click="closeModalFileUpload()"
/>
<Button
class="p-button-sm p-button-success"
label="Simpan"
icon="pi pi-check"
iconPos="right"
:loading="isLoadingButton"
@click="addPhotoResit()"
/>
<Button class="p-button-sm p-button-secondary" label="Kembali"
@click="closeModalFileUpload()" />
<Button class="p-button-sm p-button-success" label="Simpan" icon="pi pi-check"
iconPos="right" :loading="isLoadingButton" @click="addPhotoResit()" />
</template>
</Dialog>
</div>
<div class="card">
<div class="card-header">Gambar Resit</div>
<div
class="
<div class="
card-body
d-flex
overflow-x-auto
align-items-center
"
>
<div
class="m-2"
v-for="receipt in list.status_payment_cawangan
.file_resit"
v-bind:key="receipt"
>
">
<div class="m-2" v-for="receipt in list.status_payment_cawangan
.file_resit" v-bind:key="receipt">
<div class="row text-center">
<receipt-image
v-bind:fileResitId="receipt.id"
></receipt-image>
<receipt-image v-bind:fileResitId="receipt.id"></receipt-image>
<div>{{ receipt.masa_upload }}</div>
</div>
</div>
@@ -268,10 +182,7 @@
</div>
</div>
<div class="overflow-x-auto">
<table
ref="content"
class="table text-center table-bordered"
>
<table ref="content" class="table text-center table-bordered">
<tbody>
<tr class="table-light font-bold">
<td>Bil</td>
@@ -281,12 +192,8 @@
<tr v-for="(data, index) in list.sag" :key="data">
<td>{{ index + 1 }}</td>
<td>
<a
href="#"
data-bs-toggle="modal"
data-bs-target="#marhunModal"
v-on:click="marhunModal(data)"
>
<a href="#" data-bs-toggle="modal" data-bs-target="#marhunModal"
v-on:click="marhunModal(data)">
{{ data.norujukan }}
</a>
</td>
@@ -316,29 +223,16 @@
</Accordion>
</template>
</Card>
<div
class="modal fade"
id="marhunModal"
tabindex="-1"
aria-labelledby="marhunModalLabel"
aria-hidden="true"
data-bs-backdrop="static"
>
<div class="modal fade" id="marhunModal" tabindex="-1" aria-labelledby="marhunModalLabel" aria-hidden="true"
data-bs-backdrop="static">
<div class="modal-dialog modal-xl modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="grid">
<div
class="col-12 lg:col-6"
style="
<div class="col-12 lg:col-6" style="
display: flex;
justify-content: center;
align-items: center;
@@ -346,14 +240,10 @@
min-width: 300px;
max-height: 600px;
max-width: 600px;
"
>
<item-master-image-modal
v-if="theData.filemarhun"
v-bind:key="reloadImageComponent"
">
<item-master-image-modal v-if="theData.filemarhun" v-bind:key="reloadImageComponent"
v-bind:norujukan="theData.norujukan"
v-bind:filemarhun_id="theData.filemarhun[0].id"
></item-master-image-modal>
v-bind:filemarhun_id="theData.filemarhun[0].id"></item-master-image-modal>
<p v-else style="text-align: center; width: 100%">
Image Unavailable
</p>
@@ -369,10 +259,7 @@
<td style="min-width: 42px">Berat</td>
<td style="min-width: 102px">Harga Asas</td>
</tr>
<tr
v-for="(data, index) in theData.lelongbidmarhun"
v-bind:key="data"
>
<tr v-for="(data, index) in theData.lelongbidmarhun" v-bind:key="data">
<td>{{ index + 1 }}</td>
<td>{{ data.marhun }}</td>
<td>{{ data.karat }}</td>
@@ -401,21 +288,16 @@
</div>
<div class="row justify-content-center font-bold">
<div class="col-6">
<label class="col-form-label"
>Jumlah Harga Bida</label
>
<label class="col-form-label">Jumlah Harga Bida</label>
</div>
<div class="col-6">
<div class="input-group mb-3">
<span class="input-group-text font-bold">RM</span>
<span
class="form-control input-group-text font-bold"
>{{
theData.hargabida
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}</span
>
<span class="form-control input-group-text font-bold">{{
theData.hargabida
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}</span>
</div>
</div>
</div>
@@ -423,11 +305,7 @@
</div>
</div>
<div class="modal-footer">
<Button
class="p-button-sm"
label="Kembali"
data-bs-dismiss="modal"
/>
<Button class="p-button-sm" label="Kembali" data-bs-dismiss="modal" />
</div>
</div>
</div>
@@ -435,14 +313,12 @@
</div>
</div>
<div v-else>
<div
class="
<div class="
flex
align-items-center
justify-content-center
container-height
"
>
">
<div class="grid justify-content-center">
<div class="col-12 mb-4 text-center">
<i class="pi pi-book text-8xl text-400"></i>
@@ -451,40 +327,20 @@
<span class="text-400">Tiada Data.</span>
</div>
<div class="col-12 text-center">
<span class="text-400"
>Sila rujuk halaman
<router-link v-bind:to="{ name: 'result' }"
>Keputusan</router-link
>
untuk maklumat rekod bidaan menang.</span
>
<span class="text-400">Sila rujuk halaman
<router-link v-bind:to="{ name: 'result' }">Keputusan</router-link>
untuk maklumat rekod bidaan menang.</span>
</div>
</div>
</div>
</div>
<Dialog
header="Surat Hak Kepemilikan Barang"
v-model:visible="isDisplay"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }"
:style="{ width: '50vw' }"
:modal="true"
:show-layout="false"
:float-layout="true"
:enable-download="true"
:preview-modal="true"
:paginate-elements-by-height="1400"
filename="hee hee"
:pdf-quality="2"
:manual-pagination="false"
pdf-format="a4"
pdf-orientation="landscape"
pdf-content-width="800px"
@progress="onProgress($event)"
@hasStartedGeneration="hasStartedGeneration()"
@hasGenerated="hasGenerated($event)"
ref="html2Pdf"
>
<div class="text-center">
<Dialog header="Surat Hak Kepemilikan Barang" v-model:visible="isDisplay"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }" :style="{ width: '50vw' }" :modal="true"
:show-layout="false" :float-layout="true" :enable-download="true" :preview-modal="true"
:paginate-elements-by-height="1400" filename="hee hee" :pdf-quality="2" :manual-pagination="false"
pdf-format="a4" pdf-orientation="landscape" pdf-content-width="800px" @progress="onProgress($event)"
@hasStartedGeneration="hasStartedGeneration()" @hasGenerated="hasGenerated($event)" ref="html2Pdf">
<div v-if="suratHak?.user" class="text-center">
<p id="hakbarang">SURAT KETERANGAN KEPEMILIKAN BARANG</p>
<p>
Bahawasanya barang tersebut adalah hak milik
@@ -575,7 +431,7 @@ export default {
},
created() {
this.lelongId = this.$route.params.lelongId;
this.statusPayment = this.$route.params.statusPayment;
this.statusPayment = this.$route.query.statusPayment ?? null;
},
mounted: function () {
this.liveData();
@@ -591,7 +447,7 @@ export default {
},
liveData() {
this.loading = true;
if(this.lelongId != null) {
if (this.lelongId) {
axios
.get("/bayar/" + useAuthenticationUserStore().id + "/" + this.lelongId, {
headers: {
@@ -602,26 +458,27 @@ export default {
// console.log("liveData", response);
if (response.data.success == true) {
this.isSuccess = true;
this.loading = false;
this.lists = response.data.data;
this.tarikhLelong = response.data.tarikh_lelong;
} else {
this.isSuccess = false;
}
this.loading = false;
})
.catch((error) => {
this.loading = false;
console.log(error);
});
} else {
this.loading = false;
this.$router.push({ name: "result" });
}
},
clickPayButton(value) {
this.$router.push({ name: "pay", params: { lelongId: value } });
this.$router.push({ name: "pay", params: { lelongId: String(value) } });
},
clickPayCdmButton(value) {
this.$router.push({ name: "pay-cdm", params: { lelongId: value } });
this.$router.push({ name: "pay-cdm", params: { lelongId: String(value) } });
},
clickBackButton() {
this.$router.push({ name: "result" });
@@ -709,9 +566,20 @@ export default {
},
})
.then((response) => {
this.suratHak = response.data;
this.isDisplay = true;
this.isSuccessHak = true;
if (response.data?.success && response.data?.user) {
this.suratHak = response.data;
this.isSuccessHak = true;
this.isDisplay = true;
} else {
this.$swal?.fire({
toast: true,
icon: "error",
title: "Gagal memuatkan surat hak.",
position: "bottom",
showConfirmButton: false,
timer: 4000,
});
}
})
.catch((error) => {
console.log(error);
@@ -779,6 +647,51 @@ export default {
min-height: 70vh;
}
.result-accordion :deep(.p-accordion-header-link) {
display: flex;
align-items: center;
gap: 0.75rem;
}
.result-accordion :deep(.p-accordion-toggle-icon) {
flex-shrink: 0;
margin-right: 0;
}
.result-accordion-header {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1 1 auto;
min-width: 0;
gap: 0.75rem;
}
.result-accordion-title {
font-weight: 700;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.35rem;
min-width: 0;
}
.style-info {
background: #e4f8f0;
border: solid #1ea97c;
border-width: 0.1px;
color: #1ea97c;
font-size: 0.95rem;
align-items: center;
display: inline-flex;
padding: 0.35rem 0.75rem;
margin: 0;
border-radius: 6px;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
.div-card-bank {
display: flex;
justify-content: center;
src/components/result/ResultMain.vue
+18 -38
View File
@@ -1,17 +1,10 @@
<template>
<div
v-if="loading"
style="min-height: 70vh; display: grid; place-items: center"
>
<div v-if="loading" style="min-height: 70vh; display: grid; place-items: center">
<div class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
<div
v-else
style="min-height: 70vh"
class="container fadein animation-duration-400"
>
<div v-else style="min-height: 70vh" class="container fadein animation-duration-400">
<div v-if="isSuccess">
<Card>
<template #title>
@@ -39,7 +32,7 @@
<td v-on:click="selectDate(data)">
<span class="text-primary underline cursor-pointer">{{
data.tarikh_lelong
}}</span>
}}</span>
</td>
<td>
RM{{
@@ -49,29 +42,15 @@
}}
</td>
<td v-if="data.status == 1">
<Tag
value="Selesai"
icon="pi pi-check"
class="p-tag-rounded"
severity="success"
></Tag>
<Tag value="Selesai" icon="pi pi-check" class="p-tag-rounded" severity="success"></Tag>
</td>
<td v-else-if="data.status == 2">
<Tag
value="Tunggu Pengesahan"
icon="pi pi-stopwatch"
class="p-tag-rounded"
severity="warning"
></Tag>
<Tag value="Tunggu Pengesahan" icon="pi pi-stopwatch" class="p-tag-rounded" severity="warning">
</Tag>
</td>
<td v-else-if="data.status == null">
<div class="blink">
<Tag
value="Belum Selesai"
icon="pi pi-times"
class="p-tag-rounded"
severity="danger"
></Tag>
<Tag value="Belum Selesai" icon="pi pi-times" class="p-tag-rounded" severity="danger"></Tag>
</div>
</td>
<!-- <td>
@@ -87,9 +66,7 @@
</Card>
</div>
<div v-else>
<div
class="flex align-items-center justify-content-center container-height"
>
<div class="flex align-items-center justify-content-center container-height">
<div class="grid justify-content-center">
<div class="col-12 mb-4 text-center">
<i class="pi pi-info-circle text-8xl text-400"></i>
@@ -98,11 +75,9 @@
<span class="text-400">Tiada Data Dalam Keputusan.</span>
</div>
<div class="col-12 text-center">
<span class="text-400"
>Sila rujuk halaman
<span class="text-400">Sila rujuk halaman
<router-link v-bind:to="{ name: 'home' }">Utama</router-link>
untuk jadual lelongan.</span
>
untuk jadual lelongan.</span>
</div>
</div>
</div>
@@ -157,10 +132,15 @@ export default {
});
},
selectDate(value) {
this.$router.push({
const route = {
name: "detail",
params: { lelongId: value.id, statusPayment: value.status },
});
params: { lelongId: String(value.id) },
};
// Vue Router 4 only keeps params declared in the path; statusPayment is optional query
if (value.status != null) {
route.query = { statusPayment: String(value.status) };
}
this.$router.push(route);
},
},
};
src/router/index.js
+3 -3
View File
@@ -219,7 +219,7 @@ const routes = [
meta: { requiresAuth: true },
},
{
path: "/result-detail",
path: "/result-detail/:lelongId",
name: "detail",
component: ResultDetail,
meta: { requiresAuth: true },
@@ -231,13 +231,13 @@ const routes = [
meta: { requiresAuth: true },
},
{
path: "/pay",
path: "/pay/:lelongId",
name: "pay",
component: ThePay,
meta: { requiresAuth: true },
},
{
path: "/pay-cdm",
path: "/pay-cdm/:lelongId",
name: "pay-cdm",
component: ThePayCdm,
meta: { requiresAuth: true },
src/store/modules/cart.js
+41
View File
@@ -0,0 +1,41 @@
import { defineStore } from "pinia";
import axios from "axios";
import { useAuthenticationUserStore } from "@/store/modules/authentication";
export const useCartStore = defineStore("cart", {
state: () => ({
count: 0,
}),
getters: {
hasItems: (state) => state.count > 0,
badgeLabel: (state) => (state.count > 99 ? "99+" : String(state.count)),
},
actions: {
async fetchCount() {
const auth = useAuthenticationUserStore();
if (!auth.token || !auth.id) {
this.count = 0;
return;
}
try {
const response = await axios.get("/itemInCart", {
headers: {
Authorization: "Bearer " + auth.token,
},
params: {
user_id: auth.id,
},
});
this.count =
response.data.success === true ? Number(response.data.cart) || 0 : 0;
} catch (error) {
console.log(error);
}
},
clear() {
this.count = 0;
},
},
});