radicall/resources/js/Admin/Pages/Shifts/create_and_edit.vue

<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";
import ShiftCalendar from "../../components/shifts/ShiftCalendar.vue";
import { weekdayName } from "../../../Shared/shiftCalendarEvents";

const shiftStore = useShiftStore();

const props = defineProps({
    is_edit: {
        type: Boolean,
        default: () => false
    },
    shift: {
        type: Object,
        default: () => {}
    },
});

const pad = (value) => String(value).padStart(2, '0');

const onRangeSelect = ({ start, end }) => {
    shiftStore.createForm.start_time = `${pad(start.getHours())}:${pad(start.getMinutes())}`;
    shiftStore.createForm.end_time = `${pad(end.getHours())}:${pad(end.getMinutes())}`;

    if (shiftStore.createForm.schedule_type === 'date') {
        shiftStore.createForm.date = `${start.getFullYear()}-${pad(start.getMonth() + 1)}-${pad(start.getDate())}`;
    } else {
        shiftStore.createForm.day_of_week = weekdayName(start.getDay());
    }
};

onMounted(() => {
    shiftStore.fetchDoctorOptions();
    shiftStore.fetchCalendarData();
    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 placeholder="انتخاب پزشک (خالی = شیفت آزاد)" v-model="shiftStore.createForm.user_id" :options="shiftStore.doctorOptions" optionValue="value" optionLabel="label" showClear />
                        <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 placeholder="انتخاب نوع زمان‌بندی" v-model="shiftStore.createForm.schedule_type" :options="shiftStore.scheduleTypeOptions" optionValue="value" optionLabel="label" />
                    </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 placeholder="انتخاب روز هفته" v-model="shiftStore.createForm.day_of_week" :options="shiftStore.dayOptions" optionValue="value" optionLabel="label" />
                        <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" 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" 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" 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 placeholder="انتخاب وضعیت" v-model="shiftStore.createForm.is_active" :options="shiftStore.statusOptions" optionValue="value" optionLabel="label" />
                        <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>
        <Card class="mt-4">
            <div class="p-4 rounded-2xl">
                <div class="flex items-center justify-between pb-2">
                    <h5 class="font-bold text-client-Fontcolor">برنامه فعلی شیفت‌ها</h5>
                    <span class="text-xs text-client-Fontcolor/60">برای تنظیم سریع زمان شیفت، بازه مورد نظر را روی تقویم بکشید</span>
                </div>
                <ShiftCalendar
                    :shifts="shiftStore.calendarShifts"
                    selectable
                    @select-range="onRangeSelect"
                />
            </div>
        </Card>
    </master>
</template>