add modules folder based on s_menu

test/vuex/acc-one-md-periode/components/listing.vue

@@ -0,0 +1,125 @@
+<template>
+    <v-layout class="fill-height" column>
+        <v-card>
+            <v-layout row>
+                <v-flex xs-12 pl-2 pr-2 pt-2 pb-2>
+                    <v-data-table :headers="headers" :items="l_periode" :loading="isLoading" :pagination.sync="pagination" class="elevation-1">
+                        <template slot="items" slot-scope="props">
+                            <tr :class="{'amber lighten-4':isSelected(props.item)}" @click="selectPeriode(props.item)">
+                                <td class="text-xs-center pa-2">{{ props.item.periodeID }}</td>
+                                <td class="text-xs-center pa-2">{{ props.item.periodeName }}</td>
+                                <td class="text-xs-center pa-2">{{ props.item.periodeStartDate }}</td>
+                                <td class="text-xs-center pa-2">{{ props.item.periodeEndDate }}</td>
+                                <td v-if="props.item.periodeIsClosed === 'Y'" class="text-xs-center pa-2">YA</td>
+                                <td v-else class="text-xs-center pa-2">TIDAK</td>
+                            </tr>
+                        </template>
+                        <template>
+                            <div class="text-xs-center">
+                                <v-pagination v-model="page" :length="15" :total-visible="7"></v-pagination>
+                            </div>
+                        </template>
+                    </v-data-table>
+                </v-flex>
+            </v-layout>
+        </v-card>
+    </v-layout>
+</template>
+
+<style scoped>
+    table.v-table tbody td,
+    table.v-table tbody th {
+        height: 40px;
+    }
+
+    table.v-table thead tr {
+        height: 40px;
+    }
+</style>
+
+<script>
+    module.exports =  {
+        mounted() {
+            this.$store.dispatch("periode/getList");
+        },
+        data() {
+            return {
+                page: 1,
+                pagination: {
+                    descending: false,
+                    page: 1,
+                    rowsPerPage: 5,
+                    sortBy: 'periodeID',
+                    totalItems: this.$store.state.periode.total_list,
+                },
+                headers: [
+                    {
+                        text: "NO",
+                        align: "center",
+                        sortable: false,
+                        value: "no",
+                        width: "20%",
+                        class: "pa-2 blue lighten-3 white--text"
+                    },
+                    {
+                        text: "PERIODE",
+                        align: "center",
+                        sortable: false,
+                        value: "no",
+                        width: "20%",
+                        class: "pa-2 blue lighten-3 white--text"
+                    },
+                    {
+                        text: "START DATE",
+                        align: "center",
+                        sortable: false,
+                        value: "no",
+                        width: "20%",
+                        class: "pa-2 blue lighten-3 white--text"
+                    },
+                    {
+                        text: "END DATE",
+                        align: "center",
+                        sortable: false,
+                        value: "no",
+                        width: "20%",
+                        class: "pa-2 blue lighten-3 white--text"
+                    },
+                    {
+                        text: "CLOSED",
+                        align: "center",
+                        sortable: false,
+                        value: "no",
+                        width: "20%",
+                        class: "pa-2 blue lighten-3 white--text"
+                    },
+                ]
+            }
+        },
+        computed: {
+            l_periode() {
+                return this.$store.state.periode.periode;
+            },
+            selected: {
+                get() {
+                    return this.$store.state.periode.selected;
+                },
+                set(data) {
+                    this.$store.commit('periode/update_selected', data)
+                }
+            },
+            isLoading() {
+                return this.$store.state.periode.status_get == 1;
+            }
+        },
+        methods: {
+            isSelected(row) {
+                return row.periodeID == this.$store.state.periode.selected.periodeID
+            },
+            selectPeriode(per) {
+                const selRow = {...per};
+                this.selected = selRow;
+            }
+        },
+    }
+</script>