From 5fe7eb090edb372545e4814968e900a3832890dc Mon Sep 17 00:00:00 2001
From: Kavehhn174 <Kavehhn174@gmail.com>
Date: Sun, 16 Aug 2026 00:04:13 +0330
Subject: [PATCH] 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.
---
 src/views/classes/ClassFormView.vue | 68 +++++++++++++++++++----------
 1 file changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/views/classes/ClassFormView.vue b/src/views/classes/ClassFormView.vue
index 7ddfeb4..06a8c43 100644
--- a/src/views/classes/ClassFormView.vue
+++ b/src/views/classes/ClassFormView.vue
@@ -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
-            v-model="form.days"
-            :options="weekdays"
-            optionLabel="label"
-            optionValue="value"
-            multiple
-            class="text-sm"
-          />
-        </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" />
-        </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 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"
+                    :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" 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>
 
         <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,