coba add store

This commit is contained in:
2024-08-16 15:36:45 +07:00
parent 13e203fb57
commit 7b1526e06b
8 changed files with 719 additions and 0 deletions

View File

@@ -18,6 +18,8 @@ var CustomTheme = {
"success-lighten": "#E8F5E9",
"success-darken": "#1B5E20",
white: "#FFFFFF",
grey: "#9E9E9E",
"grey-lighten-5": "#FAFAFA",
},
},
}

View File

@@ -0,0 +1,118 @@
<template>
<div>
<v-container class="bg-white rounded-lg" fluid>
<v-row>
<v-col cols="2.2">
<v-menu
v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
min-width="auto"
max-width="290px"
>
<template v-slot:activator="{ props }">
<v-text-field
:model-value="formatDate()"
label="Tanggal"
prepend-inner-icon="mdi-calendar"
hide-details
readonly
variant="outlined"
v-bind="props"
></v-text-field>
</template>
<v-date-picker
hide-header
show-adjacent-months
rounded="lg"
color="primary"
v-model="date"
@update:modelValue="menu=false"
></v-date-picker>
</v-menu>
</v-col>
<v-col cols="2.2">
<v-text-field
label="No Reg / Nama"
variant="outlined"
hide-details
append-inner-icon="mdi-magnify"
></v-text-field>
</v-col>
<v-col cols="2.2">
<v-autocomplete
label="Kel Pelanggan"
variant="outlined"
hide-details
menu-icon="mdi-chevron-down"
:items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
></v-autocomplete>
</v-col>
<v-col cols="2.2">
<v-autocomplete
label="Station"
variant="outlined"
hide-details
menu-icon="mdi-chevron-down"
:items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
></v-autocomplete>
</v-col>
<v-col cols="2.2">
<v-autocomplete
label="Lokasi"
variant="outlined"
hide-details
menu-icon="mdi-chevron-down"
:items="['lorem', 'ipsum', 'dolor', 'is', 'amet']"
></v-autocomplete>
</v-col>
<v-col cols="1">
<div
style="height: 100%; display: flex; align-items: center; justify-content: center;"
class="rounded-lg bg-primary pa-2 h-100 pointer"
>
<iconify-icon
style="font-size: 2rem;"
icon="fluent:search-20-regular"
></iconify-icon>
</div>
</v-col>
</v-row>
</v-container>
</div>
</template>
<script>
export default {
name: "filtercomp",
components: {},
mounted() {
},
data() {
return {
menu: false,
visible: false,
};
},
computed: {
date: {
},
},
methods: {
formatDate() {
if (!this.date) return null;
return moment(this.date).format("DD-MM-YYYY");
},
},
};
</script>
<style scoped>
.pointer {
cursor: pointer;
}
</style>

View File

