Add pengurusan gambar marhun components

resources/js/axios.js

@@ -0,0 +1,6 @@
+import axios from "axios";
+
+// const tokenKey = "token";
+// axios.defaults.headers.common['X-CSRF-TOKEN'] = tokenKey;
+
+axios.defaults.baseURL = "http://lelong-admin.test/api";

resources/js/components/pengurusangambar/marhun/DisplayLelongBid.vue.vue

@@ -0,0 +1,50 @@
+<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>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import axios from "axios";
+import MarhunImage from "./MarhunImage.vue"
+
+const props = defineProps({
+    selectedIdCawangan: String,
+    selectedBatchLelong: String
+})
+
+const allLelongBid = ref();
+
+const numberOfLelongBid = computed(
+    () => allLelongBid.length
+);
+
+function getListLelongBid() {
+    axios.get("/listLelongBid", {
+        params: {
+            lelong_id: props.selectedBatchLelong,
+            caw_id: props.selectedIdCawangan,
+        },
+    }).then((response) => {
+        allLelongBid.value = response.data;
+    }).catch((error) => { alert(error); });
+}
+
+onMounted(() => {
+    getListLelongBid();
+});
+</script>

resources/js/components/pengurusangambar/marhun/MarhunImage.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="col-12">
+        file_marhun_id: {{ props.gambarId }}
+    </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>
+import { ref, onMounted } from 'vue'
+import axios from "axios";
+
+const props = defineProps({
+    gambarId: Number,
+    noRujukan: String
+})
+
+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); });
+}
+
+onMounted(() => {
+    getPhotoMarhun();
+});
+</script>

resources/js/components/pengurusangambar/marhun/SelectBatchLelong.vue

@@ -0,0 +1,48 @@
+<template>
+    <div v-if="isLoadingGetListLelong" 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 Batch Lelong</label>
+        <select class="custom-select" @change="pilihBatchLelong($event)">
+            <option selected disabled>Batch Lelong</option>
+            <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" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import SelectCawangan from "./SelectCawangan.vue"
+import axios from "axios";
+
+const listLelong = ref();
+const pilihLelong = ref();
+const componentKey = ref(0);
+const isLoadingGetListLelong = ref(false);
+
+function getListLelong() {
+    isLoadingGetListLelong.value = true;
+    axios.get("/listLelong", {}).then((response) => {
+        listLelong.value = response.data;
+    }).catch((error) => {
+        alert(error);
+    });
+    isLoadingGetListLelong.value = false;
+};
+
+function pilihBatchLelong(e) {
+    let val = e.target.value;
+    pilihLelong.value = val;
+    componentKey.value += 1;
+};
+
+onMounted(() => {
+    getListLelong();
+})
+</script>

resources/js/components/pengurusangambar/marhun/SelectCawangan.vue

@@ -0,0 +1,60 @@
+<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 disabled>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>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import axios from "axios";
+import DisplayLelongBid from "./DisplayLelongBid.vue.vue"
+
+const props = defineProps({
+    selectedLelong: String
+})
+
+const listCawangan = ref();
+const pilihIdCawangan = ref();
+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,
+        },
+    }).then((response) => {
+        listCawangan.value = response.data;
+    }).catch((error) => { alert(error); });
+    isLoadingGetListCawangan.value = false;
+}
+
+function pilihCawangan(e) {
+    let val = e.target.value;
+    pilihIdCawangan.value = val;
+    componentKeySecond.value += 1;
+};
+
+onMounted(() => {
+    getListCawangan();
+})
+</script>

resources/js/vue-app.js

@@ -1,10 +1,14 @@
 import { createApp } from 'vue'
+import './axios'
 
-import HelloComponent from "./components/HelloComponent.vue"
-import ByeComponent from "./components/ByeComponent.vue"
+// 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 appHelloComponent = createApp(HelloComponent);
+// const appByeComponent = createApp(ByeComponent);
+const appSelectBatchLelong = createApp(SelectBatchLelong);
 
-appHelloComponent.mount("#appHelloComponent");
-appByeComponent.mount("#appByeComponent");
+// appHelloComponent.mount("#appHelloComponent");
+// appByeComponent.mount("#appByeComponent");
+appSelectBatchLelong.mount("#appSelectBatchLelong");