feature: po pay downpayment

test/vuex/acc-one-po-asset/api/api.js

@@ -1,81 +1,68 @@
-const URL = "/one-api/mockup/purchase/order/PurchaseOrderAset/";
+const URL = "/one-api/mockup/purchase/order/PurchaseOrderAset";
+
+async function request(endpoint, params) {
+    try {
+        const resp = await axios.post(URL + endpoint, params);
+        if (resp.status !== 200) {
+            throw new Error(resp.statusText);
+        }
+        return resp.data;
+    } catch (e) {
+        return {
+            status: "ERR",
+            message: e.message
+        }
+    }
+}
 
 export async function getListSupplier(params) {
-    try {
-        var response = await axios.post(URL + "getListSupplier", params)
-        if (response.status !== 200) {
-            return {
-                status: 'ERR',
-                message: responsep.statusText
-            };
-        }
-
-        let data = response.data
-        return data
-    } catch (error) {
-        return {
-            status: 'ERR',
-            message: error.message
-        };
-    }
+    return request("/getListSupplier", params);
 }
 
 export async function getListCabang(params) {
-    try {
-        var response = await axios.post(URL + "getListCabang", params)
-        if (response.status !== 200) {
-            return {
-                status: 'ERR',
-                message: responsep.statusText
-            };
-        }
+    return request("/getListCabang", params);
+}
 
-        let data = response.data
-        return data
-    } catch (error) {
-        return {
-            status: 'ERR',
-            message: error.message
-        };
-    }
+export async function getListGudang(params) {
+    return request("/getListGudang", params);
 }
 
 export async function searchRequestAset(params) {
-    try {
-        var response = await axios.post(URL + "searchRequestAset", params)
-        if (response.status !== 200) {
-            return {
-                status: 'ERR',
-                message: responsep.statusText
-            };
-        }
+    return request("/searchRequestAset", params);
+}
 
-        let data = response.data
-        return data
-    } catch (error) {
-        return {
-            status: 'ERR',
-            message: error.message
-        };
-    }
+export async function getDaftarPoAset(params) {
+    return request("/getDaftarPoAset", params);
+}
+
+export async function getDaftarAttachment(params) {
+    return request("/getDaftarAttachment", params);
+}
+
+export async function getDataKontrakPoAset(params) {
+    return request("/getDataKontrakPoAset", params);
+}
+
+export async function createPoAsset(params) {
+    return request("/createPoAsset", params);
+}
+
+export async function editPoAsset(params) {
+    return request("/editPoAsset", params);
+}
+
+export async function deletePoAsset(params) {
+    return request("/deletePoAsset", params);
+}
+
+export async function updateApprovalPO(params) {
+    return request("/updateApprovalPO", params);
 }
 
 export async function getUserApproveLevel(params) {
-    try {
-        var response = await axios.post(URL + "getUserApproveLevel", params)
-        if (response.status !== 200) {
-            return {
-                status: 'ERR',
-                message: responsep.statusText
-            };
-        }
+    return request("/getUserApproveLevel", params);
+}
 
-        let data = response.data
-        return data
-    } catch (error) {
-        return {
-            status: 'ERR',
-            message: error.message
-        };
-    }
-}
+export async function uploadAttachment(params) {
+    return request("/uploadAttachment", params);
+}

test/vuex/acc-one-po-asset/components/dialog-add-attachment.vue

@@ -8,18 +8,19 @@
                 <v-card-text>
                     <v-layout row wrap>
                         <v-flex xs12 class="mb-2 pa-2" style="border: 1px solid black;">
-                            <input 
-                                type="file" id="files" ref="files" multiple 
+                            <input
+                                type="file" id="files" ref="files" multiple
                                 accept="image/*" v-on:change="addAttach($event)"
+                                v-show="!viewonlymode"
                             >
                         </v-flex>
-                        <v-flex 
+                        <v-flex
                             v-for="(docs) in prview_attachment"
                             xs4 class="pa-2" :key="docs.attach_id"
                         >
                             <div style="position: relative; padding-bottom: 35px;">
                                 <v-img
-                                    :src="makeImageUrl(docs)" aspect-ratio="1" contain 
+                                    :src="makeImageUrl(docs)" aspect-ratio="1" contain
                                     class="grey lighten-2" @click="fullview(docs, -1)"
                                 ></v-img>
                             </div>
@@ -33,9 +34,9 @@
                                     :src="url" aspect-ratio="1" contain
                                     class="grey lighten-2" @click="fullview(url, index)"
                                 ></v-img>
-                                <v-icon 
+                                <v-icon
                                     style="position: absolute; top: 5px; right: 5px; z-index: 1; cursor: pointer;"
-                                    @click="removedocs(index)" color="red" 
+                                    @click="removedocs(index)" color="red"
                                 >close</v-icon>
                             </div>
                         </v-flex>
@@ -44,7 +45,7 @@
                 <v-card-actions>
                     <v-spacer></v-spacer>
                     <v-btn @click="cancel_file()" color="error" class="white--text">Batal</v-btn>
-                    <v-btn @click="save_file()" color="primary" class="white--text">Simpan</v-btn>
+                    <v-btn v-show="!viewonlymode" @click="save_file()" color="primary" class="white--text">Simpan</v-btn>
                 </v-card-actions>
             </v-card>
         </v-dialog>
@@ -90,25 +91,28 @@ module.exports = {
     computed: {
         dialog_attachment: {
             get() {
-                return this.$store.state.poasset.dialog_attachment
+                return this.$store.state.common.dialog_attachment
             },
             set(val) {
-                this.$store.commit("poasset/update_dialog_attachment", val)
+                this.$store.commit("common/update_dialog_attachment", val)
             }
         },
         selected_orderaset: {
             get() {
-                return this.$store.state.poasset.selected_orderaset
+                return this.$store.state.common.selected_orderaset
             },
             set(val) {
-                this.$store.commit("poasset/update_selected_orderaset", val)
+                this.$store.commit("common/update_selected_orderaset", val)
             }
         },
         prview_attachment() {
-            return this.$store.state.poasset.prview_attachment
+            return this.$store.state.common.assets_attachment
         },
         loading_process() {
-            return this.$store.state.poasset.loading_process
+            return this.$store.state.common.loading_process
+        },
+        viewonlymode() {
+            return this.$store.state.common.viewonlymode;
         }
     },
     methods: {
@@ -128,7 +132,7 @@ module.exports = {
         },
         makeImageUrl(docs) {
             const year = new Date(docs.created).getFullYear();
-            const baseURL = BASE_URL + `/one-media/order-aset/${year}`;
+            const baseURL = BASE_URL + `/one-media/order-asset/${year}/`;
             return baseURL + docs.img_url;
         },
         fullview(docs, index) {
@@ -150,6 +154,7 @@ module.exports = {
         cancel_file() {
             this.tempdocs_file = [];
             this.tempdocs_view = [];
+            this.$store.commit("common/update_viewonlymode", false);
             this.dialog_attachment = false;
         },
         save_file() {
@@ -163,15 +168,16 @@ module.exports = {
                     form_data.append(`files[${index}]`, file);
                 }
 
-                form_data.append('KontrakAsetID', orderaset.T_KontrakAsetID);
-                form_data.append('POrderID', orderaset.PurchaseOrderID);
-                form_data.append('POnumber', orderaset.PurchaseOrderNumber);
+                form_data.append('contractID', orderaset.contractID);
+                form_data.append('poID', orderaset.PurchaseOrderID);
+                form_data.append('ponumber', orderaset.PurchaseOrderNumber);
+                form_data.append('contractDate', orderaset.contractDate);
                 form_data.append('token', one_token());
 
-                this.$store.dispatch('poasset/');
+                this.$store.dispatch('common/uploadAttachment', form_data);
             } else {
                 const snac = { color: 'warning', msg: 'proses sedang berjalan', state: true };
-                this.$store.commit('poasset/update_snackbar', snac);
+                this.$store.commit('common/update_snackbar', snac);
             }
         }
     },
@@ -190,4 +196,4 @@ module.exports = {
         }
     },
 }
-</script>
+</script>

test/vuex/acc-one-po-asset/components/dialog-add-item-aset.vue

@@ -1,244 +0,0 @@
-<template>
-    <v-dialog v-model="dialog_add_itemaset" persistent width="60vw">
-        <v-card>
-            <v-card-title class="headline grey lighten-2" primary title>
-                TAMBAH REQUEST ASET
-            </v-card-title>
-            <v-card-text>
-                <v-layout row wrap>
-                    <v-flex xs12>
-                        <v-text-field
-                            v-model="keyword" hide-details outline 
-                            label="cari" placeholder="nomor request aset"
-                        ></v-text-field>
-                    </v-flex>
-                    <v-flex xs12 mt-2>
-                        <v-data-table
-                            :headers="headers" :items="list_requestaset.records" 
-                            v-model="temp_selectedrequest" item-key="PurchaseRequestDetailID" 
-                            class="elevation-1" hide-actions :loading="loading"
-                        >
-                            <template v-slot:headers="props">
-                                <tr>
-                                    <th class="blue lighten-3 white--text" style="width: 10%;">
-                                        <v-checkbox
-                                            :input-value="props.all" primary 
-                                            :indeterminate="props.indeterminate"
-                                            @click.native="toggleAll" hide-details
-                                        ></v-checkbox>
-                                    </th>
-                                    <th v-for="header in props.headers" :key="header.text"
-                                        :class="header.class" :style="{ width: header.width }"
-                                    >{{ header.text }}</th>
-                                </tr>
-                            </template>
-                            <template v-slot:items="props">
-                                <tr>
-                                    <td>
-                                        <v-checkbox 
-                                            v-model="props.selected" 
-                                            primary hide-details
-                                        ></v-checkbox>
-                                    </td>
-                                    <td class="text-xs-center pa-2">
-                                        {{ props.item.PurchaseRequestNumber }}
-                                    </td>
-                                    <td class="text-xs-center pa-2">
-                                        {{ props.item.M_ItemCode }}
-                                    </td>
-                                    <td class="text-xs-center pa-2">
-                                        {{ props.item.M_ItemDesc }}
-                                    </td>
-                                    <td class="text-xs-center pa-2">
-                                        {{ props.item.ItemUnitName }}
-                                    </td>
-                                    <td class="text-xs-center pa-2">
-                                        {{ props.item.RequestQty }}
-                                    </td>
-                                </tr>
-                            </template>
-                        </v-data-table>
-                    </v-flex>
-                </v-layout>
-            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn class="white--text" color="error" @click="batalrequest()">Batal</v-btn>
-                <v-btn class="white--text" color="primary" @click="simpanrequest()">Simpan</v-btn>
-            </v-card-actions>
-        </v-card>
-    </v-dialog>
-</template>
-
-<script>
-module.exports = {
-    data() {
-        return {
-            keyword: "",
-            loading: false,
-            temp_selectedrequest: [],
-            headers: [
-                {
-                    text: "NO PURCHASE REQ", align: "center", sortable: false,
-                    value: "noreq", width: "20%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "KODE ITEM", align: "center", sortable: false,
-                    value: "kode", width: "20%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "ITEM", align: "center", sortable: false,
-                    value: "serve", width: "20%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "SATUAN", align: "center", sortable: false,
-                    value: "unit", width: "20%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "REQ QTY", align: "center", sortable: false,
-                    value: "qty", width: "10%", class: "pa-1 blue lighten-3 white--text",
-                },
-            ]
-        }
-    },
-    computed: {
-        dialog_add_itemaset: {
-            get() {
-                return this.$store.state.poasset.dialog_add_itemaset
-            },
-            set(val) {
-                this.$store.commit('poasset/update_dialog_add_itemaset', val)
-            }
-        },
-        list_requestaset: {
-            get() {
-                return this.$store.state.poasset.list_requestaset
-            },
-            set(val) {
-                this.$store.commit('poasset/update_list_requestaset', val)
-            }
-        },
-        form_orderaset: {
-            get() {
-                return this.$store.state.poasset.form_orderaset
-            },
-            set(val) {
-                this.$store.commit('poasset/update_form_orderaset', val)
-            }
-        },
-        item_orderaset: {
-            get() {
-                return this.$store.state.poasset.item_orderaset
-            },
-            set(val) {
-                this.$store.commit('poasset/update_item_orderaset', val)
-            }
-        },
-        summary_orderaset: {
-            get() {
-                return this.$store.state.poasset.summary_orderaset
-            },
-            set(val) {
-                this.$store.commit('poasset/update_summary_orderaset', val)
-            }
-        }
-    },
-    methods: {
-        searchrequest(search) {
-            this.loading = true
-            setTimeout(() => {
-                this.$store.dispatch('poasset/lookupOrderRequest', search)
-                this.loading = false
-            }, 500);
-        },
-        toggleAll() {
-            if (this.temp_selectedrequest.length > 0) {
-                this.temp_selectedrequest = []
-            } else {
-                this.temp_selectedrequest = this.list_requestaset.records.slice()
-            }
-        },
-        parseCurrency(value) {
-            let cleanvalue = 0;
-            if (!isNaN(value)) {
-                cleanvalue = value;
-            } else {
-                cleanvalue = String(value).replace(/\./g, '');
-                cleanvalue = cleanvalue.replace(',', '.');
-            }
-            return parseFloat(cleanvalue) || 0;
-        },
-        batalrequest() {
-            this.temp_selectedrequest = []
-            this.dialog_add_itemaset = false
-        },
-        simpanrequest() {
-            let request = JSON.parse(JSON.stringify(this.temp_selectedrequest))
-            let form = JSON.parse(JSON.stringify(this.form_orderaset))
-
-            const prnumber = [...new Set(request.map(item => item.PurchaseRequestNumber))].join(', ')
-            form.reference = prnumber
-            
-            const newitem = Object.values(request.reduce((acc, current) => {
-                const itemcode = current.M_ItemCode
-                if (!acc[itemcode]) {
-                    acc[itemcode] = {
-                        M_ItemID: current.M_ItemID,
-                        M_ItemCode: itemcode,
-                        M_ItemDesc: current.M_ItemDesc,
-                        ItemUnitID: current.ItemUnitID,
-                        ItemUnitName: current.ItemUnitName,
-                        SupplierPrice: Number(current.SupplierPrice),
-                        M_BranchName: current.M_BranchName,
-                        RequestQty: 0.00,
-                        DiskonAmount: 0.00,
-                        DiskonType: 'R',
-                        EndPrice: 0.00,
-                        TempTotal: 0.00,
-                        detail: []
-                    }
-                }
-
-                acc[itemcode].RequestQty += Number(current.RequestQty)
-                acc[itemcode].detail.push(current)
-                acc[itemcode].EndPrice = acc[itemcode].SupplierPrice - acc[itemcode].DiskonAmount
-                acc[itemcode].TempTotal = acc[itemcode].RequestQty * acc[itemcode].EndPrice
-                return acc
-            }, {}))
-
-            let subtotal = newitem.reduce((sum, item) => sum + Number(item.TempTotal), 0)
-            let disc = this.parseCurrency(form.valuediskon)
-            if (form.typediskon == 'percent') {
-                disc = subtotal * Number(form.valuediskon) / 100
-            }
-
-            let tax = this.parseCurrency(form.valuepajak)
-            if (form.typepajak == 'percent') {
-                tax = (subtotal - disc) * Number(form.valuepajak) / 100
-            }
-
-            let total = (subtotal - disc) + tax
-            let summary = {
-                subtotal: subtotal,
-                diskon: disc,
-                pajak: tax,
-                total: total
-            }
-
-            this.item_orderaset = newitem
-            this.form_orderaset = form
-            this.summary_orderaset = summary
-            this.temp_selectedrequest = []
-            this.dialog_add_itemaset = false
-        }
-    },
-    watch: {
-        keyword(newval, oldval) {
-            if (!newval) return
-            if (newval === oldval) return
-            if (newval.length < 1) return
-            this.searchrequest(newval)
-        },
-    }
-}
-</script>

