add layout detail mapping jasa

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

@@ -1,47 +1,50 @@
 <template>
     <div>
         <v-toolbar color="primary" dark>
-            <v-toolbar-title>Detail Account Jasa {{  }}</v-toolbar-title>
+            <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 row wrap>
-                <v-flex xs4 pa-1>
-                    <v-text-field v-model="keyword" hide-details outline
-                        label="Cari" placeholder="Nama Jasa"></v-text-field>
+            <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>
-
-        <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>
     </div>
 </template>
 
 <script>
 module.exports = {
-    components: { },
+    components: {},
     mounted() { },
     data() {
         return {
             keyword: "",
+            edit_state: false,
             headers: [
                 {
                     text: "NO", align: "center", sortable: false, value: "nomor",
@@ -54,8 +57,15 @@ module.exports = {
             ]
         }
     },
-    computed: { },
-    methods: { },
-    watch: { }
+    computed: {},
+    methods: {
+        actEditState() {
+            this.edit_state = true
+        },
+        simpanEdit() {
+            this.edit_state = false
+        }
+    },
+    watch: {}
 }
 </script>