edit business

2026-06-01 21:01:45 +03:30
parent 02da1834e0
commit 031f0a44ab
9 changed files with 387 additions and 145 deletions
@@ -28,16 +28,23 @@
      <form class="space-y-4" @submit.prevent="onSave">
        <h2 class="text-base font-semibold text-text">اطلاعات کسب‌وکار</h2>

-        <div class="rounded-2xl border border-border bg-surface-2 p-4">
-          <p class="text-xs text-muted">دسته</p>
-          <p class="mt-0.5 font-medium text-text">{{ business.category?.title ?? '—' }}</p>
-          <span
-            class="mt-2 inline-block rounded-lg px-2 py-0.5 text-xs"
-            :class="business.isActive ? 'bg-green-500/15 text-green-700' : 'bg-amber-500/15 text-amber-700'"
-          >
-            {{ business.isActive ? 'فعال' : 'غیرفعال' }}
-          </span>
-        </div>
+        <dl class="space-y-3 rounded-2xl border border-border bg-surface-2 p-4">
+          <div class="flex items-center justify-between gap-4">
+            <dt class="shrink-0 text-xs text-muted">دسته</dt>
+            <dd class="font-medium text-text">{{ business.category?.title ?? '—' }}</dd>
+          </div>
+          <div class="flex items-center justify-between gap-4">
+            <dt class="shrink-0 text-xs text-muted">وضعیت</dt>
+            <dd>
+              <span
+                class="inline-block rounded-lg px-2 py-0.5 text-xs"
+                :class="business.isActive ? 'bg-green-500/15 text-green-700' : 'bg-amber-500/15 text-amber-700'"
+              >
+                {{ business.isActive ? 'فعال' : 'غیرفعال' }}
+              </span>
+            </dd>
+          </div>
+        </dl>

        <AppInput id="ownerTitle" v-model="form.title" label="نام کسب‌وکار" required />

@@ -61,22 +68,65 @@
        />
        <AppInput id="ownerAddress" v-model="form.address" label="آدرس" />

-        <AppInput
-          id="ownerConcurrentCapacity"
-          v-model="form.concurrentCapacity"
-          label="پذیرش همزمان"
-          type="number"
-          inputmode="numeric"
-          ltr
-          required
-        />
-        <p class="-mt-2 text-xs text-muted">
-          حداکثر تعداد مشتری که همزمان می‌توانید پذیرش کنید. مثلاً ۳ یعنی هر ساعت تا ۳ رزرو هم‌پوشان.
-        </p>
-
        <AppButton type="submit" :loading="saving">ذخیره تغییرات</AppButton>
      </form>

+      <section class="border-t border-border pt-4">
+        <button
+          type="button"
+          class="flex w-full items-center justify-between gap-3 rounded-2xl border border-border bg-surface-2 px-4 py-3 text-start transition hover:border-brand-500/30"
+          :aria-expanded="bookingExpanded"
+          @click="bookingExpanded = !bookingExpanded"
+        >
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2">
+              <AppIcon name="calendar" size="sm" class="text-brand-600 dark:text-brand-500" />
+              <h2 class="text-base font-semibold text-text">تنظیمات نوبت‌دهی</h2>
+            </div>
+            <p v-if="!bookingExpanded" class="mt-1 truncate text-xs text-muted">
+              {{ bookingSummary }}
+            </p>
+          </div>
+          <AppIcon
+            :name="bookingExpanded ? 'chevron-up' : 'chevron-down'"
+            size="sm"
+            class="shrink-0 text-muted"
+          />
+        </button>
+
+        <div v-show="bookingExpanded" class="mt-3 space-y-4">
+          <AppInput
+            id="ownerConcurrentCapacity"
+            v-model="bookingForm.concurrentCapacity"
+            label="پذیرش همزمان"
+            type="number"
+            inputmode="numeric"
+            ltr
+            required
+          />
+          <p class="-mt-2 text-xs text-muted">
+            حداکثر تعداد مشتری که همزمان می‌توانید پذیرش کنید. مثلاً ۳ یعنی هر ساعت تا ۳ رزرو هم‌پوشان.
+          </p>
+
+          <AppInput
+            id="ownerSlotStep"
+            v-model="bookingForm.slotStepMinutes"
+            label="گام نوبت‌دهی (دقیقه)"
+            type="number"
+            inputmode="numeric"
+            ltr
+            required
+          />
+          <p class="-mt-2 text-xs text-muted">
+            فاصله بین ساعت‌های قابل رزرو. مثلاً ۳۰ یعنی ۱۰:۰۰، ۱۰:۳۰، ۱۱:۰۰ و …
+          </p>
+
+          <AppButton :loading="savingBooking" @click="onSaveBookingSettings">
+            ذخیره تنظیمات نوبت‌دهی
+          </AppButton>
+        </div>
+      </section>
+
      <BusinessAvailabilityEditor
        v-if="business"
        :business-id="business.id"
