update navigation all
This commit is contained in:
sas.fajri
275
registration/components/right.vue
Normal file
275
registration/components/right.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-container class="rounded-lg" fluid>
|
||||
<div class="rounded-lg pa-5">
|
||||
<v-row>
|
||||
<v-col cols="2">
|
||||
<div class="rounded-lg bg-secondary-lighten" style="width: 100%; height: 120px;">
|
||||
<!-- placeholder photo -->
|
||||
</div>
|
||||
</v-col>
|
||||
<v-col cols="8">
|
||||
<h4>{{ selected.noreg }}</h4>
|
||||
<h4 class="text-grey-darken-1">{{ selected.nama }}</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"
|
||||
v-show="selected.status === 'Call'"
|
||||
>
|
||||
<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"
|
||||
@click="setCall(selected)"
|
||||
v-show="selected.doneCall !== 'Y'"
|
||||
>
|
||||
<iconify-icon
|
||||
class="text-secondary-darken"
|
||||
style="font-size: 1.5rem;"
|
||||
:icon="setIconCall(selected.status)"
|
||||
></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;">-</p>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row no-gutters>
|
||||
<v-col cols="4">
|
||||
<p class="font-weight-medium">{{ $t('message.dobage') }}</p>
|
||||
</v-col>
|
||||
<v-col cols="4" class="text-end">
|
||||
<p class="font-weight-medium" style="color: slategray;">{{ selected.dob }}</p>
|
||||
</v-col>
|
||||
<v-col cols="4" class="text-end">
|
||||
<p class="font-weight-medium" style="color: slategray;">{{ selected.age }}</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">{{ $t('message.tableDetail.title') }}: {{ details.staff }}</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="details.specimen"
|
||||
:headers="headers"
|
||||
hide-default-footer
|
||||
>
|
||||
<template v-slot:headers="{ columns }">
|
||||
<tr>
|
||||
<template v-for="column in columns" :key="column.key">
|
||||
<td :class="column.class" :style="{ width: column.width, textAlign: column.align }">
|
||||
<span>{{ column.title }}</span>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
</template>
|
||||
<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"
|
||||
v-if="selected.doneCall === 'Y'"
|
||||
>
|
||||
<div
|
||||
class="pointer"
|
||||
style="height: 32px; width: 32px; display: flex; align-items: center; justify-content: center;"
|
||||
>
|
||||
<iconify-icon
|
||||
:class="{'text-error': item.requirement === 'N'}"
|
||||
style="font-size: 1.5rem;"
|
||||
icon="fluent:dismiss-12-filled"
|
||||
@click="setReq(item, 'N')"
|
||||
></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-success': item.requirement === 'Y'}"
|
||||
style="font-size: 2rem;"
|
||||
icon="fluent:checkmark-12-filled"
|
||||
@click="setReq(item, 'Y')"
|
||||
></iconify-icon>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else style="font-size: 1.5rem;">-</p>
|
||||
</td>
|
||||
<td align="center">
|
||||
<div v-if="selected.doneCall === 'Y'" class="py-1">
|
||||
<div class="bg-warning rounded-lg pa-1 text-white">
|
||||
{{ formatDate(item.sDate) }}
|
||||
</div>
|
||||
<div :class="['rounded-lg rounded-lg pa-1 mt-1', { 'bg-grey-lighten-5': !item.eDate, 'bg-success': item.eDate }]">
|
||||
{{ item.eDate === "" ? '00-00-0000 00:00': formatDate(item.eDate) }}
|
||||
</div>
|
||||
</div>
|
||||
<p v-else style="font-size: 1.5rem;">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</v-data-table>
|
||||
<div class="ml-3">
|
||||
<v-chip v-for="y in details.jenis" class="mr-2 mt-2" :color="selected.doneCall === 'Y' ? 'success' : 'primary'">{{ y }}</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">{{ $t('message.examination') }}</h3>
|
||||
</div>
|
||||
<div>
|
||||
<v-chip v-for="x in pemeriksaan" class="mt-5 mr-2" color="success">{{ x }}</v-chip>
|
||||
</div>
|
||||
</v-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "rightcomp",
|
||||
components: {
|
||||
|
||||
},
|
||||
mounted() {},
|
||||
data() {
|
||||
return {
|
||||
menu: false,
|
||||
visible: false,
|
||||
headers: [
|
||||
{
|
||||
title: this.$t('message.tableDetail.speciment'),
|
||||
align: "start",
|
||||
sortable: false,
|
||||
key: "name",
|
||||
width: "20%",
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
title: this.$t('message.tableDetail.barcode'),
|
||||
align: "start",
|
||||
sortable: false,
|
||||
key: "name",
|
||||
width: "20%",
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
title: this.$t('message.tableDetail.requirement'),
|
||||
align: "center",
|
||||
sortable: false,
|
||||
key: "name",
|
||||
width: "20%",
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
{
|
||||
title: this.$t('message.tableDetail.action'),
|
||||
align: "center",
|
||||
sortable: false,
|
||||
key: "name",
|
||||
width: "20%",
|
||||
class: "font-weight-bold",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
selected: {
|
||||
get() {
|
||||
return this.$store.state.collection.selected_patients;
|
||||
},
|
||||
set(data) {
|
||||
this.$store.commit("setSelectedPatients", data);
|
||||
}
|
||||
},
|
||||
details: {
|
||||
get() {
|
||||
return this.$store.state.collection.details;
|
||||
},
|
||||
set(data) {
|
||||
this.$store.commit("")
|
||||
}
|
||||
},
|
||||
pemeriksaan() {
|
||||
return this.$store.state.collection.pemeriksaan;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setIconCall(status) {
|
||||
switch (status.toLowerCase()) {
|
||||
case "call":
|
||||
return "fluent:arrow-sync-24-regular";
|
||||
default:
|
||||
return "fluent:speaker-2-24-regular";
|
||||
}
|
||||
},
|
||||
setCall(data) {
|
||||
if (data.status == "New") {
|
||||
data.status = "Call";
|
||||
} else if (data.status == "Call") {
|
||||
data.doneCall = "Y";
|
||||
}
|
||||
},
|
||||
setReq(data, status) {
|
||||
data.requirement = status;
|
||||
data.eDate= new Date();
|
||||
},
|
||||
formatDate(date) {
|
||||
if (!date) return null;
|
||||
|
||||
return moment(date).format("DD-MM-YYYY HH:mm");
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user