Initial import

mockup/fo/fo02/components/detailPatientComponent.js

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

mockup/fo/fo02/components/listPatientComponent.js

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

mockup/fo/fo02/components/listPxComponent.js

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

mockup/fo/fo02/components/sampleStationComponent.js

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

mockup/fo/fo02/components/smartNavbarComponent.js

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

mockup/fo/fo02/components/startDateComponent.js

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