add layout detail mapping jasa

test/vuex/acc-one-map-jasa-coa/api/api.js

@@ -0,0 +1,40 @@
+const URL = "/one-api/map/ServiceCoaMapping";
+
+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 (error) {
+        return {
+            status: "ERR",
+            message: error.message
+        }
+    }
+}
+
+export async function getListItemJasa(params) {
+    return request("/getListItemJasa", params);
+}
+
+export async function getListCoa(params) {
+    return request("/getListCoa", params);
+}
+
+export async function getListServiceMapping(params) {
+    return request("/getListServiceMapping", params);
+}
+
+export async function insertJasaCoaMapping(params) {
+    return request("/insertJasaCoaMapping", params);
+}
+
+export async function updateJasaCoaMapping(params) {
+    return request("/updateJasaCoaMapping", params);
+}
+
+export async function deleteJasaCoaMapping(params) {
+    return request("/deleteJasaCoaMapping", params);
+}

test/vuex/acc-one-map-jasa-coa/components/left-side.vue

@@ -0,0 +1,110 @@
+<template>
+    <div>
+        <v-toolbar color="primary" dark>
+            <v-toolbar-title>Daftar Jasa</v-toolbar-title>
+            <v-spacer></v-spacer>
+        </v-toolbar>
+        <v-card class="pa-2">
+            <v-layout row wrap>
+                <v-flex xs12 pa-1>
+                    <v-text-field v-model="keyword" hide-details outline
+                        label="Cari" placeholder="Nama Item atau Jasa"></v-text-field>
+                </v-flex>
+            </v-layout>
+        </v-card>
+
+        <v-card class="pa-2 mt-2">
+            <v-data-table :headers="headers" :items="list_coaservice.records"
+                hide-actions class="elevation-1">
+                <template v-slot:items="props">
+                    <tr @click="selectjasa(props.item)" :class="{ 'amber lighten-4': isSelected(props.item) }">
+                        <td class="text-xs-center pa-2">
+                            {{ props.index + 1 }}
+                        </td>
+                        <td class="text-xs-left pa-2">
+                            {{ props.item.M_ItemDesc }}
+                        </td>
+                    </tr>
+                </template>
+            </v-data-table>
+            <v-divider class="my-1"></v-divider>
+            <div class="pa-2 mt-1 text-xs-centar">
+                <v-pagination v-model="currpage" :length="pagelength" :total-visible="5"></v-pagination>
+            </div>
+        </v-card>
+
+        <v-snackbar v-model="snackbar.state" multi-line top :timeout="3000" :color="snackbar.color">
+            {{ snackbar.mssg }}
+            <v-btn class="pa-2" round flat @click="snackbar.state = false">Tutup</v-btn>
+        </v-snackbar>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    components: { },
+    mounted() { },
+    data() {
+        return {
+            keyword: "",
+            headers: [
+                {
+                    text: "NO", align: "center", sortable: false, value: "nomor",
+                    width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "NAMA JASA", align: "center", sortable: false, value: "name",
+                    width: "80%", class: "pa-1 blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {
+        snackbar: {
+            get() {
+                return this.$store.state.service.snackbar
+            },
+            set(val) {
+                this.$store.commit("service/update_snackbar", val)
+            }
+        },
+        currpage: {
+            get() {
+                return this.$store.state.service.currpage
+            },
+            set(val) {
+                this.$store.commit("service/update_currpage", val)
+            }
+        },
+        selected_jasa: {
+            get() {
+                return this.$store.state.service.selected_jasa
+            },
+            set(val) {
+                this.$store.commit("service/update_selected_jasa", val)
+            }
+        },
+        list_coaservice() {
+            return this.$store.state.service.list_coaservice
+        },
+        pagelength() {
+            const total = this.list_coaservice.total;
+            if (total === undefined || total <= 1) return 1;
+            return Math.ceil(total / 10);
+        }
+    },
+    methods: {
+        selectjasa(item) {
+            this.selected_jasa = item
+        },
+        isSelected(item) {
+            return item.M_ItemID == this.selected_jasa.M_ItemID
+        }
+    },
+    watch: {
+        keyword(newval, oldval) {
+            if (newval == oldval) return;
+        }
+    }
+}
+</script>

test/vuex/acc-one-map-jasa-coa/components/right-side.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        <v-toolbar color="primary" dark>
+            <v-toolbar-title>Detail Account Jasa {{ }}</v-toolbar-title>
+            <v-spacer></v-spacer>
+            <v-btn v-show="!edit_state" icon @click="actEditState()">
+                <v-icon>edit</v-icon>
+            </v-btn>
+        </v-toolbar>
+        <v-card class="pa-2">
+            <v-layout v-if="!edit_state" row wrap>
+                <v-flex xs12 pa-1>
+                    <h2>Setting Akun Jasa</h2>
+                </v-flex>
+                <v-flex xs6 pa-1>
+                    <strong>Akun Item Jasa: </strong> <br>
+                    {{ "-" }} <br>
+                    {{ "-" }} <br>
+                </v-flex>
+                <v-flex xs6 pa-1>
+                    <strong>Akun Item Jasa Hutang: </strong> <br>
+                    {{ "-" }} <br>
+                    {{ "-" }} <br>
+                </v-flex>
+            </v-layout>
+            <v-layout v-else row wrap>
+                <v-flex xs12 pa-1 text-xs-right>
+                    <v-btn @click="edit_state = false" color="error" class="white--text">
+                        Batal
+                    </v-btn>
+                    <v-btn @click="simpanEdit()" color="primary" class="white--text">
+                        Simpan
+                    </v-btn>
+                </v-flex>
+            </v-layout>
+        </v-card>
+    </div>
+</template>
+
+<script>
+module.exports = {
+    components: {},
+    mounted() { },
+    data() {
+        return {
+            keyword: "",
+            edit_state: false,
+            headers: [
+                {
+                    text: "NO", align: "center", sortable: false, value: "nomor",
+                    width: "20%", class: "pa-1 blue lighten-3 white--text",
+                },
+                {
+                    text: "NAMA JASA", align: "center", sortable: false, value: "name",
+                    width: "80%", class: "pa-1 blue lighten-3 white--text",
+                },
+            ]
+        }
+    },
+    computed: {},
+    methods: {
+        actEditState() {
+            this.edit_state = true
+        },
+        simpanEdit() {
+            this.edit_state = false
+        }
+    },
+    watch: {}
+}
+</script>

test/vuex/acc-one-map-jasa-coa/index.php

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <link rel="stylesheet" href="../../../libs/vendor/css/google-fonts.css">
+        <link rel="stylesheet" href="../../../libs/vendor/css/icomoon-fonts.css">
+        <link rel="stylesheet" href="../../../libs/vendor/css/vuetify.min.css">
+        <title>ONE | coa mapping jasa</title>
+    </head>
+    <body>
+        <div v-cloak id="app">
+            <v-app id="smartApp">
+                <one-navbar></one-navbar>
+                <v-content style="background: #F5E8DF!important">
+                    <v-container fluid fill-height class="px-1 py-2">
+                        <v-flex xs4 class="left" fill-height pa-1>
+                            <one-left></one-left>
+                        </v-flex>
+                        <v-flex xs8 class="right" fill-height pa-1>
+                            <one-right></one-right>
+                        </v-flex>
+                    </v-container>
+                </v-content>
+                <one-footer></one-footer>
+            </v-app>
+        </div>
+
+        <!-- Vendor -->
+        <script src="../../../libs/vendor/moment.min.js"></script>
+        <script src="../../../libs/vendor/numeral.min.js"></script>
+        <script src="../../../libs/vendor/moment-locale-id.js"></script>
+        <script src="../../../libs/vendor/lodash.js"></script>
+        <script src="../../../libs/vendor/axios.min.js"></script>
+        <script src="../../../libs/vendor/vue.js"></script>
+        <script src="../../../libs/vendor/vuex.js"></script>
+        <script src="../../../libs/vendor/vuetify.js"></script>
+        <script src="../../../libs/vendor/httpVueLoader.js"></script>
+        <script src="../../../libs/one_global.js"></script>
+
+        <script type="module">
+            import { store } from "./store.js";
+            window.store = store;
+            new Vue({
+                store,
+                el: "#app",
+                methods: {},
+                components: {
+                    'one-navbar': httpVueLoader('../../../apps/components/oneNavbarComponent.vue'),
+                    'one-footer': httpVueLoader('../../../apps/components/oneFooter.vue'),
+                    'one-left': httpVueLoader('./components/left-side.vue'),
+                    'one-right': httpVueLoader('./components/right-side.vue')
+                }
+            })
+        </script>
+        <style>
+            [v-cloak] {
+                display: true
+            }
+        </style>
+    </body>
+</html>

test/vuex/acc-one-map-jasa-coa/modules/service.js

@@ -0,0 +1,26 @@
+export default {
+    namespaced: true,
+    state: {
+        snackbar: {
+            state: false,
+            mssg: "",
+            color: "error"
+        },
+        loading_process: false,
+        list_coaservice: []
+    },
+    mutations: {
+        update_snackbar(state, val) {
+            state.snackbar = val
+        },
+        update_loading_process(state, val) {
+            state.loading_process = val
+        },
+        update_list_coaservice(state, val) {
+            state.list_coaservice = val
+        }
+    },
+    actions: {
+
+    }
+}

test/vuex/acc-one-map-jasa-coa/store.js

@@ -0,0 +1,12 @@
+import system from "../../../apps/modules/system/system.js";
+import service from "./modules/service.js";
+
+export const store = new Vuex.Store({
+    modules: {
+        system: system,
+        service: service
+    },
+    state: {},
+    mutations: {},
+    actions: {}
+})