Initial import
This commit is contained in:
sas.fajri
74
mockup/fo/fo01/api.js
Normal file
74
mockup/fo/fo01/api.js
Normal file
@@ -0,0 +1,74 @@
|
||||
// API :
|
||||
// search bank
|
||||
// paramater : query , page , rowPerPage
|
||||
const URL =
|
||||
"http://lebaran.aplikasi.web.id/smartlab_api/vuex/t02/search_bank";
|
||||
|
||||
// export async function searchBank(query, page, rowPerPage = 15) {
|
||||
// try {
|
||||
// var resp = await axios.post(URL, {
|
||||
// query: query,
|
||||
// page: page,
|
||||
// rowPerPage: rowPerPage
|
||||
// });
|
||||
// if (resp.status != 200) {
|
||||
// return {
|
||||
// status: "ERR",
|
||||
// query: query,
|
||||
// message: resp.statusText
|
||||
// };
|
||||
// }
|
||||
// let data = resp.data;
|
||||
// data.query = query;
|
||||
// return data;
|
||||
// } catch (e) {
|
||||
// return {
|
||||
// status: "ERR",
|
||||
// query: query,
|
||||
// message: e.message
|
||||
// };
|
||||
// }
|
||||
// }
|
||||
|
||||
export async function searchPatient(query, page, rowPerPage = 15) {
|
||||
try {
|
||||
if (page == 1) {
|
||||
return {
|
||||
query:query,
|
||||
rows:[
|
||||
{"mr": "MR-18107237", "name": "Pasien Umum", "sex": "Perempuan", "address": "Klero\r\nKabupaten Semarang", "action":""},
|
||||
{"mr": "MR-18107238", "name": "Heri Suryawan", "sex": "Laki - laki", "address": "Ampel", "action":""},
|
||||
{"mr": "MR-18107239", "name": "LUKA MODRIC", "sex": "Laki - laki", "address": "Jl. Raya No 1", "action":""},
|
||||
{"mr": "MR-18107247", "name": "Tyas Medika Pranandita", "sex": "Laki - laki", "address": "KP. Karangpanas", "action":""},
|
||||
{"mr": "MR-18107248", "name": "Astrid", "sex": "Perempuan", "address": "Jl. Ketintang Raya No.81", "action":""},
|
||||
{"mr": "MR-18107249", "name": "Happy", "sex": "Perempuan", "address": "Karangpanas", "action":""},
|
||||
{"mr": "MR-18107251", "name": "Juan Alexis Sukir", "sex": "Laki - laki", "address": "Jl. Sawi", "action":""},
|
||||
{"mr": "MR-18107252", "name": "Alexander Wang", "sex": "Laki - laki", "address": "Jl. Mangga Muda No. 7", "action":""},
|
||||
{"mr": "MR-18107253", "name": "CILA CILANI", "sex": "Perempuan", "address": "Jl. Duren PInang No. 67", "action":""},
|
||||
{"mr": "MR-18107254", "name": "Untung Suropati", "sex": "Laki - laki", "address": "Pasar Kapling Semarang", "action":""}
|
||||
],
|
||||
page:1,
|
||||
totalPage:2,
|
||||
totalRecord:11,
|
||||
midPages:1
|
||||
}
|
||||
} else if (page == 2) {
|
||||
return {
|
||||
query:query,
|
||||
rows:[
|
||||
{"mr": "MR-18107255", "name": "M. Althaf Prawira Ananta", "sex": "Laki - laki", "address": "KP Karangpanas No 11", "action":""}
|
||||
],
|
||||
page:2,
|
||||
totalPage:2,
|
||||
totalRecord:11,
|
||||
midPages:1
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
return {
|
||||
status: "ERR",
|
||||
query: query,
|
||||
message: e.message
|
||||
};
|
||||
}
|
||||
}
|
||||
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 };
|
||||
127
mockup/fo/fo01/index.php
Normal file
127
mockup/fo/fo01/index.php
Normal file
@@ -0,0 +1,127 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>ONE</title>
|
||||
<link rel="stylesheet" href="../../../libs/vendor/css/google-fonts.css">
|
||||
<link rel="stylesheet" href="../../../libs/vendor/css/vuetify.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div v-cloak id="app">
|
||||
<v-app id="smartApp">
|
||||
<smart-navbar></smart-navbar>
|
||||
<v-content>
|
||||
|
||||
<v-container fluid fill-height style="height:inherit" pa-2>
|
||||
<v-layout v-bind="binding">
|
||||
|
||||
|
||||
<v-flex>
|
||||
<template>
|
||||
<v-tabs
|
||||
centered
|
||||
color="cyan"
|
||||
dark
|
||||
fixed-tabs
|
||||
>
|
||||
<v-tabs-slider color="yellow"></v-tabs-slider>
|
||||
|
||||
<v-tab href="#tab-1">
|
||||
<v-icon>list</v-icon> PATIENT LIST
|
||||
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="../fo02">
|
||||
<v-icon>opacity</v-icon> SAMPLING
|
||||
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="../fo03">
|
||||
<v-icon>verified_user</v-icon> SAMPLE VERIFICATION
|
||||
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="../fo03">
|
||||
<v-icon>motorcycle</v-icon> SAMPLE DISTRIBUTION
|
||||
|
||||
</v-tab>
|
||||
|
||||
<!-- <v-tab-item
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
:value="'tab-' + i"
|
||||
> -->
|
||||
<!-- <v-card flat>
|
||||
<v-card-text>{{ text }}</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item> -->
|
||||
</v-tabs>
|
||||
</template>
|
||||
</v-flex>
|
||||
|
||||
<v-flex>
|
||||
<list-patient fill-height></list-patient>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
</v-container>
|
||||
</v-content>
|
||||
<v-footer color="indigo" app>
|
||||
<span class="white--text">© 2017</span>
|
||||
</v-footer>
|
||||
</v-app>
|
||||
</div>
|
||||
|
||||
<!-- Vendor -->
|
||||
<script src="../../../libs/vendor/axios.min.js"></script>
|
||||
<script src="../../../libs/vendor/vue.js"></script>
|
||||
<script src="../../../libs/vendor/vuex.js"></script>
|
||||
<script src="../../../libs/vendor/vuetify.js"></script>
|
||||
<!-- App Script -->
|
||||
<?php
|
||||
$ts = "?ts=" . Date("ymdhis");
|
||||
?>
|
||||
<script type="module">
|
||||
import { store } from './store.js<?php echo $ts ?>';
|
||||
import { smartNavbarComponent } from './components/smartNavbarComponent.js<?php echo $ts ?>';
|
||||
import { listPatientComponent } from './components/listPatientComponent.js<?php echo $ts ?>';
|
||||
// import { dialogFormComponent } from './components/dialogFormComponent.js<?php echo $ts ?>';
|
||||
//for testing
|
||||
// window.store = store;
|
||||
|
||||
new Vue({
|
||||
store,
|
||||
el: '#app',
|
||||
components: {
|
||||
'smart-navbar': smartNavbarComponent,
|
||||
'list-patient': listPatientComponent,
|
||||
// 'dialog-form':dialogFormComponent
|
||||
},
|
||||
data: {
|
||||
drawer: false,
|
||||
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
|
||||
},
|
||||
|
||||
computed : {
|
||||
binding () {
|
||||
const binding = {}
|
||||
|
||||
if (this.$vuetify.breakpoint.mdAndUp) binding.column = true
|
||||
|
||||
return binding
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
71
mockup/fo/fo01/store.js
Normal file
71
mockup/fo/fo01/store.js
Normal file
@@ -0,0 +1,71 @@
|
||||
// State
|
||||
// data ...
|
||||
// Mutations
|
||||
//
|
||||
//
|
||||
// Actions
|
||||
import * as api from "./api.js";
|
||||
|
||||
export const store = new Vuex.Store({
|
||||
state: {
|
||||
rows: [],
|
||||
midPages: [],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
errorMessage: "",
|
||||
query: "",
|
||||
page: 1,
|
||||
totalPage: 2,
|
||||
totalRecord: 11
|
||||
},
|
||||
mutations: {
|
||||
updatePatient(state, data) {
|
||||
// console.log(data);
|
||||
if (data.status == "ERR") {
|
||||
state.isError = true;
|
||||
if (data.db_error) {
|
||||
state.errorMessage = data.db_error.message;
|
||||
} else {
|
||||
state.errorMessage = data.message;
|
||||
}
|
||||
state.query = data.query;
|
||||
state.page = 0;
|
||||
state.totalPage = 0;
|
||||
state.totalRecord = 0;
|
||||
state.rows = [];
|
||||
state.midPages = [];
|
||||
} else {
|
||||
state.isError = false;
|
||||
state.errorMessage = "";
|
||||
state.query = data.query;
|
||||
state.page = data.page;
|
||||
state.totalPage = data.totalPage;
|
||||
state.totalRecord = data.totalRecord;
|
||||
state.rows = data.rows;
|
||||
state.midPages = data.midPages;
|
||||
}
|
||||
},
|
||||
updateLoading(state, flag) {
|
||||
state.isLoading = flag;
|
||||
},
|
||||
resetError(state) {
|
||||
state.isError = false;
|
||||
state.errorMessage = "";
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
async searchPatient(context, data) {
|
||||
context.commit("updateLoading", true);
|
||||
let resp = await api.searchPatient(
|
||||
data.query,
|
||||
data.page,
|
||||
data.rowPerPage
|
||||
);
|
||||
context.commit("updateLoading", false);
|
||||
context.commit("updatePatient", resp);
|
||||
setTimeout(function() {
|
||||
context.commit("resetError");
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
});
|
||||
118
mockup/fo/fo02/api.js
Normal file
118
mockup/fo/fo02/api.js
Normal file
@@ -0,0 +1,118 @@
|
||||
// API :
|
||||
// search bank
|
||||
// paramater : query , page , rowPerPage
|
||||
const URL =
|
||||
"http://lebaran.aplikasi.web.id/smartlab_api/vuex/t02/search_bank";
|
||||
|
||||
// export async function searchBank(query, page, rowPerPage = 15) {
|
||||
// try {
|
||||
// var resp = await axios.post(URL, {
|
||||
// query: query,
|
||||
// page: page,
|
||||
// rowPerPage: rowPerPage
|
||||
// });
|
||||
// if (resp.status != 200) {
|
||||
// return {
|
||||
// status: "ERR",
|
||||
// query: query,
|
||||
// message: resp.statusText
|
||||
// };
|
||||
// }
|
||||
// let data = resp.data;
|
||||
// data.query = query;
|
||||
// return data;
|
||||
// } catch (e) {
|
||||
// return {
|
||||
// status: "ERR",
|
||||
// query: query,
|
||||
// message: e.message
|
||||
// };
|
||||
// }
|
||||
// }
|
||||
|
||||
async function searchPatient(query, page, rowPerPage = 15) {
|
||||
try {
|
||||
if (page == 1) {
|
||||
return {
|
||||
query:query,
|
||||
rows:[
|
||||
{"nolab":"1902010001", "mr": "MR-18107237", "name": "Pasien Umum", "sex": "Perempuan", "address": "Klero\r\nKabupaten Semarang", "action":"", "selected":false},
|
||||
{"nolab":"1902010002", "mr": "MR-18107238", "name": "Heri Suryawan", "sex": "Laki - laki", "address": "Ampel", "action":"", "selected":false},
|
||||
{"nolab":"1902010003", "mr": "MR-18107239", "name": "LUKA MODRIC", "sex": "Laki - laki", "address": "Jl. Raya No 1", "action":"", "selected":false},
|
||||
{"nolab":"1902010004", "mr": "MR-18107247", "name": "Tyas Medika Pranandita", "sex": "Laki - laki", "address": "KP. Karangpanas", "action":"", "selected":false},
|
||||
{"nolab":"1902010005", "mr": "MR-18107248", "name": "Astrid", "sex": "Perempuan", "address": "Jl. Ketintang Raya No.81", "action":"", "selected":false},
|
||||
{"nolab":"1902010006", "mr": "MR-18107249", "name": "Happy", "sex": "Perempuan", "address": "Karangpanas", "action":"", "selected":false},
|
||||
{"nolab":"1902010007", "mr": "MR-18107251", "name": "Juan Alexis Sukir", "sex": "Laki - laki", "address": "Jl. Sawi", "action":"", "selected":false},
|
||||
{"nolab":"1902010008", "mr": "MR-18107252", "name": "Alexander Wang", "sex": "Laki - laki", "address": "Jl. Mangga Muda No. 7", "action":"", "selected":false},
|
||||
{"nolab":"1902010009", "mr": "MR-18107253", "name": "CILA CILANI", "sex": "Perempuan", "address": "Jl. Duren PInang No. 67", "action":"", "selected":false},
|
||||
{"nolab":"1902010010", "mr": "MR-18107254", "name": "Untung Suropati", "sex": "Laki - laki", "address": "Pasar Kapling Semarang", "action":"", "selected":false}
|
||||
],
|
||||
page:1,
|
||||
totalPage:2,
|
||||
totalRecord:11,
|
||||
midPages:1
|
||||
}
|
||||
} else if (page == 2) {
|
||||
return {
|
||||
query:query,
|
||||
rows:[
|
||||
{"nolab":"1902010011", "mr": "MR-18107255", "name": "M. Althaf Prawira Ananta", "sex": "Laki - laki", "address": "KP Karangpanas No 11", "action":"", "selected":false}
|
||||
],
|
||||
page:2,
|
||||
totalPage:2,
|
||||
totalRecord:11,
|
||||
midPages:1
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
return {
|
||||
status: "ERR",
|
||||
query: query,
|
||||
message: e.message
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function searchPx(query, page, rowPerPage = 15) {
|
||||
try {
|
||||
// if (page == 1) {
|
||||
return {
|
||||
query:query,
|
||||
rows:[
|
||||
{"code": "0101", "name": "Hemoglobin"},
|
||||
{"code": "0102", "name": "Leukosit"},
|
||||
{"code": "0103", "name": "Eritrosit"},
|
||||
// {"code": "0104", "name": "Trombosit"},
|
||||
// {"code": "0105", "name": "Hematokrit"}
|
||||
],
|
||||
page:1,
|
||||
totalPage:1,
|
||||
totalRecord:5,
|
||||
midPages:1
|
||||
}
|
||||
// } else if (page == 2) {
|
||||
// return {
|
||||
// query:query,
|
||||
// rows:[
|
||||
// {"nolab":"1902010011", "mr": "MR-18107255", "name": "M. Althaf Prawira Ananta", "sex": "Laki - laki", "address": "KP Karangpanas No 11", "action":""}
|
||||
// ],
|
||||
// page:2,
|
||||
// totalPage:2,
|
||||
// totalRecord:11,
|
||||
// midPages:1
|
||||
// }
|
||||
// }
|
||||
} catch (e) {
|
||||
return {
|
||||
status: "ERR",
|
||||
query: query,
|
||||
message: e.message
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
searchPatient,
|
||||
searchPx
|
||||
}
|
||||
45
mockup/fo/fo02/components/detailPatientComponent.js
Normal file
45
mockup/fo/fo02/components/detailPatientComponent.js
Normal file
@@ -0,0 +1,45 @@
|
||||
var detailPatientComponent = {
|
||||
template : `
|
||||
<v-flex xs4 pt-1 pl-3 pr-3>
|
||||
<v-text-field
|
||||
v-model="p_mr"
|
||||
label="MR"
|
||||
readonly
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="p_name"
|
||||
label="Name"
|
||||
readonly
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="p_dob"
|
||||
label="DOB / Age"
|
||||
readonly
|
||||
></v-text-field>
|
||||
</v-flex>`,
|
||||
|
||||
data() {
|
||||
return {
|
||||
query: ""
|
||||
};
|
||||
},
|
||||
|
||||
computed : {
|
||||
p_mr() {
|
||||
// return "*";
|
||||
return this.$store.state.patient.currSelected.mr;
|
||||
},
|
||||
|
||||
p_name() {
|
||||
// return "*";
|
||||
return this.$store.state.patient.currSelected.name;
|
||||
},
|
||||
|
||||
p_dob() {
|
||||
// return "*";
|
||||
return this.$store.state.patient.currSelected.dob;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { detailPatientComponent }
|
||||
135
mockup/fo/fo02/components/listPatientComponent.js
Normal file
135
mockup/fo/fo02/components/listPatientComponent.js
Normal file
@@ -0,0 +1,135 @@
|
||||
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 };
|
||||
90
mockup/fo/fo02/components/listPxComponent.js
Normal file
90
mockup/fo/fo02/components/listPxComponent.js
Normal file
@@ -0,0 +1,90 @@
|
||||
var listPxComponent = {
|
||||
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 blue lighten-5">{{ props.item.code }}</td>
|
||||
<td class="text-xs-left pa-2 blue lighten-5">{{ 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>
|
||||
|
||||
</v-data-table>
|
||||
</v-card>
|
||||
`,
|
||||
mounted() {
|
||||
this.doSearch();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
query: "",
|
||||
headers: [
|
||||
{
|
||||
text: "CODE",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "code",
|
||||
width: "30%",
|
||||
class: "pa-2 blue lighten-3 white--text"
|
||||
},
|
||||
{
|
||||
text: "NAME",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "name",
|
||||
width: "70%",
|
||||
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("px/searchPx", {
|
||||
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.px.isLoading,
|
||||
isError: state => state.px.isError,
|
||||
errorMessage: state => state.px.errorMessage,
|
||||
patients: state => state.px.rows,
|
||||
totalRecord: state => state.px.totalRecord,
|
||||
page: state => state.px.page,
|
||||
totalPage: state => state.px.totalPage
|
||||
})
|
||||
},
|
||||
updated() {
|
||||
console.log("Component Updated");
|
||||
}
|
||||
};
|
||||
|
||||
export { listPxComponent };
|
||||
27
mockup/fo/fo02/components/sampleStationComponent.js
Normal file
27
mockup/fo/fo02/components/sampleStationComponent.js
Normal file
@@ -0,0 +1,27 @@
|
||||
var sampleStationComponent = {
|
||||
props : ['label'],
|
||||
template : `
|
||||
<v-select
|
||||
:items="items"
|
||||
:label="_label"
|
||||
|
||||
></v-select>`,
|
||||
|
||||
data () {
|
||||
return {
|
||||
items: ['Laboratorium', 'Lain - lain']
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
computed : {
|
||||
_label () {
|
||||
if (this.label)
|
||||
return this.label;
|
||||
|
||||
return "Sample Station";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { sampleStationComponent }
|
||||
38
mockup/fo/fo02/components/smartNavbarComponent.js
Normal file
38
mockup/fo/fo02/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="blue lighten-2" 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 };
|
||||
49
mockup/fo/fo02/components/startDateComponent.js
Normal file
49
mockup/fo/fo02/components/startDateComponent.js
Normal file
@@ -0,0 +1,49 @@
|
||||
var startDateComponent = {
|
||||
props : ['label'],
|
||||
|
||||
template : `
|
||||
<v-menu
|
||||
v-model="menu2"
|
||||
:close-on-content-click="false"
|
||||
:nudge-right="40"
|
||||
lazy
|
||||
transition="scale-transition"
|
||||
offset-y
|
||||
full-width
|
||||
min-width="290px"
|
||||
>
|
||||
|
||||
<v-text-field
|
||||
slot="activator"
|
||||
v-model="datez"
|
||||
:label="labels"
|
||||
prepend-icon="event"
|
||||
readonly
|
||||
>
|
||||
</v-text-field>
|
||||
|
||||
<v-date-picker v-model="datez" @input="menu2 = false" prev-icon="false"></v-date-picker>
|
||||
</v-menu>
|
||||
`,
|
||||
|
||||
data () {
|
||||
return {
|
||||
datez: new Date().toISOString().substr(0, 10),
|
||||
menu: false,
|
||||
modal: false,
|
||||
menu2: false
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
computed : {
|
||||
labels() {
|
||||
if (this.label) {
|
||||
return this.label;
|
||||
} else
|
||||
return "Start Date";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { startDateComponent };
|
||||
247
mockup/fo/fo02/index.php
Normal file
247
mockup/fo/fo02/index.php
Normal file
@@ -0,0 +1,247 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>ONE</title>
|
||||
<link rel="stylesheet" href="../../../libs/vendor/css/google-fonts.css">
|
||||
<link rel="stylesheet" href="../../../libs/vendor/css/vuetify.min.css">
|
||||
<style>
|
||||
table.v-table tbody td,table.v-table tbody th {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
table.v-table thead tr {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div v-cloak id="app">
|
||||
<v-app id="smartApp">
|
||||
<smart-navbar></smart-navbar>
|
||||
<v-content class="blue lighten-5">
|
||||
|
||||
<v-container fluid fill-height style="height:inherit" pa-2>
|
||||
<v-layout row wrap>
|
||||
|
||||
<v-flex xs12>
|
||||
<template>
|
||||
<v-tabs
|
||||
centered
|
||||
color="blue lighten-3"
|
||||
dark
|
||||
fixed-tabs
|
||||
class="elevation-2"
|
||||
>
|
||||
<v-tabs-slider color="yellow"></v-tabs-slider>
|
||||
|
||||
<v-tab href="../fo01">
|
||||
<v-icon>list</v-icon> PATIENT LIST
|
||||
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="#tab-1" active-tab>
|
||||
<v-icon>opacity</v-icon> SAMPLING
|
||||
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="../fo03">
|
||||
<v-icon>verified_user</v-icon> SAMPLE VERIFICATION
|
||||
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="../fo03">
|
||||
<v-icon>motorcycle</v-icon> SAMPLE DISTRIBUTION
|
||||
|
||||
</v-tab>
|
||||
|
||||
<!-- <v-tab-item
|
||||
v-for="i in 4"
|
||||
:key="i"
|
||||
:value="'tab-' + i"
|
||||
> -->
|
||||
<!-- <v-card flat>
|
||||
<v-card-text>{{ text }}</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item> -->
|
||||
</v-tabs>
|
||||
</template>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs12>
|
||||
<v-card class="pt-1 mt-2 pr-1 pl-1 elevation-2">
|
||||
<v-layout>
|
||||
<v-flex xs2>
|
||||
<start-date></start-date>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs2>
|
||||
<start-date label="End Date"></start-date>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs1>
|
||||
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs2>
|
||||
<sample-station></sample-station>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs1>
|
||||
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs4>
|
||||
<v-text-field
|
||||
label="Search"
|
||||
placeholder=". . ."
|
||||
></v-text-field>
|
||||
</v-flex>
|
||||
|
||||
</v-layout>
|
||||
</v-card>
|
||||
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs12>
|
||||
<v-layout>
|
||||
<v-flex xs4>
|
||||
<list-patient fill-height></list-patient>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs8>
|
||||
<v-layout row wrap>
|
||||
<v-flex pa-2 xs12>
|
||||
<v-card class="elevation-2">
|
||||
|
||||
<v-layout>
|
||||
<v-flex xs2 ma-1 pa-1>
|
||||
<v-card class="pa-1">
|
||||
<img src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX19479590.jpg" width="100%" />
|
||||
|
||||
</v-card>
|
||||
</v-flex>
|
||||
|
||||
<!-- DETAIL PATIENT HERE -->
|
||||
<detail-patient></detail-patient>
|
||||
|
||||
<!-- <v-flex xs1 pa-1>
|
||||
</v-flex> -->
|
||||
<v-flex xs6 pa-1>
|
||||
<list-px></list-px>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
<!-- <v-card-actions>
|
||||
<v-btn flat color="orange">Share</v-btn>
|
||||
<v-btn flat color="orange">Explore</v-btn>
|
||||
</v-card-actions> -->
|
||||
</v-card>
|
||||
</v-flex>
|
||||
|
||||
<v-flex xs12 pa-2>
|
||||
<v-card>
|
||||
<v-card-title primary-title class="pb-1 blue lighten-3 white--text pt-2">
|
||||
<div>
|
||||
<h5 class="headline mb-0">SAMPLES</h5>
|
||||
</div>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pt-1">
|
||||
<v-layout>
|
||||
<v-flex xs2 pl-3 pr-3>
|
||||
<v-card class="text-xs-center pa-2">
|
||||
<img src="https://anggrek.aplikasi.web.id/smartklinik/assets/app/image/samplesystem/new/b2.png" height="75">
|
||||
<h3>URINE</h3>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
</v-flex>
|
||||
|
||||
|
||||
</v-layout>
|
||||
|
||||
</v-container>
|
||||
</v-content>
|
||||
<v-footer color="blue lighten-2" app>
|
||||
<span class="white--text">© 2017</span>
|
||||
</v-footer>
|
||||
</v-app>
|
||||
</div>
|
||||
|
||||
<!-- Vendor -->
|
||||
<script src="../../../libs/vendor/axios.min.js"></script>
|
||||
<script src="../../../libs/vendor/vue.js"></script>
|
||||
<script src="../../../libs/vendor/vuex.js"></script>
|
||||
<script src="../../../libs/vendor/vuetify.js"></script>
|
||||
<!-- App Script -->
|
||||
<?php
|
||||
$ts = "?ts=" . Date("ymdhis");
|
||||
?>
|
||||
<script type="module">
|
||||
import { store } from './store.js<?php echo $ts ?>';
|
||||
import { smartNavbarComponent } from './components/smartNavbarComponent.js<?php echo $ts ?>';
|
||||
import { listPatientComponent } from './components/listPatientComponent.js<?php echo $ts ?>';
|
||||
import { listPxComponent } from './components/listPxComponent.js<?php echo $ts ?>';
|
||||
import { startDateComponent } from './components/startDateComponent.js<?php echo $ts ?>';
|
||||
import { sampleStationComponent } from './components/sampleStationComponent.js<?php echo $ts ?>';
|
||||
import { detailPatientComponent } from './components/detailPatientComponent.js<?php echo $ts ?>';
|
||||
// import { dialogFormComponent } from './components/dialogFormComponent.js<?php echo $ts ?>';
|
||||
//for testing
|
||||
// window.store = store;
|
||||
|
||||
new Vue({
|
||||
store,
|
||||
el: '#app',
|
||||
components: {
|
||||
'smart-navbar': smartNavbarComponent,
|
||||
'list-patient': listPatientComponent,
|
||||
'start-date': startDateComponent,
|
||||
'sample-station': sampleStationComponent,
|
||||
'list-px': listPxComponent,
|
||||
'detail-patient': detailPatientComponent
|
||||
// 'dialog-form':dialogFormComponent
|
||||
},
|
||||
data: {
|
||||
drawer: false,
|
||||
date: new Date().toISOString().substr(0, 10),
|
||||
menu: false,
|
||||
modal: false,
|
||||
menu2: false,
|
||||
|
||||
patient_name: 'Heri Suryawan',
|
||||
patient_mr: 'MR-090201001',
|
||||
patient_dob: '09-09-1999 / 24yr 3mt 2dy'
|
||||
},
|
||||
|
||||
computed : {
|
||||
// binding () {
|
||||
// const binding = {}
|
||||
|
||||
// if (this.$vuetify.breakpoint.mdAndUp) binding.column = true
|
||||
|
||||
// return binding
|
||||
// }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
97
mockup/fo/fo02/module_patient.js
Normal file
97
mockup/fo/fo02/module_patient.js
Normal file
@@ -0,0 +1,97 @@
|
||||
import * as api from "./api.js";
|
||||
|
||||
const module_patient = {
|
||||
namespaced : true,
|
||||
|
||||
state: {
|
||||
rows: [],
|
||||
midPages: [],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
errorMessage: "",
|
||||
query: "",
|
||||
page: 1,
|
||||
totalPage: 2,
|
||||
totalRecord: 11,
|
||||
currSelected: {
|
||||
mr: '-',
|
||||
name: '-',
|
||||
dob: '-'
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
updatePatient(state, data) {
|
||||
// console.log(data);
|
||||
if (data.status == "ERR") {
|
||||
state.isError = true;
|
||||
if (data.db_error) {
|
||||
state.errorMessage = data.db_error.message;
|
||||
} else {
|
||||
state.errorMessage = data.message;
|
||||
}
|
||||
state.query = data.query;
|
||||
state.page = 0;
|
||||
state.totalPage = 0;
|
||||
state.totalRecord = 0;
|
||||
state.rows = [];
|
||||
state.midPages = [];
|
||||
} else {
|
||||
state.isError = false;
|
||||
state.errorMessage = "";
|
||||
state.query = data.query;
|
||||
state.page = data.page;
|
||||
state.totalPage = data.totalPage;
|
||||
state.totalRecord = data.totalRecord;
|
||||
state.rows = data.rows;
|
||||
state.midPages = data.midPages;
|
||||
}
|
||||
},
|
||||
updateLoading(state, flag) {
|
||||
state.isLoading = flag;
|
||||
},
|
||||
resetError(state) {
|
||||
state.isError = false;
|
||||
state.errorMessage = "";
|
||||
},
|
||||
|
||||
selectMe(state, item) {
|
||||
let rows = state.rows;
|
||||
|
||||
|
||||
for (let i in rows) {
|
||||
|
||||
|
||||
// console.log(i);
|
||||
rows[i].selected = false;
|
||||
if (rows[i].mr == item.mr) {
|
||||
rows[i].selected = true;
|
||||
state.currSelected = rows[i];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
state.rows = rows;
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
async searchPatient(context, data) {
|
||||
context.commit("updateLoading", true);
|
||||
let resp = await api.searchPatient(
|
||||
data.query,
|
||||
data.page,
|
||||
data.rowPerPage
|
||||
);
|
||||
context.commit("updateLoading", false);
|
||||
context.commit("updatePatient", resp);
|
||||
setTimeout(function() {
|
||||
context.commit("resetError");
|
||||
}, 5000);
|
||||
},
|
||||
|
||||
selectMe(context, item) {
|
||||
context.commit("selectMe", item);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { module_patient }
|
||||
70
mockup/fo/fo02/module_px.js
Normal file
70
mockup/fo/fo02/module_px.js
Normal file
@@ -0,0 +1,70 @@
|
||||
import * as api from "./api.js";
|
||||
|
||||
const module_px = {
|
||||
namespaced : true,
|
||||
|
||||
state: {
|
||||
rows: [],
|
||||
midPages: [],
|
||||
isLoading: false,
|
||||
isError: false,
|
||||
errorMessage: "",
|
||||
query: "",
|
||||
page: 1,
|
||||
totalPage: 2,
|
||||
totalRecord: 11
|
||||
},
|
||||
mutations: {
|
||||
|
||||
updatePx(state, data) {
|
||||
// console.log(data);
|
||||
if (data.status == "ERR") {
|
||||
state.isError = true;
|
||||
if (data.db_error) {
|
||||
state.errorMessage = data.db_error.message;
|
||||
} else {
|
||||
state.errorMessage = data.message;
|
||||
}
|
||||
state.query = data.query;
|
||||
state.page = 0;
|
||||
state.totalPage = 0;
|
||||
state.totalRecord = 0;
|
||||
state.rows = [];
|
||||
state.midPages = [];
|
||||
} else {
|
||||
state.isError = false;
|
||||
state.errorMessage = "";
|
||||
state.query = data.query;
|
||||
state.page = data.page;
|
||||
state.totalPage = data.totalPage;
|
||||
state.totalRecord = data.totalRecord;
|
||||
state.rows = data.rows;
|
||||
state.midPages = data.midPages;
|
||||
}
|
||||
},
|
||||
updateLoadingPx(state, flag) {
|
||||
state.isLoading = flag;
|
||||
},
|
||||
resetErrorPx(state) {
|
||||
state.isError = false;
|
||||
state.errorMessage = "";
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
async searchPx(context, data) {
|
||||
context.commit("updateLoadingPx", true);
|
||||
let resp = await api.searchPx(
|
||||
data.query,
|
||||
data.page,
|
||||
data.rowPerPage
|
||||
);
|
||||
context.commit("updateLoadingPx", false);
|
||||
context.commit("updatePx", resp);
|
||||
setTimeout(function() {
|
||||
context.commit("resetErrorPx");
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export { module_px }
|
||||
18
mockup/fo/fo02/store.js
Normal file
18
mockup/fo/fo02/store.js
Normal file
@@ -0,0 +1,18 @@
|
||||
// State
|
||||
// data ...
|
||||
// Mutations
|
||||
//
|
||||
//
|
||||
// Actions
|
||||
import * as api from "./api.js";
|
||||
// import * as api_px from "./api_px.js";
|
||||
|
||||
import { module_patient } from "./module_patient.js";
|
||||
import { module_px } from "./module_px.js";
|
||||
|
||||
export const store = new Vuex.Store({
|
||||
modules : {
|
||||
patient : module_patient,
|
||||
px : module_px
|
||||
}
|
||||
});
|
||||
1
mockup/one-mcu-resume-individu-v8
Submodule
1
mockup/one-mcu-resume-individu-v8
Submodule
Submodule mockup/one-mcu-resume-individu-v8 added at 5d89efaf9e
Reference in New Issue
Block a user