feat: add withdraw request functionality and UI components
This commit is contained in:
@@ -4,6 +4,8 @@ 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();
|
||||
|
||||
@@ -18,8 +20,22 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
@@ -52,36 +68,36 @@ onUnmounted(() => {
|
||||
<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' }" />
|
||||
<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 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' }" />
|
||||
<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 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' }" />
|
||||
<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" class="!text-xs mt-2" type="date" format="YYYY-MM-DD" placeholder="تاریخ شیفت را انتخاب کنید"></CustomDatePicker>
|
||||
<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" class="!text-xs mt-2" type="time" format="HH:mm" display-format="HH:mm" placeholder="ساعت شروع را انتخاب کنید"></CustomDatePicker>
|
||||
<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" class="!text-xs mt-2" type="time" format="HH:mm" display-format="HH:mm" placeholder="ساعت پایان را انتخاب کنید"></CustomDatePicker>
|
||||
<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 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' }" />
|
||||
<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>
|
||||
@@ -97,5 +113,18 @@ onUnmounted(() => {
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user