@@ -90,8 +140,30 @@
        @update:enabled="onServiceClassesEnabledChange"
      />

-      <section class="space-y-4 border-t border-border pt-6">
-        <h2 class="text-base font-semibold text-text">خدمات و قیمت‌ها</h2>
+      <section class="border-t border-border pt-4">
+        <button
+          type="button"
+          class="flex w-full items-center justify-between gap-3 rounded-2xl border border-border bg-surface-2 px-4 py-3 text-start transition hover:border-brand-500/30"
+          :aria-expanded="servicesExpanded"
+          @click="servicesExpanded = !servicesExpanded"
+        >
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2">
+              <AppIcon name="clipboard-list" size="sm" class="text-brand-600 dark:text-brand-500" />
+              <h2 class="text-base font-semibold text-text">خدمات و قیمت‌ها</h2>
+            </div>
+            <p v-if="!servicesExpanded" class="mt-1 truncate text-xs text-muted">
+              {{ servicesSummary }}
+            </p>
+          </div>
+          <AppIcon
+            :name="servicesExpanded ? 'chevron-up' : 'chevron-down'"
+            size="sm"
+            class="shrink-0 text-muted"
+          />
+        </button>
+
+        <div v-show="servicesExpanded" class="mt-3 space-y-4">
        <p class="text-xs text-muted">
          خدماتی که اینجا ثبت می‌کنید در صفحه کسب‌وکار برای مشتریان و مقایسه نمایش داده می‌شود.
        </p>
@@ -116,14 +188,20 @@
                  {{ svc.serviceTemplate.description }}
                </p>
              </div>
-              <label class="flex shrink-0 items-center gap-1 text-xs text-muted">
-                <input
-                  type="checkbox"
-                  :checked="svc.isActive"
-                  @change="onToggleActive(svc)"
-                />
-                فعال
-              </label>
+              <div class="flex shrink-0 items-center gap-1">
+                <label class="flex items-center gap-1 text-xs text-muted">
+                  <input
+                    type="checkbox"
+                    :checked="svc.isActive"
+                    @change="onToggleActive(svc)"
+                  />
+                  فعال
+                </label>
+                <template v-if="editingId !== svc.id">
+                  <AppIconButton icon="pencil" label="ویرایش خدمت" @click="startEdit(svc)" />
+                  <AppIconButton icon="trash" label="حذف خدمت" variant="danger" @click="onDelete(svc)" />
+                </template>
+              </div>
            </div>

            <div v-if="editingId === svc.id" class="mt-3 space-y-2">
@@ -212,14 +290,6 @@
                  )
                }}</span>
              </div>
-              <div class="flex flex-wrap items-center gap-2">
-              <AppButton variant="ghost" class="!w-auto px-2 text-xs" @click="startEdit(svc)">
-                ویرایش
-              </AppButton>
-              <AppButton variant="danger" class="!w-auto px-2 text-xs" @click="onDelete(svc)">
-                حذف
-              </AppButton>
-              </div>
            </div>
          </li>
        </ul>
@@ -359,6 +429,7 @@
            <AppButton type="submit" :loading="addingCustom">ارسال برای تأیید</AppButton>
          </form>
        </section>
+        </div>
      </section>
    </div>
  </WebAppLayout>
@@ -391,6 +462,8 @@ import { ApiError } from '@/api/client';
 import BusinessAvailabilityEditor from '@/components/owner/BusinessAvailabilityEditor.vue';
 import ServiceClassManager from '@/components/owner/ServiceClassManager.vue';
 import AppButton from '@/components/ui/AppButton.vue';
+import AppIcon from '@/components/ui/AppIcon.vue';
+import AppIconButton from '@/components/ui/AppIconButton.vue';
 import AppInput from '@/components/ui/AppInput.vue';
 import PriceInput from '@/components/ui/PriceInput.vue';
 import WebAppLayout from '@/layouts/WebAppLayout.vue';
