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

Add v-viewer, fix list lelong ui, use v-viewer for every photo display

Browse Source
This commit is contained in:
faiqahzaman
2023-03-21 11:26:39 +08:00
parent 9c1b7e5a4c
commit ae605ae8d7
8 changed files with 329 additions and 742 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+240 -636
View File
File diff suppressed because it is too large Load Diff
package.json
+2 -4
View File
@@ -12,9 +12,8 @@
"@vuelidate/validators": "^2.0.0-alpha.29",
"autoprefixer": "^10",
"axios": "^0.26.1",
"bootstrap": "^5.2.3",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"bootstrap-vue": "^2.23.1",
"core-js": "^3.8.3",
"html2canvas": "^1.4.1",
"jspdf": "^2.5.1",
@@ -27,11 +26,10 @@
"primeflex": "^3.2.1",
"primeicons": "^6.0.1",
"primevue": "^3.17.0",
"v-viewer": "^1.6.4",
"v-viewer": "^3.0.11",
"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",
"vue3-youtube": "^0.1.9"
},
src/components/list/ItemMasterImage.vue
+11 -4
View File
@@ -1,8 +1,8 @@
<template>
<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>
<Skeleton v-if="isLoading" height="165px" width="20rem"></Skeleton>
<div v-else class="images" v-viewer>
<img :src="dataUrl" class="photo-style">
</div>
</template>
<script>
@@ -61,4 +61,11 @@ export default {
max-height: 350px;
max-width: 350px;
}
.photo-style {
width: 298px;
border-start-start-radius: 8px;
border-start-end-radius: 8px;
cursor: pointer;
}
</style>
src/components/list/ItemMasterImageModal.vue
+9 -4
View File
@@ -2,10 +2,8 @@
<div v-if="isLoading" class="spinner-border" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div v-else style="overflow-x:auto">
<Image :src="dataUrl" alt="Gambar Marhun" width="400" preview>
<template #indicator> Lihat Gambar </template>
</Image>
<div v-else style="overflow-x: auto;" class="images" v-viewer>
<img :src="dataUrl" class="photo-style">
</div>
</template>
@@ -65,4 +63,11 @@ export default {
max-height: 350px;
max-width: 350px;
}
.photo-style {
width: 298px;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
</style>
src/components/list/ListItem.vue
+53 -87
View File
@@ -25,31 +25,26 @@
<div
v-for="sag in sags"
:key="sag.id"
class="col-10 sm:col-8 md:col-6 lg:col-4"
class="col-10 sm:col-8 md:col-6 lg:col-4 box-style"
>
<Card class="style-card">
<template #content>
<div class="overflow-x-auto">
<div class="style-photo-div">
<!-- <div
class=""
style="min-height: 180px; min-width: 255px"
> -->
<!-- <img :src="dataUrl" class="product-image" /> -->
<item-master-image
v-if="sag.filemarhun"
v-bind:norujukan="sag.norujukan"
v-bind:filemarhun_id="sag.filemarhun[0].id"
></item-master-image>
<p v-else style="text-align: center; width: 100%">
Image Unavailable
</p>
<!-- </div> -->
</div>
<div class="">
<div class="item-main">
<div class="image-card">
<item-master-image
v-if="sag.filemarhun"
v-bind:norujukan="sag.norujukan"
v-bind:filemarhun_id="sag.filemarhun[0].id"
style="width: 100%;"
></item-master-image>
<div v-else class="text-secondary">
Image Unavailable
</div>
</div>
<div class="card-arrahnbid">
<div class="card-content-arrahnbid">
<div>
<div class="product_details">
<div class="grid text-center">
<div class="col-12 mt-2 pb-0 text-primary">
<div class="col-12 pb-0 text-primary">
{{ sag.norujukan }}
</div>
<div class="col-12 pt-0">{{ sag.berat }}g</div>
@@ -62,7 +57,6 @@
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}
</div>
<Button
data-bs-toggle="modal"
data-bs-target="#bidaModal"
@@ -74,8 +68,8 @@
</div>
</div>
</div>
</template>
</Card>
</div>
</div>
</div>
</div>
</div>
@@ -100,68 +94,6 @@
</div>
</div>
</div>
<div class="grid justify-content-center" style="visibility:hidden">
<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="1px"></Skeleton>
<div class="flex justify-content-center">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-center">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-between">
<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="1px"></Skeleton>
<div class="flex justify-content-center">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-center">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-between">
<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="1px"></Skeleton>
<div class="flex justify-content-center">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-center">
<Skeleton width="10rem"></Skeleton>
</div>
<div class="flex justify-content-between">
<Skeleton width="4rem" height="2rem"></Skeleton>
<Skeleton width="4rem" height="2rem"></Skeleton>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -687,4 +619,38 @@ export default {
.container-height {
min-height: 70vh;
}
.item-main {
border: 1px solid #00000026;
text-align: center;
margin: 10px;
border-start-start-radius: 8px;
border-start-end-radius: 8px;
width: 300px;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
.box-style {
display: grid;
justify-content: center;
}
.image-card {
height: 165px;
display: grid;
align-content: center;
background: #dfe3e7;
border-start-start-radius: 7px;
border-start-end-radius: 7px;
}
.card-arrahnbid {
background: #ffffff;
color: #495057;
/* border-radius: 6px; */
}
.card-content-arrahnbid {
padding: 1.25rem 20px;
}
</style>
src/components/pay/ReceiptImage.vue
+12 -3
View File
@@ -2,9 +2,9 @@
<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>
<div v-else class="images" v-viewer>
<img :src="dataUrl" class="photo-style">
</div>
</template>
<script>
@@ -53,3 +53,12 @@ export default {
},
};
</script>
<style scoped>
.photo-style {
width: 100px;
/* border-radius: 8px; */
cursor: pointer;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
</style>
src/components/result/ResultMain.vue
+1 -1
View File
@@ -92,7 +92,7 @@
>
<div class="grid justify-content-center">
<div class="col-12 mb-4 text-center">
<i class="pi pi-slack text-8xl text-400"></i>
<i class="pi pi-info-circle text-8xl text-400"></i>
</div>
<div class="col-12 text-center">
<span class="text-400">Tiada Data Dalam Keputusan.</span>
src/main.js
+1 -3
View File
@@ -102,15 +102,13 @@ app.component('Textarea', Textarea);
app.directive('tooltip', Tooltip);
app.component('ScrollTop', ScrollTop);
app.component('MazPhoneNumberInput', MazPhoneNumberInput)
app.component('YouTube', YouTube)
app.use(router).use(pinia).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
app.use(router).use(pinia).use(PrimeVue).use(VueSweetalert2).use(ToastService).use(VueViewer).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')