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:
2026-08-16 00:04:13 +03:30
parent 91527e64bb
commit 5fe7eb090e
+41 -17
View File
@@ -55,26 +55,50 @@
<label class="font-semibold text-sm">کلاس فعال است</label> <label class="font-semibold text-sm">کلاس فعال است</label>
</div> </div>
<div class="col-12 flex flex-column gap-2"> <div class="col-12">
<label class="font-semibold text-sm">روزهای برگزاری</label> <div class="class-schedule-fields p-3 border-1 border-color border-round">
<SelectButton <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" v-model="form.days"
:options="weekdays" :value="day.value"
optionLabel="label" />
optionValue="value" <span class="text-sm">{{ day.label }}</span>
multiple </label>
class="text-sm" </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>
<div class="col-12 md:col-6 flex flex-column gap-2"> <div class="col-12 md:col-6 flex flex-column gap-2">
<label class="font-semibold text-sm">ساعت شروع کلاس</label> <label class="font-semibold text-sm" for="class-end-time">ساعت پایان</label>
<InputText v-model.trim="form.startTime" class="w-full text-sm" dir="ltr" placeholder="19:00" /> <InputText
id="class-end-time"
v-model.trim="form.endTime"
class="w-full text-sm"
dir="ltr"
placeholder="21:00"
/>
</div>
</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>
<div class="col-12"> <div class="col-12">
@@ -197,12 +221,12 @@ import InputNumber from 'primevue/inputnumber';
import Dropdown from 'primevue/select'; import Dropdown from 'primevue/select';
import MultiSelect from 'primevue/multiselect'; import MultiSelect from 'primevue/multiselect';
import InputSwitch from 'primevue/toggleswitch'; import InputSwitch from 'primevue/toggleswitch';
import Checkbox from 'primevue/checkbox';
import Button from 'primevue/button'; import Button from 'primevue/button';
import Tag from 'primevue/tag'; import Tag from 'primevue/tag';
import DataTable from 'primevue/datatable'; import DataTable from 'primevue/datatable';
import Column from 'primevue/column'; import Column from 'primevue/column';
import DatePicker from 'vue3-persian-datetime-picker'; import DatePicker from 'vue3-persian-datetime-picker';
import SelectButton from 'primevue/selectbutton';
import { WEEKDAYS } from '@/utils/classSchedule'; import { WEEKDAYS } from '@/utils/classSchedule';
const route = useRoute(); const route = useRoute();
@@ -324,7 +348,7 @@ const fetchData = async () => {
tuitionFee: data.tuitionFee || 0, tuitionFee: data.tuitionFee || 0,
startDate: toJalaliDisplay(data.startDate), startDate: toJalaliDisplay(data.startDate),
endDate: toJalaliDisplay(data.endDate), 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 || '', startTime: data.startTime || '',
endTime: data.endTime || '', endTime: data.endTime || '',
isActive: data.isActive !== false, isActive: data.isActive !== false,