fix list template
This commit is contained in:
Amir
@@ -1,75 +1,150 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="loading"
|
||||
style="min-height: 70vh; display: grid; place-items: center"
|
||||
class="container"
|
||||
style="
|
||||
min-height: 70vh;
|
||||
min-width: 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: 60vh" class="row">
|
||||
<div v-else class="row">
|
||||
<div v-if="this.status">
|
||||
<div class="">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button disabled class="btn m-3 mb-1 btn-outline-primary">
|
||||
Jumlah Surat: {{ numberSag }}
|
||||
</button>
|
||||
<button disabled class="btn m-3 mb-1 btn-outline-primary">
|
||||
Masa Mula Lelong: {{ lelong_details.masamula_lelong }}
|
||||
</button>
|
||||
<button disabled class="btn m-3 mb-1 btn-outline-primary">
|
||||
Masa Tamat Lelong: {{ lelong_details.masatamat_lelong }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<InlineMessage class="m-1" severity="info">
|
||||
Jumlah Surat: {{ numberSag }}
|
||||
</InlineMessage>
|
||||
<InlineMessage class="m-1" severity="info">
|
||||
Masa Mula Lelong: {{ lelong_details.masamula_lelong }}
|
||||
</InlineMessage>
|
||||
<InlineMessage class="m-1" severity="info">
|
||||
Masa Tamat Lelong: {{ lelong_details.masatamat_lelong }}
|
||||
</InlineMessage>
|
||||
</div>
|
||||
<div class="row clearfix">
|
||||
<div
|
||||
v-for="sag in sags"
|
||||
:key="sag.id"
|
||||
class="col-lg-4 col-md-4 col-sm-12"
|
||||
style="margin: 10px 0px"
|
||||
>
|
||||
<div class="card product_item">
|
||||
<div
|
||||
class="card-body mb-3"
|
||||
style="
|
||||
border: 1px solid rgba(0, 0, 0, 0.125);
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
-gambar marhun-
|
||||
</div>
|
||||
<div class="body mb-2">
|
||||
<div class="product_details">
|
||||
<h6 class="text-primary">
|
||||
{{ sag.norujukan }}
|
||||
</h6>
|
||||
<ul class="product_price list-unstyled">
|
||||
<!-- <li class="old_price">{{ sag.marhun }}</li> -->
|
||||
<li class="old_price">{{ sag.berat }}g</li>
|
||||
<li class="old_price">
|
||||
<b>RM{{ sag.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</b>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="cp_img">
|
||||
<div class="hover">
|
||||
<a
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#bidaModal"
|
||||
@click="clickModal(sag)"
|
||||
class="btn btn-primary btn-sm waves-effect"
|
||||
>Masuk <i class="zmdi zmdi-shopping-cart"></i
|
||||
></a>
|
||||
<div v-for="sag in sags" :key="sag.id" class="col-12 lg:col-4">
|
||||
<!-- <div class="card card-body"> -->
|
||||
<Card>
|
||||
<template #content>
|
||||
<div class="">
|
||||
<div
|
||||
class="mb-3 product-image"
|
||||
style="border: 1px solid rgba(0, 0, 0, 0.125)"
|
||||
>
|
||||
-gambar marhun-
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="product_details">
|
||||
<div class="grid text-center">
|
||||
<div class="col-12">
|
||||
<h6 class="text-primary">
|
||||
{{ sag.norujukan }}
|
||||
</h6>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<p>{{ sag.berat }}g</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <ul class="product_price list-unstyled">
|
||||
<li class="old_price">{{ sag.berat }}g</li>
|
||||
<li class="old_price">
|
||||
<b
|
||||
>RM{{
|
||||
sag.hargaasas
|
||||
?.toString()
|
||||
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
|
||||
}}</b
|
||||
>
|
||||
</li>
|
||||
</ul> -->
|
||||
<div class="flex justify-content-between">
|
||||
<div class="hover">
|
||||
RM{{
|
||||
sag.hargaasas
|
||||
?.toString()
|
||||
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
|
||||
}}
|
||||
<a
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#bidaModal"
|
||||
@click="clickModal(sag)"
|
||||
class="btn btn-primary btn-sm waves-effect"
|
||||
>Masuk <i class="zmdi zmdi-shopping-cart"></i
|
||||
></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="container">
|
||||
<Message severity="info" :closable="false"
|
||||
>Sila isi ruangan pilih cawangan di atas.
|
||||
</Message>
|
||||
<div class="grid justify-content-center">
|
||||
<div class="col-12 p-3 lg:col-4">
|
||||
<div class="card p-2">
|
||||
<div class="field">
|
||||
<div class="custom-skeleton">
|
||||
<div class="flex mb-3"></div>
|
||||
<Skeleton width="100%" height="150px"></Skeleton>
|
||||
<div class="flex justify-content-center mt-3">
|
||||
<Skeleton width="10rem"></Skeleton>
|
||||
</div>
|
||||
<div class="flex justify-content-between mt-3">
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 p-3 lg:col-4">
|
||||
<div class="card p-2">
|
||||
<div class="field">
|
||||
<div class="custom-skeleton">
|
||||
<div class="flex mb-3"></div>
|
||||
<Skeleton width="100%" height="150px"></Skeleton>
|
||||
<div class="flex justify-content-center mt-3">
|
||||
<Skeleton width="10rem"></Skeleton>
|
||||
</div>
|
||||
<div class="flex justify-content-between mt-3">
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 p-3 lg:col-4">
|
||||
<div class="card p-2">
|
||||
<div class="field">
|
||||
<div class="custom-skeleton">
|
||||
<div class="flex mb-3"></div>
|
||||
<Skeleton width="100%" height="150px"></Skeleton>
|
||||
<div class="flex justify-content-center mt-3">
|
||||
<Skeleton width="10rem"></Skeleton>
|
||||
</div>
|
||||
<div class="flex justify-content-between mt-3">
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
<Skeleton width="4rem" height="2rem"></Skeleton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,9 +152,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else style="min-height: 60vh">
|
||||
<h1 class="mt-5">Sila Isi Ruangan 'Pilih Cawangan' Di Atas.</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- modal marhun -->
|
||||
@@ -139,12 +211,18 @@
|
||||
<td>{{ marhun.marhun_desc }}</td>
|
||||
<td>{{ marhun.karat }}</td>
|
||||
<td>{{ marhun.berat }}g</td>
|
||||
<td>RM{{ marhun.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
|
||||
<td>
|
||||
RM{{
|
||||
marhun.hargaasas
|
||||
?.toString()
|
||||
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr style="text-transform: uppercase">
|
||||
<th colspan="3">Jumlah</th>
|
||||
<th>{{ norujukan.berat }}g</th>
|
||||
<th class="disabled-bg"></th>
|
||||
<td colspan="3">Jumlah</td>
|
||||
<td>{{ norujukan.berat }}g</td>
|
||||
<td class="disabled-bg"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -162,7 +240,11 @@
|
||||
class="form-control text-start justify-content-start"
|
||||
disabled
|
||||
>
|
||||
{{ norujukan.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ''}}
|
||||
{{
|
||||
norujukan.hargaasas
|
||||
?.toString()
|
||||
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -252,6 +334,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
layout: "grid",
|
||||
status: false,
|
||||
v$: useVuelidate(),
|
||||
loading: false,
|
||||
@@ -315,7 +398,7 @@ export default {
|
||||
} else {
|
||||
this.status = false;
|
||||
this.loading = false;
|
||||
console.log(response.data.message);
|
||||
// console.log(response.data.message);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
@@ -387,8 +470,20 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.disabled-bg {
|
||||
background-color: rgb(233, 236, 239);
|
||||
}
|
||||
|
||||
::v-deep(.p-dataview .p-dataview-content) {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
min-height: 200px;
|
||||
min-width: 200px;
|
||||
max-height: 350px;
|
||||
max-width: 350px;
|
||||
}
|
||||
</style>
|
||||
@@ -35,14 +35,14 @@
|
||||
<input type="hidden" />
|
||||
</select>
|
||||
</div>
|
||||
<h6>
|
||||
<!-- <h6>
|
||||
<button
|
||||
class="badge m-2 btn-secondary"
|
||||
@click="toggleReloadComponent"
|
||||
>
|
||||
Reload <i class="bi bi-arrow-down"></i>
|
||||
</button>
|
||||
</h6>
|
||||
</h6> -->
|
||||
<list-item
|
||||
v-bind:key="componentKey"
|
||||
v-bind:selectedCawangan="selectCawangan"
|
||||
|
||||
Reference in New Issue
Block a user