Initial import

This commit is contained in:
sas.fajri
2026-05-25 20:01:37 +07:00
commit 710d7c1b97
10371 changed files with 2381698 additions and 0 deletions

View 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
};
}
}

View File

@@ -0,0 +1,5 @@
var barComponent = {
template: `<div> text bar</div>`
};
export { barComponent };

View File

@@ -0,0 +1,228 @@
var barComponent = {
template: `<v-layout>
<v-flex
md6="md6"
class="mr-2"
>
<v-card
ref="form"
flat="flat"
light="light"
color="amber lighten-2"
>
<v-card-text>
<v-layout row="row">
<v-flex
d-flex="d-flex"
md12="md12"
>
<v-flex
md6="md6"
ma-2="ma-2"
>
<v-text-field
label="Nama Pasien"
outline="outline"
></v-text-field>
</v-flex>
<v-flex
md3="md3"
ma-2="ma-2"
>
<v-text-field
label="DOB"
outline="outline"
></v-text-field>
</v-flex>
<v-flex
md3="md3"
ma-2="ma-2"
>
<v-text-field
label="HP"
outline="outline"
></v-text-field>
</v-flex>
</v-flex>
</v-layout>
<v-layout
fluid="fluid"
wrap="wrap"
row="row"
>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Trevor Hansen (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Fajri hardhita M (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Jhonny Andrean (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Dave Emanuel (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Fian Taruna (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Andik Hermawan (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Sugeng (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Kerta Sanjaya (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Denis Anggara (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Mustafa (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Ribut Sentosa Tanuraga (M)
</v-chip>
<v-chip>
<v-avatar>
<img src="https://randomuser.me/api/portraits/men/35.jpg" alt="trevor">
</v-avatar>
Lilipan Anggara (M)
</v-chip>
</v-layout>
</v-card-text>
</v-card>
</v-flex>
<v-flex
md6="md6"
class="mr-2"
>
<v-card
ref="form"
flat="flat"
light="light"
color="amber lighten-2"
>
<v-layout>
<v-flex md5 align-self-center d-flex >
<img
style="text-align:center"
class="white--text"
height="192px"
src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
></img>
</v-flex>
<v-flex md7>
<v-data-table
:items="patient"
class="elevation-1"
hide-actions
hide-headers
>
<template slot="items" slot-scope="props">
<td>{{ props.item.label }}</td>
<td align="right">{{ props.item.value }}</td>
</template>
</v-data-table>
</v-flex>
</v-layout>
<v-divider light="light"></v-divider>
<v-layout
fluid="fluid"
wrap="wrap"
row="row"
>
<v-flex md6 pa-2
>
<v-text-field
label="DOKTER"
outline="outline"
></v-text-field>
</v-flex>
<v-flex pa-2 md6>
<v-select
v-model="select"
:items="items"
item-text="state"
item-value="abbr"
return-object
label="Alamat Dokter"
outline
></v-select>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
</v-flex>
</v-layout>`,
data: function() {
return {
patient: [
{ label: 'No Reg', value: 'ABT565651551' },
{ label: 'Nama', value: ' Lilipan Anggara' },
{ label: 'DOB', value: '22-01-1995' },
{ label: 'Alamat', value: 'Desa Kauman Tegal' },
],
select: { state: 'Georgia', abbr: 'GA' },
items: [
{ state: 'Florida', abbr: 'FL' },
{ state: 'Georgia', abbr: 'GA' },
{ state: 'Nebraska', abbr: 'NE' },
{ state: 'California', abbr: 'CA' },
{ state: 'New York', abbr: 'NY' }
]
};
},
methods: {}
};
export {
barComponent
};

View File

@@ -0,0 +1,5 @@
var fooComponent = {
template: `<div> text foo</div>`
};
export { fooComponent };

View File

@@ -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 };

View File

@@ -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&nbsp;<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 };

View File

@@ -0,0 +1,113 @@
<!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="inspire">
<div>
<v-toolbar color="indigo accent-1" dark>
<v-btn icon class="hidden-xs-only">
<v-icon large>format_indent_increase</v-icon>
</v-btn>
<v-toolbar-title><div class="flex display-3 font-weight-bold">One</div></v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-icon large>notifications_none</v-icon>
</v-toolbar-items>
</v-toolbar>
<v-tabs light
v-model="active"
color="green darken-2"
dark
slider-color="amber lighten-2"
fixed-tabs
>
<v-tab
v-for="item in items"
:key="item.id"
ripple
>
{{item.label}}
</v-tab>
<v-tab-item id="1"
>
<v-card color="blue-grey lighten-5" flat>
<v-card-text><bar></bar></v-card-text>
</v-card>
</v-tab-item>
<v-tab-item id="2"
>
<v-card flat>
<v-card-text><foo></foo></v-card-text>
</v-card>
</v-tab-item>
</v-tabs>
<div class="text-xs-center mt-3">
<v-btn @click="next">next tab</v-btn>
</div>
</div>
</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 { barComponent } from './components/barComponent.js<?php echo $ts ?>';
import { fooComponent } from './components/fooComponent.js<?php echo $ts ?>';
//for testing
// window.store = store;
new Vue({
el: '#app',
components: {
'bar': barComponent,
'foo': fooComponent,
},
data () {
return {
active: null,
items: [
{id:1,'label':'PASIEN','url':'#bar'},
{id:2,'label':'foo','url':'#foo'}
],
}
},
methods: {
next () {
const active = parseInt(this.active)
this.active = (active < 2 ? active + 1 : 0)
}
}
})
</script>
<style>
[v-cloak] {
display: none
}
</style>
</body>
</html>

View 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);
}
}
});