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

Finalize components pengurusan gambar marhun

Browse Source
This commit is contained in:
Amir
2023-02-05 16:26:07 +08:00
parent c5ad7fbc0f
commit 29511d2bc3
11 changed files with 123 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/components/ByeComponent.vue
-12
View File
@@ -1,12 +0,0 @@
<template>
<bye-detail></bye-detail>
</template>
<script>
import ByeDetail from "./ByeDetail.vue";
export default {
components: {
"bye-detail": ByeDetail,
},
};
</script>
resources/js/components/ByeDetail.vue
-3
View File
@@ -1,3 +0,0 @@
<template>
<div>this is bye component using vuejs</div>
</template>
resources/js/components/HelloComponent.vue
-12
View File
@@ -1,12 +0,0 @@
<template>
<hello-detail></hello-detail>
</template>
<script>
import HelloDetail from "./HelloDetail.vue";
export default {
components: {
"hello-detail": HelloDetail,
},
};
</script>
resources/js/components/HelloDetail.vue
-3
View File
@@ -1,3 +0,0 @@
<template>
<div>this is hello detail component using vuejs</div>
</template>
resources/js/components/pengurusangambar/marhun/DisplayLelongBid.vue.vue
+21 -19
View File
@@ -1,24 +1,15 @@
<template>
<div class="col-12">
Jumlah Item: {{ numberOfLelongBid }}
</div>
<div v-for="lelongBid in allLelongBid" v-bind:key="lelongBid" class="col-lg-4 my-1 text-center col-md-6 col-sm-12">
<div class="card">
<div class="card-body">
<div class="text-center" v-if="lelongBid.file_marhun_main != null">
<MarhunImage v-bind:noRujukan="lelongBid.norujukan" v-bind:gambarId="lelongBid.file_marhun_main.id"/>
</div>
<div v-else>
<div class="col-12">{{ lelongBid.norujukan }}</div>
<div class="col-12 text-danger">Gambar Belum Di Muat Naik</div>
</div>
<div v-for="lelongBid in allLelongBid" v-bind:key="lelongBid">
<div class="item-wrapper">
<div class="item-main">
<MarhunImage v-bind:lelongBidProp="lelongBid" />
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { ref, onMounted } from "vue";
import axios from "axios";
import MarhunImage from "./MarhunImage.vue"
@@ -29,10 +20,6 @@ const props = defineProps({
const allLelongBid = ref();
const numberOfLelongBid = computed(
() => allLelongBid.length
);
function getListLelongBid() {
axios.get("/listLelongBid", {
params: {
@@ -47,4 +34,19 @@ function getListLelongBid() {
onMounted(() => {
getListLelongBid();
});
</script>
</script>
<style scoped>
.item-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, auto));
gap: 1rem;
}
.item-main {
border: 1px solid #0000001a;
margin: 10px;
border-start-start-radius: 8px;
border-start-end-radius: 8px;
}
</style>
resources/js/components/pengurusangambar/marhun/MarhunImage.vue
+62 -19
View File
@@ -1,12 +1,29 @@
<template>
<div class="col-12">
file_marhun_id: {{ props.gambarId }}
<div class="text-center">
<div v-if="props.lelongBidProp.file_marhun_main == null" class="text-danger false-style image-style">
<span class="material-symbols-rounded icon-image">
cancel
</span>
<div>Gambar Belum Di Muat Naik</div>
</div>
<div v-else-if="stringGambar == 0" class="text-primary bg-light image-style">
<span class="material-symbols-rounded icon-image">
cycle
</span>
<div>No Image in Storage</div>
</div>
<div v-else class="images" v-viewer style="cursor:pointer;">
<img :src="stringGambarMarhun" class="image-style" alt="gambar-marhun">
</div>
<div class="my-2">{{ props.lelongBidProp.norujukan }}</div>
<div class="marhun-div-style">{{ props.lelongBidProp.marhun }}</div>
<div class="my-2">RM{{
props.lelongBidProp.nilaimarhun
?.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
}}</div>
</div>
<div class="col-12">
{{ props.noRujukan }}
</div>
<div v-if="stringGambar == 0" class="text-center text-primary">No Image in Storage. Please cp from the server</div>
<img v-else :src="stringGambarMarhun" alt="gambar-marhun" width="180">
</template>
<script setup>
@@ -14,26 +31,52 @@ import { ref, onMounted } from 'vue'
import axios from "axios";
const props = defineProps({
gambarId: Number,
noRujukan: String
lelongBidProp: Object,
})
const stringGambar = ref();
const stringGambarMarhun = ref();
function getPhotoMarhun() {
axios.get("/showPhotoMarhun", {
params: {
filemarhun_id: props.gambarId,
norujukan: props.noRujukan,
},
}).then((response) => {
stringGambar.value = response.data;
stringGambarMarhun.value = "data:image/png;base64, " + stringGambar.value;
}).catch((error) => { console.log(error); });
if (props.lelongBidProp.file_marhun_main != null) {
axios.get("/showPhotoMarhun", {
params: {
filemarhun_id: props.lelongBidProp.file_marhun_main.id,
norujukan: props.lelongBidProp.norujukan,
},
}).then((response) => {
stringGambar.value = response.data;
stringGambarMarhun.value = "data:image/png;base64, " + stringGambar.value;
}).catch((error) => { console.log(error); });
}
}
onMounted(() => {
getPhotoMarhun();
});
</script>
</script>
<style scoped>
.image-style {
display: grid;
justify-content: center;
align-items: center;
width: 245px;
height: 137.812px;
border-start-start-radius: 7px;
border-start-end-radius: 7px;
}
.marhun-div-style {
max-width: 225px;
margin: 0.5rem;
}
.icon-image {
font-size: 50px;
}
.false-style {
background: #fdf3f3;
}
</style>
resources/js/components/pengurusangambar/marhun/SelectBatchLelong.vue
+2 -2
View File
@@ -11,7 +11,7 @@
<option v-for="val in listLelong" :key="val" v-bind:value="val.id">{{ val.id }}</option>
</select>
<div class="mt-3">
<SelectCawangan v-if="pilihLelong != null" v-bind:key="componentKey" v-bind:selectedLelong="pilihLelong" />
<SelectCawangan v-if="pilihLelong != 'Batch Lelong'" v-bind:key="componentKey" v-bind:selectedLelong="pilihLelong" />
</div>
</div>
</template>
@@ -22,7 +22,7 @@ import SelectCawangan from "./SelectCawangan.vue"
import axios from "axios";
const listLelong = ref();
const pilihLelong = ref();
const pilihLelong = ref('Batch Lelong');
const componentKey = ref(0);
const isLoadingGetListLelong = ref(false);
resources/js/components/pengurusangambar/marhun/SelectCawangan.vue
+10 -25
View File
@@ -1,20 +1,12 @@
<template>
<button @click="testLoading()" class="btn btn-primary">Invert isLoadingGetListCawangan</button>
<div v-if="isLoadingGetListCawangan" class="row justify-content-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div v-else>
<label>Pilih Cawangan</label>
<select class="custom-select" @change="pilihCawangan($event)">
<option selected>Cawangan</option>
<option v-for="val in listCawangan" :key="val" v-bind:value="val.caw_id">{{ val.caw_name }}</option>
</select>
<div class="mt-3 row justify-content-center">
<DisplayLelongBid v-if="pilihIdCawangan != null" v-bind:key="componentKeySecond"
v-bind:selectedIdCawangan="pilihIdCawangan" v-bind:selectedBatchLelong="props.selectedLelong" />
</div>
<label>Pilih Cawangan</label>
<select class="custom-select" @change="pilihCawangan($event)">
<option selected>Cawangan</option>
<option v-for="val in listCawangan" :key="val" v-bind:value="val.caw_id">{{ val.caw_name }}</option>
</select>
<div class="mt-3 row justify-content-center">
<DisplayLelongBid v-if="pilihIdCawangan != 'Cawangan'" v-bind:key="componentKeySecond"
v-bind:selectedIdCawangan="pilihIdCawangan" v-bind:selectedBatchLelong="props.selectedLelong" />
</div>
</template>
@@ -28,16 +20,10 @@ const props = defineProps({
})
const listCawangan = ref();
const pilihIdCawangan = ref();
const pilihIdCawangan = ref('Cawangan');
const componentKeySecond = ref(0);
const isLoadingGetListCawangan = ref(false);
function testLoading() {
isLoadingGetListCawangan.value = !isLoadingGetListCawangan.value;
}
function getListCawangan() {
isLoadingGetListCawangan.value = true;
axios.get("/listCawangan", {
params: {
lelong_id: props.selectedLelong,
@@ -45,7 +31,6 @@ function getListCawangan() {
}).then((response) => {
listCawangan.value = response.data;
}).catch((error) => { alert(error); });
isLoadingGetListCawangan.value = false;
}
function pilihCawangan(e) {
@@ -56,5 +41,5 @@ function pilihCawangan(e) {
onMounted(() => {
getListCawangan();
})
});
</script>
resources/js/vue-app.js
Vendored
+3 -6
View File
@@ -1,14 +1,11 @@
import { createApp } from 'vue'
import './axios'
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
// import HelloComponent from "./components/HelloComponent.vue"
// import ByeComponent from "./components/ByeComponent.vue"
import SelectBatchLelong from "./components/pengurusangambar/marhun/SelectBatchLelong.vue"
// const appHelloComponent = createApp(HelloComponent);
// const appByeComponent = createApp(ByeComponent);
const appSelectBatchLelong = createApp(SelectBatchLelong);
appSelectBatchLelong.use(VueViewer);
// appHelloComponent.mount("#appHelloComponent");
// appByeComponent.mount("#appByeComponent");
appSelectBatchLelong.mount("#appSelectBatchLelong");