440 lines
12 KiB
Vue
440 lines
12 KiB
Vue
<template>
|
|
<div>
|
|
<v-dialog persistent max-width="500" v-model="dialogDelete">
|
|
<v-card>
|
|
<v-toolbar
|
|
elevation="4"
|
|
:title="$t('message.deleteTitle')"
|
|
color="primary"
|
|
></v-toolbar>
|
|
<v-card-text>
|
|
{{ $t("message.deleteMsg") }}
|
|
{{ this.selectedLocation.locationName }} ?</v-card-text
|
|
>
|
|
|
|
<v-card-actions class="px-5">
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-btn
|
|
color="error"
|
|
size="large"
|
|
:text="$t('message.form.close')"
|
|
@click="dialogDelete = false"
|
|
></v-btn>
|
|
<v-btn
|
|
size="large"
|
|
color="primary"
|
|
:text="$t('message.form.deleteBtn')"
|
|
@click="dialogDelete = false"
|
|
></v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<v-dialog persistent max-width="500" v-model="dialogForm">
|
|
<v-card>
|
|
<v-toolbar
|
|
elevation="4"
|
|
:title="action === 'add'? $t('message.form.add'):$t('message.form.edit')"
|
|
color="primary"
|
|
></v-toolbar>
|
|
<v-card-text>
|
|
<v-text-field
|
|
v-model="inpLocation"
|
|
:label="$t('message.form.lokasi')"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
<v-autocomplete
|
|
:label="$t('message.form.station')"
|
|
:items="stationList"
|
|
item-title="name"
|
|
return-object
|
|
v-model="selectedStation"
|
|
item-value="name"
|
|
variant="outlined"
|
|
></v-autocomplete>
|
|
<v-text-field
|
|
v-model="inpPriority"
|
|
type="number"
|
|
:label="$t('message.form.prioritas')"
|
|
variant="outlined"
|
|
></v-text-field>
|
|
</v-card-text>
|
|
|
|
<v-card-actions class="px-5">
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-btn
|
|
color="error"
|
|
size="large"
|
|
:text="$t('message.form.close')"
|
|
@click="dialogForm = false"
|
|
></v-btn>
|
|
|
|
<v-btn
|
|
size="large"
|
|
color="primary"
|
|
:text="action === 'add'? $t('message.form.save'): $t('message.form.saveEdit')"
|
|
@click="saveData()"
|
|
></v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<v-container class="bg-white rounded-lg" fluid>
|
|
<v-data-table-server
|
|
:items-per-page-options="itemsPerPageOption"
|
|
v-model:items-per-page="itemsPerPage"
|
|
:headers="headers"
|
|
:items="locationList"
|
|
height="63vh"
|
|
:items-length="totalItems"
|
|
:loading="loading"
|
|
:search="search"
|
|
@update:options="coba"
|
|
>
|
|
<template v-slot:item="{ item }">
|
|
<tr
|
|
@click="selectMe(item)"
|
|
v-bind:class="{'bg-secondary-lighten':isSelected(item)}"
|
|
>
|
|
<td>{{ item.locationName }}</td>
|
|
<td>{{ item.stationName }}</td>
|
|
<td>{{ item.priority }}</td>
|
|
<td class="text-center">
|
|
<v-btn
|
|
:disabled="loading"
|
|
variant="plain"
|
|
width="40px"
|
|
@click="openDialogEdit(item)"
|
|
min-width="40px"
|
|
color="primary"
|
|
>
|
|
<span
|
|
class="iconify secondary"
|
|
data-icon="fluent:edit-24-regular"
|
|
data-inline="false"
|
|
style="font-size: 24px;"
|
|
></span>
|
|
</v-btn>
|
|
<!-- <v-btn
|
|
color="error"
|
|
size="large"
|
|
:text="$t('message.form.close')"
|
|
@click="openDialogInfo()"
|
|
></v-btn> -->
|
|
<v-btn
|
|
@click="openDialogDelete(item)"
|
|
:disabled="loading"
|
|
variant="plain"
|
|
width="40px"
|
|
min-width="40px"
|
|
color="error"
|
|
>
|
|
<span
|
|
class="iconify error"
|
|
data-icon="fluent:delete-24-regular"
|
|
style="font-size: 24px;"
|
|
></span>
|
|
</v-btn>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</v-data-table-server>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.row-pointer >>> tbody tr :hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<script type="module">
|
|
export default {
|
|
name: "ListPatient",
|
|
data() {
|
|
return {
|
|
cobaHtml: "coba",
|
|
itemsPerPageOption: [
|
|
{ value: 2, title: "2" },
|
|
{ value: 5, title: "5" },
|
|
{ value: 10, title: "10" },
|
|
{ value: 25, title: "25" },
|
|
{ value: 50, title: "50" },
|
|
],
|
|
headers: [
|
|
{
|
|
align: "start",
|
|
key: "locationName",
|
|
sortable: true,
|
|
width: "35%",
|
|
title: this.$t("message.tableListPatient.lokasi"),
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
align: "start",
|
|
key: "stationName",
|
|
sortable: true,
|
|
width: "35%",
|
|
title: this.$t("message.tableListPatient.station"),
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
align: "start",
|
|
key: "priority",
|
|
sortable: true,
|
|
width: "20%",
|
|
title: this.$t("message.tableListPatient.prioritas"),
|
|
class: "font-weight-bold",
|
|
},
|
|
{
|
|
align: "center",
|
|
key: "name",
|
|
sortable: false,
|
|
width: "10%",
|
|
title: this.$t("message.tableListPatient.aksi"),
|
|
class: "font-weight-bold",
|
|
},
|
|
],
|
|
};
|
|
},
|
|
mounted() {
|
|
// Iconify.scan();
|
|
this.$store.dispatch("lokasi/search");
|
|
},
|
|
computed: {
|
|
dialogInfo: {
|
|
get() {
|
|
return this.$store.state.lokasi.dialogInfo;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_dialogInfo", val);
|
|
},
|
|
},
|
|
snackbar: {
|
|
get() {
|
|
return this.$store.state.lokasi.snackbar;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_snackbar", val);
|
|
},
|
|
},
|
|
dialogDelete: {
|
|
get() {
|
|
return this.$store.state.lokasi.dialogDelete;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_dialogDelete", val);
|
|
},
|
|
},
|
|
action: {
|
|
get() {
|
|
return this.$store.state.lokasi.action;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_action", val);
|
|
},
|
|
},
|
|
stationList: {
|
|
get() {
|
|
return this.$store.state.lokasi.stationList;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_stationList", val);
|
|
},
|
|
},
|
|
selectedStation: {
|
|
get() {
|
|
return this.$store.state.lokasi.selectedStation;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_selectedStation", val);
|
|
},
|
|
},
|
|
dialogForm: {
|
|
get() {
|
|
return this.$store.state.lokasi.dialogForm;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_dialogForm", val);
|
|
},
|
|
},
|
|
sortBy: {
|
|
get() {
|
|
return this.$store.state.lokasi.sortBy;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_sortBy", val);
|
|
},
|
|
},
|
|
orderBy: {
|
|
get() {
|
|
return this.$store.state.lokasi.orderBy;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_orderBy", val);
|
|
},
|
|
},
|
|
locationListTmp: {
|
|
get() {
|
|
return this.$store.state.lokasi.locationListTmp;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_locationListTmp", val);
|
|
},
|
|
},
|
|
locationList: {
|
|
get() {
|
|
return this.$store.state.lokasi.locationList;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_locationList", val);
|
|
},
|
|
},
|
|
totalItems: {
|
|
get() {
|
|
return this.$store.state.lokasi.totalItems;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_totalItems", val);
|
|
},
|
|
},
|
|
loading: {
|
|
get() {
|
|
return this.$store.state.lokasi.loading;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_loading", val);
|
|
},
|
|
},
|
|
search: {
|
|
get() {
|
|
return this.$store.state.lokasi.search;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_search", val);
|
|
},
|
|
},
|
|
itemsPerPage: {
|
|
get() {
|
|
return this.$store.state.lokasi.itemsPerPage;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_itemsPerPage", val);
|
|
},
|
|
},
|
|
page: {
|
|
get() {
|
|
return this.$store.state.lokasi.page;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_page", val);
|
|
},
|
|
},
|
|
xpatients() {
|
|
return this.$store.state.sendtofo.patients;
|
|
},
|
|
selectedLocation: {
|
|
get() {
|
|
return this.$store.state.lokasi.selectedLocation;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_selectedLocation", val);
|
|
},
|
|
},
|
|
inpLocation: {
|
|
get() {
|
|
return this.$store.state.lokasi.inpLocation;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_inpLocation", val);
|
|
},
|
|
},
|
|
inpPriority: {
|
|
get() {
|
|
return this.$store.state.lokasi.inpPriority;
|
|
},
|
|
set(val) {
|
|
this.$store.commit("lokasi/update_inpPriority", val);
|
|
},
|
|
},
|
|
},
|
|
methods: {
|
|
saveData() {
|
|
this.dialogForm = false;
|
|
let snackbar = {
|
|
model: true,
|
|
type: "success",
|
|
message: "coba",
|
|
multiLine: true,
|
|
location: "top",
|
|
timeout: 1500,
|
|
};
|
|
this.snackbar = snackbar;
|
|
let df = {
|
|
title: "INFORMATION",
|
|
model: true,
|
|
color: "primary",
|
|
message: "information",
|
|
};
|
|
this.dialogInfo = df;
|
|
},
|
|
openDialogInfo() {
|
|
let df = {
|
|
title: "INFORMATION",
|
|
model: true,
|
|
color: "primary",
|
|
message: "information",
|
|
};
|
|
this.dialogInfo = df;
|
|
},
|
|
openDialogDelete(data) {
|
|
this.selectMe(data);
|
|
this.dialogDelete = true;
|
|
let snackbar = {
|
|
model: true,
|
|
type: "success",
|
|
message: "coba",
|
|
multiLine: true,
|
|
location: "top",
|
|
timeout: 1500,
|
|
};
|
|
this.snackbar = snackbar;
|
|
},
|
|
openDialogEdit(data) {
|
|
this.action = "edit";
|
|
this.dialogForm = true;
|
|
this.inpLocation = data.locationName;
|
|
this.inpPriority = data.priority;
|
|
this.selectedStation = {
|
|
id: 2,
|
|
name: data.stationName,
|
|
};
|
|
},
|
|
getIcon(iconName) {
|
|
return `<span class="iconify" data-icon="${iconName}" data-inline="false"></span>`;
|
|
},
|
|
selectMe(item) {
|
|
if (this.loading == true) return;
|
|
this.selectedLocation = item;
|
|
},
|
|
async coba({ page, itemsPerPage, sortBy, search }) {
|
|
this.page = page;
|
|
if (sortBy[0] != undefined) {
|
|
this.sortBy = sortBy[0]["key"];
|
|
this.orderBy = sortBy[0]["order"];
|
|
}
|
|
this.$store.dispatch("lokasi/search");
|
|
},
|
|
isSelected(p) {
|
|
return p.id == this.$store.state.lokasi.selectedLocation.id;
|
|
},
|
|
// selectMe(data) {
|
|
// this.$store.commit("sendtofo/setSelectedPatient", data);
|
|
// this.$store.commit("sendtofo/setSelectedDetail", data);
|
|
// },
|
|
},
|
|
wacth: {},
|
|
};
|
|
</script>
|