Add business.

2026-05-21 17:59:14 +03:30
parent 4bc6c003f3
commit ebae7687af
11 changed files with 456 additions and 54 deletions
@@ -0,0 +1,133 @@
+<template>
+  <div class="space-y-3">
+    <label class="block text-sm font-medium text-muted">تصاویر کسب‌وکار</label>
+    <p class="text-xs text-muted">حداکثر ۱۰ تصویر — هر کدام تا ۵ مگابایت (JPG, PNG, WebP)</p>
+
+    <div v-if="existing.length" class="grid grid-cols-3 gap-2">
+      <div
+        v-for="img in existing"
+        :key="img.id"
+        class="relative aspect-square overflow-hidden rounded-xl border border-border bg-surface-3"
+      >
+        <img :src="uploadUrl(img.url)" :alt="img.originalName ?? ''" class="h-full w-full object-cover" />
+        <span
+          v-if="img.isCover"
+          class="absolute left-1 top-1 rounded bg-brand-600/90 px-1.5 py-0.5 text-[10px] text-white"
+        >
+          کاور
+        </span>
+        <button
+          type="button"
+          class="absolute bottom-1 left-1 right-1 rounded-lg bg-black/60 py-1 text-xs text-white"
+          :disabled="deletingId === img.id"
+          @click="emit('remove-existing', img.id)"
+        >
+          حذف
+        </button>
+      </div>
+    </div>
+
+    <div v-if="pendingPreviews.length" class="grid grid-cols-3 gap-2">
+      <div
+        v-for="(src, idx) in pendingPreviews"
+        :key="idx"
+        class="relative aspect-square overflow-hidden rounded-xl border border-dashed border-brand-500/50"
+      >
+        <img :src="src" alt="" class="h-full w-full object-cover" />
+        <button
+          type="button"
+          class="absolute bottom-1 left-1 right-1 rounded-lg bg-black/60 py-1 text-xs text-white"
+          @click="removePending(idx)"
+        >
+          حذف
+        </button>
+      </div>
+    </div>
+
+    <label
+      class="flex cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-border bg-surface-3 px-4 py-6 text-sm text-muted transition hover:border-brand-500/50 hover:bg-brand-500/5"
+    >
+      <span class="text-2xl">📷</span>
+      <span class="mt-2">افزودن تصویر</span>
+      <input
+        type="file"
+        accept="image/jpeg,image/png,image/webp,image/gif"
+        multiple
+        class="hidden"
+        @change="onPick"
+      />
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch } from 'vue';
+import type { BusinessImage } from '@/api/types';
+import { uploadUrl } from '@/utils/media';
+
+const props = defineProps<{
+  existing: BusinessImage[];
+  deletingId?: string | null;
+}>();
+
+const emit = defineEmits<{
+  'remove-existing': [imageId: string];
+  'pending-change': [files: File[]];
+}>();
+
+const pendingFiles = ref<File[]>([]);
+const pendingPreviews = ref<string[]>([]);
+
+function revokeAll() {
+  for (const url of pendingPreviews.value) {
+    URL.revokeObjectURL(url);
+  }
+}
+
+function syncPending() {
+  emit('pending-change', [...pendingFiles.value]);
+}
+
+function onPick(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const picked = Array.from(input.files ?? []);
+  input.value = '';
+  if (!picked.length) return;
+
+  const total = props.existing.length + pendingFiles.value.length + picked.length;
+  if (total > 10) {
+    alert('حداکثر ۱۰ تصویر مجاز است.');
+    return;
+  }
+
+  for (const file of picked) {
+    pendingFiles.value.push(file);
+    pendingPreviews.value.push(URL.createObjectURL(file));
+  }
+  syncPending();
+}
+
+function removePending(index: number) {
+  URL.revokeObjectURL(pendingPreviews.value[index]);
+  pendingFiles.value.splice(index, 1);
+  pendingPreviews.value.splice(index, 1);
+  syncPending();
+}
+
+watch(
+  () => props.existing.length,
+  () => syncPending(),
+);
+
+onBeforeUnmount(revokeAll);
+
+defineExpose({
+  clearPending() {
+    revokeAll();
+    pendingFiles.value = [];
+    pendingPreviews.value = [];
+    syncPending();
+  },
+  getPendingFiles: () => [...pendingFiles.value],
+});
+</script>
@@ -0,0 +1,58 @@
+<template>
+  <article class="overflow-hidden rounded-2xl border border-border bg-surface-2 transition hover:border-brand-500/40 hover:shadow-md">
+    <div class="relative aspect-[16/10] bg-surface-3">
+      <img
+        v-if="cover"
+        :src="cover"
+        :alt="business.title"
+        class="h-full w-full object-cover"
+        loading="lazy"
+      />
+      <div
+        v-else
+        class="flex h-full w-full items-center justify-center text-4xl text-muted/50"
+      >
+        🏪
+      </div>
+      <AppBadge
+        class="absolute left-2 top-2"
+        :tone="business.isActive ? 'success' : 'warning'"
+      >
+        {{ activeLabel(business.isActive) }}
+      </AppBadge>
+    </div>
+
+    <div class="p-3">
+      <h3 class="truncate font-semibold text-text">{{ business.title }}</h3>
+      <p v-if="business.category" class="mt-0.5 truncate text-xs text-muted">
+        {{ business.category.title }}
+      </p>
+      <p v-if="ownerText" class="mt-1 truncate text-xs text-muted">{{ ownerText }}</p>
+
+      <div v-if="$slots.actions" class="mt-3 grid gap-1" :class="actionGridClass">
+        <slot name="actions" />
+      </div>
+    </div>
+  </article>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { Business } from '@/api/types';
+import AppBadge from '@/components/ui/AppBadge.vue';
+import { activeLabel } from '@/utils/format';
+import { businessCoverUrl } from '@/utils/media';
+
+const props = defineProps<{
+  business: Business;
+  ownerText?: string | null;
+  actionCols?: number;
+}>();
+
+const cover = computed(() => businessCoverUrl(props.business.images));
+
+const actionGridClass = computed(() => {
+  const cols = props.actionCols ?? 3;
+  return cols === 2 ? 'grid-cols-2' : 'grid-cols-3';
+});
+</script>
@@ -0,0 +1,59 @@
+<template>
+  <RouterLink
+    :to="to"
+    class="group relative overflow-hidden rounded-2xl border border-border bg-surface-2 p-4 transition hover:border-brand-500/50 hover:shadow-md"
+  >
+    <div
+      class="pointer-events-none absolute -left-6 -top-6 h-20 w-20 rounded-full opacity-40 blur-2xl transition group-hover:opacity-60"
+      :class="accentClass"
+    />
+    <div class="relative flex items-start justify-between gap-2">
+      <div>
+        <p class="text-xs font-medium text-muted">{{ label }}</p>
+        <p class="mt-2 text-3xl font-bold tracking-tight text-text">{{ value }}</p>
+      </div>
+      <span
+        class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-lg"
+        :class="iconWrapClass"
+      >
+        {{ icon }}
+      </span>
+    </div>
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  label: string;
+  value: number | string;
+  icon: string;
+  to: string;
+  tone?: 'amber' | 'emerald' | 'sky' | 'violet' | 'rose';
+}>();
+
+const tone = computed(() => props.tone ?? 'amber');
+
+const accentClass = computed(() => {
+  const map = {
+    amber: 'bg-brand-500/30',
+    emerald: 'bg-emerald-500/30',
+    sky: 'bg-sky-500/30',
+    violet: 'bg-violet-500/30',
+    rose: 'bg-rose-500/30',
+  };
+  return map[tone.value];
+});
+
+const iconWrapClass = computed(() => {
+  const map = {
+    amber: 'bg-brand-500/15 text-brand-700 dark:text-brand-500',
+    emerald: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-400',
+    sky: 'bg-sky-500/15 text-sky-700 dark:text-sky-400',
+    violet: 'bg-violet-500/15 text-violet-700 dark:text-violet-400',
+    rose: 'bg-rose-500/15 text-rose-700 dark:text-rose-400',
+  };
+  return map[tone.value];
+});
+</script>