@@ -413,6 +486,7 @@ const templates = ref<Awaited<ReturnType<typeof fetchServiceTemplates>>>([]);
 const loading = ref(true);
 const loadingServices = ref(false);
 const saving = ref(false);
+const savingBooking = ref(false);
 const savingService = ref(false);
 const addingService = ref(false);
 const addingCustom = ref(false);
@@ -420,15 +494,22 @@ const serviceRequests = ref<BusinessServiceRequest[]>([]);
 const error = ref('');
 const message = ref('');
 const editingId = ref<string | null>(null);
+const servicesExpanded = ref(false);

 const form = ref({
  title: '',
  description: '',
  contactPhone: '',
  address: '',
-  concurrentCapacity: '1',
 });

+const bookingForm = ref({
+  concurrentCapacity: '1',
+  slotStepMinutes: '30',
+});
+
+const bookingExpanded = ref(false);
+
 const serviceForm = ref({
  serviceTemplateId: '',
  price: '',
@@ -460,6 +541,19 @@ const hasServiceClasses = computed(
  () => business.value?.serviceClassesEnabled === true && activeClasses.value.length > 0,
 );

+const servicesSummary = computed(() => {
+  if (loadingServices.value) return 'در حال بارگذاری…';
+  const count = services.value.length;
+  if (count === 0) return 'هنوز خدمتی ثبت نشده';
+  const activeCount = services.value.filter((s) => s.isActive).length;
+  return `${count} خدمت · ${activeCount} فعال`;
+});
+
+const bookingSummary = computed(
+  () =>
+    `${bookingForm.value.concurrentCapacity} همزمان · گام ${bookingForm.value.slotStepMinutes} دقیقه`,
+);
+
 function emptyClassPriceForm() {
  const result: Record<string, { price: string; durationMinutes: string }> = {};
  for (const cls of activeClasses.value) {
@@ -550,7 +644,10 @@ onMounted(async () => {
        description: business.value.description ?? '',
        contactPhone: business.value.contactPhone ?? '',
        address: business.value.address ?? '',
+      };
+      bookingForm.value = {
        concurrentCapacity: String(business.value.concurrentCapacity ?? 1),
+        slotStepMinutes: String(business.value.slotStepMinutes ?? 30),
      };
      await loadServicesAndTemplates();
    }
@@ -563,11 +660,6 @@ onMounted(async () => {

 async function onSave() {
  if (!business.value) return;
-  const concurrentCapacity = Number.parseInt(form.value.concurrentCapacity, 10);
-  if (!Number.isFinite(concurrentCapacity) || concurrentCapacity < 1 || concurrentCapacity > 20) {
-    error.value = 'پذیرش همزمان باید عددی بین ۱ تا ۲۰ باشد.';
-    return;
-  }
  saving.value = true;
  error.value = '';
  message.value = '';
@@ -577,7 +669,6 @@ async function onSave() {
      description: form.value.description.trim() || null,
      contactPhone: form.value.contactPhone.trim() || null,
      address: form.value.address.trim() || null,
-      concurrentCapacity,
    });
    message.value = 'اطلاعات ذخیره شد.';
  } catch (e) {
@@ -587,6 +678,34 @@ async function onSave() {
  }
 }

+async function onSaveBookingSettings() {
+  if (!business.value) return;
+  const concurrentCapacity = Number.parseInt(bookingForm.value.concurrentCapacity, 10);
+  if (!Number.isFinite(concurrentCapacity) || concurrentCapacity < 1 || concurrentCapacity > 20) {
+    error.value = 'پذیرش همزمان باید عددی بین ۱ تا ۲۰ باشد.';
+    return;
+  }
+  const slotStepMinutes = Number.parseInt(bookingForm.value.slotStepMinutes, 10);
+  if (!Number.isFinite(slotStepMinutes) || slotStepMinutes < 5 || slotStepMinutes > 120) {
+    error.value = 'گام نوبت‌دهی باید عددی بین ۵ تا ۱۲۰ دقیقه باشد.';
+    return;
+  }
+  savingBooking.value = true;
+  error.value = '';
+  message.value = '';
+  try {
+    business.value = await updateBusiness(business.value.id, {
+      concurrentCapacity,
+      slotStepMinutes,
+    });
+    message.value = 'تنظیمات نوبت‌دهی ذخیره شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'خطا در ذخیره';
+  } finally {
+    savingBooking.value = false;
+  }
+}
+
 async function onAddService() {
  if (!business.value || !serviceForm.value.serviceTemplateId) return;