test/vuex/acc-one-po-asset/components/dialog-create-contract.vue

@@ -1,259 +0,0 @@
-<template>
-<v-dialog v-model="dialog_create_contract" persistent width="80vw">
-    <v-card style="max-height: 80vh; display: flex; flex-direction: column;">
-        <v-card-title class="headline grey lighten-2">BUAT KONTRAK BARU</v-card-title>
-        <v-card-text style="flex: 1 1 auto; overflow: visible;">
-            <!-- field forms -->
-            <v-layout row wrap>
-                <v-flex xs4 pa-1>
-                    <v-text-field
-                        v-model="form_kontrak.nama_kontrak" hide-details outline
-                        label="Nama Kontrak" placeholder="masukan nama kontrak"
-                    ></v-text-field>
-                </v-flex>
-                <v-flex xs4 pa-1>
-                    <v-menu
-                        v-model="menuKontrakDate" offset-y lazy min-width="290px"
-                        transition="scale-transition" max-width="290px" full-width
-                        :nudge-right="40" :close-on-content-click="false"
-                    >
-                        <template v-slot:activator="{ on }">
-                            <v-text-field
-                                v-model="formattedDateKontrak" label="Tanggal Kontrak"
-                                hide-details readonly outline v-on="on"
-                            ></v-text-field>
-                        </template>
-                        <v-date-picker v-model="form_kontrak.tanggal_kontrak"
-                            no-title @input="menuKontrakDate = false"
-                        ></v-date-picker>
-                    </v-menu>
-                </v-flex>
-                <v-flex xs4 pa-1>
-                    <v-autocomplete
-                        v-model="form_kontrak.supplierID_kontrak" hide-details
-                        :items="supplier_list" label="Supplier" outline
-                        item-text="SupplierName" item-value="SupplierID"
-                    ></v-autocomplete>
-                </v-flex>
-            </v-layout>
-
-            <v-layout row wrap>
-                <v-flex xs3 pa-1>
-                    <v-menu
-                        v-model="menuKontrakStartdate" offset-y lazy min-width="290px"
-                        transition="scale-transition" max-width="290px" full-width
-                        :nudge-right="40" :close-on-content-click="false"
-                    >
-                        <template v-slot:activator="{ on }">
-                            <v-text-field
-                                v-model="formattedStartdateKontrak" outline v-on="on"
-                                label="Tanggal Awal Kontrak" hide-details readonly
-                            ></v-text-field>
-                        </template>
-                        <v-date-picker v-model="form_kontrak.tanggalAwal_kontrak"
-                            no-title @input="menuKontrakStartdate = false"
-                        ></v-date-picker>
-                    </v-menu>
-                </v-flex>
-                <v-flex xs3 pa-1>
-                    <v-menu
-                        v-model="menuKontrakEnddate" offset-y lazy min-width="290px"
-                        transition="scale-transition" max-width="290px" full-width
-                        :nudge-right="40" :close-on-content-click="false"
-                    >
-                        <template v-slot:activator="{ on }">
-                            <v-text-field
-                                v-model="formattedEnddateKontrak" outline v-on="on"
-                                label="Tanggal Akhir Kontrak" hide-details readonly
-                            ></v-text-field>
-                        </template>
-                        <v-date-picker v-model="form_kontrak.tanggalAkhir_kontrak"
-                            no-title @input="menuKontrakEnddate = false"
-                        ></v-date-picker>
-                    </v-menu>
-                </v-flex>
-                <v-flex xs2 pa-1>
-                    <v-text-field
-                        v-model="form_kontrak.durasi_cicilan" hide-details outline
-                        label="Durasi Kontrak (Bulan)" placeholder="1" readonly
-                    ></v-text-field>
-                </v-flex>
-                <v-flex xs2 pa-1>
-                    <v-text-field
-                        v-model="form_kontrak.jumlah_cicilan" hide-details
-                        label="Jumlah Cicilan" placeholder="1" outline
-                    ></v-text-field>
-                </v-flex>
-                <v-flex xs2 pa-1>
-                    <v-text-field
-                        v-model="form_kontrak.tanggalBayar_cicilan" hide-details
-                        label="Tanggal Bayar Cicilan" placeholder="1" outline
-                    ></v-text-field>
-                </v-flex>
-            </v-layout>
-
-            <v-layout row wrap>
-                <v-flex xs4 pa-1>
-                    <v-text-field
-                        v-model="form_kontrak.besarNilai_cicilan" hide-details
-                        label="Besar Bayar Cicilan" placeholder="0" prefix="Rp." outline
-                    ></v-text-field>
-                </v-flex>
-                <v-flex xs1 pa-1>
-                    <v-autocomplete
-                        :items="['nominal', 'persen']" label="Tipe Nilai"
-                        v-model="form_kontrak.type_downpayment" hide-details
-                        @input="changeTypeAmount('DP')" outline
-                    ></v-autocomplete>
-                </v-flex>
-                <v-flex xs3 pa-1>
-                    <v-text-field
-                        v-model="form_kontrak.besarNilai_downpayment" hide-details
-                        label="Jumlah Uang Muka" placeholder="0" suffix="%" outline
-                    ></v-text-field>
-                </v-flex>
-                <v-flex xs1 pa-1>
-                    <v-autocomplete
-                        :items="['nominal', 'persen']" label="Tipe Nilai"
-                        v-model="form_kontrak.type_pajak" hide-details
-                        @input="changeTypeAmount('tax')" outline
-                    ></v-autocomplete>
-                </v-flex>
-                <v-flex xs3 pa-1>
-                    <v-text-field
-                        v-model="form_kontrak.besarNilai_pajak" hide-details
-                        label="Jumlah Pajak" placeholder="0" suffix="%" outline
-                    ></v-text-field>
-                </v-flex>
-            </v-layout>
-
-            <!-- table item -->
-            <v-layout row wrap class="mt-2">
-                <v-flex xs3 pa-1>
-                    <v-btn block color="info">TAMBAH ITEM</v-btn>
-                </v-flex>
-                <v-flex xs12 pa-1>
-                    <div style="max-height: 35vh; overflow-y: auto;">
-                        <v-data-table
-                            :headers="headers" :items="[]"
-                            item-key="M_ItemID" class="elevation-1" hide-actions
-                        >
-                            <template v-slot:items="props">
-                                <tr>
-                                    <td class="text-xs-center pa-1"></td>
-                                    <td class="text-xs-center pa-1"></td>
-                                    <td class="text-xs-center pa-1"></td>
-                                    <td class="text-xs-center pa-1"></td>
-                                    <td class="text-xs-center pa-1"></td>
-                                    <td class="text-xs-center pa-1"></td>
-                                </tr>
-                            </template>
-                        </v-data-table>
-                    </div>
-                </v-flex>
-            </v-layout>
-        </v-card-text>
-        <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn @click="" color="error" class="white--text">Batal</v-btn>
-            <v-btn @click="" color="primary" class="white--text">Simpan</v-btn>
-        </v-card-actions>
-    </v-card>
-</v-dialog>
-</template>
-
-<script>
-module.exports = {
-    data() {
-        return {
-            menuKontrakDate: false,
-            menuKontrakStartdate: false,
-            menuKontrakEnddate: false,
-            headers: [
-                {
-                    text: "NO", align: "center", sortable: false, value: "no",
-                    width: "5%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "ITEM", align: "center", sortable: false, value: "item",
-                    width: "25%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "JUMLAH", align: "center", sortable: false, value: "qty",
-                    width: "15%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "HARGA", align: "center", sortable: false, value: "price",
-                    width: "25%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "TOTAL", align: "center", sortable: false, value: "total",
-                    width: "20%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "AKSI", align: "center", sortable: false, value: "act",
-                    width: "10%", class: "pa-1 blue lighten-3 white--text",
-                }
-            ]
-        };
-    },
-    computed: {
-        dialog_create_contract: {
-            get() {
-                return this.$store.state.kontrakAsset.dialog_create_contract
-            },
-            set(val) {
-                this.$store.commit("kontrakAsset/update_dialog_create_contract", val);
-            }
-        },
-        supplier_list() {
-            return [];
-        },
-        form_kontrak: {
-            get() {
-                return this.$store.state.kontrakAsset.form_kontrak
-            },
-            set(val) {
-                this.$store.commit("kontrakAsset/update_form_kontrak", val);
-            }
-        },
-        formattedDateKontrak() {
-            return this.formatDate(this.form_kontrak.tanggal_kontrak);
-        },
-        formattedStartdateKontrak() {
-            return this.formatDate(this.form_kontrak.tanggalAwal_kontrak);
-        },
-        formattedEnddateKontrak() {
-            return this.formatDate(this.form_kontrak.tanggalAkhir_kontrak);
-        }
-    },
-    methods: {
-        formatDate(date) {
-            if (!date) return null;
-            const [year, month, day] = date.split('-');
-            return `${day}-${month}-${year}`;
-        },
-        countMonths(startdate, enddate) {
-            const start = new Date(stardate);
-            const end = new Date(enddate);
-
-            let months = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
-            if (end.getDate() > start.getDate()) {
-                months += 1;
-            }
-
-            return Math.max(months, 1);
-        },
-        changeTypeAmount(name) {
-            let form = this.form_kontrak;
-            if (name == 'DP') {
-                form_kontrak.jumlah_downpayment = 0;
-            }
-
-            if (name == 'tax') {
-                form_kontrak.jumlah_pajak = 0;
-            }
-        }
-    }
-}
-</script>

test/vuex/acc-one-po-asset/components/dialog-create-order.vue

@@ -1,9 +1,16 @@
 <template>
     <v-dialog v-model="dialog_create_order" persistent width="80vw">
-        <v-card style="max-height: 80vh; display: flex; flex-direction: column;">
-            <v-card-title class="headline grey lighten-2">BUAT ORDER ASET</v-card-title>
+        <v-card class="style-card">
+            <v-card-title class="headline grey lighten-2">
+                {{ viewonlymode
+                        ? "VIEW ORDER ASSET"
+                        : selected_orderaset.PurchaseOrderID
+                            ? "EDIT ORDER ASET"
+                            : "BUAT ORDER ASET"
+                }}
+            </v-card-title>
             <template>
-                <div>
+                <div class="style-content">
                     <v-stepper non-linear v-model="steps">
                         <v-stepper-header>
                             <v-stepper-step editable step="1" @click="steps = 1">
@@ -29,21 +36,48 @@
                             </v-stepper-content>
 
                             <v-stepper-content step="3">
-
+                                <form-item-request-asset></form-item-request-asset>
+                                <dialog-select-request-asset></dialog-select-request-asset>
                             </v-stepper-content>
                         </v-stepper-items>
                     </v-stepper>
+                    <v-card-text>
+                        <v-layout v-for="(item, index) in summary_items" :key="index"
+                            row wrap align-center>
+                                <v-flex xs2 pa-1>
+                                    <strong>{{ item.label }}</strong>
+                                </v-flex>
+                                <v-flex grow></v-flex>
+                                <v-flex xs2 pa-1 class="text-xs-right">
+                                    <strong>Rp. {{ formatCurrency(item.value) }}</strong>
+                                </v-flex>
+                        </v-layout>
+                    </v-card-text>
                 </div>
             </template>
             <v-card-actions>
                 <v-spacer></v-spacer>
-                <v-btn @click="dialog_create_order = false" color="error" class="white--text">Batal</v-btn>
-                <v-btn @click="" color="primary" class="white--text">Simpan</v-btn>
+                <v-btn @click="batalOrderAsset()" color="error" class="white--text">Batal</v-btn>
+                <v-btn :disabled="viewonlymode" @click="simpanOrderAsset()" color="primary" class="white--text">Simpan</v-btn>
             </v-card-actions>
         </v-card>
     </v-dialog>
 </template>
 
