Initial import

mockup/fo/fo01/components/listBankComponent.js

@@ -0,0 +1,139 @@
+var listPatientComponent = {
+    template: `
+  <v-card class="xs12 md12" >
+    <v-card-title>
+      <v-layout>
+        <v-flex xs12 sm8>
+          <v-toolbar-title>Bank Listing <v-btn depressed small  color="primary">New Data</v-btn></v-toolbar-title>
+        </v-flex>
+        <v-flex xs12 sm4>
+          <v-spacer></v-spacer>
+          <v-text-field
+            v-model="query"
+            append-icon="search"
+            @click:clear="clearSearch"
+            @keydown.enter="doSearch"
+            @click:append="doSearch"
+            label="Search"
+            single-line
+            hide-details
+            clearable
+            class="xs12 md3"
+          ></v-text-field>
+        </v-flex>
+      </v-layout>
+    </v-card-title>
+    <v-data-table :headers="headers" :items="banks" 
+    :loading="isLoading"
+    hide-actions class="elevation-1">
+      <template slot="items" slot-scope="props">
+        <td class="text-xs-center">{{ props.item.M_BankCode }}</td>
+        <td>{{ props.item.M_BankName }}</td>
+        <td>{{ props.item.M_BankAddress }}</td>
+        <td>{{ props.item.M_BankBranch }}</td>
+        <td><v-btn depressed  small color="info">Edit</v-btn> <v-btn depressed  small color="error">Delete</v-btn></td>
+      </template>
+      <template slot="no-data">
+        <v-alert :value="isError" color="error" icon="warning">
+          {{errorMessage}}
+        </v-alert>
+        <v-spacer></v-spacer>
+      </template>
+      <template slot="footer">
+        <td colspan="2" class="text-xs-left">
+          Total Records : {{totalRecord}}, page {{page}} of {{totalPage}}.
+        </td>
+        <td colspan="3" class="text-xs-right">
+            <v-pagination :length="totalPage" :value="page" :total-visible="10" 
+            @next="nextPage" @prev="prevPage" 
+            @input="gotoPage" >
+            </v-pagination>
+        </td>
+      </template>
+    </v-data-table>
+  </v-card>
+  `,
+    mounted() {
+        this.doSearch();
+    },
+    data() {
+        return {
+            query: "",
+            headers: [{
+                    text: "Code",
+                    align: "left",
+                    sortable: false,
+                    value: "M_BankCode"
+                },
+                {
+                    text: "Name",
+                    align: "left",
+                    sortable: false,
+                    value: "M_BankName"
+                },
+                {
+                    text: "Address",
+                    value: "M_BankAddress",
+                    sortable: false,
+                    align: "left",
+                    width: "30%"
+                },
+                {
+                    text: "Branch",
+                    value: "M_BankBranch",
+                    sortable: false,
+                    align: "left"
+                },
+                {
+                    text: "Action",
+                    value: "action",
+                    sortable: false,
+                    align: "center",
+                    width: "20%"
+                }
+            ]
+        };
+    },
+    methods: {
+        clearSearch() {
+            this.query = "";
+            this.doSearch();
+        },
+        doSearch(page = 1, rowPerPage = 8) {
+            if (this.query == null) this.query = "";
+            this.$store.dispatch("searchBank", {
+                query: this.query,
+                page,
+                rowPerPage
+            });
+        },
+        prevPage() {
+            let c_page = this.page - 1;
+            this.doSearch(c_page);
+        },
+        nextPage() {
+            let c_page = this.page + 1;
+            this.doSearch(c_page);
+        },
+        gotoPage(e) {
+            let c_page = e;
+            this.doSearch(c_page);
+        }
+    },
+    computed: {
+        ...Vuex.mapState({
+            isLoading: state => state.isLoading,
+            isError: state => state.isError,
+            errorMessage: state => state.errorMessage,
+            banks: state => state.rows,
+            totalRecord: state => state.totalRecord,
+            page: state => state.page,
+            totalPage: state => state.totalPage
+        })
+    },
+    updated() {
+        console.log("Component Updated");
+    }
+};
+
+export { listBankComponent };