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

Merge branch 'remote-aros' of https://gitlab.com/erahn/lelong-web-pembida into finadev

Browse Source
This commit is contained in:
Afrina Alimi
2023-01-26 16:27:09 +08:00
parent 14ff53109c 3f5cf0e60d
commit 28849bafed
34 changed files with 2764 additions and 375 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+1307 -82
View File
File diff suppressed because it is too large Load Diff
package.json
+6 -2
View File
@@ -21,15 +21,19 @@
"jspdf-autotable": "^3.5.28",
"libphonenumber-js": "^1.10.14",
"maz-ui": "^3.0.7",
"pinia": "^2.0.28",
"pinia-plugin-persistedstate": "^3.0.2",
"postcss": "^8",
"primeflex": "^3.2.1",
"primeicons": "^6.0.1",
"primevue": "^3.17.0",
"vue": "^3.2.45",
"v-viewer": "^1.6.4",
"vue": "^3.2.13",
"vue-html2pdf": "^1.8.0",
"vue-router": "^4.0.14",
"vue-sidebar-menu-akahon": "^0.1.4",
"vue-sweetalert2": "^5.0.5",
"vuex": "^4.0.2"
"vue3-youtube": "^0.1.9"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~5.0.0",
public/themes/lara-light-blue/theme.css
+45
View File
@@ -5720,3 +5720,48 @@
.p-datatable .p-datatable-tbody > tr.p-datatable-dragpoint-bottom > td {
box-shadow: inset 0 -2px 0 0 #3B82F6;
}
.bounce-up-down {
animation: bounce 0.5s;
animation-direction: alternate;
animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
animation-iteration-count: infinite;
}
@keyframes bounce {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 25px, 0px);
}
}
.style-info {
background: #e4f8f0;
border: solid #1ea97c;
border-width: 0.1px;
color: #1ea97c;
font-size: 1rem;
align-items: center;
display: flex;
padding: 0.4rem 0.9rem;
margin: 0;
border-radius: 6px;
font-weight: 700;
}
.blink {
animation: blinker 1s linear infinite;
}
@keyframes blinker {
80% {
opacity: 0;
}
}
.button-custom {
height: 20px;
width: 10px !important;
}
src/components/authentication/TheLogin.vue
+30 -6
View File
@@ -103,8 +103,13 @@
iconPos="right"
></Button>
</div>
<div class="flex justify-content-center mt-4">
<terms-and-conditions></terms-and-conditions>
<div class="flex alin justify-content-center mt-4">
<div class="btn btn-warning btn-sm mr-4">
<terms-and-conditions></terms-and-conditions>
</div>
<a class="btn btn-info btn-sm" href="https://lelong.arrahn.com.my"
>Pautan Sistem Lelong</a
>
</div>
</div>
</form>
@@ -116,6 +121,7 @@
import axios from "axios";
import useVuelidate from "@vuelidate/core";
import { required } from "@vuelidate/validators";
import { useAuthenticationUserStore } from "@/store/modules/authentication"
export default {
name: "Login",
@@ -129,6 +135,10 @@ export default {
isLoading: false,
};
},
setup() {
const authenticationStore = useAuthenticationUserStore()
return { authenticationStore }
},
methods: {
doLogin() {
this.v$.$validate();
@@ -137,6 +147,7 @@ export default {
axios
.post("/user/login", this.form)
.then((response) => {
// console.log("doLogin", response);
if (response.data.statusAkaun == 1) {
localStorage.setItem("token", response.data.token);
localStorage.setItem("id", response.data.user.id);
@@ -148,6 +159,15 @@ export default {
response.data.user.notelbimbit
);
localStorage.setItem("username", response.data.user.username);
this.authenticationStore.$patch({
token: response.data.token,
id: response.data.user.id,
nokp: response.data.user.nokp,
name: response.data.user.name,
email: response.data.user.email,
notelbimbit: response.data.user.notelbimbit,
username: response.data.user.username,
})
this.$router.push({ name: "home" });
} else if (response.data.statusAkaun == 0) {
this.$toast.add({
@@ -156,7 +176,6 @@ export default {
detail: "Tiada akaun dalam database. Sila daftar sekarang.",
life: 10000,
});
console.log(response, "status 0");
} else if (response.data.statusAkaun == 2) {
this.$toast.add({
severity: "error",
@@ -165,7 +184,6 @@ export default {
"Akaun anda telah dibanned. Sila hubungi pihak pengurusan untuk maklumat lebih lanjut.",
life: 10000,
});
console.log(response, "status 2");
} else if (response.data.statusAkaun == 3) {
this.$toast.add({
severity: "error",
@@ -174,7 +192,6 @@ export default {
"Account rejected. Please contact administrator for further information.",
life: 10000,
});
console.log(response, "status 3");
} else if (response.data.statusAkaun == 4) {
this.$toast.add({
severity: "info",
@@ -182,7 +199,6 @@ export default {
detail: "Registration in progress,status wait for approval",
life: 10000,
});
console.log(response, "status 4");
} else if (response.data.statusAkaun == 5) {
this.$toast.add({
severity: "error",
@@ -191,6 +207,14 @@ export default {
life: 10000,
});
console.log(response);
} else if (response.data.statusAkaun == 6) {
this.$toast.add({
severity: "warn",
summary: "Akaun ini didaftar menggunakan id staff.",
detail:
"Sila log masuk menggunakan url https://adminbid.arrahn.com.my ",
life: 10000,
});
}
this.isLoading = false;
})
src/components/authentication/TheRegister.vue
+30 -3
View File
@@ -253,7 +253,14 @@
</div>
<div class="col-12 text-center">
<Button
class="p-button-sm"
class="p-button-sm p-button-outlined m-1"
icon="pi pi-times"
iconPos="right"
label="Batal Pendaftaran"
@click="toLogin()"
/>
<Button
class="p-button-sm m-1"
label="Teruskan"
icon="pi pi-sign-in"
iconPos="right"
@@ -307,6 +314,7 @@ import axios from "axios";
import useVuelidate from "@vuelidate/core";
import { required, email, minLength, maxLength } from "@vuelidate/validators";
import TermsAndConditionsDetails from "./TermsAndConditionsDetails.vue";
import { useAuthenticationUserStore } from "@/store/modules/authentication"
export default {
name: "Register",
@@ -346,6 +354,10 @@ export default {
},
};
},
setup() {
const authenticationStore = useAuthenticationUserStore()
return { authenticationStore }
},
methods: {
doRegister() {
this.v$.$validate();
@@ -366,6 +378,15 @@ export default {
response.data.user.notelbimbit
);
localStorage.setItem("username", response.data.user.username);
this.authenticationStore.$patch({
token: response.data.token,
id: response.data.user.id,
nokp: response.data.user.nokp,
name: response.data.user.name,
email: response.data.user.email,
notelbimbit: response.data.user.notelbimbit,
username: response.data.user.username,
})
this.$router.push({ name: "home" });
this.isLoading = false;
} else if (response.data.success == false) {
@@ -409,14 +430,20 @@ export default {
closeModalTNC() {
this.isDisplayTNC = false;
},
readImage() {},
toLogin() {
this.$router.push({ name: "login" });
},
},
validations() {
return {
form: {
name: { required },
username: { required },
nokp: { required, minLengthValue: minLength(12), maxLengthValue: maxLength(12) },
nokp: {
required,
minLengthValue: minLength(12),
maxLengthValue: maxLength(12),
},
password: { required, minLengthValue: minLength(8) },
email: { required, email },
notelbimbit: { required, minLengthValue: minLength(8) },
src/components/bid-record/BidRecordList.vue
+7 -16
View File
@@ -14,7 +14,10 @@
<div class="col-12 lg:col-11">
<Card>
<template #title>
<div class="font-normal">Rekod Bidaan Hari Ini : {{ date }}</div>
<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>
</template>
<template #content>
<Accordion :multiple="true">
@@ -234,7 +237,7 @@ import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
export default {
name: "BidDetail",
components: {
"item-master-image-modal": ItemMasterImageModal
"item-master-image-modal": ItemMasterImageModal,
},
data() {
return {
@@ -243,6 +246,7 @@ export default {
isSuccess: false,
theData: "",
date: "",
lelongDetail: "",
reloadImageComponent: 0,
// userId: localStorage.getItem("id"),
};
@@ -275,6 +279,7 @@ export default {
this.isLoading = false;
this.isSuccess = true;
this.listBid = response.data.lelongbidder;
this.lelongDetail = response.data.lelong;
} else {
this.isLoading = false;
this.isSuccess = false;
@@ -297,18 +302,4 @@ export default {
.container-height {
min-height: 70vh;
}
.style-info {
background: #e4f8f0;
border: solid #1ea97c;
border-width: 0px;
color: #1ea97c;
font-size: 1rem;
align-items: center;
display: flex;
padding: 0.4rem 0.9rem;
margin: 0;
border-radius: 6px;
font-weight: 400;
}
</style>
src/components/bid-record/TheBidRecord.vue
-17
View File
@@ -1,22 +1,5 @@
<template>
<the-template>
<!-- <div class="container">
<div class="row justify-content-center">
<div class="col-10">
<h2>Rekod Bidaan Hari Ini : {{ date }}</h2>
<button
v-on:click="reloadComponent()"
class="badge btn-secondary m-2"
>
Reload <i class="bi bi-arrow-clockwise"></i>
</button>
<base-card>
<bid-record-list v-bind:key="statusComponent"></bid-record-list>
</base-card>
</div>
</div>
</div> -->
<bid-record-list v-bind:key="statusComponent"></bid-record-list>
</the-template>
</template>
src/components/cart/CartListNew.vue
+34 -18
View File
@@ -145,6 +145,17 @@
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>
</div>
<div class="info-teruskan">
Sila klik 'Teruskan' jika pasti untuk meneruskan bidaan ini.
</div>
</div>
</template>
</Card>
</div>
@@ -274,7 +285,7 @@
</div>
</div>
<Button
icon="pi pi-delete-left"
icon="pi pi-trash"
label="Padam Surat"
data-bs-toggle="modal"
iconPos="right"
@@ -404,15 +415,13 @@
</div>
<div class="modal-footer">
<Button
class="p-button-sm p-button-text"
class="p-button-sm p-button-danger m-1"
label="Batal"
icon="pi pi-times"
iconPos="right"
data-bs-dismiss="modal"
/>
<Button
class="p-button-sm"
icon="pi pi-check"
class="p-button-sm p-button-success m-1"
icon="pi pi-file-edit"
iconPos="right"
label="Ubah"
:loading="isLoadingUbah"
@@ -475,13 +484,13 @@
</div>
<div class="modal-footer">
<Button
class="p-button-sm mr-2"
class="p-button-sm p-button-danger mr-2"
label="Batal"
data-bs-dismiss="modal"
/>
<Button
class="p-button-sm p-button-outlined"
icon="pi pi-times"
class="p-button-sm p-button-success"
icon="pi pi-trash"
iconPos="right"
label="Padam"
:loading="isLoadingPadam"
@@ -938,17 +947,24 @@ export default {
min-height: 70vh;
}
.style-info {
background: #e4f8f0;
border: solid #1ea97c;
.info-teruskan {
background: #ffe7e6;
border: solid #ff5757;
border-width: 0px;
color: #1ea97c;
font-size: 1rem;
align-items: center;
display: flex;
color: #ff5757;
padding: 0.4rem 0.9rem;
margin: 0;
border-radius: 6px;
font-weight: 400;
text-align: center;
}
.info-teruskan-icon {
display: flex;
justify-content: center;
padding: 0.4rem 0.9rem 0 0.9rem;
margin-bottom: 15px;
}
.icon-color {
color: #ff5757;
}
</style>
src/components/cart/TheCart.vue
+8
View File
@@ -25,6 +25,14 @@ export default {
componentKey: 0,
};
},
mounted: function () {
if (localStorage.getItem("reloaded")) {
localStorage.removeItem("reloaded");
} else {
localStorage.setItem("reloaded", "1");
location.reload();
}
},
methods: {
toggleReloadComponent() {
this.componentKey += 1;
src/components/home/ItemInCartNotification.vue
+61
View File
@@ -0,0 +1,61 @@
<template>
<div v-if="isSuccessCart" class="p-message p-component p-message-error" role="alert">
<div class="p-message-wrapper">
<span class="blink p-message-icon pi pi pi-info-circle"></span>
<div class="p-message-text">
<div class="font-bold">
{{itemInCart}} surat dalam Troli anda.
Sila ke<a class="ml-1 text-blue" @click="toCart()" href="#">
<span class="underline">Troli</span>
</a>
dan klik "Teruskan" bagi meneruskan bidaan anda.
</div>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
isSuccessCart: false,
itemInCart: 0,
};
},
mounted: function () {
this.getItemInCart();
},
methods: {
toCart() {
this.$router.push({ name: "cart" });
},
getItemInCart() {
axios
.get("/itemInCart", {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
params: {
user_id: localStorage.getItem("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>
src/components/home/LelongNextDetail.vue
+2 -2
View File
@@ -15,7 +15,7 @@
<tbody>
<tr class="table-light">
<th>Bil</th>
<th style="min-width: 200px">Cawangan</th>
<th style="min-width: 200px">Cawangan Ar-Rahn</th>
<th style="min-width: 120px" class="text-center">Tarikh</th>
</tr>
<tr v-for="(data, index) in response" :key="data.id">
@@ -29,7 +29,7 @@
<tbody>
<tr class="table-light">
<td>Bil</td>
<td>Cawangan</td>
<td>Cawangan Ar-Rahn</td>
<td>Tarikh</td>
</tr>
<tr>
src/components/home/LelongToday.vue
+2 -2
View File
@@ -1,8 +1,8 @@
<template>
<Card style="margin-bottom: 1em">
<template #title>
<div class="flex justify-content-center flex-wrap card-container">
<div class="font-semibold">Lelongan Hari Ini : <span>{{ date }}</span></div>
<div class="flex justify-content-between flex-wrap 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"
src/components/home/LelongTodayDetail.vue
+10 -4
View File
@@ -13,7 +13,7 @@
<tbody>
<tr class="table-light">
<th>Bil</th>
<th style="min-width: 200px">Cawangan</th>
<th style="min-width: 200px">Cawangan Ar-Rahn</th>
<th style="min-width: 120px" class="text-center">Masa Mula</th>
<th style="min-width: 120px" class="text-center">Masa Tamat</th>
</tr>
@@ -33,7 +33,7 @@
<tbody>
<tr class="table-light">
<td>Bil</td>
<td>Cawangan</td>
<td>Cawangan Ar-Rahn</td>
<td>Masa Mula</td>
<td>Masa Tamat</td>
</tr>
@@ -48,6 +48,7 @@
<script>
import axios from "axios";
import { useAuthenticationUserStore } from "@/store/modules/authentication"
export default {
data() {
@@ -57,6 +58,11 @@ export default {
response: Array,
};
},
setup() {
const authenticationStore = useAuthenticationUserStore()
return { authenticationStore }
},
mounted: function () {
this.liveData();
},
@@ -66,11 +72,11 @@ export default {
axios
.get("/listcawlelongtoday", {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
Authorization: "Bearer " + this.authenticationStore.getToken,
},
})
.then((response) => {
console.log("liveData", response);
// console.log("liveData", response);
if (response.data.success == true) {
this.responseData = true;
this.response = response.data.lelong;
src/components/home/ResultNotification.vue
-1
View File
@@ -11,7 +11,6 @@
</Message>
</div>
</div>
<div v-else></div>
</template>
<script>
src/components/home/TheHome.vue
+6 -1
View File
@@ -4,7 +4,10 @@
<div class="col-12 pt-2">
<result-notification></result-notification>
</div>
<div class="col-12 lg:col-12">
<div class="col-12">
<item-in-cart-notification></item-in-cart-notification>
</div>
<div class="col-12 lg:col-7">
<lelong-today></lelong-today>
<lelong-next></lelong-next>
<current-karat></current-karat>
@@ -18,6 +21,7 @@ import LelongToday from "./LelongToday.vue";
import LelongNext from "./LelongNext.vue";
import CurrentKarat from "./CurrentKarat.vue";
import ResultNotification from "./ResultNotification.vue";
import ItemInCartNotification from "./ItemInCartNotification.vue";
export default {
components: {
@@ -25,6 +29,7 @@ export default {
"lelong-next": LelongNext,
"current-karat": CurrentKarat,
"result-notification": ResultNotification,
"item-in-cart-notification": ItemInCartNotification,
},
};
</script>
src/components/layouts/TheHeader.vue
+8
View File
@@ -265,6 +265,11 @@ export default {
lelongOnline: "",
};
},
setup() {
const authenticationStore = useAuthenticationUserStore()
return { authenticationStore }
},
mounted: function () {
this.getLelongOnline();
},
@@ -282,11 +287,14 @@ export default {
)
.then((response) => {
localStorage.clear();
this.authenticationStore.$reset();
this.$router.push({ name: "login" });
})
.catch((error) => {
console.log(error);
});
localStorage.clear();
this.$router.push({ name: "login" });
},
toHome() {
this.$router.push({ name: "home" });
src/components/list/ItemMasterImage.vue
+1 -3
View File
@@ -1,7 +1,5 @@
<template>
<div v-if="isLoading" class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<Skeleton v-if="isLoading" height="10rem" width="20rem"></Skeleton>
<Image v-else :src="dataUrl" alt="Gambar Marhun" width="250" preview>
<template #indicator> Lihat Gambar </template>
</Image>
src/components/list/ListItem.vue
+4 -8
View File
@@ -89,7 +89,7 @@
container-height
"
>
<div class="grid justify-content-center">
<div class="grid bounce-up-down justify-content-center">
<div class="col-12 mb-4 text-center">
<i class="pi pi-arrow-up text-8xl text-400"></i>
</div>
@@ -459,16 +459,14 @@
Tambah Ke Troli
</button> -->
<Button
class="p-button-sm p-button-text"
class="p-button-sm p-button-danger m-1"
label="Kembali"
data-bs-dismiss="modal"
icon="pi pi-times"
iconPos="right"
/>
<Button
class="p-button-sm"
class="p-button-sm p-button-success m-1"
label="Tambah Ke Troli"
icon="pi pi-check"
icon="pi pi-plus-circle"
iconPos="right"
:loading="isLoadingButton"
@click="addToCart()"
@@ -484,7 +482,6 @@
import axios from "axios";
import useVuelidate from "@vuelidate/core";
import { required, integer, numeric, minValue } from "@vuelidate/validators";
import { mapGetters, mapActions } from "vuex";
import { read } from "@popperjs/core";
import ItemMasterImage from "./ItemMasterImage.vue";
import ItemMultipleImage from "./ItemMultipleImage.vue";
@@ -543,7 +540,6 @@ export default {
dataUrl() {
// return "data:image/jpeg;base64," + this.image;
},
...mapGetters(["allCarts"]),
},
mounted: function () {
this.liveData();
src/components/list/TheList.vue
+7
View File
@@ -21,6 +21,7 @@
>
<div v-if="isSuccess">
<div class="row">
<div class="font-normal header-title">Senarai Barangan Lelongan</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon3">Cawangan</span>
<select class="form-select" @change="pilihCawangan($event)">
@@ -133,4 +134,10 @@ export default {
.container-height {
min-height: 70vh;
}
.header-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
</style>
src/components/pay/ListReceipt.vue
+181
View File
@@ -0,0 +1,181 @@
<template>
<div v-if="isLoading" class="fadein animation-duration-400">
<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 class="fadein animation-duration-400">
<div v-if="isSuccess">
<div class="p-message p-component p-message-info" role="alert">
<div class="p-message-wrapper">
<span class="blink p-message-icon pi pi pi-info-circle"></span>
<div class="p-message-text">
Gambar sedang disemak oleh bahagian pengurusan. Sila tunggu sebentar.
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="table table-bordered text-center table-hover">
<tbody>
<tr>
<th>#</th>
<th>ID Gambar</th>
<th>Masa Muat Naik</th>
<th>Gambar</th>
<th>Tindakan</th>
</tr>
<tr v-for="(receipt, index) in listReceipts" v-bind:key="receipt">
<td>{{ index + 1 }}</td>
<td>{{ receipt.id }}</td>
<td>{{ receipt.masa_upload }}</td>
<td>
<receipt-image v-bind:fileResitId="receipt.id"></receipt-image>
</td>
<td>
<button
class="btn m-1 btn-danger"
@click="openPhotoModal(receipt)"
>
Padam
</button>
</td>
</tr>
</tbody>
</table>
</div>
<Dialog
header="Padam Gambar"
v-model:visible="isDisplayPhoto"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }"
:style="{ width: '50vw' }"
:modal="true"
>
<div class="text-center m-2">
<h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
<h5>ADAKAH ANDA PASTI UNTUK PADAM GAMBAR INI?</h5>
ID Gambar: {{ selectPhoto.id }}
<p class="text-danger text-sm mt-3">
<i>*Tindakan ini tidak dapat dikembalikan</i>
</p>
</div>
<template #footer>
<Button
class="p-button-sm p-button-secondary"
label="Batal"
@click="closePhotoModal()"
/>
<Button
class="p-button-sm p-button-danger"
label="Padam"
@click="deletePhotoResit(selectPhoto)"
/>
</template>
</Dialog>
</div>
<div v-else>Tiada Gambar Yang Dimuat Naik</div>
</div>
</template>
<script>
import axios from "axios";
import ReceiptImage from "./ReceiptImage.vue";
export default {
emits: ["reloadComponent"],
props: {
lelong_id: "",
},
mounted: function () {
this.listReceipt();
// this.getInvoice();
},
components: {
"receipt-image": ReceiptImage,
},
data() {
return {
isLoading: false,
isSuccess: false,
listReceipts: "",
isDisplayPhoto: false,
selectPhoto: "",
fileresit_id: "",
};
},
methods: {
listReceipt() {
this.isLoading = true;
axios
.get("/listPhotoResit", {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
params: {
user_id: localStorage.getItem("id"),
lelong_id: this.lelong_id,
},
})
.then((response) => {
// console.log("listReceipt", response);
this.isLoading = false;
if (response.data.success == true) {
this.isSuccess = true;
this.listReceipts = response.data.file_resit;
} else {
this.isSuccess = false;
}
})
.catch((error) => {
this.isLoading = false;
console.log(error);
});
},
openPhotoModal(value) {
this.isDisplayPhoto = true;
this.selectPhoto = value;
this.fileresit_id = value.id;
},
closePhotoModal() {
this.isDisplayPhoto = false;
this.selectPhoto = "";
this.fileresit_id = "";
},
deletePhotoResit(e) {
axios
.post(
"/deletePhotoResit",
{ fileresit_id: this.fileresit_id },
{
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
}
)
.then((response) => {
if (response.data.success == true) {
this.isDisplayPhoto = false;
this.$swal.fire({
icon: "success",
title: "Gambar Resit Berjaya Dipadam",
confirmButtonColor: "#344871",
confirmButtonText: "OK",
allowOutsideClick: false,
allowEscapeKey: false,
});
this.$emit("reloadComponent");
} else {
console.log(response);
}
})
.catch((error) => {
this.isLoading = false;
console.log(error);
});
},
},
};
</script>
src/components/pay/ReceiptImage.vue
+55
View File
@@ -0,0 +1,55 @@
<template>
<div v-if="isLoading" class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<Image v-else :src="dataUrl" alt="Gambar Marhun" width="100" preview>
<template #indicator> Lihat Gambar </template>
</Image>
</template>
<script>
import axios from "axios";
export default {
props: {
fileResitId: "",
},
data() {
return {
image: "",
isLoading: false,
componentKey: 0,
};
},
computed: {
dataUrl() {
return "data:image/png;base64, " + this.image;
},
},
mounted: function () {
this.showPhotoResit();
},
methods: {
showPhotoResit() {
this.isLoading = true;
axios
.get("/showPhotoResit", {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
params: {
fileresit_id: this.fileResitId,
},
})
.then((response) => {
this.isLoading = false;
this.image = response.data;
})
.catch((error) => {
console.log(error);
this.isLoading = false;
});
},
},
};
</script>
src/components/pay/SelectOutlet.vue
+177 -10
View File
@@ -47,7 +47,7 @@
<div class="col-12 md:col-5">
<Button
label="Batal Pembayaran"
class="p-button-text p-button-sm"
class="p-button-danger p-button-sm"
v-on:click="clickCancelButton()"
/>
</div>
@@ -55,7 +55,7 @@
<div class="col-12 md:col-5 md:text-right">
<Button
label="Bayar Bidaan Cawangan Ini"
class="p-button-sm"
class="p-button-sm p-button-success"
@click="openModal(data)"
/>
</div>
@@ -71,7 +71,7 @@
</TabPanel>
</TabView>
<Dialog
header="Teruskan Bayaran"
header="Teruskan Bayaran Menggunakan Kaedah FPX"
v-model:visible="isDisplay"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }"
:style="{ width: '50vw' }"
@@ -136,14 +136,19 @@
</template>
</Dialog>
<Dialog
header="Terma & Syarat"
header="Makluman"
v-model:visible="isDisplayTNC"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }"
:style="{ width: '50vw' }"
:modal="true"
>
<div>
<terms-and-conditions-details></terms-and-conditions-details>
<div class="text-center m-2">
<!-- <terms-and-conditions-details></terms-and-conditions-details> -->
<h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
<h6 class="text-danger">
Pembida berjaya hendaklah menyelesaikan keseluruhan amaun bidaan dan
mengambil marhun pada/sebelum jam 4.00 petang.
</h6>
</div>
<template #footer>
<Button
@@ -169,13 +174,83 @@
/>
</template>
</Dialog>
<Dialog
v-model:visible="isDisplayPaymentMethod"
:breakpoints="{ '960px': '75vw', '640px': '90vw' }"
:style="{ width: '50vw' }"
:modal="true"
:closable="false"
>
<div class="text-center m-2">
<h4>Sila Pilih Jenis Bayaran</h4>
<Button
label="Bayaran FPX"
@click="openModalNew()"
class="p-button-warning m-1"
/>
<Button
label="Bayaran CDM"
@click="openModalFileUpload()"
class="p-button-help m-1"
/>
</div>
<template #footer>
<Button
label="Batal"
icon="pi pi-times"
iconPos="right"
@click="closeModalPaymentMethod()"
class="p-button-text"
/>
</template>
</Dialog>
<Dialog
header="Teruskan Bayaran Menggunakan Kaedah CDM"
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/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>Saiz maksimum gambar adalah 2MB.</div>
<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()"
/>
</template>
</Dialog>
</template>
<script>
import { integer } from "@vuelidate/validators";
import SelectId from "./SelectId.vue";
import TermsAndConditionsDetails from "../authentication/TermsAndConditionsDetails.vue";
import axios from "axios";
import { required, integer, between } from "@vuelidate/validators";
import useVuelidate from "@vuelidate/core";
export default {
components: {
@@ -190,16 +265,21 @@ export default {
},
data() {
return {
v$: useVuelidate(),
nextButton: false,
selectCawangan: this.namaCawangan,
selectRadio: "",
isLoadingButton: false,
isDisplay: false,
isDisplayTNC: false,
isDisplayPaymentMethod: false,
isDisplayFileUpload: false,
isLoading: false,
cawanganPilihan: "",
hargaBidaanPilihan: "",
hargaBidaanPilihanTambahFi: "",
lelongDetails: "",
fileSize: 0,
form: {
email: localStorage.getItem("email"),
notel: localStorage.getItem("notelbimbit"),
@@ -222,9 +302,16 @@ export default {
// },
// ],
sag: "",
kodcaw: "",
gambarResit: "",
},
};
},
validations() {
return {
fileSize: { required, integer, betweenValue: between(1, 2200000) },
};
},
mounted() {
this.getInvoice();
},
@@ -260,12 +347,14 @@ export default {
var date = new Date();
var current_time = date.toLocaleString();
var limit_masa_bayaran = "15:00:00";
var limit_datetime_bayaran = this.lelongDetails.tarikh_lelong + ", " + limit_masa_bayaran;
console.log(current_time, '\n', limit_datetime_bayaran);
var limit_datetime_bayaran =
this.lelongDetails.tarikh_lelong + ", " + limit_masa_bayaran;
// console.log(current_time, "\n", limit_datetime_bayaran);
// if (current_time < limit_datetime_bayaran === true) {
this.isDisplay = true;
this.isDisplayPaymentMethod = true;
this.cawanganPilihan = value.cawangan;
this.form.kodcaw = value.kodcaw;
this.hargaBidaanPilihan = value.total_hargabida;
let convertHargaBidaanPilihan =
parseFloat(value.total_hargabida.replace(/,/g, "")) + 1;
@@ -290,6 +379,78 @@ export default {
this.form.total = "";
this.form.sag = "";
},
selectPhoto(e) {
this.fileSize = e.target.files[0].size;
this.form.gambarResit = e.target.files[0];
},
addPhotoResit() {
this.v$.$validate();
if (!this.v$.$error) {
let convertDataSAG = JSON.stringify(this.form.sag);
this.isLoadingButton = true;
var resitFormData = new FormData();
resitFormData.append("gambarResit", this.form.gambarResit);
resitFormData.append("lelong_id", this.form.lelong_id);
resitFormData.append("user_id", this.form.user_id);
resitFormData.append("kodcaw", this.form.kodcaw);
resitFormData.append("invoice_id", this.form.invoice_id);
resitFormData.append("invoice_no", this.form.invoice_no);
resitFormData.append("total", this.form.total);
resitFormData.append("sag", convertDataSAG);
axios
.post("/initializeCdmPayment", resitFormData, {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
})
.then((response) => {
this.isLoadingButton = false;
this.fileSize = 0;
this.isDisplayFileUpload = false;
if (response.data.success == true) {
this.$swal.fire({
icon: "success",
title: "Gambar Resit Berjaya Di Muat Naik",
text: "Marhun mesti dituntut sebelum jam 4 petang hari ini.",
confirmButtonColor: "#344871",
confirmButtonText: "OK",
allowOutsideClick: false,
allowEscapeKey: false,
});
this.$router.push({ name: "result" });
} else {
this.isLoadingButton = false;
console.log(response);
this.$swal.fire({
toast: true,
icon: "error",
title: "Gagal! Sila cuba kembali.",
animation: false,
position: "bottom",
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
});
}
})
.catch((error) => {
alert(error);
this.isLoadingButton = false;
});
}
},
openModalNew() {
this.isDisplay = true;
this.isDisplayPaymentMethod = false;
},
openModalFileUpload() {
this.isDisplayFileUpload = true;
this.isDisplayPaymentMethod = false;
},
closeModalFileUpload() {
this.isDisplayFileUpload = false;
},
openModalTNC() {
this.isDisplay = false;
this.isDisplayTNC = true;
@@ -299,6 +460,12 @@ export default {
this.form.total = "";
this.form.sag = "";
},
openModalPaymentMethod() {
this.isDisplayPaymentMethod = true;
},
closeModalPaymentMethod() {
this.isDisplayPaymentMethod = false;
},
clickRadio(value) {
// console.log(value);
this.selectRadio = value;
src/components/pay/ThePay.vue
+25 -2
View File
@@ -13,7 +13,22 @@
<div v-if="isSuccess">
<Card>
<template #title>
<div class="font-normal">Pembayaran Bidaan</div>
<div class="font-normal">
<div class="flex">
<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
</div>
</div>
<div class="font-normal text-base">
Tarikh Lelong : {{ tarikhLelong }}
</div>
@@ -134,7 +149,15 @@ export default {
console.log(error);
});
},
clickCancelButton() {
this.$router.push({
name: "detail",
params: {
lelongId: this.lelongId,
statusPayment: null,
},
});
},
clickBackButton() {
this.statusComponent -= 1;
},
src/components/pay/ThePayCdm.vue
+285
View File
@@ -0,0 +1,285 @@
<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="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
</div>
<div v-else class="fadein animation-duration-400">
<div v-if="isSuccess">
<Card>
<template #title>
<div class="flex">
<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()"
/>
<div class="font-normal">Pembayaran Bidaan Menggunakan CDM</div>
</div>
<div class="font-normal text-base">
Tarikh Lelong : {{ tarikhLelong }}
</div>
</template>
<template #content>
<!-- <select-outlet
v-bind:namaCawangan="lists"
v-bind:lelongIdProps="lelongId"
></select-outlet> -->
<div class="font-medium p-0">No Account Bank: 10291029109209</div>
<span class="text-xs fst-italic text-danger">
*Sila buat bayaran menggunakan nombor akaun ini sahaja dan muat
naik gambar resit dibawah.</span
>
<div class="overflow-x-auto">
<table class="mt-5 table text-center table-bordered">
<tbody>
<tr class="table-light">
<td>Bil</td>
<td style="min-width: 240px">Cawangan</td>
<td style="min-width: 120px">Jumlah Harga Bida</td>
</tr>
<tr>
<td>*</td>
<td>KOTA BHARU 2</td>
<td>RMXXXX</td>
</tr>
<tr>
<td>*</td>
<td>WAKAF BHARU</td>
<td>RMXXXX</td>
</tr>
<tr class="uppercase text-danger">
<th colspan="2">Amaun yang perlu di bank-in</th>
<th>RMXXXXX</th>
</tr>
</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>
<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
name="demo[]"
url="./upload"
accept="image/*"
:maxFileSize="1500000"
:fileLimit="1"
invalidFileSizeMessage="{0}: Melebihi saiz yang ditetapkan, saiz fail hendaklah tikal melebihi 1.5 MB."
/> -->
</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()"
/>
</template>
</Dialog>
</template>
</Card>
</div>
<div v-else>
<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>
</div>
<div class="col-12 text-center">
<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
>
</div>
</div>
</div>
</div>
</div>
</the-template>
</template>
<script>
import axios from "axios";
import ListReceipt from "./ListReceipt.vue";
export default {
components: {
"list-receipt": ListReceipt,
},
data() {
return {
lists: [],
tarikhLelong: "",
lelongId: "",
isLoading: false,
isSuccess: false,
isDisplayFileUpload: false,
componentKey: 0,
formResit: {
user_id: localStorage.getItem("id"),
lelong_id: this.$route.params.lelongId,
gambarResit: "",
},
};
},
created() {
this.lelongId = this.$route.params.lelongId;
},
mounted: function () {
this.liveData();
// this.getInvoice();
},
methods: {
liveData() {
this.isLoading = true;
axios
.get(
"/bayarBaki/" +
localStorage.getItem("id") +
// "/1" ,
"/" +
this.lelongId,
{
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
}
)
.then((response) => {
// console.log("liveData", response);
this.isLoading = false;
if (response.data.success == true) {
this.isSuccess = true;
this.lists = response.data.data;
this.tarikhLelong = response.data.tarikh_lelong;
} else {
}
})
.catch((error) => {
this.isLoading = false;
console.log(error);
});
},
selectPhoto(e) {
console.log(e);
this.formResit.gambarResit = e.target.files[0];
},
addPhotoResit() {
var resitFormData = new FormData();
resitFormData.append("gambarResit", this.formResit.gambarResit);
resitFormData.append("lelong_id", this.formResit.lelong_id);
resitFormData.append("user_id", this.formResit.user_id);
axios
.post("/addPhotoResit", resitFormData, {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
})
.then((response) => {
this.isDisplayFileUpload = false;
if (response.data.success == true) {
this.$swal.fire({
icon: "success",
title: "Gambar Resit Berjaya Di Muat Naik",
confirmButtonColor: "#344871",
confirmButtonText: "OK",
allowOutsideClick: false,
allowEscapeKey: false,
});
this.componentKey += 1;
} else if (response.data.success == 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,
});
this.componentKey += 1;
}
})
.catch((error) => {
alert(error);
});
},
openModalFileUpload() {
this.isDisplayFileUpload = true;
},
closeModalFileUpload() {
this.isDisplayFileUpload = false;
},
clickCancelButton() {
this.$router.push({
name: "detail",
params: {
lelongId: this.lelongId,
statusPayment: null,
},
});
},
toggleReloadComponent() {
this.componentKey += 1;
},
},
};
</script>
<style scoped>
.container-height {
min-height: 70vh;
}
</style>
src/components/policy/ThePolicy.vue
+38 -3
View File
@@ -7,12 +7,43 @@
</template>
<template #content>
<TabView>
<TabPanel :header="'Panduan ArrahnBid'">
<p>
Berikut merupakan video panduan untuk penggunaan
ArrahnBid. Sila tonton video ini untuk memahami cara penggunaan.
</p>
<div class="lg:flex hidden justify-content-center">
<YouTube v-bind:src="theUrl" />
</div>
<div
class="
lg:hidden
md:flex
hidden
overflow-x-auto
justify-content-center
"
>
<YouTube v-bind:src="theUrl" width="480" height="360" />
</div>
<div
class="
lg:hidden
md:hidden
flex
overflow-x-auto
justify-content-center
"
>
<YouTube v-bind:src="theUrl" width="320" height="240" />
</div>
</TabPanel>
<TabPanel :header="'Terma & Syarat'">
<terms-and-conditions-details></terms-and-conditions-details>
</TabPanel>
<TabPanel :header="'Hubungi Kami'">
<div class="grid justify-content-center" style="height: 50vh">
<div class="col-12 mb-4 text-center" style="align-self:end">
<div class="col-12 mb-4 text-center" style="align-self: end">
<i class="pi pi-wrench text-8xl text-400"></i>
</div>
<div class="col-12 text-center">
@@ -24,8 +55,7 @@
</template>
</Card>
</div>
<ScrollTop :threshold="200"/>
<ScrollTop :threshold="200" />
</the-template>
</template>
@@ -36,5 +66,10 @@ export default {
components: {
"terms-and-conditions-details": TermsAndConditionsDetails,
},
data() {
return {
theUrl: "https://www.youtube.com/watch?v=lucYE9bM_PY&t=53s",
};
},
};
</script>
src/components/result/ResultDetail.vue
+359 -101
View File
@@ -11,46 +11,62 @@
<div v-else class="fadein animation-duration-400">
<div v-if="isSuccess">
<div class="row">
<Toolbar class="toolbar-custom">
<template #start>
<Button
class="
p-button-sm
button-custom
p-button-secondary p-button-outlined
mr-2
"
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 }}
<Card>
<template #title>
<div class="grid justify-content-between">
<div class="flex">
<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"
>
Keputusan Tarikh Lelongan: {{ tarikhLelong }}
</div>
</div>
<div class="">
<!-- <Button
label="Bayar CDM"
icon="pi pi-money-bill"
iconPos="right"
class="p-button-sm p-button-help mr-2"
: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)"
/>
</div>
</div>
<div class="row" v-if="disabled != 1">
<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 #end>
<!-- <Button
label="Resit Bayaran"
icon="pi pi-list"
iconPos="right"
class="p-button-sm p-button-outlined mr-2"
/> -->
<Button
label="Pembayaran"
icon="pi pi-money-bill"
iconPos="right"
class="p-button-sm"
:disabled="disabled == 1"
v-on:click="clickPayButton(lelongId)"
/>
</template>
</Toolbar>
<Card>
<!-- <template #title>
</template> -->
<template #content>
<Accordion :multiple="true">
<AccordionTab v-for="list in lists" v-bind:key="list">
@@ -58,6 +74,33 @@
<div class="flex justify-content-between w-100">
<div class="align-self-center" style="margin: 5px">
{{ list.cawangan }}
<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>
<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">
Jumlah RM{{
@@ -74,17 +117,153 @@
iconPos="right"
class="p-button-sm mb-3"
v-on:click="downloadPdf(list.kodcaw)"
v-if="list.status_payment_cawangan == 1"
v-tooltip="'Muat Turun'"
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>
</div>
<div class="row">
<div>
Masa Bayaran:
{{ list.status_payment_cawangan.resit.pay_time }}
</div>
</div>
</div>
</div>
<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>
</div>
<div class="row">
<div>
Masa Bayaran:
{{ list.status_payment_cawangan.resit.pay_time }}
</div>
</div>
</div>
</div>
<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 < 7
"
>
<Button
class="p-button-sm mb-1"
label="Muat Naik Resit"
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 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"
>
<div>Saiz maksimum gambar adalah 2MB.</div>
<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()"
/>
</template>
</Dialog>
</div>
<div class="card">
<div class="card-header">Gambar Resit</div>
<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="row text-center">
<receipt-image
v-bind:fileResitId="receipt.id"
></receipt-image>
<div>{{ receipt.masa_upload }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="table text-center table-bordered">
<table
ref="content"
class="table text-center table-bordered"
>
<tbody>
<tr class="table-light">
<td>Bil</td>
<td style="min-width: 180px">No Rujukan</td>
<td style="min-width: 180px">Harga Bidaan</td>
<td style="min-width: 220px">Status Bayaran</td>
</tr>
<tr v-for="(data, index) in list.sag" :key="data">
<td>{{ index + 1 }}</td>
@@ -106,35 +285,6 @@
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</td>
<td
v-if="
data.status_payment === null ||
data.status_payment == 0
"
>
<Tag
value="Belum Bayar"
icon="pi pi-times"
class="p-tag-rounded"
severity="danger"
></Tag>
</td>
<td v-if="data.status_payment === 2">
<Tag
value="Tunggu Pengesahan"
icon="pi pi-stopwatch"
class="p-tag-rounded"
severity="warning"
></Tag>
</td>
<td v-if="data.status_payment === 1">
<Tag
value="Selesai"
icon="pi pi-check"
class="p-tag-rounded"
severity="success"
></Tag>
</td>
</tr>
<tr style="text-transform: uppercase">
<td colspan="2">Jumlah</td>
@@ -145,7 +295,6 @@
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</td>
<td class="table-light"></td>
</tr>
</tbody>
</table>
@@ -261,13 +410,11 @@
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
<Button
class="p-button-sm"
label="Kembali"
data-bs-dismiss="modal"
>
Kembali
</button>
/>
</div>
</div>
</div>
@@ -308,6 +455,21 @@
: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">
<p id="hakbarang">SURAT KETERANGAN KEPEMILIKAN BARANG</p>
@@ -343,7 +505,7 @@
</table>
</div>
<template #footer>
<Button label="Muat Turun" @click="muatTurunPdf()" />
<!-- <Button label="Muat Turun" @click="muatTurunPdf()" /> -->
</template>
</Dialog>
</div>
@@ -351,18 +513,25 @@
</template>
<script>
// import jsPDF from "jspdf";
// import "jspdf-autotable";
// import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import "jspdf-autotable";
import html2canvas from "html2canvas";
// import VueHtml2pdf from "vue-html2pdf";
import axios from "axios";
import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
import ReceiptImage from "../pay/ReceiptImage.vue";
import { required, integer, between } from "@vuelidate/validators";
import useVuelidate from "@vuelidate/core";
export default {
components: {
"item-master-image-modal": ItemMasterImageModal,
"receipt-image": ReceiptImage,
},
data() {
return {
v$: useVuelidate(),
isLoadingButton: false,
lists: [],
tarikhLelong: "",
loading: false,
@@ -375,6 +544,19 @@ export default {
isDisplay: false,
suratHak: "",
isSuccessHak: false,
isDisplayFileUpload: false,
fileSize: 0,
formResit: {
user_id: localStorage.getItem("id"),
lelong_id: this.$route.params.lelongId,
gambarResit: "",
kodcaw: "",
},
};
},
validations() {
return {
fileSize: { required, integer, betweenValue: between(1, 2200000) },
};
},
created() {
@@ -420,6 +602,9 @@ export default {
clickPayButton(value) {
this.$router.push({ name: "pay", params: { lelongId: value } });
},
clickPayCdmButton(value) {
this.$router.push({ name: "pay-cdm", params: { lelongId: value } });
},
clickBackButton() {
this.$router.push({ name: "result" });
},
@@ -427,6 +612,72 @@ export default {
this.theData = value;
this.reloadImageComponent += 1;
},
selectPhoto(e) {
console.log(e.target.files[0].size);
this.fileSize = e.target.files[0].size;
this.formResit.gambarResit = e.target.files[0];
},
addPhotoResit() {
this.v$.$validate();
if (!this.v$.$error) {
this.isLoadingButton = true;
var resitFormData = new FormData();
resitFormData.append("gambarResit", this.formResit.gambarResit);
resitFormData.append("lelong_id", this.formResit.lelong_id);
resitFormData.append("user_id", this.formResit.user_id);
resitFormData.append("kodcaw", this.formResit.kodcaw);
console.log(this.formResit);
axios
.post("/addPhotoResit", resitFormData, {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
})
.then((response) => {
this.isLoadingButton = false;
this.fileSize = 0;
this.liveData();
this.isDisplayFileUpload = false;
if (response.data.success == true) {
this.$swal.fire({
icon: "success",
title: "Gambar Resit Berjaya Di Muat Naik",
confirmButtonColor: "#344871",
confirmButtonText: "OK",
allowOutsideClick: false,
allowEscapeKey: false,
});
this.componentKey += 1;
} else if (response.data.success == false) {
this.isLoadingButton = 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,
});
this.componentKey += 1;
}
})
.catch((error) => {
alert(error);
this.isLoadingButton = false;
});
}
},
openModalFileUpload(e) {
this.isDisplayFileUpload = true;
this.formResit.kodcaw = e;
},
closeModalFileUpload() {
this.isDisplayFileUpload = false;
this.formResit.kodcaw = "";
},
downloadPdf(value) {
axios
.get("/resultInCawangan", {
@@ -449,6 +700,32 @@ export default {
});
},
muatTurunPdf() {
// var doc = new jsPDF();
// doc.html(document.body, {
// callback: function (doc) {
// doc.save();
// },
// x: 1,
// y: 1,
// });
// const doc = new jsPDF();
// const html = this.$refs.content.innerHTML;
// doc.html(html, 15, 15, {
// width: 150,
// });
// doc.save("output.pdf");
this.$refs.html2Pdf.generatePdf();
// var imgData = canvas.toDataURL("image/png");
// var doc = new jsPDF("p", "mm");
// doc.addImage(imgData, "PNG", 10, 10);
// doc.save("sample-file.pdf");
// const doc = new jsPDF();
// doc.autoTable({ html: "#hak-barang" });
// const html = this.$refs.hakbarang.innerHTML;
@@ -480,26 +757,7 @@ export default {
background: #fff !important;
}
.button-custom {
height: 20px;
width: 10px !important;
}
.container-height {
min-height: 70vh;
}
.style-info {
background: #e4f8f0;
border: solid #1ea97c;
border-width: 0px;
color: #1ea97c;
font-size: 1rem;
align-items: center;
display: flex;
padding: 0.4rem 0.9rem;
margin: 0;
border-radius: 6px;
font-weight: 400;
}
</style>
src/components/result/ResultMain.vue
+15 -7
View File
@@ -15,7 +15,13 @@
<div v-if="isSuccess">
<Card>
<template #title>
<div class="font-normal">Keputusan Lelongan</div>
<div class="grid justify-content-between">
<div class="font-normal">Bidaan Yang Berjaya</div>
<div class="text-xs align-self-center fst-italic fw-lighter text-danger">
*Pembayaran hendaklah diselesaikan SEGERA dan barang lelongan
mesti DITUNTUT di cawangan terlibat SEBELUM jam 4.00 petang hari lelongan.
</div>
</div>
</template>
<template #content>
<div class="overflow-x-auto">
@@ -51,12 +57,14 @@
></Tag>
</td>
<td v-else-if="data.status == null">
<Tag
value="Belum Selesai"
icon="pi pi-times"
class="p-tag-rounded"
severity="danger"
></Tag>
<div class="blink">
<Tag
value="Belum Selesai"
icon="pi pi-times"
class="p-tag-rounded"
severity="danger"
></Tag>
</div>
</td>
<!-- <td>
<span class="text-primary underline cursor-pointer"
src/main.js
+14 -2
View File
@@ -2,7 +2,6 @@ import { createApp } from 'vue'
import App from './App.vue'
import Master from './Master.vue'
import router from './router'
import store from './store'
// import useVuelidate from '@vuelidate/core'
import './interceptors/axios'
import "bootstrap/dist/css/bootstrap.css"
@@ -51,6 +50,16 @@ import ScrollTop from 'primevue/scrolltop';
import 'maz-ui/css/main.css'
import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput'
import YouTube from "vue3-youtube";
import 'viewerjs/dist/viewer.css';
import VueViewer from 'v-viewer';
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
import TheTemplate from './components/layouts/TheTemplate.vue'
import BaseCard from './components/base/BaseCard.vue'
import TermsAndConditions from './components/authentication/TermsAndConditions.vue'
@@ -96,9 +105,12 @@ app.component('ScrollTop', ScrollTop);
app.component('MazPhoneNumberInput', MazPhoneNumberInput)
app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
app.component('YouTube', YouTube)
app.use(router).use(pinia).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
// app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');
// createApp(App).use(router).use(store).mount('#app')
// createApp(Master).use(router).use(store).mount('#app')
// createApp(App).use(router).use(store).use(useVuelidate).mount('#app')
src/router/index.js
+6
View File
@@ -131,6 +131,7 @@ import TheList from "../components/list/TheList.vue";
import ResultDetail from "../components/result/ResultDetail.vue";
import ResultReceipt from "../components/result/ResultReceipt.vue"
import ThePay from "../components/pay/ThePay.vue";
import ThePayCdm from "../components/pay/ThePayCdm.vue";
import ThePolicy from "../components/policy/ThePolicy.vue"
import {
@@ -213,6 +214,11 @@ const routes = [
name: "pay",
component: ThePay,
},
{
path: "/pay-cdm",
name: "pay-cdm",
component: ThePayCdm,
},
{
path: "/policy",
name: "policy",
src/store/index.js
+2
View File
@@ -1,5 +1,6 @@
import Vuex from 'vuex'
// import Vue from 'vue'
import auth from './modules/auth'
import cart from './modules/cart'
import lelong_id from './modules/lelongId'
@@ -9,6 +10,7 @@ import lelong_id from './modules/lelongId'
//Create store
export default new Vuex.Store({
modules: {
auth,
cart,
lelong_id
}
src/store/modules/auth.js
-20
View File
@@ -1,20 +0,0 @@
const state = {
token:String,
};
const getters = {};
const actions = {
fetchProfile() {
this.state.token = localStorage.getItem("token");
},
};
const mutations = {};
export default {
state,
getters,
actions,
mutations
}
src/store/modules/authentication.js
+39
View File
@@ -0,0 +1,39 @@
import { defineStore } from 'pinia'
export const useAuthenticationUserStore = defineStore('authenticationUser', {
state: () => ({
token: "",
id: "",
nokp: "",
name: "",
email: "",
notelbimbit: "",
username: ""
}),
getters: {
getToken() {
return this.token;
},
getId() {
return this.id;
},
getNokp() {
return this.nokp;
},
getName() {
return this.name;
},
getEmail() {
return this.email;
},
getNoTelBimbit() {
return this.notelbimbit;
},
getUsername() {
return this.username;
},
},
actions: {
},
persist: true,
})
src/store/modules/cart.js
-31
View File
@@ -1,31 +0,0 @@
import axios from 'axios';
const state = {
carts: [],
};
const getters = {
allCarts: state => state.carts,
};
const actions = {
async fetchCarts({ commit }) {
const response = await axios.get("/cart/" + localStorage.getItem("id"));
// console.log(response.data);
commit('setCarts', response.data);
},
};
const mutations = {
setCarts: (state, carts) => (state.carts = carts),
};
export default {
state,
getters,
actions,
mutations
}
src/store/modules/lelongId.js
-34
View File
@@ -1,34 +0,0 @@
import axios from 'axios';
const state = {
lelong_id: ""
};
const getters = {
idLelong: state => state.lelong_id,
};
const actions = {
async fetchLelongId({ commit }) {
const response = await axios.get("/lelongDetails/today", {
headers: {
Authorization: "Bearer " + localStorage.getItem("token"),
},
});
// console.log(response.data[0].id);
commit('setIdLelong', response.data[0].id);
},
};
const mutations = {
setIdLelong: (state, lelong_id) => (state.lelong_id = lelong_id),
}
export default {
state,
getters,
actions,
mutations
}