feat: add shift management functionality

2026-08-26 18:53:15 +03:30
parent 2d96978c38
commit aeef95339d
34 changed files with 1953 additions and 15 deletions
@@ -0,0 +1,101 @@
+<script setup>
+import Master from "../../layouts/master.vue";
+import {onMounted , onUnmounted} from 'vue';
+import {useShiftStore} from "../../store/Shift.js";
+import {Link} from "@inertiajs/inertia-vue3";
+import Card from "../../components/ui/Card.vue";
+
+const shiftStore = useShiftStore();
+
+const props = defineProps({
+    is_edit: {
+        type: Boolean,
+        default: () => false
+    },
+    shift: {
+        type: Object,
+        default: () => {}
+    },
+});
+
+onMounted(() => {
+    shiftStore.fetchDoctorOptions();
+    if (props.is_edit) {
+        shiftStore.setEditData(props.shift);
+    }
+});
+
+onUnmounted(() => {
+    shiftStore.resetCreateForm();
+    shiftStore.is_edit_form = false;
+    shiftStore.errorsCreateForm = [];
+})
+
+</script>
+
+<template>
+    <master>
+       <Card class="mb-4">
+            <div class="grid grid-cols-1 sm:grid-cols-[1fr_auto] justify-between items-center gap-4">
+                <h2 class="font-bold text-client-Fontcolor">{{ shiftStore.pageTitle }}</h2>
+                <Button severity="secondary" asChild v-slot="slotProps">
+                    <Link :class="slotProps.class" :href="shiftStore.endpoints.index">
+                        <span class="text-sm">{{ shiftStore.indexPageTitle }}</span>
+                        <i class="fi fi-rr-list flex text-sm"></i>
+                    </Link>
+                </Button>
+            </div>
+       </Card>
+        <section class="grid w-full grid-cols-1 lg:grid-cols-[1fr_22rem] gap-4">
+            <Card>
+                <div class="rounded-2xl bg-white">
+                <Form ref="formRef" v-slot="$form" class=" p-4 grid grid-cols-2 gap-4 !w-full">
+                    <FormField v-slot="$field" name="user_id" initialValue="" class="flex flex-col gap-1">
+                        <label>پزشک</label>
+                        <Select class="!text-xs !h-full" placeholder="انتخاب پزشک (خالی = شیفت آزاد)" v-model="shiftStore.createForm.user_id" :options="shiftStore.doctorOptions" optionValue="value" optionLabel="label" showClear :pt="{ option : '!text-sm' , placeholder : '!text-sm' , label : '!pt-3' }" />
+                        <Message v-if="shiftStore.errorsCreateForm?.user_id" severity="error" size="small" variant="simple">{{ shiftStore.errorsCreateForm?.user_id[0] }}</Message>
+                    </FormField>
+                    <FormField v-slot="$field" name="schedule_type" initialValue="" class="flex flex-col gap-1">
+                        <label>نوع زمان‌بندی</label>
+                        <Select class="!text-xs !h-full" placeholder="انتخاب نوع زمان‌بندی" v-model="shiftStore.createForm.schedule_type" :options="shiftStore.scheduleTypeOptions" optionValue="value" optionLabel="label" :pt="{ option : '!text-sm' , placeholder : '!text-sm' , label : '!pt-3' }" />
+                    </FormField>
+                    <FormField v-if="shiftStore.createForm.schedule_type === 'weekly'" v-slot="$field" name="day_of_week" initialValue="" class="flex flex-col gap-1">
+                        <label>روز هفته</label>
+                        <Select class="!text-xs !h-full" placeholder="انتخاب روز هفته" v-model="shiftStore.createForm.day_of_week" :options="shiftStore.dayOptions" optionValue="value" optionLabel="label" :pt="{ option : '!text-sm' , placeholder : '!text-sm' , label : '!pt-3' }" />
+                        <Message v-if="shiftStore.errorsCreateForm?.day_of_week" severity="error" size="small" variant="simple">{{ shiftStore.errorsCreateForm?.day_of_week[0] }}</Message>
+                    </FormField>
+                    <FormField v-else v-slot="$field" name="date" initialValue="" class="flex flex-col gap-1">
+                        <label>تاریخ</label>
+                        <CustomDatePicker v-model="shiftStore.createForm.date" class="!text-xs mt-2" type="date" format="YYYY-MM-DD" placeholder="تاریخ شیفت را انتخاب کنید"></CustomDatePicker>
+                        <Message v-if="shiftStore.errorsCreateForm?.date" severity="error" size="small" variant="simple">{{ shiftStore.errorsCreateForm?.date[0] }}</Message>
+                    </FormField>
+                    <FormField v-slot="$field" name="start_time" initialValue="" class="flex flex-col gap-1">
+                        <label>ساعت شروع</label>
+                        <CustomDatePicker v-model="shiftStore.createForm.start_time" class="!text-xs mt-2" type="time" format="HH:mm" display-format="HH:mm" placeholder="ساعت شروع را انتخاب کنید"></CustomDatePicker>
+                        <Message v-if="shiftStore.errorsCreateForm?.start_time" severity="error" size="small" variant="simple">{{ shiftStore.errorsCreateForm?.start_time[0] }}</Message>
+                    </FormField>
+                    <FormField v-slot="$field" name="end_time" initialValue="" class="flex flex-col gap-1">
+                        <label>ساعت پایان</label>
+                        <CustomDatePicker v-model="shiftStore.createForm.end_time" class="!text-xs mt-2" type="time" format="HH:mm" display-format="HH:mm" placeholder="ساعت پایان را انتخاب کنید"></CustomDatePicker>
+                        <Message v-if="shiftStore.errorsCreateForm?.end_time" severity="error" size="small" variant="simple">{{ shiftStore.errorsCreateForm?.end_time[0] }}</Message>
+                    </FormField>
+                    <FormField v-slot="$field" name="is_active" initialValue="" class="flex flex-col gap-1">
+                        <label>وضعیت</label>
+                        <Select class="!text-xs !h-full" placeholder="انتخاب وضعیت" v-model="shiftStore.createForm.is_active" :options="shiftStore.statusOptions" optionValue="value" optionLabel="label" :pt="{ option : '!text-sm' , placeholder : '!text-sm' , label : '!pt-3' }" />
+                        <Message v-if="shiftStore.errorsCreateForm?.is_active" severity="error" size="small" variant="simple">{{ shiftStore.errorsCreateForm?.is_active[0] }}</Message>
+                    </FormField>
+                </Form>
+            </div>
+            </Card>
+            <div>
+                <Card>
+                    <div class="p-4 grid grid-cols-1 gap-4 rounded-2xl">
+                        <div class="grid grid-cols-1 justify-start">
+                            <Button :loading="shiftStore.loaderCreateForm" @click="shiftStore.update_and_store" type="button" severity="secondary" :label="shiftStore.buttonLabel" />
+                        </div>
+                    </div>
+                </Card>
+            </div>
+        </section>
+    </master>
+</template>
@@ -0,0 +1,296 @@
+<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>