fix fx delete, update in cart
This commit is contained in:
Amir
@@ -36,6 +36,7 @@
|
||||
<th scope="col">Bil</th>
|
||||
<th scope="col">No Rujukan</th>
|
||||
<th scope="col">Tarikh/Masa Bidaan</th>
|
||||
<th scope="col">Berat</th>
|
||||
<th scope="col">Harga Bida</th>
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -43,21 +44,23 @@
|
||||
<tr v-for="(item, index) in bid.lelongbid" v-bind:key="item">
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>
|
||||
{{ item.norujukan }}<br /><small
|
||||
><a
|
||||
<small>{{ item.norujukan }}</small>
|
||||
<br />
|
||||
<a
|
||||
href="#"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModal"
|
||||
v-on:click="marhunModal(item)"
|
||||
>{{ item.marhun }}</a
|
||||
></small
|
||||
>
|
||||
>
|
||||
</td>
|
||||
<td>{{ item.masa_bidaan }}</td>
|
||||
<td>{{ item.berat }}g</td>
|
||||
<td>RM{{ item.hargabida }}</td>
|
||||
</tr>
|
||||
<tr style="text-transform: uppercase">
|
||||
<th colspan="3">Jumlah</th>
|
||||
<th>xxxg</th>
|
||||
<th>RMxxxxx</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
@@ -118,8 +121,9 @@
|
||||
<td>RM{{ marhun.hargaasas }}</td>
|
||||
</tr>
|
||||
<tr style="text-transform: uppercase">
|
||||
<th colspan="5">Jumlah</th>
|
||||
<th>RM{{ theData.hargaasas }}</th>
|
||||
<th colspan="3">Jumlah</th>
|
||||
<th>{{theData.berat}}g</th>
|
||||
<th colspan="2"></th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="loading"
|
||||
v-if="isLoading"
|
||||
style="min-height: 70vh; display: grid; place-items: center"
|
||||
>
|
||||
<div class="spinner-border" role="status">
|
||||
@@ -12,8 +12,12 @@
|
||||
<div class="col-10">
|
||||
<div class="card">
|
||||
<div class="card-header"><h5>SENARAI TROLI</h5></div>
|
||||
<div v-if="success" class="accordion" id="accordionExample">
|
||||
<div v-for="item in items" v-bind:key="item" class="accordion-item">
|
||||
<div v-if="isSuccess" class="accordion" id="accordionExample">
|
||||
<div
|
||||
v-for="item in listItems"
|
||||
v-bind:key="item"
|
||||
class="accordion-item"
|
||||
>
|
||||
<h2 class="accordion-header" id="headingOne">
|
||||
<button
|
||||
class="accordion-button"
|
||||
@@ -38,6 +42,7 @@
|
||||
<tr>
|
||||
<th>Bil</th>
|
||||
<th>No Rujukan</th>
|
||||
<th>Berat</th>
|
||||
<th>Harga Asas</th>
|
||||
<th>Harga Bida</th>
|
||||
<th>Tindakan</th>
|
||||
@@ -50,21 +55,43 @@
|
||||
>
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>
|
||||
{{ surat.norujukan }}<br /><small>{{
|
||||
surat.marhun
|
||||
}}</small>
|
||||
<small>{{ surat.norujukan }}</small>
|
||||
<br />
|
||||
<a
|
||||
href="#"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#marhunModal"
|
||||
v-on:click="openModal(surat)"
|
||||
>
|
||||
{{ surat.marhun }}
|
||||
</a>
|
||||
</td>
|
||||
<td>{{ surat.berat }}g</td>
|
||||
<td>RM{{ surat.hargaasas }}</td>
|
||||
<td>RM{{ surat.hargabida }}</td>
|
||||
<td>
|
||||
<button class="btn me-1 ms-1 btn-warning">Ubah</button
|
||||
><button class="btn me-1 ms-1 btn-danger">
|
||||
Padam
|
||||
<button
|
||||
class="btn me-1 ms-1 btn-warning"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#editModal"
|
||||
v-on:click="openModal(surat)"
|
||||
>
|
||||
Ubah Bidaan
|
||||
</button>
|
||||
<button
|
||||
class="btn me-1 ms-1 btn-danger"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#deleteModal"
|
||||
v-on:click="openModal(surat)"
|
||||
>
|
||||
Padam Surat
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="text-transform: uppercase">
|
||||
<th colspan="3">JUMLAH</th>
|
||||
<th colspan="2">JUMLAH</th>
|
||||
<th>xxxg</th>
|
||||
<th></th>
|
||||
<th>RMxxxxxx</th>
|
||||
<td></td>
|
||||
</tr>
|
||||
@@ -96,17 +123,375 @@
|
||||
</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-dialog modal-lg 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>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<div class="col">
|
||||
<!-- <p>Marhun: {{ theSurat.marhun }}</p>
|
||||
<p>Jumlah Berat: {{ theSurat.berat }}g</p> -->
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
<tr class="table-light">
|
||||
<th scope="col">No</th>
|
||||
<th scope="col">Jenis Marhun</th>
|
||||
<th scope="col">Karat</th>
|
||||
<th scope="col">Berat</th>
|
||||
<th scope="col">Nota</th>
|
||||
<th scope="col">Harga Asas</th>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="(data, index) in theSurat.lelongbidmarhun"
|
||||
v-bind:key="data"
|
||||
>
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>{{ data.marhun }}</td>
|
||||
<td>{{ data.karat }}</td>
|
||||
<td>{{ data.berat }}g</td>
|
||||
<td>{{ data.nota }}</td>
|
||||
<td>RM{{ data.hargaasas }}</td>
|
||||
</tr>
|
||||
<tr style="text-transform: uppercase">
|
||||
<th colspan="3">Jumlah</th>
|
||||
<th>{{ theSurat.berat }}g</th>
|
||||
<th></th>
|
||||
<th>RM{{ theSurat.hargaasas }}</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- <div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label text-end"
|
||||
>Jumlah Harga Asas</label
|
||||
>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<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
|
||||
>
|
||||
{{ theSurat.hargaasas }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-3">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label">Tambahan Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
type="text"
|
||||
id="tambahanbida"
|
||||
class="form-control"
|
||||
@keyup="calcTotal()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-7">
|
||||
<div style="font-size: 15px" class="fst-italic text-danger">
|
||||
<div class="text-end">
|
||||
*Minimum tambahan harga bida adalah RM1.
|
||||
</div>
|
||||
<div class="text-end">
|
||||
*Gandaan ringgit sahaja dibenarkan.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label">Jumlah Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input type="text" class="form-control" disabled />
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-3">
|
||||
<label class="col-form-label">Jumlah Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="input-group mb-3">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
disabled
|
||||
v-bind:value="theSurat.hargabida"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="btn me-1 ms-1 btn-warning"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#editModal"
|
||||
v-on:click="openModal(theSurat)"
|
||||
>
|
||||
Ubah Bidaan
|
||||
</button>
|
||||
<button
|
||||
class="btn me-1 ms-1 btn-danger"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#deleteModal"
|
||||
v-on:click="openModal(theSurat)"
|
||||
>
|
||||
Padam Surat
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-secondary"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Kembali
|
||||
</button>
|
||||
<!-- <button type="submit" class="btn btn-success" @click="updateItem()">
|
||||
Terima
|
||||
</button> -->
|
||||
</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-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>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="row m-2">
|
||||
<div class="col">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-6">
|
||||
<label class="col-form-label text-end"
|
||||
>Jumlah Harga Asas</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
|
||||
>
|
||||
{{ theSurat.hargaasas }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-3">
|
||||
<div class="col-6">
|
||||
<label class="col-form-label">Tambahan Harga Bida</label>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">RM</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="tambahanBidaan"
|
||||
v-on:keyup="calcTotal()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" v-if="v$.tambahanBidaan.$error">
|
||||
<div style="font-size: 15px" class="fst-italic text-danger">
|
||||
<div class="text-end">
|
||||
*Minimum tambahan harga bida adalah RM1.
|
||||
</div>
|
||||
<div class="text-end">
|
||||
*Gandaan ringgit sahaja dibenarkan.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-6">
|
||||
<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">RM</span>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
v-model="jumlahBidaan"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-danger me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-success"
|
||||
@click="updateItem(theSurat)"
|
||||
>
|
||||
Terima
|
||||
</button>
|
||||
</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-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close"
|
||||
ref="deleteClose"
|
||||
data-bs-dismiss="modal"
|
||||
aria-label="Close"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div class="modal-body">
|
||||
<h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
|
||||
<h5>ADAKAH ANDA PASTI?</h5>
|
||||
<p>Padam item dalam troli.</p>
|
||||
|
||||
<table class="table table-bordered">
|
||||
<tbody>
|
||||
<tr class="bg-light">
|
||||
<th>SAG</th>
|
||||
<th>Harga Bida</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{ theSurat.norujukan }}</td>
|
||||
<td>RM{{ theSurat.hargabida }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p class="text-danger text-sm mt-3">
|
||||
<i>*Tindakan ini tidak dapat dikembalikan</i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-secondary me-2"
|
||||
data-bs-dismiss="modal"
|
||||
>
|
||||
Kembali
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-danger"
|
||||
@click="deleteItem(theSurat)"
|
||||
>
|
||||
Padam
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import useVuelidate from "@vuelidate/core";
|
||||
import { required, integer, numeric, minValue } from "@vuelidate/validators";
|
||||
|
||||
export default {
|
||||
emits: ["reloadComponent"],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
success: false,
|
||||
items: "",
|
||||
v$: useVuelidate(),
|
||||
isLoading: false,
|
||||
isSuccess: false,
|
||||
listItems: "",
|
||||
theSurat: "",
|
||||
tambahanBidaan: "",
|
||||
jumlahBidaan: "",
|
||||
hargaAsas: "",
|
||||
formDelete: {
|
||||
userId: "",
|
||||
lelongBidId: "",
|
||||
},
|
||||
formEdit: {
|
||||
userId: localStorage.getItem("id"),
|
||||
lelongBidId: "",
|
||||
hargabida: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
tambahanBidaan: { required, numeric, integer, minValue: minValue(1) },
|
||||
};
|
||||
},
|
||||
mounted: function () {
|
||||
@@ -114,7 +499,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
listCart() {
|
||||
this.loading = true;
|
||||
this.isLoading = true;
|
||||
axios
|
||||
.get("/cartByCawangan/" + localStorage.getItem("id"), {
|
||||
headers: {
|
||||
@@ -122,12 +507,12 @@ export default {
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.loading = false;
|
||||
this.isLoading = false;
|
||||
if (response.data.success == true) {
|
||||
this.success = true;
|
||||
this.items = response.data.cart;
|
||||
} else {
|
||||
this.success = false;
|
||||
this.isSuccess = true;
|
||||
this.listItems = response.data.cart;
|
||||
} else if (response.data.success == false) {
|
||||
this.isSuccess = false;
|
||||
}
|
||||
console.log(response);
|
||||
})
|
||||
@@ -135,6 +520,66 @@ export default {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
openModal(value) {
|
||||
this.theSurat = value;
|
||||
this.tambahanBidaan = value.hargabida - value.hargaasas;
|
||||
this.jumlahBidaan = value.hargabida;
|
||||
this.hargaAsas = value.hargaasas;
|
||||
},
|
||||
deleteItem(value) {
|
||||
this.formDelete.userId = localStorage.getItem("id");
|
||||
this.formDelete.lelongBidId = value.id;
|
||||
this.$refs.deleteClose.click();
|
||||
this.isLoading = true;
|
||||
axios
|
||||
.post("/deleteItem", this.formDelete, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
this.isLoading = false;
|
||||
if (response.data.success == true) {
|
||||
this.$emit("reloadComponent");
|
||||
} else if (response.data.success == false) {
|
||||
alert(response.data.message);
|
||||
this.$emit("reloadComponent");
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.isLoading = false;
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
calcTotal() {
|
||||
this.jumlahBidaan =
|
||||
parseFloat(this.hargaAsas) + parseFloat(this.tambahanBidaan);
|
||||
},
|
||||
updateItem(value) {
|
||||
this.v$.$validate();
|
||||
if (!this.v$.$error) {
|
||||
this.$refs.editClose.click();
|
||||
this.isLoading = true;
|
||||
this.formEdit.lelongBidId = value.id;
|
||||
this.formEdit.hargabida = this.jumlahBidaan;
|
||||
axios
|
||||
.post("/updateItem", this.formEdit, {
|
||||
headers: {
|
||||
Authorization: "Bearer " + localStorage.getItem("token"),
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
this.isLoading = false;
|
||||
this.$emit("reloadComponent");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
this.isLoading = false;
|
||||
});
|
||||
} else {
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,14 +1,20 @@
|
||||
<template>
|
||||
<the-template>
|
||||
<!-- <base-card> -->
|
||||
<button v-on:click="toggleReloadComponent()" class="badge btn-secondary m-2">
|
||||
Reload <i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
<!-- <cart-list
|
||||
<button
|
||||
v-on:click="toggleReloadComponent()"
|
||||
class="badge btn-secondary m-2"
|
||||
>
|
||||
Reload <i class="bi bi-arrow-clockwise"></i>
|
||||
</button>
|
||||
<!-- <cart-list
|
||||
v-bind:key="componentKey"
|
||||
v-on:reloadComponent="toggleReloadComponent"
|
||||
></cart-list> -->
|
||||
<cart-list-new v-bind:key="componentKey"></cart-list-new>
|
||||
<cart-list-new
|
||||
v-bind:key="componentKey"
|
||||
v-on:reloadComponent="toggleReloadComponent"
|
||||
></cart-list-new>
|
||||
<!-- </base-card> -->
|
||||
</the-template>
|
||||
</template>
|
||||
|
||||
@@ -76,13 +76,15 @@
|
||||
>
|
||||
<td>{{ index + 1 }}</td>
|
||||
<td>
|
||||
{{ data.norujukan }}<br /><small><a
|
||||
<small>{{ data.norujukan }}</small>
|
||||
<br />
|
||||
<a
|
||||
href="#"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#exampleModal"
|
||||
v-on:click="marhunModal(data)"
|
||||
>{{ data.marhun }}</a
|
||||
></small>
|
||||
>{{ data.marhun }}
|
||||
</a>
|
||||
</td>
|
||||
<td>RM {{ data.total_payment }}</td>
|
||||
<td
|
||||
|
||||
Reference in New Issue
Block a user