@@ -0,0 +1,122 @@
<template>
<div>
<v-container class="bg-white rounded-lg" fluid>
<div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
<h3 class="primary-lighten">PASIEN</h3>
</div>
<v-data-table
v-model="selected_patients"
:items="patients"
:headers="headers"
hide-default-footer
class="row-pointer"
>
<template v-slot:item="{ item }">
<tr @click="selectItem(item)" v-bind:class="{'bg-primary-lighten':isItemSelected(item)}">
<td>
<p class="font-weight-medium">{{ item.tanggal }}</p>
</td>
<td>
<p class="font-weight-medium">{{ item.noreg }}</p>
</td>
<td>
<p class="font-weight-medium">{{ item.kelpelanggan }}</p>
</td>
<td>
<p class="font-weight-medium">{{ item.nama }}</p>
</td>
<td>
<p class="font-weight-medium">{{ item.status }}</p>
</td>
</tr>
</template>
</v-data-table>
</v-container>
</div>
</template>
<script>
export default {
name: "leftcomp",
components: {},
mounted() {
},
data() {
return {
menu: false,
visible: false,
selectedItems: [],
headers: [
{
title: "TANGGAL",
align: "start",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
{
title: "NO. REG",
align: "start",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
{
title: "KEL. PELANGGAN",
align: "start",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
{
title: "NAMA",
align: "start",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
{
title: "STATUS",
align: "start",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
],
};
},
computed: {
patients() {
return this.$store.state.collection.patients
},
selected_patients: {
get() {
return this.$store.state.collection.selected_patients
},
set(data) {
this.$store.commit("setSelectedPatients", data)
}
}
},
methods: {
selectItem(data) {
this.$store.commit("setSelectedPatients", data);
},
isItemSelected(data) {
return data.noreg === this.$store.state.collection.selected_patients.noreg
}
},
};
</script>
<style scoped>
.row-pointer >>> tbody tr :hover {
cursor: pointer;
}
</style>

View File

@@ -0,0 +1,46 @@
<template>
<v-app id="inspire">
<one-navbar></one-navbar>
<v-main>
<div class="pa-5 bg-primary-lighten ml-2 rounded-xl h-100">
<one-filter></one-filter>
<v-row>
<v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
<one-left></one-left>
</v-col>
<v-col cols="12" md="6" sm="12" xs="12" class="mt-5">
<one-right></one-right>
</v-col>
</v-row>
</div>
</v-main>
</v-app>
</template>
<script type="module">
import NavbarComponent from "../../globalcomponent/one-navbar.vue";
import FilterComponent from "./filter.vue";
import LeftComponent from "./left.vue";
import RightComponent from "./right.vue";
export default {
name: "specimen collection",
components: {
"one-navbar": NavbarComponent,
"one-filter": FilterComponent,
"one-left": LeftComponent,
"one-right": RightComponent,
},
mounted() {},
data() {
return {
visible: false,
};
},
computed: {
},
methods: {
},
};
</script>

View File

@@ -0,0 +1,228 @@
<template>
<div>
<v-container class="bg-white rounded-lg" fluid>
<div class="bg-primary-lighten rounded-lg pa-5">
<v-row>
<v-col cols="2">
<div class="rounded-lg bg-secondary-lighten" style="width: 100px; height: 100px;">
<!-- placeholder photo -->
</div>
</v-col>
<v-col cols="8">
<h4>055000035LA</h4>
<h4 style="color: slategray;">Tn. Alpha</h4>
</v-col>
<v-col cols="2" align-self="center" class="d-flex justify-end">
<div
style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
class="rounded-lg pa-2 mr-2 bg-grey-lighten-5 pointer"
>
<iconify-icon
class="text-grey"
style="font-size: 1.5rem;"
icon="fluent:arrow-previous-24-regular"
></iconify-icon>
</div>
<div
style="height: 40px; width: 40px; display: flex; align-items: center; justify-content: center;"
class="rounded-lg bg-secondary-lighten pa-2 pointer"
>
<iconify-icon
class="text-secondary-darken"
style="font-size: 1.5rem;"
icon="fluent:speaker-2-24-regular"
></iconify-icon>
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="10">
<p class="font-weight-medium">PID</p>
</v-col>
<v-col cols="2" class="text-end">
<p class="font-weight-medium" style="color: slategray;">asd</p>
</v-col>
</v-row>
<v-row no-gutters>
<v-col cols="4">
<p class="font-weight-medium">Tanggal Lahir dan Umur</p>
</v-col>
<v-col cols="4" class="text-end">
<p class="font-weight-medium" style="color: slategray;">10-11-1999</p>
</v-col>
<v-col cols="4" class="text-end">
<p class="font-weight-medium" style="color: slategray;">24 Tahun 8 Bulan 21 Hari</p>
</v-col>
</v-row>
</div>
</v-container>
<v-container class="bg-white rounded-lg mt-5" fluid>
<div class="bg-secondary-lighten rounded-lg pa-5 mb-5">
<v-row>
<v-col cols="10" align-self="center">
<h3 class="primary-lighten">STAF: NOVITA</h3>
</v-col>
<v-col cols="2" align-self="center" class="d-flex justify-end">
<div
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
class="rounded-lg bg-primary-lighten pa-2 pointer"
>
<iconify-icon
class="text-primary-darken"
style="font-size: 1.5rem;"
icon="fluent:note-add-24-regular"
></iconify-icon>
</div>
<div
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
class="rounded-lg bg-success-lighten pa-2 ml-2 pointer"
>
<iconify-icon
class="text-success-darken"
style="font-size: 1.5rem;"
icon="fluent:notepad-person-24-regular"
></iconify-icon>
</div>
</v-col>
</v-row>
</div>
<v-data-table
:items="items"
:headers="headers"
hide-default-footer
>
<template v-slot:item="{ item }">
<tr>
<td>
<p class="font-weight-medium">{{ item.specimen }}</p>
</td>
<td>
<p class="font-weight-medium">{{ item.barcode }}</p>
</td>
<td align="center">
<div
style="display: flex; align-items: center; justify-content: center;"
class="rounded-lg pa-2"
>
<div
class="pointer"
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
>
<iconify-icon
class="text-grey"
style="font-size: 1.5rem;"
icon="fluent:dismiss-24-regular"
></iconify-icon>
</div>
<div
class="pointer"
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; margin-left: 8px;"
>
<iconify-icon
class="text-grey"
style="font-size: 1.5rem;"
icon="fluent:checkmark-24-regular"
></iconify-icon>
</div>
</div>
</td>
<td align="center" class="py-1">
<div class="bg-warning rounded-lg pa-1 text-white">
06-08-2024 14:17
</div>
<div class="bg-grey-lighten-5 rounded-lg pa-1 mt-1">
00-00-0000 00:00
</div>
</td>
</tr>
</template>
</v-data-table>
<div class="ml-3">
<v-chip class="mr-5 mt-2" color="primary">DARAH</v-chip>
<v-chip class="mr-5 mt-2" color="primary">SWAB/SEKRET</v-chip>
</div>
</v-container>
<v-container class="bg-white rounded-lg mt-5" fluid>
<div class="bg-secondary-lighten rounded-lg pa-5">
<h3 class="primary-lighten">PEMERIKSAAN</h3>
</div>
<div>
<v-chip class="mr-5 mt-5" color="success">Hematologi Lengkap</v-chip>
<v-chip class="mr-5 mt-5" color="success">Golongan Darah Rhesus</v-chip>
<v-chip class="mr-5 mt-5" color="success">Kultur Usap Tenggorok (Vitek)</v-chip>
</div>
</v-container>
</div>
</template>
<script>
export default {
name: "rightcomp",
components: {
},
mounted() {},
data() {
return {
menu: false,
visible: false,
items: [
{
specimen: "EDTA Rutin",
barcode: "055000035LSE1A",
},
{
specimen: "EDTA Rutin",
barcode: "0550000AA223FF",
},
],
headers: [
{
title: "SPECIMEN",
align: "start",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
{
title: "BARCODE",
align: "start",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
{
title: "REQUIREMENT",
align: "center",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
{
title: "AKSI",
align: "center",
sortable: false,
key: "name",
width: "20%",
class: "font-weight-bold",
},
],
};
},
computed: {
},
methods: {
},
}
</script>
<style scoped>
.pointer {
cursor: pointer;
}
</style>

View File

@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Specimen Collection</title>
<!-- Vuetify CSS -->
<link href="../css/vuetify.css" rel="stylesheet" />
<!-- Local Stylesheet for Fonts -->
<link rel="stylesheet" href="../css/styles.css" />
<link href="../css/materialdesignicon.css" rel="stylesheet" />
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- Moment -->
<script src="../libraries/moment.js"></script>
<!-- Vue.js -->
<!-- DEV -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- PROD -->
<!-- <script src="../libraries/vue3.4.36.global.prod.js"></script> -->
<!-- Vuex -->
<script src="../libraries/vuex.js"></script>
<!-- Vuetify -->
<script src="../libraries/vuetify3.js"></script>
<!-- vue-i18n -->
<script src="../libraries/vue-i18n.global.js"></script>
<!-- Axios -->
<script src="../libraries/axios.js"></script>
<script src="../globalscript/theme.js"></script>
<script src="../globalscript/global.js"></script>
<!-- loader single file component -->
<script src="../libraries/vue3-sfc-loader.js"></script>
<script src="./language.js"></script>
<script type="module">
const { loadModule } = window["vue3-sfc-loader"];
import system from "../globalstore/globalstore.js";
import collection from "./modules/collection.js";
// if (one_token()) {
// let usr = JSON.parse(localStorage.getItem("user"));
// location.replace("/" + usr.M_UserGroupDashboard);
// }
const options = {
moduleCache: {
vue: Vue,
},
getFile(url) {
return fetch(url).then((response) =>
response.ok ? response.text() : Promise.reject(response)
);
},
addStyle(textContent) {
const style = document.createElement("style");
style.textContent = textContent;
const ref = document.head.getElementsByTagName("style")[0] || null;
document.head.insertBefore(style, ref);
},
};
const messages = CustomMessages;
const browserLocale = navigator.language || navigator.languages[0];
const i18n = VueI18n.createI18n({
locale: browserLocale.startsWith("id") ? "id" : "en",
fallbackLocale: "en",
messages,
});
window.i18n = i18n;
moment.locale(browserLocale.startsWith("id") ? "id" : "en");
const store = Vuex.createStore({
modules: {
system: system,
collection: collection,
},
});
const app = Vue.createApp({
data() {
return {
visible: false,
bg_src: "",
loading: false,
};
},
template: `
<main-component></main-component>
`,
});
const vuetify = Vuetify.createVuetify({
theme: {
themes: CustomTheme,
},
});
app.use(store);
app.use(vuetify);
app.use(i18n);
const components = {
"main-component": "./components/main.vue",
};
Promise.all(
Object.entries(components).map(([name, path]) => {
return loadModule(path, options).then((component) => {
app.component(name, component);
});
})
)
.then(() => {
app.mount("#app");
})
.catch((error) => {
console.error("Error loading components:", error);
});
</script>
</body>
</html>

View File

@@ -0,0 +1,32 @@
var CustomMessages = {
en: {
message: {
login: "Log in",
title: "Log in to your account",
sublogin: "Enter your details below",
email: "Email",
password: "Password",
forgotPassword: "Forgot password?",
placeholderEmail: "Enter your email",
placeholderPassword: "Enter your password",
msgInfo: 'Enter the registered account',
errorQuery: "Error get data",
invalid: "Invalid username / password"
},
},
id: {
message: {
login: "Masuk",
title: "Masuk ke akun Anda",
sublogin: "Masukkan detail Anda di bawah ini",
email: "Surel",
password: "Kata Sandi",
forgotPassword: "Lupa kata sandi?",
placeholderEmail: "Isikan email anda",
placeholderPassword: "Isikan kata sandi anda",
msgInfo: "Masukkan akun terdaftar",
errorQuery: "Gagal mendapatkan data",
invalid: "Nama pengguna / kata sandi tidak valid"
},
},
};

View File

@@ -0,0 +1,47 @@
const store = {
state() {
return {
patients: [
{
tanggal: "31-07-2024",
noreg: "055000037LA",
kelpelanggan: "PASIEN MANDIRI",
nama: "Tn. Alpha",
status: "New",
},
{
tanggal: "31-07-2024",
noreg: "055000036LA",
kelpelanggan: "PASIEN KLINISI",
nama: "Tn. Beta",
status: "New",
},
{
tanggal: "30-07-2024",
noreg: "055000035LA",
kelpelanggan: "PASIEN KLINISI",
nama: "Tn. Gamma",
status: "New",
},
],
selected_patients: {
},
};
},
mutations: {
setPatients(state, data) {
state.patients = data
},
setSelectedPatients(state, data) {
state.selected_patients = data
},
},
actions: {
selectPatient({ commit, data }) {
commit('setSelectedPatients', data);
}
}
}
export default store