edit image business

src/views/app/AppOwnerView.vue

@@ -73,6 +73,18 @@
         <AppButton type="submit" :loading="saving">ذخیره تغییرات</AppButton>
       </form>
 
+      <section class="border-t border-border pt-6">
+        <BusinessImageUpload
+          :existing="business.images ?? []"
+          :deleting-id="deletingImageId"
+          :setting-cover-id="settingCoverId"
+          :uploading="uploadingImages"
+          @files-picked="onUploadImages"
+          @remove-existing="onRemoveImage"
+          @set-cover="onSetCoverImage"
+        />
+      </section>
+
       <section class="border-t border-border pt-4">
         <button
           type="button"
@@ -423,7 +435,7 @@
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
-import { fetchMyBusinesses, updateBusiness } from '@/api/businesses';
+import { fetchMyBusinesses, updateBusiness, uploadBusinessImages, deleteBusinessImage, setBusinessCoverImage } from '@/api/businesses';
 import {
   createServiceRequest,
   fetchMyServiceRequests,
@@ -446,6 +458,7 @@ import type {
 } from '@/api/types';
 import { ApiError } from '@/api/client';
 import BusinessAvailabilityEditor from '@/components/owner/BusinessAvailabilityEditor.vue';
+import BusinessImageUpload from '@/components/owner/BusinessImageUpload.vue';
 import ServiceClassManager from '@/components/owner/ServiceClassManager.vue';
 import FormPageSkeleton from '@/components/ui/FormPageSkeleton.vue';
 import ListCardSkeleton from '@/components/ui/ListCardSkeleton.vue';
@@ -479,6 +492,9 @@ const loadingServices = ref(false);
 const saving = ref(false);
 const savingBooking = ref(false);
 const savingService = ref(false);
+const uploadingImages = ref(false);
+const deletingImageId = ref<string | null>(null);
+const settingCoverId = ref<string | null>(null);
 const addingService = ref(false);
 const addingCustom = ref(false);
 const serviceRequests = ref<BusinessServiceRequest[]>([]);
@@ -652,6 +668,73 @@ onMounted(async () => {
   }
 });
 
+async function refreshBusinessImages() {
+  if (!business.value) return;
+  const list = await fetchMyBusinesses();
+  const fresh = list.find((item) => item.id === business.value?.id) ?? list[0];
+  if (!fresh) return;
+  business.value = { ...business.value, images: fresh.images ?? [] };
+  tenant.syncSingleBusiness(business.value);
+}
+
+async function onUploadImages(files: File[]) {
+  if (!business.value || !files.length) return;
+
+  const currentCount = business.value.images?.length ?? 0;
+  if (currentCount + files.length > 10) {
+    error.value = 'حداکثر ۱۰ تصویر مجاز است.';
+    return;
+  }
+
+  uploadingImages.value = true;
+  error.value = '';
+  message.value = '';
+  try {
+    await uploadBusinessImages(files);
+    await refreshBusinessImages();
+    message.value = 'تصاویر با موفقیت آپلود شدند.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'آپلود تصویر ناموفق بود';
+  } finally {
+    uploadingImages.value = false;
+  }
+}
+
+async function onRemoveImage(imageId: string) {
+  if (!business.value) return;
+  if (!window.confirm('این تصویر حذف شود؟')) return;
+
+  deletingImageId.value = imageId;
+  error.value = '';
+  message.value = '';
+  try {
+    await deleteBusinessImage(imageId);
+    await refreshBusinessImages();
+    message.value = 'تصویر حذف شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'حذف تصویر ناموفق بود';
+  } finally {
+    deletingImageId.value = null;
+  }
+}
+
+async function onSetCoverImage(imageId: string) {
+  if (!business.value) return;
+
+  settingCoverId.value = imageId;
+  error.value = '';
+  message.value = '';
+  try {
+    await setBusinessCoverImage(imageId);
+    await refreshBusinessImages();
+    message.value = 'تصویر کاور به‌روزرسانی شد.';
+  } catch (e) {
+    error.value = e instanceof ApiError ? e.message : 'تنظیم کاور ناموفق بود';
+  } finally {
+    settingCoverId.value = null;
+  }
+}
+
 async function onSave() {
   if (!business.value) return;
   saving.value = true;