Make slug optional in admin create forms

Co-authored-by: Cursor <cursoragent@cursor.com>

src/api/types.ts

@@ -50,7 +50,7 @@ export type Business = {
 
 export type CreateBusinessPayload = {
   title: string;
-  slug: string;
+  slug?: string;
   categoryId: string;
   description?: string;
   contactPhone?: string;
@@ -71,7 +71,7 @@ export type UpdateBusinessPayload = Partial<CreateBusinessPayload> & {
 
 export type CreateCategoryPayload = {
   title: string;
-  slug: string;
+  slug?: string;
   isActive?: boolean;
 };
 
@@ -92,7 +92,7 @@ export type ServiceTemplate = {
 
 export type CreateServiceTemplatePayload = {
   title: string;
-  slug: string;
+  slug?: string;
   categoryId: string;
   description?: string;
   defaultDurationMinutes?: number;

src/utils/slug.ts

@@ -14,3 +14,8 @@ export const SLUG_PATTERN = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
 export function isValidSlug(slug: string): boolean {
   return SLUG_PATTERN.test(slug);
 }
+
+export function optionalSlug(value: string): string | undefined {
+  const trimmed = value.trim();
+  return trimmed || undefined;
+}

src/views/BusinessesView.vue

@@ -69,7 +69,13 @@
     >
       <form class="space-y-4" @submit.prevent="onSaveBusiness">
         <AppInput id="bizTitle" v-model="form.title" label="عنوان" required @blur="maybeSlug" />
-        <AppInput id="bizSlug" v-model="form.slug" label="اسلاگ" ltr required />
+        <AppInput
+          id="bizSlug"
+          v-model="form.slug"
+          label="اسلاگ (انگلیسی)"
+          ltr
+          placeholder="اختیاری — از عنوان ساخته می‌شود"
+        />
         <AppSelect
           id="bizCategory"
           v-model="form.categoryId"
@@ -197,7 +203,7 @@ import AdminLayout from '@/layouts/AdminLayout.vue';
 import { roleLabel } from '@/utils/format';
 import { isValidIranMobile, normalizeIranMobile } from '@/utils/mobile';
 import { filterBySearch } from '@/utils/search';
-import { isValidSlug, slugify } from '@/utils/slug';
+import { isValidSlug, optionalSlug, slugify } from '@/utils/slug';
 
 const businesses = ref<Business[]>([]);
 const searchQuery = ref('');
@@ -404,7 +410,8 @@ async function openAssign(biz: Business) {
 }
 
 async function onSaveBusiness() {
-  if (!isValidSlug(form.value.slug)) {
+  const slug = optionalSlug(form.value.slug);
+  if (slug && !isValidSlug(slug)) {
     error.value = 'اسلاگ نامعتبر است.';
     return;
   }
@@ -420,29 +427,30 @@ async function onSaveBusiness() {
 
   try {
     let businessId = editingId.value;
+    const basePayload = {
+      title: form.value.title.trim(),
+      categoryId: form.value.categoryId,
+      description: form.value.description.trim() || null,
+      contactPhone: form.value.contactPhone.trim() || null,
+      address: form.value.address.trim() || null,
+      latitude: lat ?? null,
+      longitude: lng ?? null,
+      isActive: form.value.isActive,
+    };
     if (businessId) {
       await updateBusiness(businessId, {
-        title: form.value.title.trim(),
-        slug: form.value.slug.trim(),
-        categoryId: form.value.categoryId,
-        description: form.value.description.trim() || null,
-        contactPhone: form.value.contactPhone.trim() || null,
-        address: form.value.address.trim() || null,
-        latitude: lat ?? null,
-        longitude: lng ?? null,
-        isActive: form.value.isActive,
+        ...basePayload,
+        ...(slug ? { slug } : {}),
       });
     } else {
       const created = await createBusiness({
-        title: form.value.title.trim(),
-        slug: form.value.slug.trim(),
-        categoryId: form.value.categoryId,
+        ...basePayload,
         description: form.value.description.trim() || undefined,
         contactPhone: form.value.contactPhone.trim() || undefined,
         address: form.value.address.trim() || undefined,
         latitude: lat,
         longitude: lng,
-        isActive: form.value.isActive,
+        ...(slug ? { slug } : {}),
       });
       businessId = created.id;
     }

src/views/CategoriesView.vue

@@ -68,8 +68,7 @@
           v-model="form.slug"
           label="اسلاگ (انگلیسی)"
           ltr
-          placeholder="car-wash"
-          required
+          placeholder="اختیاری — از عنوان ساخته می‌شود"
         />
         <label class="flex items-center gap-2 text-sm text-text">
           <input v-model="form.isActive" type="checkbox" class="rounded border-border" />
@@ -102,7 +101,7 @@ import SearchInput from '@/components/ui/SearchInput.vue';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 import { activeLabel } from '@/utils/format';
 import { filterBySearch } from '@/utils/search';
-import { isValidSlug, slugify } from '@/utils/slug';
+import { isValidSlug, optionalSlug, slugify } from '@/utils/slug';
 
 const categories = ref<BusinessCategory[]>([]);
 const searchQuery = ref('');
@@ -159,7 +158,8 @@ function maybeSlug() {
 }
 
 async function onSave() {
-  if (!isValidSlug(form.value.slug)) {
+  const slug = optionalSlug(form.value.slug);
+  if (slug && !isValidSlug(slug)) {
     error.value = 'اسلاگ فقط حروف کوچک انگلیسی و خط تیره باشد.';
     return;
   }
@@ -169,13 +169,13 @@ async function onSave() {
     if (editingId.value) {
       await updateCategory(editingId.value, {
         title: form.value.title.trim(),
-        slug: form.value.slug.trim(),
+        ...(slug ? { slug } : {}),
         isActive: form.value.isActive,
       });
     } else {
       await createCategory({
         title: form.value.title.trim(),
-        slug: form.value.slug.trim(),
+        ...(slug ? { slug } : {}),
         isActive: form.value.isActive,
       });
     }

src/views/ServiceTemplatesView.vue

@@ -80,8 +80,7 @@
           v-model="form.slug"
           label="اسلاگ (انگلیسی)"
           ltr
-          placeholder="haircut"
-          required
+          placeholder="اختیاری — از عنوان ساخته می‌شود"
         />
         <AppTextarea id="tplDesc" v-model="form.description" label="توضیحات" rows="2" />
         <AppInput
@@ -125,7 +124,7 @@ import SearchInput from '@/components/ui/SearchInput.vue';
 import AdminLayout from '@/layouts/AdminLayout.vue';
 import { activeLabel } from '@/utils/format';
 import { filterBySearch } from '@/utils/search';
-import { isValidSlug, slugify } from '@/utils/slug';
+import { isValidSlug, optionalSlug, slugify } from '@/utils/slug';
 
 const categories = ref<BusinessCategory[]>([]);
 const templates = ref<ServiceTemplate[]>([]);
@@ -222,7 +221,8 @@ function maybeSlug() {
 
 async function onSave() {
   if (!selectedCategoryId.value) return;
-  if (!isValidSlug(form.value.slug)) {
+  const slug = optionalSlug(form.value.slug);
+  if (slug && !isValidSlug(slug)) {
     error.value = 'اسلاگ فقط حروف کوچک انگلیسی و خط تیره باشد.';
     return;
   }
@@ -236,7 +236,7 @@ async function onSave() {
   try {
     const payload = {
       title: form.value.title.trim(),
-      slug: form.value.slug.trim(),
+      ...(slug ? { slug } : {}),
       description: form.value.description.trim() || undefined,
       defaultDurationMinutes: duration,
       isActive: form.value.isActive,