fix(classes): make weekly schedule editable on the class form
Replace the PrimeVue SelectButton weekday control with a visible checkbox group so days and times stay on the edit page.
This commit is contained in:
@@ -55,26 +55,50 @@
|
||||
<label class="font-semibold text-sm">کلاس فعال است</label>
|
||||
</div>
|
||||
|
||||
<div class="col-12 flex flex-column gap-2">
|
||||
<label class="font-semibold text-sm">روزهای برگزاری</label>
|
||||
<SelectButton
|
||||
<div class="col-12">
|
||||
<div class="class-schedule-fields p-3 border-1 border-color border-round">
|
||||
<h3 class="text-base font-bold text-color m-0 mb-3">برنامه هفتگی کلاس</h3>
|
||||
<div class="flex flex-column gap-2 mb-3">
|
||||
<span class="font-semibold text-sm">روزهای برگزاری</span>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<label
|
||||
v-for="day in weekdays"
|
||||
:key="day.value"
|
||||
class="flex align-items-center gap-2 cursor-pointer"
|
||||
:for="`class-day-${day.value}`"
|
||||
>
|
||||
<Checkbox
|
||||
:inputId="`class-day-${day.value}`"
|
||||
v-model="form.days"
|
||||
:options="weekdays"
|
||||
optionLabel="label"
|
||||
optionValue="value"
|
||||
multiple
|
||||
class="text-sm"
|
||||
:value="day.value"
|
||||
/>
|
||||
<span class="text-sm">{{ day.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6 flex flex-column gap-2">
|
||||
<label class="font-semibold text-sm" for="class-start-time">ساعت شروع</label>
|
||||
<InputText
|
||||
id="class-start-time"
|
||||
v-model.trim="form.startTime"
|
||||
class="w-full text-sm"
|
||||
dir="ltr"
|
||||
placeholder="19:00"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6 flex flex-column gap-2">
|
||||
<label class="font-semibold text-sm">ساعت شروع کلاس</label>
|
||||
<InputText v-model.trim="form.startTime" class="w-full text-sm" dir="ltr" placeholder="19:00" />
|
||||
<label class="font-semibold text-sm" for="class-end-time">ساعت پایان</label>
|
||||
<InputText
|
||||
id="class-end-time"
|
||||
v-model.trim="form.endTime"
|
||||
class="w-full text-sm"
|
||||
dir="ltr"
|
||||
placeholder="21:00"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6 flex flex-column gap-2">
|
||||
<label class="font-semibold text-sm">ساعت پایان کلاس</label>
|
||||
<InputText v-model.trim="form.endTime" class="w-full text-sm" dir="ltr" placeholder="21:00" />
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
@@ -197,12 +221,12 @@ import InputNumber from 'primevue/inputnumber';
|
||||
import Dropdown from 'primevue/select';
|
||||
import MultiSelect from 'primevue/multiselect';
|
||||
import InputSwitch from 'primevue/toggleswitch';
|
||||
import Checkbox from 'primevue/checkbox';
|
||||
import Button from 'primevue/button';
|
||||
import Tag from 'primevue/tag';
|
||||
import DataTable from 'primevue/datatable';
|
||||
import Column from 'primevue/column';
|
||||
import DatePicker from 'vue3-persian-datetime-picker';
|
||||
import SelectButton from 'primevue/selectbutton';
|
||||
import { WEEKDAYS } from '@/utils/classSchedule';
|
||||
|
||||
const route = useRoute();
|
||||
@@ -324,7 +348,7 @@ const fetchData = async () => {
|
||||
tuitionFee: data.tuitionFee || 0,
|
||||
startDate: toJalaliDisplay(data.startDate),
|
||||
endDate: toJalaliDisplay(data.endDate),
|
||||
days: Array.isArray(data.days) ? [...data.days] : [],
|
||||
days: Array.isArray(data.days) ? data.days.map(Number).filter((day) => day >= 0 && day <= 6) : [],
|
||||
startTime: data.startTime || '',
|
||||
endTime: data.endTime || '',
|
||||
isActive: data.isActive !== false,
|
||||
|
||||
Reference in New Issue
Block a user