+<style scoped>
+.style-card {
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.style-content {
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+</style>
+
 <script>
 module.exports = {
     data() {
@@ -53,9 +87,14 @@ module.exports = {
     },
     components: {
         'form-order-asset': httpVueLoader('./form-order-asset.vue'),
-        'form-kontrak-asset': httpVueLoader('./form-kontrak-asset.vue')
+        'form-kontrak-asset': httpVueLoader('./form-kontrak-asset.vue'),
+        'form-item-request-asset': httpVueLoader('./form-item-request-asset.vue'),
+        'dialog-select-request-asset': httpVueLoader('./dialog-select-request-asset.vue')
     },
     computed: {
+        loading_process() {
+            return this.$store.state.common.loading_process;
+        },
         dialog_create_order: {
             get() {
                 return this.$store.state.orderAsset.dialog_create_order
@@ -63,8 +102,158 @@ module.exports = {
             set(val) {
                 this.$store.commit("orderAsset/update_dialog_create_order", val)
             }
+        },
+        form_kontrak: {
+            get() {
+                return this.$store.state.kontrakAsset.form_kontrak
+            },
+            set(val) {
+                this.$store.commit("kontrakAsset/update_form_kontrak", val);
+            }
+        },
+        form_order_asset: {
+            get() {
+                return this.$store.state.orderAsset.form_order_asset;
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_form_order_asset", val);
+            }
+        },
+        selected_request_asset: {
+            get() {
+                return this.$store.state.orderAsset.selected_request_asset
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_selected_request_asset", val)
+            }
+        },
+        summary_order: {
+            get() {
+                return this.$store.state.orderAsset.summary_order;
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_summary_order", val);
+            }
+        },
+        summary_items() {
+            if (!this.summary_order) return [];
+            return [
+                {label: 'JUMLAH', value: this.summary_order.subtotal},
+                {label: 'DISKON', value: this.summary_order.diskon},
+                {label: 'PAJAK', value: this.summary_order.pajak},
+                {label: 'DOWN PAYMENT', value: this.summary_order.downpayment},
+                {label: 'TOTAL', value: this.summary_order.total}
+            ]
+        },
+        viewonlymode() {
+            return this.$store.state.common.viewonlymode;
+        },
+        selected_orderaset() {
+            return this.$store.state.common.selected_orderaset;
         }
     },
-    methods: {}
+    methods: {
+        formatCurrency(value) {
+            const num = parseFloat(value);
+            if (isNaN(num)) return 0;
+            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        },
+        parseCurrency(value) {
+            let cleanValue = String(value).replace(/\./g, '');
+            cleanValue = cleanValue.replace(',', '.');
+            return parseFloat(cleanValue) || 0;
+        },
+        simpanOrderAsset() {
+            if (!this.loading_process) {
+                let formOrder = JSON.parse(JSON.stringify(this.form_order_asset));
+                let formKontrak = JSON.parse(JSON.stringify(this.form_kontrak));
+                let requestItem = JSON.parse(JSON.stringify(this.selected_request_asset));
+                let summaryOrder = JSON.parse(JSON.stringify(this.summary_order));
+
+                if (requestItem.length < 1) {
+                    const snac = { color: 'warning', msg: 'Item masih kosong', state: true };
+                    this.$store.commit("common/update_snackbar", snac);
+                    return;
+                }
+
+                /* make sure the value is not in IDR format */
+                formOrder.valuepajak = this.parseCurrency(formOrder.valuepajak);
+                formOrder.valuediskon = this.parseCurrency(formOrder.valuediskon);
+                formKontrak.besarNilai_cicilan = this.parseCurrency(formKontrak.besarNilai_cicilan);
+                formKontrak.besarNilai_downpayment = this.parseCurrency(formKontrak.besarNilai_downpayment);
+
+                requestItem.forEach(item => {
+                    item.SupplierPrice = this.parseCurrency(item.SupplierPrice);
+                    item.DiskonAmount = this.parseCurrency(item.DiskonAmount);
+                });
+
+                let param = {
+                    ...formOrder,
+                    assetAttachmentID: 0,
+                    contractName: formKontrak.nama_kontrak,
+                    contractDate: formKontrak.tanggal_kontrak,
+                    contractStart: formKontrak.tanggalAwal_kontrak,
+                    contractEnd: formKontrak.tanggalAkhir_kontrak,
+                    contractDuration: formKontrak.durasi_cicilan,
+                    installmentNumber: formKontrak.jumlah_cicilan,
+                    installmentDate: formKontrak.tanggalBayar_cicilan,
+                    installmentPayAmount: formKontrak.besarNilai_cicilan,
+                    installmentDownPaymentType: formKontrak.type_downpayment,
+                    installmentDownPayment: formKontrak.besarNilai_downpayment,
+                    detail: requestItem,
+                    summary: summaryOrder
+                }
+
+                if (!this.selected_orderaset.PurchaseOrderID) {
+                    this.$store.dispatch("kontrakAsset/saveOrderAsset", param);
+                } else {
+                    param.PurchaseOrderID = this.selected_orderaset.PurchaseOrderID;
+                    param.assetAttachmentID = this.selected_orderaset.assetAttachmentID,
+                    param.SupplierDownpaymentID = this.selected_orderaset.SupplierDownpaymentID;
+                    this.$store.dispatch("kontrakAsset/editOrderAsset", param);
+                }
+            } else {
+                const snac = { color: 'warning', msg: 'Proses masih berjalan', state: true };
+                this.$store.commit("common/update_snackbar", snac);
+            }
+        },
+        batalOrderAsset() {
+            this.form_order_asset = {
+                podate: moment(new Date()).format('YYYY-MM-DD'),
+                supplierID: "",
+                reference: "",
+                branchID: "",
+                typepajak: "percent",
+                valuepajak: 0,
+                typediskon: "percent",
+                valuediskon: 0
+            };
+            this.form_kontrak = {
+                nama_kontrak: '',
+                tanggal_kontrak: moment(new Date()).format('YYYY-MM-DD'),
+                tanggalAwal_kontrak: moment(new Date()).format('YYYY-MM-DD'),
+                tanggalAkhir_kontrak: moment(new Date()).format('YYYY-MM-DD'),
+                durasi_cicilan: 1,
+                jumlah_cicilan: 1,
+                tanggalBayar_cicilan: 1,
+                besarNilai_cicilan: 0,
+                type_downpayment: 'percent',
+                besarNilai_downpayment: 0
+            };
+            this.selected_request_asset = [];
+            this.summary_order = {
+                subtotal: 0,
+                diskon: 0,
+                pajak: 0,
+                downpayment: 0,
+                total_before_downpayment: 0,
+                total: 0
+            };
+
+            this.$store.commit("common/update_viewonlymode", false);
+            this.$store.commit('common/update_selected_orderaset', {});
+            this.dialog_create_order = false;
+        }
+    }
 }
 </script>

test/vuex/acc-one-po-asset/components/dialog-delete-order.vue

@@ -33,20 +33,23 @@
 module.exports = {
     data() {
         return {
-            
+
         }
     },
     computed: {
         dialog_deleteorder: {
             get() {
-                return this.$store.state.poasset.dialog_deleteorder
+                return this.$store.state.common.dialog_deleteorder
             },
             set(val) {
-                this.$store.commit('update_dialog_deleteorder', val)
+                this.$store.commit('common/update_dialog_deleteorder', val)
             }
         },
         selected_orderaset() {
-            return this.$store.state.poasset.selected_orderaset
+            return this.$store.state.common.selected_orderaset
+        },
+        loading_process() {
+            return this.$store.state.common.loading_process
         }
     },
     methods: {
@@ -54,8 +57,13 @@ module.exports = {
             this.dialog_deleteorder = false
         },
         hapusorder() {
-
+            if (!this.loading_process) {
+                this.$store.dispatch("common/deleteOrderAsset")
+            } else {
+                const snac = { color: 'warning', msg: 'proses sedang berjalan', state: true };
+                this.$store.commit('common/update_snackbar', snac);
+            }
         }
     },
 }
-</script>
+</script>

test/vuex/acc-one-po-asset/components/dialog-form-order-aset.vue

@@ -1,601 +0,0 @@
-<template>
-<v-dialog v-model="dialog_form_orderaset" persistent width="70vw">
-    <v-card>
-        <v-card-title class="headline grey lighten-2">FORM PO ASET</v-card-title>
-        <v-card-text>
-            <!-- first row -->
-            <v-layout row wrap>
-                <v-flex xs4>
-                    <v-menu
-                        v-model="menuPOdate" offset-y lazy min-width="290px" 
-                        transition="scale-transition" max-width="290px" full-width
-                        :nudge-right="40" :close-on-content-click="false"
-                    >
-                        <template v-slot:activator="{on}">
-                            <v-text-field
-                                v-model="formatPOdate" label="Tanggal PO" 
-                                hide-details readonly v-on="on" outline
-                            ></v-text-field>
-                        </template>
-                        <v-date-picker
-                            v-model="form_orderaset.podate" no-title 
-                            @input="menuPOdate = false"
-                        ></v-date-picker>
-                    </v-menu>
-                </v-flex>
-                <v-flex xs4 pl-2>
-                    <v-autocomplete
-                        :items="list_supplier" hide-details outline 
-                        v-model="form_orderaset.supplierID" label="Vendor" 
-                        item-text="SupplierName" item-value="SupplierID" 
-                        @input="changeSupplierCabang()"
-                    ></v-autocomplete>
-                </v-flex>
-                <v-flex xs4 pl-2>
-                    <v-text-field
-                        v-model="form_orderaset.reference" hide-details outline 
-                        label="Referensi" placeholder="nomor request" readonly 
-                    ></v-text-field>
-                </v-flex>
-            </v-layout>
-
-            <!-- 2nd row -->
-            <v-layout row wrap class="mt-2">
-                <v-flex xs4>
-                    <v-autocomplete
-                        :items="list_branch" hide-details outline 
-                        v-model="form_orderaset.branchcode" label="Cabang" 
-                        item-text="M_BranchName" item-value="M_BranchCode" 
-                        @input="changeSupplierCabang()"
-                    ></v-autocomplete>
-                </v-flex>
-                <v-flex xs2 pl-2>
-                    <v-autocomplete
-                        :items="['absolute', 'percent']" label="Pajak (PPN)" 
-                        v-model="form_orderaset.typepajak" hide-details 
-                        @input="changeTypeTaxDiskon('tax')" outline 
-                    ></v-autocomplete>
-                </v-flex>
-                <v-flex xs2 pl-2>
-                    <v-text-field
-                        v-if="form_orderaset.typepajak == 'percent'" label="Pajak" 
-                        v-model="form_orderaset.valuepajak" hide-details outline 
-                        placeholder="besar pajak dalam persen" suffix="%" 
-                        @input="debounceCalcForm(form_orderaset)"
-                    ></v-text-field>
-                    <v-text-field
-                        v-else label="Pajak" outline prefix="Rp."
-                        v-model="form_orderaset.valuepajak" hide-details 
-                        placeholder="besar pajak dalam rupiah" 
-                        @input="debounceCalcForm(form_orderaset)"
-                        @focus="handleFocus(form_orderaset, 'formtax')"
-                        @blur="handleBlur(form_orderaset, 'formtax')"
-                    ></v-text-field>
-                </v-flex>
-                <v-flex xs2 pl-2>
-                    <v-autocomplete
-                        :items="['absolute', 'percent']" hide-details 
-                        v-model="form_orderaset.typediskon" label="Diskon" 
-                        @input="changeTypeTaxDiskon('diskon')" outline 
-                    ></v-autocomplete>
-                </v-flex>
-                <v-flex xs2 pl-2>
-                    <v-text-field
-                        v-if="form_orderaset.typediskon == 'percent'" label="Diskon" 
-                        v-model="form_orderaset.valuediskon" hide-details outline 
-                        placeholder="besar diskon dalam persen" suffix="%"
-                        @input="debounceCalcForm(form_orderaset)"
-                    ></v-text-field>
-                    <v-text-field
-                        v-else label="Diskon" outline prefix="Rp."
-                        v-model="form_orderaset.valuediskon" hide-details 
-                        placeholder="besar diskon dalam rupiah" 
-                        @input="debounceCalcForm(form_orderaset)" 
-                        @focus="handleFocus(form_orderaset, 'formdiskon')"
-                        @blur="handleBlur(form_orderaset, 'formdiskon')"
-                    ></v-text-field>
-                </v-flex>
-            </v-layout>
-
-            <v-layout row wrap class="mt-2">
-                <v-flex xs3>
-                    <v-btn
-                        block color="info" @click="addItemRequest()"
-                        :disabled="form_orderaset.branchcode == '' || form_orderaset.supplierID == ''"
-                    >TAMBAH ITEM</v-btn>
-                </v-flex>
-            </v-layout>
-
-            <!-- table item -->
-            <v-layout row wrap class="mt-2">
-                <v-flex xs12 v-if="item_orderaset.length > 0">
-                    <v-data-table
-                        :headers="headers" :items="item_orderaset" :expand="expand"
-                        item-key="M_ItemCode" class="elevation-1" hide-actions
-                    >
-                        <template v-slot:items="props">
-                            <tr>
-                                <td class="text-xs-center pa-2" 
-                                    @click="props.expanded = !props.expanded"
-                                >
-                                    <v-icon>{{ props.expanded
-                                        ? "keyboard_arrow_down"
-                                        : "keyboard_arrow_right"
-                                    }}</v-icon>
-                                </td>
-                                <td class="text-xs-center pa-2">
-                                    {{ props.item.M_ItemDesc }}
-                                </td>
-                                <td class="text-xs-center pa-2">
-                                    {{ props.item.RequestQty }}
-                                </td>
-                                <td class="text-xs-center pa-2">
-                                    Rp. {{ formatCurrency(props.item.SupplierPrice) }}
-                                </td>
-                                <td class="text-xs-center pa-2">
-                                    <v-layout row>
-                                        <v-menu open-on-hover top offset-y attach>
-                                            <v-btn slot="activator" color="primary" dark small>
-                                                <span v-if="props.item.DiskonType == 'R'">Rp</span>
-                                                <span v-else>%</span>
-                                            </v-btn>
-
-                                            <v-list>
-                                                <v-list-tile
-                                                    v-for="(name, index) in typedisc" :key="index"
-                                                    @click="changeDiscountPerItem(name, props.item)"
-                                                >
-                                                    <v-list-tile-title>{{ name }}</v-list-tile-title>
-                                                </v-list-tile>
-                                            </v-list>
-                                        </v-menu>
-                                        <v-text-field
-                                            v-if="props.item.DiskonType == 'R'" prefix="Rp." 
-                                            v-model="props.item.DiskonAmount" hide-details 
-                                            @input="debounceCalcItem(props.item)" solo 
-                                            @focus="handleFocus(props.item, 'itemdiskon')"
-                                            @blur="handleBlur(props.item, 'itemdiskon')"
-                                        ></v-text-field>
-                                        <v-text-field
-                                            v-if="props.item.DiskonType == 'P'" suffix="%" min="0"
-                                            v-model="props.item.DiskonAmount" hide-details solo
-                                            @input="debounceCalcItem(props.item)" type="number"
-                                        ></v-text-field>
-                                    </v-layout>
-                                </td>
-                                <td class="text-xs-center pa-2">
-                                    Rp. {{ formatCurrency(props.item.EndPrice) }}
-                                </td>
-                                <td class="text-xs-center pa-2">
-                                    Rp. {{ formatCurrency(props.item.TempTotal) }}
-                                </td>
-                                <td class="text-xs-center pa-2">
-                                    <v-btn
-                                        color="red" dark @click="{}" 
-                                        style="min-width: 40px; margin: 0;" small
-                                    >
-                                        <v-icon small>delete</v-icon>
-                                    </v-btn>
-                                </td>
-                            </tr>
-                        </template>
-                        
-                        <!-- expanded -->
-                        <template v-slot:expand="props">
-                            <v-card flat>
-                                <v-card-text>
-                                    <v-data-table
-                                        :headers="headers_detail" class="elevation-0" 
-                                        :items="props.item.detail" hide-actions
-                                    >
-                                        <template v-slot:items="detail">
-                                        <tr>
-                                            <td class="text-xs-center pa-2">
-                                                {{ detail.item.M_ItemDesc }}
-                                            </td>
-                                            <td class="text-xs-center pa-2">
-                                                {{ detail.item.PurchaseRequestNumber }}
-                                            </td>
-                                            <td class="text-xs-center pa-2">
-                                                {{ detail.item.M_BranchName }}
-                                            </td>
-                                            <td class="text-xs-center pa-2">
-                                                {{ detail.item.RequestQty }}
-                                            </td>
-                                            <td class="text-xs-center pa-2">
-                                                {{ detail.item.ItemUnitName }}
-                                            </td>
-                                            <td class="text-xs-center pa-2">
-                                                Rp. {{ formatCurrency(detail.item.SupplierPrice) }}
-                                            </td>
-                                            <td class="text-xs-center pa-2">
-                                                <v-btn
-                                                    color="red" flat @click="{}"
-                                                    style="min-width: 40px; margin: 0;" small
-                                                >
-                                                    <v-icon>delete</v-icon>
-                                                </v-btn>
-                                            </td>
-                                        </tr>
-                                        </template>
-                                    </v-data-table>
-                                </v-card-text>
-                            </v-card>
-                        </template>
-
-                        <!-- footer -->
-                        <template v-slot:footer>
-                            <tr>
-                                <td colspan="1" class="text-xs-left pa-2"></td>
-                                <td colspan="4" class="text-xs-left pa-2">
-                                    <strong>JUMLAH</strong>
-                                </td>
-                                <td colspan="2" class="text-xs-right pa-2">
-                                    <strong>
-                                        Rp. {{ formatCurrency(summary_orderaset.subtotal) }}
-                                    </strong>
-                                </td>
-                                <td colspan="1" class="text-xs-right pa-2"></td>
-                            </tr>
-                            <tr>
-                                <td colspan="1" class="text-xs-left pa-2"></td>
-                                <td colspan="4" class="text-xs-left pa-2">
-                                    <strong>DISKON</strong>
-                                </td>
-                                <td colspan="2" class="text-xs-right pa-2">
-                                    <strong>
-                                        Rp. {{ formatCurrency(summary_orderaset.diskon) }}
-                                    </strong>
-                                </td>
-                                <td colspan="1" class="text-xs-right pa-2"></td>
-                            </tr>
-                            <tr>
-                                <td colspan="1" class="text-xs-left pa-2"></td>
-                                <td colspan="4" class="text-xs-left pa-2">
-                                    <strong>PAJAK</strong>
-                                </td>
-                                <td colspan="2" class="text-xs-right pa-2">
-                                    <strong>
-                                       Rp. {{ formatCurrency(summary_orderaset.pajak) }}
-                                    </strong>
-                                </td>
-                                <td colspan="1" class="text-xs-right pa-2"></td>
-                            </tr>
-                            <tr>
-                                <td colspan="1" class="text-xs-left pa-2"></td>
-                                <td colspan="4" class="text-xs-left pa-2">
-                                    <strong>TOTAL</strong>
-                                </td>
-                                <td colspan="2" class="text-xs-right pa-2">
-                                    <strong>
-                                        Rp. {{ formatCurrency(summary_orderaset.total) }}
-                                    </strong>
-                                </td>
-                                <td colspan="1" class="text-xs-right pa-2"></td>
-                            </tr>
-                        </template>
-                    </v-data-table>
-                </v-flex>
-            </v-layout>
-        </v-card-text>
-
-        <v-card-actions>
-            <v-spacer></v-spacer>
-            <v-btn @click="batalOrder()" color="error" class="white--text">Batal</v-btn>
-            <v-btn @click="simpanOrder()" color="primary" class="white--text">Simpan</v-btn>
-        </v-card-actions>
-    </v-card>
-</v-dialog>
-</template>
-
-<script>
-module.exports = {
-    data() {
-        return {
-            menuPOdate: false,
-            expand: false,
-            headers: [
-                {
-                    text: "", align: "center", sortable: false,
-                    value: "item", width: "5%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "ITEM", align: "center", sortable: false,
-                    value: "item", width: "15%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "JUMLAH", align: "center", sortable: false,
-                    value: "qty", width: "10%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "HARGA", align: "center", sortable: false,
-                    value: "price", width: "15%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "DISKON", align: "center", sortable: false,
-                    value: "disc", width: "20%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "HARGA SETELAH DISKON", align: "center", sortable: false,
-                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "TOTAL", align: "center", sortable: false,
-                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
-                },
-                {
-                    text: "AKSI", align: "center", sortable: false,
-                    value: "disc", width: "5%", class: "pa-1 blue lighten-3 white--text",
-                }
-            ],
-            headers_detail: [
-                {
-                    text: "NAMA PRODUK", align: "center", sortable: false,
-                    value: "prod", width: "20%", class: "pa-1 blue lighten-4 black--text",
-                },
-                {
-                    text: "NO REQUEST", align: "center", sortable: false,
-                    value: "noreq", width: "20%", class: "pa-1 blue lighten-4 black--text",
-                },
-                {
-                    text: "REQUESTER", align: "center", sortable: false,
-                    value: "req", width: "20%", class: "pa-1 blue lighten-4 black--text",
-                },
-                {
-                    text: "JUMLAH", align: "center", sortable: false,
-                    value: "qty", width: "10%", class: "pa-1 blue lighten-4 black--text",
-                },
-                {
-                    text: "UNIT", align: "center", sortable: false,
-                    value: "unit", width: "10%", class: "pa-1 blue lighten-4 black--text",
-                },
-                {
-                    text: "HARGA", align: "center", sortable: false,
-                    value: "price", width: "15%", class: "pa-1 blue lighten-4 black--text",
-                },
-                {
-                    text: "AKSI", align: "center", sortable: false,
-                    value: "act", width: "5%", class: "pa-1 blue lighten-4 black--text",
-                }
-            ],
-            typedisc: ["absolute", "percent"]
-        }
-    },
-    computed: {
-        dialog_form_orderaset: {
-            get() {
-                return this.$store.state.poasset.dialog_form_orderaset;
-            },
-            set(val) {
-                this.$store.commit('poasset/update_dialog_form_orderaset', val);
-            }
-        },
-        form_orderaset: {
-            get() {
-                return this.$store.state.poasset.form_orderaset;
-            },
-            set(val) {
-                this.$store.commit('poasset/update_form_orderaset', val);
-            }
-        },
-        item_orderaset: {
-            get() {
-                return this.$store.state.poasset.item_orderaset;
-            },
-            set(val) {
-                this.$store.commit('poasset/update_item_orderaset', val);
-            }
-        },
-        summary_orderaset: {
-            get() {
-                return this.$store.state.poasset.summary_orderaset
-            },
-            set(val) {
-                this.$store.commit('poasset/update_summary_orderaset', val)
-            }
-        },
-        formatPOdate() {
-            return this.formatDate(this.form_orderaset.podate);
-        },
-        list_supplier() {
-            return this.$store.state.poasset.list_supplier;
-        },
-        list_branch() {
-            return this.$store.state.poasset.list_branch;
-        }
-    },
-    methods: {
-        formatDate(date) {
-            if (!date) return null;
-            const [year, month, day] = date.split('-');
-            return `${day}-${month}-${year}`;
-        },
-        formatCurrency(value) {
-            const num = parseFloat(value);
-            if (isNaN(num)) return 0;
-            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
-        },
-        parseCurrency(value) {
-            let cleanvalue = 0;
-            if (!isNaN(value)) {
-                cleanvalue = value;
-            } else {
-                cleanvalue = String(value).replace(/\./g, '');
-                cleanvalue = cleanvalue.replace(',', '.');
-            }
-            return parseFloat(cleanvalue) || 0;
-        },
-        handleFocus(item, type) {
-            if (type == 'itemprice') {
-                const currentval = item.SupplierPrice
-                const parsedval = this.parseCurrency(currentval)
-                item.SupplierPrice = parsedval
-            }
-
-            if (type == 'itemdiskon') {
-                const currentdisc = item.DiskonAmount
-                const parseddisc = this.parseCurrency(currentdisc)
-                item.DiskonAmount = parseddisc
-            }
-
-            if (type == 'formdiskon') {
-                const currdisc = item.valuediskon
-                const formdisc = this.parseCurrency(currdisc)
-                item.valuediskon = formdisc
-            }
-
-            if (type == 'formtax') {
-                const currtax = item.valuepajak
-                const formtax = this.parseCurrency(currtax)
-                item.valuepajak = formtax
-            }
-        },
-        handleBlur(item, type) {
-            switch (type) {
-                case 'itemprice':
-                    const currentval = item.SupplierPrice
-                    const parsedval = this.parseCurrency(currentval)
-                    item.SupplierPrice = this.formatCurrency(parsedval)
-                    break;
-                case 'itemdiskon':
-                    const currentdisc = item.DiskonAmount
-                    const parseddisc = this.parseCurrency(currentdisc)
-                    item.DiskonAmount = this.formatCurrency(parseddisc)
-                    break;
-                case 'formdiskon':
-                    const currdisc = item.valuediskon
-                    const formdisc = this.parseCurrency(currdisc)
-                    item.valuediskon = this.formatCurrency(formdisc)
-                    break;
-                case 'formtax':
-                    const currtax = item.valuepajak
-                    const formtax = this.parseCurrency(currtax)
-                    item.valuepajak = this.formatCurrency(formtax)
-                    break;
-                default:
-                    break;
-            }
-        },
-        changeSupplierCabang() {
-            this.item_orderaset = []
-            this.debounceCalcForm(this.form_orderaset)
-        },
-        changeTypeTaxDiskon(type) {
-            let form = this.form_orderaset
-            switch (type) {
-                case 'tax':
-                    form.valuepajak = 0
-                    break;
-                case 'diskon':
-                    form.valuediskon = 0
-                    break;
-                case 'kontrak':
-                    
-                    break;            
-                default:
-                    break;
-            }
-            this.calculateFormSummary(form)
-        },
-        addItemRequest() {
-            this.$store.dispatch('poasset/lookupOrderRequest', 'SR')
-            this.$store.commit('poasset/update_dialog_add_itemaset', true)
-        },
-        changeDiscountPerItem(name, item) {
-            switch (name) {
-                case 'percent':
-                    item.DiskonType = 'P'
-                    item.DiskonAmount = 0.00
-                    break;
-                case 'absolute':
-                    item.DiskonType = 'R'
-                    item.DiskonAmount = 0.00
-                    break;
-                default:
-                    break;
-            }
-            this.calculateItemSummary(item)
-        },
-        calculateItemSummary(item) {
-            let current = JSON.parse(JSON.stringify(this.item_orderaset))
-            let changed = current.find(ele => ele.M_ItemCode == item.M_ItemCode)
-
-            const newqty = item.detail.reduce((sum, ele) => sum + Number(ele.RequestQty), 0)
-
-            let itemprice = this.parseCurrency(changed.SupplierPrice)
-            let currentdiskon = 0
-            if (item.DiskonType == 'R') {
-                currentdiskon = this.parseCurrency(changed.DiskonAmount)
-            }
-
-            if (item.DiskonType == 'P' && Number(changed.DiskonAmount) > 0) {
-                let percent = Number(changed.DiskonAmount)
-                currentdiskon = itemprice * percent / 100
-            }
-
-            changed.RequestQty = newqty
-            changed.EndPrice = itemprice - currentdiskon
-            changed.TempTotal = changed.EndPrice * changed.RequestQty
-
-            this.item_orderaset = current
-
-            /* update footer summary */ 
-            let summary = JSON.parse(JSON.stringify(this.summary_orderaset))
-            const subtotal = current.reduce((sum, acc) => sum + Number(acc.TempTotal), 0)
-            summary.subtotal = subtotal
-            this.summary_orderaset = summary
-
-            this.calculateFormSummary(this.form_orderaset)
-        },
-        calculateFormSummary(form) {
-            let summary = JSON.parse(JSON.stringify(this.summary_orderaset))
-
-            /* calculate diskon value */ 
-            let valuediskon = this.parseCurrency(form.valuediskon)
-            if (form.typediskon == 'percent' && valuediskon > 0) {
-                let percent = valuediskon
-                let value = (summary.subtotal * percent) / 100
-                summary.diskon = value
-            } else {
-                let absolute = valuediskon
-                summary.diskon = absolute
-            }
-
-            /* calculate tax value */ 
-            let valuepajak = this.parseCurrency(form.valuepajak)
-            if (form.typepajak == 'percent' && valuepajak > 0) {
-                let percent = valuepajak
-                let value = (summary.subtotal - summary.diskon) * percent / 100
-                summary.pajak = value
-            } else {
-                let absolute = valuepajak
-                summary.pajak = absolute
-            }
-
-            summary.total = (summary.subtotal - summary.diskon) + summary.pajak
-            this.summary_orderaset = summary
-        },
-        batalOrder() {
-
-        },
-        simpanOrder() {
-
-        }
-    },
-    watch: {
-        
-    },
-    created() {
-        this.debounceCalcForm = _.debounce((form) => {
-            this.calculateFormSummary(form)
-        }, 500)
-        this.debounceCalcItem = _.debounce((item) => {
-            this.calculateItemSummary(item)
-        }, 500)
-    },
-    destroyed() {
-        this.debounceCalcItem = null
-        this.debounceCalcForm = null
-    },
-}
-</script>

test/vuex/acc-one-po-asset/components/dialog-select-request-asset.vue

@@ -0,0 +1,246 @@
+<template>
+<v-dialog v-model="dialog_select_item" persistent width="60vw">
+    <v-card class="style-limit-heightcard">
+        <v-card-title class="headline grey lighten-2" primary title>
+            TAMBAH ITEM REQUEST
+        </v-card-title>
+        <v-card-text class="style-limit-heightcontent">
+            <v-flex xs12>
+                <v-text-field label="Cari" hide-details outline
+                    v-model="keyword" placeholder="Nama item, nomor request"
+                ></v-text-field>
+            </v-flex>
+            <v-flex xs12 mt-2>
+                <v-data-table :headers="headers" :items="requested_asset.records" class="elevation-1"
+                    v-model="selected_local" item-key="PurchaseRequestDetailID" hide-actions :loading="loading">
+                        <template v-slot:headers="props">
+                        <tr>
+                            <th class="blue lighten-3 white--text" style="width: 10%;">
+                                <v-checkbox
+                                    :input-value="props.all" primary
+                                    :indeterminate="props.indeterminate"
+                                    @click.native="toggleAll" hide-details
+                                ></v-checkbox>
+                            </th>
+                            <th v-for="header in props.headers" :key="header.text"
+                                :class="header.class" :style="{ width: header.width }"
+                            >
+                                {{ header.text }}
+                            </th>
+                        </tr>
+                        </template>
+                        <template v-slot:items="props">
+                        <tr>
+                            <td>
+                                <v-checkbox v-model="props.selected" primary hide-details></v-checkbox>
+                            </td>
+                            <td class="text-xs-center pa-2">{{ props.item.PurchaseRequestNumber }}</td>
+                            <td class="text-xs-start pa-2">
+                                {{ props.item.Requestedby }} <br>
+                                {{ props.item.M_BranchName }}
+                            </td>
+                            <td class="text-xs-start pa-2">
+                                {{ props.item.M_ItemCode }} <br>
+                                {{ props.item.M_ItemDesc }}
+                            </td>
+                            <td class="text-xs-center pa-2">{{ props.item.ItemUnitName }}</td>
+                            <td class="text-xs-center pa-2">{{ props.item.RequestQty }}</td>
+                        </tr>
+                        </template>
+                </v-data-table>
+            </v-flex>
+        </v-card-text>
+        <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn @click="batalTambah()" color="error" class="white--text">Batal</v-btn>
+            <v-btn @click="simpanItem()" color="primary" class="white--text">Simpan</v-btn>
+        </v-card-actions>
+    </v-card>
+</v-dialog>
+</template>
+
+<style scoped>
+.style-limit-heightcard {
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.style-limit-heightcontent {
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+</style>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            keyword: "",
+            loading: false,
+            selected_local: [],
+            headers: [
+                {
+                    text: "NO PURCHASE REQ", align: "center", sortable: false,
+                    value: "noreq", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "REQUESTER", align: "center", sortable: false,
+                    value: "kode", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false,
+                    value: "serve", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "SATUAN", align: "center", sortable: false,
+                    value: "unit", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "REQ QTY", align: "center", sortable: false,
+                    value: "qty", width: "10%", class: "pa-1 blue lighten-3 white--text",
+                },
+            ],
+        }
+    },
+    computed: {
+        dialog_select_item: {
+            get() {
+                return this.$store.state.orderAsset.dialog_select_asset;
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_dialog_select_asset", val);
+            }
+        },
+        form_order_asset: {
+            get() {
+                return this.$store.state.orderAsset.form_order_asset;
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_form_order_asset", val);
+            }
+        },
+        requested_asset: {
+            get() {
+                return this.$store.state.orderAsset.requested_asset
+            },
+            set(val) {
+                this.$store.commit('orderAsset/update_requested_asset', val)
+            }
+        },
+        selected_request_asset: {
+            get() {
+                return this.$store.state.orderAsset.selected_request_asset
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_selected_request_asset", val)
+            }
+        },
+        summary_order: {
+            get() {
+                return this.$store.state.orderAsset.summary_order;
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_summary_order", val);
+            }
+        }
+    },
+    methods: {
+        isFormEmpty() {
+            const form = this.form_order_asset;
+            if (form.supplierID != "" && form.branchID != "") {
+                return false;
+            }
+
+            return true;
+        },
+        cariRequest(newval) {
+            this.loading = true;
+            setTimeout(() => {
+                this.$store.dispatch("orderAsset/searchItemRequest", newval);
+                this.loading = false;
+            }, 500);
+        },
+        tambahItem() {
+            this.cariRequest("")
+            this.dialog_select_item = true;
+        },
+        toggleAll() {
+            if (this.selected_local.length) {
+                this.selected_local = [];
+            } else {
+                this.selected_local = this.requested_asset.records.slice();
+            }
+        },
+        simpanItem() {
+            const requestedAsset = JSON.parse(JSON.stringify(this.selected_local));
+            let form_asset = JSON.parse(JSON.stringify(this.form_order_asset));
+
+            const PRnumber = [...new Set(requestedAsset.map(item => item.PurchaseRequestNumber))].join(', ');
+            form_asset.reference = PRnumber;
+
+            const selected = Object.values(requestedAsset.reduce((acc, current) => {
+                const itemcode = current.M_ItemCode
+                if (!acc[itemcode]) {
+                    acc[itemcode] = {
+                        M_ItemID: current.M_ItemID,
+                        M_ItemCode: itemcode,
+                        M_ItemDesc: current.M_ItemDesc,
+                        ItemUnitID: current.ItemUnitID,
+                        ItemUnitName: current.ItemUnitName,
+                        SupplierPrice: Number(current.SupplierPrice),
+                        M_BranchName: current.M_BranchName,
+                        RequestQty: 0.00,
+                        DiskonAmount: 0.00,
+                        DiskonType: 'R',
+                        EndPrice: 0.00,
+                        TempTotal: 0.00,
+                        detail: []
+                    }
+                }
+
+                acc[itemcode].RequestQty += Number(current.RequestQty)
+                acc[itemcode].detail.push(current)
+                acc[itemcode].EndPrice = acc[itemcode].SupplierPrice - acc[itemcode].DiskonAmount
+                acc[itemcode].TempTotal = acc[itemcode].RequestQty * acc[itemcode].EndPrice
+                return acc
+            }, {}));
+
+            this.selected_request_asset = selected;
+            this.form_order_asset = form_asset;
+            this.$store.dispatch("orderAsset/recalculateOrderSummary");
+            this.selected_local = [];
+            this.dialog_select_item = false;
+        },
+        batalTambah() {
+            this.requested_asset = {
+                records: [],
+                total: 0
+            };
+            this.selected_local = [];
+            this.dialog_select_item = false;
+        }
+    },
+    watch: {
+        dialog_select_item(val) {
+            if (val) {
+                this.cariRequest("");
+                let current = [];
+                let newly = this.selected_request_asset
+                newly.forEach((item) => {
+                    current.push(...item.detail);
+                });
+
+                this.selected_local = current;
+            }
+        },
+        keyword(newval, oldval) {
+            if (!newval) return;
+            if (newval == oldval) return;
+            if (newval.length < 1) return;
+            this.cariRequest(newval);
+        }
+    }
+}
+</script>

test/vuex/acc-one-po-asset/components/form-item-request-asset.vue

@@ -0,0 +1,337 @@
+<template>
+    <v-layout row wrap>
+        <v-flex grow></v-flex>
+        <v-flex shrink>
+            <v-btn
+                @click="tambahItem()" color="primary" class="white--text"
+                :disabled="isFormEmpty()"
+            >Tambah Item</v-btn>
+        </v-flex>
+        <v-flex xs12>
+            <v-data-table :headers="headers" :items="selected_request_asset"
+                :expand="expand" class="elevation-1" hide-actions item-key="M_ItemID">
+                <!-- item request grouped -->
+                <template v-slot:items="props">
+                    <tr @click="props.expanded = !props.expanded">
+                        <td class="text-xs-center pa-2">
+                            <v-icon>{{ props.expanded
+                                ? "keyboard_arrow_down"
+                                : "keyboard_arrow_right"
+                            }}</v-icon>
+                        </td>
+                        <td class="text-xs-center pa-2">{{ props.item.M_ItemDesc }}</td>
+                        <td class="text-xs-center pa-2">{{ props.item.RequestQty }}</td>
+                        <td class="text-xs-center pa-2">
+                            <v-text-field
+                                v-model="props.item.SupplierPrice"
+                                hide-details prefix="Rp." solo :readonly="viewonlymode"
+                                @input="$store.dispatch('orderAsset/recalculateOrderSummary')"
+                                @focus="handleFocus(props.item, 'price')"
+                                @blur="handleBlur(props.item, 'price')"
+                            ></v-text-field>
+                        </td>
+                        <td class="text-xs-center pa-2">
+                            <v-layout row>
+                                <v-menu open-on-hover top offset-y attach>
+                                    <v-btn slot="activator" color="primary" dark small>
+                                        <span v-if="props.item.DiskonType == 'R'">Rp</span>
+                                        <span v-else>%</span>
+                                    </v-btn>
+
+                                    <v-list>
+                                        <v-list-tile
+                                            v-for="(item, index) in type_disc" :key="index"
+                                            @click="changeDiscountPerItem(item.name, props.item)"
+                                        >
+                                            <v-list-tile-title>{{ item.name }}</v-list-tile-title>
+                                        </v-list-tile>
+                                    </v-list>
+                                </v-menu>
+                                <v-text-field
+                                    v-if="props.item.DiskonType == 'R'" prefix="Rp." :readonly="viewonlymode"
+                                    v-model="props.item.DiskonAmount" hide-details solo
+                                    @input="$store.dispatch('orderAsset/recalculateOrderSummary')"
+                                    @focus="handleFocus(props.item, 'diskon')"
+                                    @blur="handleBlur(props.item, 'diskon')"
+                                ></v-text-field>
+                                <v-text-field
+                                    v-if="props.item.DiskonType == 'P'" :readonly="viewonlymode"
+                                    v-model="props.item.DiskonAmount" solo
+                                    type="number" min="0" suffix="%" hide-details
+                                    @input="$store.dispatch('orderAsset/recalculateOrderSummary')"
+                                ></v-text-field>
+                            </v-layout>
+                        </td>
+                        <td class="text-xs-center pa-2">
+                            Rp. {{ formatCurrency(props.item.EndPrice) }}
+                        </td>
+                        <td class="text-xs-center pa-2">
+                            Rp. {{ formatCurrency(props.item.TempTotal) }}
+                        </td>
+                        <td class="text-xs-center pa-2">
+                            <v-btn
+                                color="red" dark @click="removeRequestItem(props.item)"
+                                style="min-width: 40px; margin: 0;" small
+                            >
+                                <v-icon small>delete</v-icon>
+                            </v-btn>
+                        </td>
+                    </tr>
+                </template>
+
+                <!-- expanded item request -->
+                <template v-slot:expand="props">
+                    <v-card flat>
+                        <v-card-text>
+                            <v-data-table
+                                :headers="b_headers" class="elevation-0"
+                                :items="props.item.detail" hide-actions
+                                item-key="PurchaseRequestDetailID"
+                            >
+                                <template v-slot:items="det">
+                                <tr>
+                                    <td class="text-xs-center pa-2">{{ det.item.M_ItemDesc }}</td>
+                                    <td class="text-xs-center pa-2">{{ det.item.PurchaseRequestNumber }}</td>
+                                    <td class="text-xs-center pa-2">{{ det.item.M_BranchName }}</td>
+                                    <td class="text-xs-center pa-2">
+                                        <v-text-field
+                                            v-model="det.item.RequestQty" hide-details
+                                            solo type="number" min="0" :readonly="viewonlymode"
+                                            @input="$store.dispatch('orderAsset/recalculateOrderSummary')"
+                                        ></v-text-field>
+                                    </td>
+                                    <td class="text-xs-center pa-2">{{ det.item.ItemUnitName }}</td>
+                                    <td class="text-xs-center pa-2">
+                                        Rp. {{ formatCurrency(det.item.SupplierPrice) }}
+                                    </td>
+                                    <td class="text-xs-center pa-2">
+                                        <v-btn
+                                            color="red" flat @click="removeRequestDetail(det.item)"
+                                            style="min-width: 40px; margin: 0;" small
+                                        >
+                                            <v-icon>delete</v-icon>
+                                        </v-btn>
+                                    </td>
+                                </tr>
+                                </template>
+                            </v-data-table>
+                        </v-card-text>
+                    </v-card>
+                </template>
+            </v-data-table>
+        </v-flex>
+    </v-layout>
+</template>
+
+<style scoped>
+.style-limit-heightcard {
+  max-height: 60vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.style-limit-heightcontent {
+  overflow-y: auto;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+</style>
+
+<script>
+module.exports = {
+    data() {
+        return {
+            expand: false,
+            headers: [
+                {
+                    text: "", align: "center", sortable: false,
+                    value: "item", width: "5%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "ITEM", align: "center", sortable: false,
+                    value: "item", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "JUMLAH", align: "center", sortable: false,
+                    value: "qty", width: "10%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "HARGA", align: "center", sortable: false,
+                    value: "price", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "DISKON", align: "center", sortable: false,
+                    value: "disc", width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "HARGA SETELAH DISKON", align: "center", sortable: false,
+                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "TOTAL", align: "center", sortable: false,
+                    value: "disc", width: "15%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "AKSI", align: "center", sortable: false,
+                    value: "disc", width: "5%", class: "pa-1 blue lighten-3 white--text",
+                },
+            ],
+            b_headers: [
+                {
+                    text: "NAMA PRODUK", align: "center", sortable: false,
+                    value: "prod", width: "20%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "NO REQUEST", align: "center", sortable: false,
+                    value: "noreq", width: "20%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "REQUESTER", align: "center", sortable: false,
+                    value: "req", width: "20%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "JUMLAH", align: "center", sortable: false,
+                    value: "qty", width: "10%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "UNIT", align: "center", sortable: false,
+                    value: "unit", width: "10%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "HARGA", align: "center", sortable: false,
+                    value: "price", width: "15%", class: "pa-1 blue lighten-4 black--text",
+                },
+                {
+                    text: "AKSI", align: "center", sortable: false,
+                    value: "act", width: "5%", class: "pa-1 blue lighten-4 black--text",
+                }
+            ],
+            type_disc: [{name: 'percent'}, {name: 'nominal'}]
+        }
+    },
+    computed: {
+        form_order_asset: {
+            get() {
+                return this.$store.state.orderAsset.form_order_asset;
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_form_order_asset", val);
+            }
+        },
+        requested_asset: {
+            get() {
+                return this.$store.state.orderAsset.requested_asset
+            },
+            set(val) {
+                this.$store.commit('orderAsset/update_requested_asset', val)
+            }
+        },
+        selected_request_asset: {
+            get() {
+                return this.$store.state.orderAsset.selected_request_asset
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_selected_request_asset", val)
+            }
+        },
+        summary_order: {
+            get() {
+                return this.$store.state.orderAsset.summary_order;
+            },
+            set(val) {
+                this.$store.commit("orderAsset/update_summary_order", val);
+            }
+        },
+        viewonlymode() {
+            return this.$store.state.common.viewonlymode;
+        }
+    },
+    methods: {
+        isFormEmpty() {
+            const form = this.form_order_asset;
+            if (this.viewonlymode) {
+                return true;
+            }
+
+            if (form.supplierID != "" && form.branchID != "") {
+                return false;
+            }
+
+            return true;
+        },
+        tambahItem() {
+            this.$store.commit("orderAsset/update_dialog_select_asset", true);
+        },
+        formatCurrency(value) {
+            const num = parseFloat(value);
+            if (isNaN(num)) return 0;
+            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        },
+        parseCurrency(value) {
+            let cleanValue = String(value).replace(/\./g, '');
+            cleanValue = cleanValue.replace(',', '.');
+            return parseFloat(cleanValue) || 0;
+        },
+        handleFocus(item, field) {
+            if (field == 'price') {
+                const currprice = item.SupplierPrice;
+                const parsedprice = this.parseCurrency(currprice);
+                item.SupplierPrice = parsedprice;
+            }
+
+            if (field == 'diskon') {
+                const currdisc = item.DiskonAmount;
+                const parseddisc = this.parseCurrency(currdisc);
+                item.DiskonAmount = parseddisc;
+            }
+        },
+        handleBlur(item, field) {
+            if (field == 'price') {
+                const currprice = item.SupplierPrice;
+                const parsedprice = this.parseCurrency(currprice);
+                item.SupplierPrice = this.formatCurrency(parsedprice);
+            }
+
+            if (field == 'diskon') {
+                const currdisc = item.DiskonAmount;
+                const parseddisc = this.parseCurrency(currdisc);
+                item.DiskonAmount = this.formatCurrency(parseddisc);
+            }
+        },
+        removeRequestItem(item) {
+            const current = JSON.parse(JSON.stringify(this.selected_request_asset));
+            let newitem = current.filter(ele => ele.M_ItemCode != item.M_ItemCode);
+
+            this.selected_request_asset = newitem;
+            this.$store.dispatch('orderAsset/recalculateOrderSummary');
+        },
+        removeRequestDetail(item) {
+            const current = JSON.parse(JSON.stringify(this.selected_request_asset));
+            let changed = current.find(ele => ele.M_ItemCode == item.M_ItemCode);
+            let newdetail = changed.detail.filter(
+                d => d.PurchaseRequestDetailID != item.PurchaseRequestDetailID
+            );
+
+            if (newdetail.length > 0) {
+                changed.detail = newdetail;
+                this.selected_request_asset = current;
+                this.$store.dispatch('orderAsset/recalculateOrderSummary');
+            } else {
+                this.removeRequestItem(changed);
+            }
+        },
+        changeDiscountPerItem(type, item) {
+            if (type == 'percent') {
+                item.DiskonType = 'P'
+                item.DiskonAmount = 0.00
+            } else {
+                item.DiskonType = 'R'
+                item.DiskonAmount = 0.00
+            }
+
+            this.$store.dispatch('orderAsset/recalculateOrderSummary');
+        }
+    },
+    watch: { }
+}
+</script>

test/vuex/acc-one-po-asset/components/form-kontrak-asset.vue

@@ -3,7 +3,7 @@
         <v-layout row wrap>
             <v-flex xs3 pa-1>
                 <v-text-field v-model="form_kontrak.nama_kontrak" hide-details outline label="Nama Kontrak"
-                    placeholder="masukan nama kontrak"></v-text-field>
+                    placeholder="masukan nama kontrak" :readonly="viewonlymode"></v-text-field>
             </v-flex>
             <v-flex xs3 pa-1>
                 <v-menu v-model="menuKontrakDate" offset-y lazy min-width="290px" transition="scale-transition"
@@ -13,7 +13,7 @@
                             label="Tanggal Kontrak"></v-text-field>
                     </template>
                     <v-date-picker v-model="form_kontrak.tanggal_kontrak" no-title
-                        @input="menuKontrakDate = false"></v-date-picker>
+                        @input="menuKontrakDate = false" :readonly="viewonlymode"></v-date-picker>
                 </v-menu>
             </v-flex>
             <v-flex xs3 pa-1>
@@ -24,7 +24,7 @@
                             label="Tanggal Mulai Kontrak" readonly></v-text-field>
                     </template>
                     <v-date-picker v-model="form_kontrak.tanggalAwal_kontrak" no-title
-                        @input="menuKontrakStartdate = false"></v-date-picker>
+                        @input="menuKontrakStartdate = false" :readonly="viewonlymode"></v-date-picker>
                 </v-menu>
             </v-flex>
             <v-flex xs3 pa-1>
@@ -35,7 +35,7 @@
                             label="Tanggal Akhir Kontrak" readonly></v-text-field>
                     </template>
                     <v-date-picker v-model="form_kontrak.tanggalAkhir_kontrak" no-title
-                        @input="menuKontrakEnddate = false"></v-date-picker>
+                        @input="menuKontrakEnddate = false" :readonly="viewonlymode"></v-date-picker>
                 </v-menu>
             </v-flex>
         </v-layout>
@@ -47,26 +47,32 @@
             </v-flex>
             <v-flex xs2 pa-1>
                 <v-text-field v-model="form_kontrak.jumlah_cicilan" hide-details placeholder="1" outline
-                    label="Jumlah Cicilan"></v-text-field>
+                    label="Jumlah Cicilan" :readonly="viewonlymode"></v-text-field>
             </v-flex>
             <v-flex xs2 pa-1>
                 <v-text-field v-model="form_kontrak.tanggalBayar_cicilan" hide-details placeholder="1" outline
-                    label="Tanggal Bayar Cicilan"></v-text-field>
+                    label="Tanggal Bayar Cicilan" :readonly="viewonlymode"></v-text-field>
             </v-flex>
             <v-flex xs2 pa-1>
-                <v-text-field v-model="form_kontrak.besarNilai_cicilan" hide-details label="Besar Bayar Cicilan"
-                    placeholder="0" prefix="Rp." outline></v-text-field>
+                <v-text-field v-model="form_kontrak.besarNilai_cicilan"
+                    placeholder="0" prefix="Rp." outline hide-details :readonly="viewonlymode"
+                    @blur="handleBlur(form_kontrak, 'cicil')" label="Besar Bayar Cicilan"
+                    @focus="handleFocus(form_kontrak, 'cicil')"></v-text-field>
             </v-flex>
             <v-flex xs1 pa-1>
-                <v-autocomplete :items="['nominal', 'persen']" label="Tipe Nilai"
+                <v-autocomplete :items="['nominal', 'percent']" label="Tipe Nilai" :readonly="viewonlymode"
                     v-model="form_kontrak.type_downpayment" hide-details @input="changeTypeAmount('DP')"
-                    outline></v-autocomplete>
+                    @change="$store.dispatch('orderAsset/recalculateOrderSummary')" outline></v-autocomplete>
             </v-flex>
             <v-flex xs3 pa-1>
-                <v-text-field v-if="form_kontrak.type_downpayment == 'persen'" label="Jumlah Uang Muka" hide-details
-                    v-model="form_kontrak.besarNilai_downpayment" placeholder="0" suffix="%" outline></v-text-field>
-                <v-text-field v-else label="Jumlah Uang Muka" hide-details placeholder="0" prefix="Rp." outline
-                    v-model="form_kontrak.besarNilai_downpayment"></v-text-field>
+                <v-text-field v-if="form_kontrak.type_downpayment == 'percent'" label="Jumlah Uang Muka" hide-details
+                    v-model="form_kontrak.besarNilai_downpayment" placeholder="0" suffix="%" outline :readonly="viewonlymode"
+                    @input="$store.dispatch('orderAsset/recalculateOrderSummary')"></v-text-field>
+                <v-text-field v-else label="Jumlah Uang Muka" hide-details placeholder="0"
+                    v-model="form_kontrak.besarNilai_downpayment" prefix="Rp." outline
+                    @input="$store.dispatch('orderAsset/recalculateOrderSummary')"
+                    @blur="handleBlur(form_kontrak, 'dp')" :readonly="viewonlymode"
+                    @focus="handleFocus(form_kontrak, 'dp')"></v-text-field>
             </v-flex>
         </v-layout>
     </div>
@@ -82,9 +88,6 @@ module.exports = {
         };
     },
     computed: {
-        supplier_list() {
-            return [];
-        },
         form_kontrak: {
             get() {
                 return this.$store.state.kontrakAsset.form_kontrak
@@ -102,6 +105,9 @@ module.exports = {
         formattedEnddateKontrak() {
             return this.formatDate(this.form_kontrak.tanggalAkhir_kontrak);
         },
+        viewonlymode() {
+            return this.$store.state.common.viewonlymode;
+        }
     },
     methods: {
         formatDate(date) {
@@ -120,15 +126,69 @@ module.exports = {
 
             return Math.max(months, 1);
         },
+        updateDurasiCicilan() {
+            const form = this.form_kontrak;
+            if (!form.tanggalAwal_kontrak || !form.tanggalAkhir_kontrak) return;
+
+            form.durasi_cicilan = this.countMonths(
+                form.tanggalAwal_kontrak,
+                form.tanggalAkhir_kontrak
+            );
+
+            this.form_kontrak = form;
+        },
         changeTypeAmount(name) {
             let form = this.form_kontrak;
             if (name == 'DP') {
-                form.jumlah_downpayment = 0;
+                form.besarNilai_downpayment = 0;
             }
-        }
+
+            this.$store.dispatch('orderAsset/recalculateOrderSummary');
+        },
+        formatCurrency(value) {
+            const num = parseFloat(value);
+            if (isNaN(num)) return 0;
+            return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
+        },
+        parseCurrency(value) {
+            let cleanValue = String(value).replace(/\./g, '');
+            cleanValue = cleanValue.replace(',', '.');
+            return parseFloat(cleanValue) || 0;
+        },
+        handleFocus(item, field) {
+            if (field == 'dp') {
+                const currprice = item.besarNilai_downpayment;
+                const parsedprice = this.parseCurrency(currprice);
+                item.besarNilai_downpayment = parsedprice;
+            }
+
+            if (field == 'cicil') {
+                const currdisc = item.besarNilai_cicilan;
+                const parseddisc = this.parseCurrency(currdisc);
+                item.besarNilai_cicilan = parseddisc;
+            }
+        },
+        handleBlur(item, field) {
+            if (field == 'dp') {
+                const currprice = item.besarNilai_downpayment;
+                const parsedprice = this.parseCurrency(currprice);
+                item.besarNilai_downpayment = this.formatCurrency(parsedprice);
+            }
+
+            if (field == 'cicil') {
+                const currdisc = item.besarNilai_cicilan;
+                const parseddisc = this.parseCurrency(currdisc);
+                item.besarNilai_cicilan = this.formatCurrency(parseddisc);
+            }
+        },
     },
     watch: {
-
+        "form_kontrak.tanggalAwal_kontrak"() {
+            this.updateDurasiCicilan();
+        },
+        "form_kontrak.tanggalAkhir_kontrak"() {
+            this.updateDurasiCicilan();
+        }
     }
 }
 </script>

test/vuex/acc-one-po-asset/components/form-order-asset.vue

@@ -16,13 +16,13 @@
                     </template>
                     <v-date-picker
                         v-model="form_order_asset.podate" no-title
-                        @input="menuPOdate = false"
+                        @input="menuPOdate = false" :readonly="viewonlymode"
                     ></v-date-picker>
                 </v-menu>
             </v-flex>
             <v-flex xs4 pa-1>
                 <v-autocomplete
-                    :items="list_supplier" hide-details outline
+                    :items="list_supplier" hide-details outline :readonly="viewonlymode"
                     v-model="form_order_asset.supplierID" label="Supplier"
                     item-text="SupplierName" item-value="SupplierID"
                 ></v-autocomplete>
@@ -37,50 +37,71 @@
 
         <!-- 2nd row -->
         <v-layout row wrap>
-            <v-flex xs4 pa-1>
+            <v-flex xs2 pa-1>
                 <v-autocomplete
                     :items="list_cabang" hide-details outline
                     v-model="form_order_asset.branchID" label="Cabang"
                     item-text="M_BranchName" item-value="M_BranchID"
+                    @change="onChangeCabang" :readonly="viewonlymode"
                 ></v-autocomplete>
             </v-flex>
             <v-flex xs2 pa-1>
                 <v-autocomplete
-                    :items="['nominal', 'persen']" label="Tipe Nilai"
+                    :items="list_gudang" hide-details outline :readonly="viewonlymode"
+                    v-model="form_order_asset.gudangID" label="Gudang"
+                    item-text="WarehouseName" item-value="WarehouseID"
+                ></v-autocomplete>
+            </v-flex>
+            <v-flex xs2 pa-1>
+                <v-autocomplete
+                    :items="['nominal', 'percent']" label="Tipe Nilai" :readonly="viewonlymode"
                     v-model="form_order_asset.typepajak" hide-details outline
+                    @change="$store.dispatch('orderAsset/recalculateOrderSummary')"
                 ></v-autocomplete>
             </v-flex>
             <v-flex xs2 pa-1>
                 <v-text-field
-                    v-if="form_order_asset.typepajak == 'persen'" label="Pajak"
+                    v-if="form_order_asset.typepajak == 'percent'" label="Pajak"
                     v-model="form_order_asset.valuepajak" hide-details outline
                     placeholder="besar pajak dalam persen" suffix="%"
+                    @input="$store.dispatch('orderAsset/recalculateOrderSummary')"
                 ></v-text-field>
                 <v-text-field
-                    v-else label="Pajak" outline prefix="Rp."
+                    v-else label="Pajak" outline prefix="Rp." :readonly="viewonlymode"
                     v-model="form_order_asset.valuepajak" hide-details
                     placeholder="besar pajak dalam rupiah"
+                    @input="$store.dispatch('orderAsset/recalculateOrderSummary')"
                 ></v-text-field>
             </v-flex>
             <v-flex xs2 pa-1>
                 <v-autocomplete
-                    :items="['nominal', 'persen']" hide-details outline
+                    :items="['nominal', 'percent']" hide-details outline :readonly="viewonlymode"
                     v-model="form_order_asset.typediskon" label="Tipe Nilai"
+                    @change="$store.dispatch('orderAsset/recalculateOrderSummary')"
                 ></v-autocomplete>
             </v-flex>
             <v-flex xs2 pa-1>
                 <v-text-field
-                    v-if="form_order_asset.typediskon == 'persen'" label="Diskon"
+                    v-if="form_order_asset.typediskon == 'percent'" label="Diskon"
                     v-model="form_order_asset.valuediskon" hide-details outline
                     placeholder="besar diskon dalam persen" suffix="%"
+                    @input="$store.dispatch('orderAsset/recalculateOrderSummary')"
                 ></v-text-field>
                 <v-text-field
                     v-else label="Diskon" outline prefix="Rp."
                     v-model="form_order_asset.valuediskon" hide-details
-                    placeholder="besar diskon dalam rupiah"s
+                    placeholder="besar diskon dalam rupiah" :readonly="viewonlymode"
+                    @input="$store.dispatch('orderAsset/recalculateOrderSummary')"
                 ></v-text-field>
             </v-flex>
+            <v-flex xs12 pa-1>
+                <v-textarea
+                    v-model="form_order_asset.catatan" auto-grow :readonly="viewonlymode"
+                    rows="1" outline label="Catatan" hide-details
+                ></v-textarea>
+            </v-flex>
         </v-layout>
+
     </div>
 </template>
 
@@ -108,6 +129,12 @@ module.exports = {
         },
         list_cabang() {
             return this.$store.state.orderAsset.list_cabang;
+        },
+        list_gudang() {
+            return this.$store.state.orderAsset.list_gudang;
+        },
+        viewonlymode() {
+            return this.$store.state.common.viewonlymode;
         }
     },
     methods: {
@@ -116,6 +143,10 @@ module.exports = {
             const [year, month, day] = date.split('-');
             return `${day}-${month}-${year}`;
         },
+        onChangeCabang(branchID) {
+            if (!branchID) return;
+            this.$store.dispatch("orderAsset/listingGudang", branchID);
+        }
     }
 }
 </script>

test/vuex/acc-one-po-asset/components/main-layout.vue

@@ -6,12 +6,6 @@
             <v-btn icon @click="createNewOrder()">
                 <v-icon large>add_box</v-icon>
             </v-btn>
-            <!-- <v-btn icon @click="createNewContract()">
-                <v-icon large>add_box</v-icon>
-            </v-btn>
-            <v-btn icon @click="createNewOrder()">
-                <v-icon large>add_box</v-icon>
-            </v-btn> -->
         </v-toolbar>
 
         <v-card class="pa-2">
@@ -66,8 +60,17 @@
                             <div v-show="props.item.PurchaseOrderStatus == 'Draft'">
                                 <v-tooltip bottom>
                                     <template v-slot:activator="{ on }">
-                                        <v-btn color="warning" dark v-on="on" @click="" small
-                                            style="min-width: 40px; margin: 0;">
+                                        <v-btn color="green" dark v-on="on" @click="openDialogAttachment(props.item)"
+                                            small style="min-width: 40px; margin: 0;">
+                                            <v-icon small>attachment</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>Upload Attachment</span>
+                                </v-tooltip>
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn color="warning" dark v-on="on" @click="sendRequestPO(props.item)"
+                                            small style="min-width: 40px; margin: 0;">
                                             <v-icon small>send</v-icon>
                                         </v-btn>
                                     </template>
@@ -75,8 +78,8 @@
                                 </v-tooltip>
                                 <v-tooltip bottom>
                                     <template v-slot:activator="{ on }">
-                                        <v-btn color="info" dark v-on="on" @click="" small
-                                            style="min-width: 40px; margin: 0;">
+                                        <v-btn color="info" dark v-on="on" @click="openEditFormOrder(props.item)"
+                                            style="min-width: 40px; margin: 0;" small>
                                             <v-icon small>edit</v-icon>
                                         </v-btn>
                                     </template>
@@ -84,8 +87,8 @@
                                 </v-tooltip>
                                 <v-tooltip bottom>
                                     <template v-slot:activator="{ on }">
-                                        <v-btn color="error" dark v-on="on" @click="" small
-                                            style="min-width: 40px; margin: 0;">
+                                        <v-btn color="error" dark v-on="on" @click="openDialogDeleteOrder(props.item)"
+                                            small style="min-width: 40px; margin: 0;">
                                             <v-icon small>delete</v-icon>
                                         </v-btn>
                                     </template>
@@ -95,12 +98,21 @@
                             <div v-show="props.item.PurchaseOrderStatus != 'Draft'">
                                 <v-tooltip bottom>
                                     <template v-slot:activator="{ on }">
-                                        <v-btn color="warning" dark v-on="on" @click="viewPO(props.item)" small
-                                            style="min-width: 40px; margin: 0;">
+                                        <v-btn color="green" dark v-on="on" @click="openDialogAttachment(props.item)"
+                                            small style="min-width: 40px; margin: 0;">
+                                            <v-icon small>attachment</v-icon>
+                                        </v-btn>
+                                    </template>
+                                    <span>Upload Attachment</span>
+                                </v-tooltip>
+                                <v-tooltip bottom>
+                                    <template v-slot:activator="{ on }">
+                                        <v-btn color="warning" dark v-on="on" @click="viewDetailPO(props.item)"
+                                        small style="min-width: 40px; margin: 0;">
                                             <v-icon small>visibility</v-icon>
                                         </v-btn>
-                                        <span>Detail PO</span>
                                     </template>
+                                        <span>Detail PO</span>
                                 </v-tooltip>
                             </div>
                         </td>
@@ -119,11 +131,7 @@
         </v-snackbar>
 
         <dialog-add-attchment></dialog-add-attchment>
-        <dialog-add-item-aset></dialog-add-item-aset>
         <dialog-delete-order></dialog-delete-order>
-
-        <!-- <dialog-form-order-aset></dialog-form-order-aset> -->
-        <!-- <dialog-create-kontrak></dialog-create-kontrak> -->
         <dialog-create-order></dialog-create-order>
     </div>
 </template>
@@ -131,8 +139,9 @@
 <script>
 module.exports = {
     mounted() {
-        this.$store.dispatch('poasset/lookupVendor')
-        this.$store.dispatch('poasset/lookupCabang')
+        this.$store.dispatch('orderAsset/listingCabang');
+        this.$store.dispatch('orderAsset/listingSupplier');
+        this.$store.dispatch('common/getListingPOAsset');
     },
     data() {
         return {
@@ -176,36 +185,33 @@ module.exports = {
     },
     components: {
         'dialog-add-attchment': httpVueLoader('./dialog-add-attachment.vue'),
-        'dialog-form-order-aset': httpVueLoader('./dialog-form-order-aset.vue'),
-        'dialog-add-item-aset': httpVueLoader('./dialog-add-item-aset.vue'),
         'dialog-delete-order': httpVueLoader('./dialog-delete-order.vue'),
-
-        'dialog-create-kontrak': httpVueLoader('./dialog-create-contract.vue'),
         'dialog-create-order': httpVueLoader('./dialog-create-order.vue'),
     },
     computed: {
         snackbar: {
             get() {
-                return this.$store.state.poasset.snackbar;
+                return this.$store.state.common.snackbar;
             },
             set(val) {
-                return this.$store.commit("poasset/update_snackbar", val);
+                return this.$store.commit("common/update_snackbar", val);
             }
         },
         filterpo: {
             get() {
-                return this.$store.state.poasset.filterpo;
+                return this.$store.state.common.filterpo;
             },
             set(val) {
-                this.$store.commit("poasset/update_filterpo", val);
+                this.$store.commit("common/update_filterpo", val);
+                this.$store.dispatch('common/getListingPOAsset');
             }
         },
         currpage: {
             get() {
-                return this.$store.state.poasset.currpage;
+                return this.$store.state.common.currpage;
             },
             set(val) {
-                this.$store.commit("poasset/update_currpage", val);
+                this.$store.commit("common/update_currpage", val);
             }
         },
         formattedStartdate() {
@@ -215,15 +221,18 @@ module.exports = {
             return this.formatDate(this.filterpo.enddate);
         },
         list_status() {
-            return this.$store.state.poasset.list_status;
+            return this.$store.state.common.list_status;
         },
         list_asetpo() {
-            return this.$store.state.poasset.list_asetpo;
+            return this.$store.state.common.list_asetpo;
         },
         pagelength() {
             const total = this.list_asetpo.total;
             if (total === undefined || total < 1) return 1;
             return Math.ceil(total / 10);
+        },
+        loading_process() {
+            return this.$store.state.common.loading_process;
         }
     },
     methods: {
@@ -237,21 +246,58 @@ module.exports = {
             if (isNaN(num)) return 0;
             return num.toFixed(2).replace('.', ',').replace(/\B(?=(\d{3})+(?!\d))/g, ".");
         },
-        createNewOrder() {
-            this.$store.commit('poasset/update_dialog_form_orderaset', true);
-        },
-        createNewContract() {
-            this.$store.commit("kontrakAsset/update_dialog_create_contract", true);
-        },
         createNewOrder() {
             this.$store.commit("orderAsset/update_dialog_create_order", true);
         },
-        viewPO(item) {
+        openDialogAttachment(item) {
+            let param = {
+                contractID: item.contractID,
+                poID: item.PurchaseOrderID
+            };
 
+            if (item.PurchaseOrderStatus != 'Draft') {
+                this.$store.commit("common/update_viewonlymode", true);
+            }
+
+            this.$store.dispatch('common/getAssetAttachment', param);
+            this.$store.commit("common/update_selected_orderaset", item);
+            this.$store.commit("common/update_dialog_attachment", true);
+        },
+        openDialogDeleteOrder(item) {
+            if (!this.loading_process) {
+                this.$store.commit("common/update_selected_orderaset", item)
+                this.$store.commit("common/update_dialog_deleteorder", true);
+            } else {
+                const snac = { color: 'warning', msg: 'terdapat proses lain yang masih berjalan', state: true };
+                this.snackbar = snac;
+            }
+        },
+        sendRequestPO(item) {
+            if (item.AttachmentCount < 1) {
+                const snac = { color: 'warning', msg: 'belum upload attachment', state: true };
+                this.snackbar = snac;
+            } else if (!this.loading_process) {
+                this.$store.dispatch('kontrakAsset/sendRequestPO', item.PurchaseOrderID);
+            } else {
+                const snac = { color: 'warning', msg: 'terdapat proses lain yang masih berjalan', state: true };
+                this.snackbar = snac;
+            }
+        },
+        openEditFormOrder(item) {
+            this.$store.dispatch("kontrakAsset/getDetailDataPO", item.PurchaseOrderID);
+        },
+        viewDetailPO(item) {
+            this.$store.commit("common/update_viewonlymode", true);
+            this.$store.dispatch("kontrakAsset/getDetailDataPO", item.PurchaseOrderID);
         }
     },
     watch: {
-
+        filterpo: {
+            handler(val) {
+                this.$store.dispatch('common/getListingPOAsset');
+            },
+            deep: true
+        }
     },
 }
 </script>

test/vuex/acc-one-po-asset/modules/common.js

@@ -0,0 +1,165 @@
+import * as api from '../api/api.js';
+
+export default {
+    namespaced: true,
+    state: {
+        /* common */
+        snackbar: {
+            color: 'success',
+            msg: '',
+            state: false
+        },
+        loading_process: false,
+        selected_orderaset: {},
+        viewonlymode: false,
+
+        /* main layout */
+        filterpo: {
+            startdate: moment(new Date()).format('YYYY-MM-DD'),
+            enddate: moment(new Date()).format('YYYY-MM-DD'),
+            status: 'All',
+            search: ''
+        },
+        list_status: ['All', 'Draft', 'Pending', 'Approved', 'Rejected', 'Completed'],
+        list_asetpo: {
+            records: [],
+            total: 0
+        },
+        currpage: 1,
+
+        /* delete order */
+        dialog_deleteorder: false,
+
+        /* attachment */
+        dialog_attachment: false,
+        assets_attachment: []
+    },
+    mutations: {
+        /* common */
+        update_snackbar(state, val) {
+            state.snackbar = val
+        },
+        update_loading_process(state, val) {
+            state.loading_process = val
+        },
+        update_selected_orderaset(state, val) {
+            state.selected_orderaset = val
+        },
+        update_viewonlymode(state, val) {
+            state.viewonlymode = val
+        },
+
+        /* main layout */
+        update_filterpo(state, val) {
+            state.filterpo = val
+        },
+        update_list_status(state, val) {
+            state.list_status = val
+        },
+        update_list_asetpo(state, val) {
+            state.list_asetpo = val
+        },
+        update_currpage(state, val) {
+            state.currpage = val
+        },
+
+        /* delete order */
+        update_dialog_deleteorder(state, val) {
+            state.dialog_deleteorder = val
+        },
+
+        /* attachment */
+        update_dialog_attachment(state, val) {
+            state.dialog_attachment = val
+        },
+        update_assets_attachment(state, val) {
+            state.assets_attachment = val
+        }
+    },
+    actions: {
+        async getListingPOAsset(context) {
+            try {
+                const params = {
+                    token: one_token(),
+                    currpage: context.state.currpage,
+                    ...context.state.filterpo
+                };
+                const resp = await api.getDaftarPoAset(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                context.commit('update_list_asetpo', resp.data);
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("update_snackbar", snac);
+            }
+        },
+        async getAssetAttachment(context, param) {
+            try {
+                const params = {
+                    token: one_token(),
+                    contractID: param.contractID,
+                    poID: param.poID
+                };
+                const resp = await api.getDaftarAttachment(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                context.commit('update_assets_attachment', resp.data);
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("update_snackbar", snac);
+            }
+        },
+        async uploadAttachment(context, params) {
+            try {
+                context.state.loading_process = true;
+                const resp = await api.uploadAttachment(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                const snac = { color: 'success', msg: resp.data, state: true };
+                context.commit("update_snackbar", snac);
+
+                context.dispatch('getListingPOAsset');
+                context.state.loading_process = false;
+                context.state.dialog_attachment = false;
+            } catch (e) {
+                context.state.loading_process = false;
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("update_snackbar", snac);
+            }
+        },
+        async deleteOrderAsset(context) {
+            try {
+                context.state.loading_process = true;
+                const order = context.state.selected_orderaset;
+                const params = {
+                    token: one_token(),
+                    poID: order.PurchaseOrderID,
+                    contractID: order.contractID,
+                    ponumber: order.PurchaseOrderNumber,
+                    SupplierDownpaymentID: order.SupplierDownpaymentID
+                };
+                const resp = await api.deletePoAsset(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                const snac = { color: 'success', msg: resp.data, state: true };
+                context.commit("update_snackbar", snac);
+
+                context.dispatch('getListingPOAsset');
+                context.state.loading_process = false;
+                context.state.dialog_deleteorder = false;
+            } catch (e) {
+                context.state.loading_process = false;
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("update_snackbar", snac);
+            }
+        }
+    }
+}

test/vuex/acc-one-po-asset/modules/kontrak-asset.js

@@ -1,7 +1,8 @@
+import * as api from '../api/api.js';
+
 export default {
     namespaced: true,
     state: {
-        dialog_create_contract: false,
         form_kontrak: {
             nama_kontrak: '',
             tanggal_kontrak: moment(new Date()).format('YYYY-MM-DD'),
@@ -11,17 +12,136 @@ export default {
             jumlah_cicilan: 1,
             tanggalBayar_cicilan: 1,
             besarNilai_cicilan: 0,
-            type_downpayment: 'persen',
+            type_downpayment: 'percent',
             besarNilai_downpayment: 0
         }
     },
     mutations: {
-        update_dialog_create_contract(state, val) {
-            state.dialog_create_contract = val
-        },
         update_form_kontrak(state, val) {
             state.form_kontrak = val
         }
     },
-    actions: {}
+    actions: {
+        async saveOrderAsset(context, params) {
+            try {
+                context.commit("common/update_loading_process", true, { root: true });
+                params.token = one_token();
+                const resp = await api.createPoAsset(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+                const snac = { color: 'success', msg: resp.data, state: true };
+                context.commit("common/update_snackbar", snac, { root: true });
+
+                context.commit("common/update_loading_process", false, { root: true });
+                context.commit("orderAsset/update_dialog_create_order", false, { root: true });
+                context.dispatch('common/getListingPOAsset', {}, { root: true });
+            } catch (error) {
+                context.commit("common/update_loading_process", false, { root: true });
+                const snac = { color: 'error', msg: error.message, state: true };
+                context.commit("common/update_snackbar", snac, { root: true });
+            }
+        },
+        async editOrderAsset(context, params) {
+            try {
+                context.commit("common/update_loading_process", true, { root: true });
+                params.token = one_token();
+                const resp = await api.editPoAsset(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+                const snac = { color: 'success', msg: resp.data, state: true };
+                context.commit("common/update_snackbar", snac, { root: true });
+
+                context.commit("common/update_loading_process", false, { root: true });
+                context.commit("orderAsset/update_dialog_create_order", false, { root: true });
+                context.dispatch('common/getListingPOAsset', {}, { root: true });
+            } catch (error) {
+                context.commit("common/update_loading_process", false, { root: true });
+                const snac = { color: 'error', msg: error.message, state: true };
+                context.commit("common/update_snackbar", snac, { root: true });
+            }
+        },
+        async sendRequestPO(context, poID) {
+            try {
+                context.commit("common/update_loading_process", true, { root: true });
+                let params = {
+                    token: one_token(),
+                    approvelevel: "0",
+                    poID: poID,
+                }
+                const resp = await api.updateApprovalPO(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+                const snac = { color: 'success', msg: resp.data, state: true };
+                context.commit("common/update_snackbar", snac, { root: true });
+
+                context.commit("common/update_loading_process", false, { root: true });
+                context.commit("orderAsset/update_dialog_create_order", false, { root: true });
+                context.dispatch('common/getListingPOAsset', {}, { root: true });
+            } catch (error) {
+                context.commit("common/update_loading_process", false, { root: true });
+                const snac = { color: 'error', msg: error.message, state: true };
+                context.commit("common/update_snackbar", snac, { root: true });
+            }
+        },
+        async getDetailDataPO(context, poID) {
+            try {
+                let params = {
+                    token: one_token(),
+                    poID: poID,
+                }
+                const resp = await api.getDataKontrakPoAset(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                let formOrder = {
+                    podate: resp.data.podate,
+                    supplierID: resp.data.supplierID,
+                    reference: resp.data.reference,
+                    branchID: resp.data.branchID,
+                    gudangID: resp.data.gudangID,
+                    typepajak: resp.data.typepajak,
+                    valuepajak: parseFloat(resp.data.valuepajak),
+                    typediskon: resp.data.typediskon,
+                    valuediskon: parseFloat(resp.data.valuediskon),
+                    catatan: resp.data.catatan
+                };
+                let formKontrak = {
+                    nama_kontrak: resp.data.contractName,
+                    tanggal_kontrak: resp.data.contractDate,
+                    tanggalAwal_kontrak: resp.data.contractStart,
+                    tanggalAkhir_kontrak: resp.data.contractEnd,
+                    durasi_cicilan: resp.data.contractDuration,
+                    jumlah_cicilan: resp.data.installmentNumber,
+                    tanggalBayar_cicilan: resp.data.installmentDate,
+                    besarNilai_cicilan: parseFloat(resp.data.installmentPayAmount),
+                    type_downpayment: resp.data.installmentDownPaymentType,
+                    besarNilai_downpayment: parseFloat(resp.data.installmentDownPayment),
+                };
+                let summary = resp.data.summary;
+                let selected_request = resp.data.detail;
+                selected_request.forEach(item => {
+                    item.SupplierPrice = parseFloat(item.SupplierPrice)
+                    item.DiskonAmount = parseFloat(item.DiskonAmount)
+                });
+
+                context.dispatch('orderAsset/listingGudang', resp.data.branchID, { root: true });
+
+                context.commit('update_form_kontrak', formKontrak);
+                context.commit('orderAsset/update_form_order_asset', formOrder, { root: true });
+                context.commit('orderAsset/update_selected_request_asset', selected_request, { root: true });
+                context.commit('orderAsset/update_summary_order', summary, { root: true });
+                context.commit('common/update_selected_orderaset', resp.data, { root: true });
+
+                context.dispatch('orderAsset/recalculateOrderSummary', {}, { root: true });
+                context.commit('orderAsset/update_dialog_create_order', true, { root: true });
+            } catch (error) {
+                const snac = { color: 'error', msg: error.message, state: true };
+                context.commit("common/update_snackbar", snac, { root: true });
+            }
+        }
+    }
 }

test/vuex/acc-one-po-asset/modules/order-asset.js

@@ -1,3 +1,5 @@
+import * as api from '../api/api.js';
+
 export default {
     namespaced: true,
     state: {
@@ -8,13 +10,32 @@ export default {
             supplierID: "",
             reference: "",
             branchID: "",
-            typepajak: "persen",
+            gudangID: "",
+            typepajak: "percent",
             valuepajak: 0,
-            typediskon: "persen",
-            valuediskon: 0
+            typediskon: "percent",
+            valuediskon: 0,
+            catatan: ""
         },
         list_supplier: [],
-        list_cabang: []
+        list_cabang: [],
+        list_gudang: [],
+
+        /* item request */
+        dialog_select_asset: false,
+        requested_asset: {
+            records: [],
+            total: 0,
+        },
+        selected_request_asset: [],
+        summary_order: {
+            subtotal: 0,
+            diskon: 0,
+            pajak: 0,
+            downpayment: 0,
+            total_before_downpayment: 0,
+            total: 0
+        }
     },
     mutations: {
         update_dialog_create_order(state, val) {
@@ -28,9 +49,176 @@ export default {
         },
         update_list_cabang(state, val) {
             state.list_cabang = val
+        },
+        update_list_gudang(state, val) {
+            state.list_gudang = val
+        },
+        update_dialog_select_asset(state, val) {
+            state.dialog_select_asset = val
+        },
+        update_requested_asset(state, val) {
+            state.requested_asset = val
+        },
+        update_selected_request_asset(state, val) {
+            state.selected_request_asset = val
+        },
+        update_summary_order(state, val) {
+            state.summary_order = val
         }
     },
     actions: {
+        async listingCabang(context) {
+            try {
+                let param = { token: one_token() }
 
+                const resp = await api.getListCabang(param);
+                if (resp.status != "OK") {
+                    throw new Error(resp.message);
+                }
+
+                context.commit('update_list_cabang', resp.data);
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("common/update_snackbar", snac, { root: true });
+            }
+        },
+        async listingGudang(context, branchID) {
+            try {
+                let param = {
+                    token: one_token(),
+                    M_BranchID: branchID
+                }
+
+                const resp = await api.getListGudang(param);
+                if (resp.status != "OK") {
+                    throw new Error(resp.message);
+                }
+
+                context.commit('update_list_gudang', resp.data);
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("common/update_snackbar", snac, { root: true });
+            }
+        },
+        async listingSupplier(context) {
+            try {
+                const params = { token: one_token() };
+                const resp = await api.getListSupplier(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                context.commit('update_list_supplier', resp.data);
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("update_snackbar", snac, { root: true });
+            }
+        },
+        async searchItemRequest(context, keyword) {
+            try {
+                const form = context.state.form_order_asset;
+                const params = {
+                    token: one_token(),
+                    search: keyword,
+                    branchID: form.branchID,
+                    supplierID: form.supplierID
+                };
+                const resp = await api.searchRequestAset(params);
+                if (resp.status != 'OK') {
+                    throw new Error(resp.message);
+                }
+
+                context.commit('update_requested_asset', resp.data)
+            } catch (e) {
+                const snac = { color: 'error', msg: e.message, state: true };
+                context.commit("update_snackbar", snac, { root: true });
+            }
+        },
+        async recalculateOrderSummary(context) {
+            const formOrder = context.state.form_order_asset;
+            const formKontrak = context.rootState.kontrakAsset.form_kontrak;
+            const items = JSON.parse(JSON.stringify(context.state.selected_request_asset));
+
+            const calculatedItems = items.map(item => {
+                const supplierPrice = parseCurrency(item.SupplierPrice);
+                const requestQty = item.detail.reduce((sum, detail) => {
+                    return sum + parseCurrency(detail.RequestQty);
+                }, 0);
+
+                let itemDiscount = 0;
+
+                if (item.DiskonType == 'P') {
+                    itemDiscount = supplierPrice * parseCurrency(item.DiskonAmount) / 100;
+                } else {
+                    itemDiscount = parseCurrency(item.DiskonAmount);
+                }
+
+                const endPrice = Math.max(supplierPrice - itemDiscount, 0);
+                const tempTotal = requestQty * endPrice;
+
+                return {
+                    ...item,
+                    RequestQty: requestQty,
+                    EndPrice: endPrice,
+                    TempTotal: tempTotal,
+                    detail: item.detail.map(detail => ({
+                        ...detail,
+                        SupplierPrice: supplierPrice
+                    }))
+                };
+            });
+
+            const subtotal = calculatedItems.reduce((sum, item) => {
+                return sum + parseCurrency(item.TempTotal);
+            }, 0);
+
+            const diskon = calculateByType(
+                formOrder.typediskon,
+                formOrder.valuediskon,
+                subtotal
+            );
+            const subtotalAfterDiskon = Math.max(subtotal - diskon, 0);
+
+            const pajak = calculateByType(
+                formOrder.typepajak,
+                formOrder.valuepajak,
+                subtotalAfterDiskon
+            );
+            const totalBeforeDownpayment = subtotalAfterDiskon + pajak;
+
+            const downpayment = calculateByType(
+                formKontrak.type_downpayment,
+                formKontrak.besarNilai_downpayment,
+                totalBeforeDownpayment
+            );
+
+            const total = Math.max(totalBeforeDownpayment - downpayment, 0);
+
+            context.commit('update_selected_request_asset', calculatedItems);
+            context.commit('update_summary_order', {
+                subtotal: subtotal,
+                diskon: diskon,
+                pajak: pajak,
+                downpayment: downpayment,
+                total_before_downpayment: totalBeforeDownpayment,
+                total: total
+            });
+        }
     }
 }
+
+function parseCurrency(value) {
+    let cleanValue = String(value || 0).replace(/\./g, '');
+    cleanValue = cleanValue.replace(',', '.');
+    return parseFloat(cleanValue) || 0;
+}
+
+function calculateByType(type, value, base) {
+    const amount = parseCurrency(value);
+
+    if (type == 'percent') {
+        return base * amount / 100;
+    }
+
+    return amount;
+}

test/vuex/acc-one-po-asset/modules/poasset.js

@@ -1,179 +0,0 @@
-import * as api from '../api/api.js';
-
-export default {
-    namespaced: true,
-    state: {
-        /* common */
-        snackbar: {
-            color: 'success',
-            msg: '',
-            state: false
-        },
-        loading_process: false,
-        selected_orderaset: {},
-
-        /* main layout */
-        filterpo: {
-            startdate: moment(new Date()).format('YYYY-MM-DD'),
-            enddate: moment(new Date()).format('YYYY-MM-DD'),
-            status: 'All',
-            search: ''
-        },
-        list_status: ['All', 'Draft', 'Pending', 'Approved', 'Rejected', 'Completed'],
-        list_asetpo: {
-            records: [],
-            total: 0
-        },
-        currpage: 1,
-
-        /* form order aset */
-        dialog_form_orderaset: false,
-        list_supplier: [],
-        list_branch: [],
-        form_orderaset: {
-            podate: moment(new Date()).format('YYYY-MM-DD'),
-            supplierID: "",
-            reference: "",
-            branchcode: "",
-            typepajak: "persen",
-            valuepajak: 0,
-            typediskon: "persen",
-            valuediskon: 0
-        },
-        item_orderaset: [],
-        summary_orderaset: {
-            subtotal: 0,
-            diskon: 0,
-            pajak: 0,
-            total: 0
-        },
-
-        dialog_add_itemaset: false,
-        list_requestaset: {
-            records: [],
-            total: 0
-        },
-
-        /* delete order */
-        dialog_deleteorder: false,
-
-        /* attachment */
-        dialog_attachment: false,
-        prview_attachment: [],
-
-    },
-    mutations: {
-        /* common */
-        update_snackbar(state, val) {
-            state.snackbar = val
-        },
-        update_loading_process(state, val) {
-            state.loading_process = val
-        },
-        update_selected_orderaset(state, val) {
-            state.selected_orderaset = val
-        },
-
-        /* main layout */
-        update_filterpo(state, val) {
-            state.filterpo = val
-        },
-        update_list_status(state, val) {
-            state.list_status = val
-        },
-        update_list_asetpo(state, val) {
-            state.list_asetpo = val
-        },
-        update_currpage(state, val) {
-            state.currpage = val
-        },
-
-        /* form order aset */
-        update_dialog_form_orderaset(state, val) {
-            state.dialog_form_orderaset = val
-        },
-        update_list_supplier(state, val) {
-            state.list_supplier = val
-        },
-        update_list_branch(state, val) {
-            state.list_branch = val
-        },
-        update_form_orderaset(state, val) {
-            state.form_orderaset = val
-        },
-        update_item_orderaset(state, val) {
-            state.item_orderaset = val
-        },
-        update_summary_orderaset(state, val) {
-            state.summary_orderaset = val
-        },
-        update_dialog_add_itemaset(state, val) {
-            state.dialog_add_itemaset = val
-        },
-        update_list_requestaset(state, val) {
-            state.list_requestaset = val
-        },
-
-        /* delete order */
-        update_dialog_deleteorder(state, val) {
-            state.dialog_deleteorder = val
-        },
-
-        /* attachment */
-        update_dialog_attachment(state, val) {
-            state.dialog_attachment = val
-        },
-        update_prview_attachment(state, val) {
-            state.prview_attachment = val
-        }
-    },
-    actions: {
-        async lookupVendor(context) {
-            try {
-                const resp = await api.getListSupplier({token: one_token()});
-                if (resp.status != 'OK') {
-                    throw new Error(resp.message);
-                } else {
-                    context.commit('update_list_supplier', resp.data)
-                }
-            } catch (error) {
-                let snac = {color: 'error', msg: error.message, state: true}
-                context.commit('update_snackbar', snac)
-            }
-        },
-        async lookupCabang(context) {
-            try {
-                const resp = await api.getListCabang({token: one_token()});
-                if (resp.status != 'OK') {
-                    throw new Error(resp.message);
-                }
-
-                context.commit('update_list_branch', resp.data)
-            } catch (error) {
-                let snac = {color: 'error', msg: error.message, state: true}
-                context.commit('update_snackbar', snac)
-            }
-        },
-        async lookupOrderRequest(context, keyword) {
-            try {
-                const form = context.state.form_orderaset
-                let param = {
-                    token: one_token(),
-                    branchcode: form.branchcode,
-                    search: keyword,
-                    currpage: 1,
-                    supplierID: form.supplierID
-                }
-                const resp = await api.searchRequestAset(param)
-                if (resp.status != 'OK') {
-                    throw new Error(resp.message);
-                }
-
-                context.commit('update_list_requestaset', resp.data)
-            } catch (error) {
-                let snac = {color: 'error', msg: error.message, state: true}
-                context.commit('update_snackbar', snac)
-            }
-        }
-    }
-}

test/vuex/acc-one-po-asset/store.js

@@ -1,11 +1,12 @@
 import system from "../../../apps/modules/system/system.js";
+import common from "./modules/common.js";
 import kontrakAsset from "./modules/kontrak-asset.js";
 import orderAsset from "./modules/order-asset.js";
-import poasset from "./modules/poasset.js";
+
 export const store = new Vuex.Store({
     modules: {
         system: system,
-        poasset: poasset,
+        common: common,
         kontrakAsset: kontrakAsset,
         orderAsset: orderAsset
     },