Initial import
This commit is contained in:
sas.fajri
139
mockup/fo/fo01/components/listBankComponent.js
Normal file
139
mockup/fo/fo01/components/listBankComponent.js
Normal file
@@ -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 };
|
||||
139
mockup/fo/fo01/components/listPatientComponent.js
Normal file
139
mockup/fo/fo01/components/listPatientComponent.js
Normal file
@@ -0,0 +1,139 @@
|
||||
var listPatientComponent = {
|
||||
template: `
|
||||
<v-card class="xs12 md12" >
|
||||
<v-card-title>
|
||||
<v-layout>
|
||||
<v-flex xs12 sm8>
|
||||
<v-toolbar-title>PATIENT LISTING
|
||||
</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="patients"
|
||||
:loading="isLoading"
|
||||
hide-actions class="elevation-1">
|
||||
<template slot="items" slot-scope="props">
|
||||
<td class="text-xs-center">{{ props.item.mr }}</td>
|
||||
<td>{{ props.item.name }}</td>
|
||||
<td>{{ props.item.address }}</td>
|
||||
<td>{{ props.item.sex }}</td>
|
||||
<td><v-btn depressed small color="success">PROCESS</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: "MR",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "mr"
|
||||
},
|
||||
{
|
||||
text: "NAME",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "name"
|
||||
},
|
||||
{
|
||||
text: "ADDRESS",
|
||||
value: "address",
|
||||
sortable: false,
|
||||
align: "left",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
text: "SEX",
|
||||
value: "sex",
|
||||
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("searchPatient", {
|
||||
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,
|
||||
patients: state => state.rows,
|
||||
totalRecord: state => state.totalRecord,
|
||||
page: state => state.page,
|
||||
totalPage: state => state.totalPage
|
||||
})
|
||||
},
|
||||
updated() {
|
||||
console.log("Component Updated");
|
||||
}
|
||||
};
|
||||
|
||||
export { listPatientComponent };
|
||||
38
mockup/fo/fo01/components/smartNavbarComponent.js
Normal file
38
mockup/fo/fo01/components/smartNavbarComponent.js
Normal file
@@ -0,0 +1,38 @@
|
||||
var smartNavbarComponent = {
|
||||
template: `
|
||||
<span>
|
||||
<v-navigation-drawer v-model="drawer" fixed app>
|
||||
<v-list dense>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon>home</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Home</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
<v-list-tile>
|
||||
<v-list-tile-action>
|
||||
<v-icon>contact_mail</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title>Contact</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-toolbar color="indigo" dark fixed app>
|
||||
<v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
|
||||
<v-toolbar-title>SAMPLING</v-toolbar-title>
|
||||
</v-toolbar>
|
||||
</span>
|
||||
`,
|
||||
data: function() {
|
||||
return {
|
||||
drawer: false
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
|
||||
export { smartNavbarComponent };
|
||||
Reference in New Issue
Block a user