andy/westone-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update navigation all

Browse Source
This commit is contained in:
sas.fajri
2024-10-28 09:33:12 +07:00
parent 087bb1dc47
commit 3ae017ff3f
16 changed files with 2343 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
registration/components/left.vue Normal file
View File

@@ -0,0 +1,132 @@
<template>
<div>
<v-container class="pt-0" fluid>
<div class="rounded-lg pa-5 mb-5">
<h3 class="primary-lighten">{{ $t('message.tablePatient.title') }}</h3>
</div>
<v-data-table
v-model="selected_patients"
:items="patients"
:headers="headers"
hide-default-footer
class="row-pointer"
>
<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 @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: this.$t('message.tablePatient.date'),
align: "start",
sortable: false,
key: "date",
width: "15%",
class: "font-weight-bold",
},
{
title: this.$t('message.tablePatient.noreg'),
align: "start",
sortable: false,
key: "noreg",
width: "20%",
class: "font-weight-bold",
},
{
title: this.$t('message.tablePatient.group'),
align: "start",
sortable: false,
key: "group",
width: "25%",
class: "font-weight-bold",
},
{
title: this.$t('message.tablePatient.name'),
align: "start",
sortable: false,
key: "name",
width: "25%",
class: "font-weight-bold",
},
{
title: this.$t('message.tablePatient.status'),
align: "start",
sortable: false,
key: "status",
width: "15%",
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);
this.selected_patients = data;
},
isItemSelected(data) {
return data.noreg === this.$store.state.collection.selected_patients.noreg
}
},
};
</script>
<style scoped>
.row-pointer >>> tbody tr :hover {
cursor: pointer;
}
</style>