135 lines
4.3 KiB
JavaScript
135 lines
4.3 KiB
JavaScript
var listPatientComponent = {
|
|
template: `
|
|
<v-card class="xs12 md12 mt-2" >
|
|
|
|
<v-data-table :headers="headers" :items="patients"
|
|
:loading="isLoading"
|
|
hide-actions class="elevation-1">
|
|
<template slot="items" slot-scope="props">
|
|
<td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.nolab }}</td>
|
|
<td class="text-xs-left pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.mr }}</td>
|
|
<td class="pa-2" v-bind:class="{'amber lighten-4':props.item.selected}" @click="selectMe(props.item)">{{ props.item.name }}</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: "LAB NUMBER",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "nolab",
|
|
width: "25%",
|
|
class: "pa-2 blue lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "MR",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "mr",
|
|
width: "25%",
|
|
class: "pa-2 blue lighten-3 white--text"
|
|
},
|
|
{
|
|
text: "NAME",
|
|
align: "left",
|
|
sortable: false,
|
|
value: "name",
|
|
class: "pa-2 blue lighten-3 white--text"
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
clearSearch() {
|
|
this.query = "";
|
|
this.doSearch();
|
|
},
|
|
doSearch(page = 1, rowPerPage = 8) {
|
|
if (this.query == null) this.query = "";
|
|
this.$store.dispatch("patient/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);
|
|
},
|
|
|
|
selectMe(item) {
|
|
|
|
this.$store.dispatch('patient/selectMe', item);
|
|
// let rows = this.$store.state.patient.rows;
|
|
|
|
// for (let i in rows) {
|
|
// // console.log(i);
|
|
// rows[i].selected = false;
|
|
// if (i.mr == item.mr) {
|
|
// rows[i].selected = true;
|
|
// }
|
|
|
|
// }
|
|
|
|
// this.$store.state.patient.rows = rows;
|
|
}
|
|
},
|
|
computed: {
|
|
...Vuex.mapState({
|
|
isLoading: state => state.patient.isLoading,
|
|
isError: state => state.patient.isError,
|
|
errorMessage: state => state.patient.errorMessage,
|
|
patients: state => state.patient.rows,
|
|
totalRecord: state => state.patient.totalRecord,
|
|
page: state => state.patient.page,
|
|
totalPage: state => state.patient.totalPage
|
|
}),
|
|
|
|
isSelected() {
|
|
|
|
// for(let i of rows) {
|
|
// if (i.mr == "MR-18107238");
|
|
// return true;
|
|
// }
|
|
|
|
return false;
|
|
}
|
|
},
|
|
updated() {
|
|
console.log("Component Updated");
|
|
}
|
|
};
|
|
|
|
export { listPatientComponent }; |