Initial import
This commit is contained in:
sas.fajri
0
one-ui/test_x_old/vuex/lama/t05/action.js
Normal file
0
one-ui/test_x_old/vuex/lama/t05/action.js
Normal file
31
one-ui/test_x_old/vuex/lama/t05/api.js
Normal file
31
one-ui/test_x_old/vuex/lama/t05/api.js
Normal file
@@ -0,0 +1,31 @@
|
||||
// API :
|
||||
// search patient
|
||||
// paramater : query , page , rowPerPage
|
||||
const URL =
|
||||
"http://lebaran.aplikasi.web.id/smartlab_api/vuex/t05/search_patienttype";
|
||||
|
||||
export async function searchPatientType(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
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,138 @@
|
||||
var listPatientTypeComponent = {
|
||||
template: `
|
||||
<v-card class="xs12 md12" >
|
||||
<v-card-title>
|
||||
<v-layout>
|
||||
<v-flex xs12 sm8>
|
||||
<v-toolbar-title>Patient Type Listing</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="patienttypes"
|
||||
:loading="isLoading"
|
||||
hide-actions class="elevation-1">
|
||||
<template slot="items" slot-scope="props">
|
||||
<td>{{ props.item.M_PatientTypeName }}</td>
|
||||
<td>{{ props.item.M_PatientTypeAddress }}</td>
|
||||
<td>{{ props.item.M_PatientTypeMOUPIC }}</td>
|
||||
<td>{{ props.item.M_PatientTypePhone }}</td>
|
||||
<td>{{ props.item.M_PatientTypeEmail }}</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: "Name",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "M_PatientTypeName"
|
||||
},
|
||||
{
|
||||
text: "Addres",
|
||||
align: "left",
|
||||
sortable: false,
|
||||
value: "M_PatientTypeAddress"
|
||||
},
|
||||
{
|
||||
text: "PIC",
|
||||
value: "M_PatientTypeMOUPIC",
|
||||
sortable: false,
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
text: "Phone",
|
||||
value: "M_PatientTypePhone",
|
||||
sortable: false,
|
||||
align: "left"
|
||||
},
|
||||
{
|
||||
text: "Email",
|
||||
value: "M_PatientTypeEmail",
|
||||
sortable: false,
|
||||
align: "left"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clearSearch() {
|
||||
this.query = "";
|
||||
this.doSearch();
|
||||
},
|
||||
doSearch(page = 1, rowPerPage = 8) {
|
||||
if (this.query == null) this.query = "";
|
||||
this.$store.dispatch("searchPatientType", {
|
||||
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,
|
||||
patienttypes: state => state.rows,
|
||||
totalRecord: state => state.totalRecord,
|
||||
page: state => state.page,
|
||||
totalPage: state => state.totalPage
|
||||
})
|
||||
},
|
||||
updated() {
|
||||
console.log("Component Updated");
|
||||
}
|
||||
};
|
||||
|
||||
export { listPatientTypeComponent };
|
||||
@@ -0,0 +1,92 @@
|
||||
var smartNavbarComponent = {
|
||||
template: `
|
||||
<span>
|
||||
<v-navigation-drawer
|
||||
v-model="drawer"
|
||||
fixed
|
||||
clipped
|
||||
class="grey lighten-4"
|
||||
app
|
||||
>
|
||||
<v-list
|
||||
dense
|
||||
class="grey lighten-4"
|
||||
>
|
||||
<template v-for="(item, i) in items">
|
||||
<v-layout
|
||||
v-if="item.heading"
|
||||
:key="i"
|
||||
row
|
||||
align-center
|
||||
>
|
||||
<v-flex xs6>
|
||||
<v-subheader v-if="item.heading">
|
||||
{{ item.heading }}
|
||||
</v-subheader>
|
||||
</v-flex>
|
||||
<v-flex xs6 class="text-xs-right">
|
||||
<v-btn small flat>edit</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-divider
|
||||
v-else-if="item.divider"
|
||||
:key="i"
|
||||
dark
|
||||
class="my-3"
|
||||
></v-divider>
|
||||
<v-list-tile
|
||||
v-else
|
||||
:key="i"
|
||||
@click=""
|
||||
>
|
||||
<v-list-tile-action>
|
||||
<v-icon>{{ item.icon }}</v-icon>
|
||||
</v-list-tile-action>
|
||||
<v-list-tile-content>
|
||||
<v-list-tile-title class="grey--text">
|
||||
{{ item.text }}
|
||||
</v-list-tile-title>
|
||||
</v-list-tile-content>
|
||||
</v-list-tile>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-navigation-drawer>
|
||||
<v-toolbar color="amber" app absolute clipped-left>
|
||||
<v-toolbar-side-icon @click.native="drawer = !drawer"></v-toolbar-side-icon>
|
||||
<span class="title ml-3 mr-5">Google <span class="font-weight-light">Keep</span></span>
|
||||
<v-text-field
|
||||
solo-inverted
|
||||
flat
|
||||
hide-details
|
||||
label="Search"
|
||||
prepend-inner-icon="search"
|
||||
></v-text-field>
|
||||
<v-spacer></v-spacer>
|
||||
</v-toolbar>
|
||||
</span>
|
||||
`,
|
||||
data: function() {
|
||||
return {
|
||||
drawer: false,
|
||||
items: [
|
||||
{ icon: 'lightbulb_outline', text: 'Notes' },
|
||||
{ icon: 'touch_app', text: 'Reminders' },
|
||||
{ divider: true },
|
||||
{ heading: 'Labels' },
|
||||
{ icon: 'add', text: 'Create new label' },
|
||||
{ divider: true },
|
||||
{ icon: 'archive', text: 'Archive' },
|
||||
{ icon: 'delete', text: 'Trash' },
|
||||
{ divider: true },
|
||||
{ icon: 'settings', text: 'Settings' },
|
||||
{ icon: 'chat_bubble', text: 'Trash' },
|
||||
{ icon: 'help', text: 'Help' },
|
||||
{ icon: 'phonelink', text: 'App downloads' },
|
||||
{ icon: 'keyboard', text: 'Keyboard shortcuts' }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
|
||||
export { smartNavbarComponent };
|
||||
66
one-ui/test_x_old/vuex/lama/t05/index.php
Normal file
66
one-ui/test_x_old/vuex/lama/t05/index.php
Normal file
@@ -0,0 +1,66 @@
|
||||
<!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>Test 05 Vuex (Fitri)</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">
|
||||
<v-flex size="xs12">
|
||||
<list-patienttype fill-height></list-patienttype>
|
||||
</v-flex>
|
||||
</v-container>
|
||||
</v-content>
|
||||
<v-footer color="amber" 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 { listPatientTypeComponent } from './components/listPatientTypeComponent.js<?php echo $ts ?>';
|
||||
//for testing
|
||||
// window.store = store;
|
||||
|
||||
new Vue({
|
||||
store,
|
||||
el: '#app',
|
||||
components: {
|
||||
'smart-navbar': smartNavbarComponent,
|
||||
'list-patienttype': listPatientTypeComponent,
|
||||
},
|
||||
data: {
|
||||
drawer: false,
|
||||
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
[v-cloak] {
|
||||
display: none
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
0
one-ui/test_x_old/vuex/lama/t05/mutation.js
Normal file
0
one-ui/test_x_old/vuex/lama/t05/mutation.js
Normal file
71
one-ui/test_x_old/vuex/lama/t05/store.js
Normal file
71
one-ui/test_x_old/vuex/lama/t05/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: 0,
|
||||
totalPage: 0,
|
||||
totalRecord: 0
|
||||
},
|
||||
mutations: {
|
||||
updatePatientType(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 searchPatientType(context, data) {
|
||||
context.commit("updateLoading", true);
|
||||
let resp = await api.searchPatientType(
|
||||
data.query,
|
||||
data.page,
|
||||
data.rowPerPage
|
||||
);
|
||||
context.commit("updateLoading", false);
|
||||
context.commit("updatePatientType", resp);
|
||||
setTimeout(function() {
|
||||
context.commit("resetError");
|
||||
}, 5000);
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user