297 lines
9.7 KiB
Vue
297 lines
9.7 KiB
Vue
<script setup>
|
|
import Master from "../../layouts/master.vue";
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { Inertia } from '@inertiajs/inertia';
|
|
import TableGeneric from "../../components/TableGeneric.vue";
|
|
import ShiftCalendar from "../../components/shifts/ShiftCalendar.vue";
|
|
import { Link } from "@inertiajs/inertia-vue3";
|
|
import { useConfirm } from 'primevue/useconfirm';
|
|
import { useShiftStore } from "../../store/Shift.js";
|
|
import Button from 'primevue/button';
|
|
import Tag from 'primevue/tag';
|
|
const shiftStore = useShiftStore();
|
|
const props = defineProps({
|
|
shifts: {
|
|
type: Object,
|
|
},
|
|
search: {
|
|
type: String
|
|
},
|
|
day_of_week: {
|
|
type: [String, Array],
|
|
default: null
|
|
},
|
|
status: {
|
|
type: String
|
|
},
|
|
occupancy: {
|
|
type: String
|
|
},
|
|
permissions_edit: {
|
|
type: Boolean
|
|
},
|
|
permissions_delete: {
|
|
type: Boolean
|
|
}
|
|
})
|
|
|
|
const shifts = ref(props.shifts ?? []);
|
|
const selectedItems = ref([]);
|
|
const searchLoader = ref(false);
|
|
const filterLoader = ref(false);
|
|
|
|
const columns = ref(shiftStore.columns)
|
|
|
|
const queryParams = reactive({
|
|
search: props.search ?? '',
|
|
day_of_week: props.day_of_week ?? '',
|
|
status: props.status ?? '',
|
|
occupancy: props.occupancy ?? '',
|
|
})
|
|
|
|
const filters = ref({
|
|
status: (props.status && typeof props.status === 'string') ? props.status : null,
|
|
occupancy: (props.occupancy && typeof props.occupancy === 'string') ? props.occupancy : null,
|
|
day_of_week: shiftStore.parseStringToArray(props.day_of_week),
|
|
})
|
|
const confirm = useConfirm();
|
|
|
|
const showCalendar = ref(false);
|
|
|
|
watch(showCalendar, (visible) => {
|
|
if (visible && !shiftStore.calendarShifts.length) {
|
|
shiftStore.fetchCalendarData();
|
|
}
|
|
});
|
|
|
|
const onCalendarSelect = (shift) => {
|
|
if (!props.permissions_edit) {
|
|
Inertia.get(shiftStore.endpoints.edit(shift.id));
|
|
}
|
|
};
|
|
|
|
const onPageChange = (event) => {
|
|
shiftStore.navigateToPage(event.page + 1);
|
|
};
|
|
|
|
const searchData = () => {
|
|
searchLoader.value = true;
|
|
|
|
const searchParams = {
|
|
...(queryParams.search && { search: queryParams.search }),
|
|
...(queryParams.status && { status: queryParams.status }),
|
|
...(queryParams.occupancy && { occupancy: queryParams.occupancy }),
|
|
...shiftStore.convertFiltersToArrayParams(filters.value)
|
|
};
|
|
shiftStore.search(searchParams);
|
|
}
|
|
|
|
const onSelectionChange = (selection) => {
|
|
selectedItems.value = selection;
|
|
};
|
|
|
|
const onSearchChange = (value) => {
|
|
queryParams.search = value;
|
|
searchData();
|
|
};
|
|
|
|
const onFilterChange = (newFilters) => {
|
|
filters.value = { ...newFilters };
|
|
Object.keys(newFilters).forEach(key => {
|
|
if (Array.isArray(newFilters[key])) {
|
|
queryParams[key] = newFilters[key].join(',');
|
|
} else {
|
|
queryParams[key] = newFilters[key] || '';
|
|
}
|
|
});
|
|
};
|
|
|
|
const applyFilters = () => {
|
|
filterLoader.value = true;
|
|
searchData();
|
|
};
|
|
|
|
const clearFilters = () => {
|
|
filters.value = {
|
|
status: null,
|
|
occupancy: null,
|
|
day_of_week: [],
|
|
};
|
|
queryParams.status = '';
|
|
queryParams.occupancy = '';
|
|
queryParams.day_of_week = '';
|
|
searchData();
|
|
};
|
|
|
|
const showDeleteConfirm = (data) => {
|
|
confirm.require({
|
|
group: 'deleteTemplate',
|
|
header: 'مطمعن هستید؟',
|
|
message: 'اگر به عملیات اطمینان دارید، تأیید کنید.',
|
|
icon: 'fi fi-rr-info',
|
|
rejectProps: {
|
|
label: 'انصراف',
|
|
icon: 'fi fi-rr-ban',
|
|
outlined: true,
|
|
size: 'small',
|
|
class: '!text-xs !flex pt-1 !item-center',
|
|
iconClass: '!flex !text-xs',
|
|
},
|
|
acceptProps: {
|
|
label: 'حذف',
|
|
icon: 'fi fi-rr-check',
|
|
size: 'small',
|
|
class: '!text-xs !flex pt-1 !item-center',
|
|
iconClass: '!flex !text-xs',
|
|
},
|
|
accept: () => {
|
|
shiftStore.deleteRecord(data.id);
|
|
},
|
|
reject: () => {
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
const confirmDeleteSelected = (ids) => {
|
|
confirm.require({
|
|
group: 'deleteTemplate',
|
|
header: 'مطمعن هستید؟',
|
|
message: 'اگر به عملیات اطمینان دارید، تأیید کنید.',
|
|
icon: 'fi fi-rr-info',
|
|
rejectProps: {
|
|
label: 'انصراف',
|
|
icon: 'fi fi-rr-ban',
|
|
outlined: true,
|
|
size: 'small',
|
|
class: '!text-xs !flex pt-1 !item-center',
|
|
iconClass: '!flex !text-xs',
|
|
},
|
|
acceptProps: {
|
|
label: 'حذف',
|
|
icon: 'fi fi-rr-check',
|
|
size: 'small',
|
|
class: '!text-xs !flex pt-1 !item-center',
|
|
iconClass: '!flex !text-xs',
|
|
},
|
|
accept: () => {
|
|
shiftStore.bulkDelete(ids);
|
|
},
|
|
reject: () => {
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<master>
|
|
<div class="mb-4 grid grid-cols-2a justify-between items-center bg-white border-[1px] border-client-gray/20 py-4 px-4 rounded-2xl">
|
|
<h2 class="font-bold text-client-Fontcolor">{{ shiftStore.indexPageTitle }}</h2>
|
|
<div class="grid grid-cols-2a gap-2">
|
|
<Button
|
|
severity="secondary"
|
|
outlined
|
|
:pt="{icon : 'flex'}"
|
|
:icon="showCalendar ? 'fi fi-rr-list' : 'fi fi-rr-calendar'"
|
|
:label="showCalendar ? 'نمای جدول' : 'نمای تقویم'"
|
|
class="!text-sm"
|
|
@click="showCalendar = !showCalendar"
|
|
/>
|
|
<Button severity="secondary" asChild v-slot="slotProps">
|
|
<Link :class="slotProps.class" :href="shiftStore.endpoints.create">
|
|
<span class="text-sm">{{ shiftStore.pageTitle }}</span>
|
|
<i class="fi fi-rr-plus flex text-sm"></i>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div v-if="showCalendar" class="card border-[1px] border-client-gray/20 bg-white rounded-2xl">
|
|
<ShiftCalendar
|
|
:shifts="shiftStore.calendarShifts"
|
|
@select-shift="onCalendarSelect"
|
|
/>
|
|
</div>
|
|
<div v-else class="card border-[1px] border-client-gray/20 bg-white rounded-2xl">
|
|
<TableGeneric
|
|
:data="shifts.data"
|
|
:columns="columns"
|
|
:selectable="true"
|
|
:pagination="shifts.meta"
|
|
:searchable="true"
|
|
:searchValue="queryParams.search"
|
|
:filters="filters"
|
|
:filterLoader="filterLoader"
|
|
v-model="selectedItems"
|
|
@selection-change="onSelectionChange"
|
|
@page-change="onPageChange"
|
|
@search-change="onSearchChange"
|
|
@filter-change="onFilterChange"
|
|
@apply-filters="applyFilters"
|
|
@clear-filters="clearFilters"
|
|
>
|
|
<template #bulk-action="{ selection }" v-if="!permissions_delete">
|
|
<Button
|
|
label="حذف همه"
|
|
size="small"
|
|
:pt="{icon : 'flex'}"
|
|
icon="fi fi-rr-trash"
|
|
severity="danger"
|
|
class="!text-xs !flex"
|
|
outlined
|
|
@click="() => confirmDeleteSelected(selection.map(shift => shift.id))"
|
|
/>
|
|
</template>
|
|
|
|
<template #column-doctor="{ data }">
|
|
<span v-if="data.doctor" class="text-right text-sm">{{ data.doctor.fullname }}</span>
|
|
<Tag v-else class="!text-xs" value="آزاد" severity="success" />
|
|
</template>
|
|
|
|
<template #column-occupancy="{ data }">
|
|
<Tag
|
|
class="!text-xs"
|
|
:value="data.user_id ? 'اختصاص یافته' : 'آزاد'"
|
|
:severity="shiftStore.getOccupancySeverity(data.user_id)"
|
|
/>
|
|
</template>
|
|
|
|
<template #column-status="{ data }">
|
|
<Tag
|
|
class="!text-xs"
|
|
:value="data.is_active ? 'فعال' : 'غیرفعال'"
|
|
:severity="shiftStore.getStatusSeverity(data.is_active)"
|
|
/>
|
|
</template>
|
|
|
|
<template #column-actions="{ data }">
|
|
<div class="grid grid-cols-2a justify-start gap-2">
|
|
<Button
|
|
v-if="!permissions_delete"
|
|
type="button"
|
|
class="!w-8 !h-8"
|
|
variant="outlined"
|
|
severity="danger"
|
|
icon="fi fi-rr-trash"
|
|
:pt="{icon : '!mt-2 !text-xs'}"
|
|
@click="showDeleteConfirm(data)"
|
|
/>
|
|
<Button
|
|
v-if="!permissions_edit"
|
|
severity="info"
|
|
variant="outlined"
|
|
asChild
|
|
v-slot="slotProps"
|
|
>
|
|
<Link :class="[slotProps.class , '!w-8 !h-8']" :href="shiftStore.endpoints.edit(data.id)">
|
|
<i class="fi fi-rr-pen-clip flex !text-xs"></i>
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</template>
|
|
</TableGeneric>
|
|
</div>
|
|
</master>
|
|
</template>
|