edit business
This commit is contained in:
@@ -7,12 +7,12 @@
|
||||
/>
|
||||
<template v-else>
|
||||
<img
|
||||
src="/brand/logo-dark.png"
|
||||
src="/brand/logo-lite.png"
|
||||
alt="منتایم"
|
||||
:class="['dark:hidden', imgClass]"
|
||||
/>
|
||||
<img
|
||||
src="/brand/logo-lite.png"
|
||||
src="/brand/logo-dark.png"
|
||||
alt="منتایم"
|
||||
:class="['hidden dark:block', imgClass]"
|
||||
/>
|
||||
|
||||
@@ -1,106 +1,122 @@
|
||||
<template>
|
||||
<section class="space-y-3 rounded-2xl border border-border bg-surface-2 p-4">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<h2 class="text-base font-semibold text-text">کلاس‌بندی خدمات</h2>
|
||||
<p class="mt-1 text-xs text-muted">
|
||||
اختیاری — برای مثال کارواش می‌تواند بر اساس اندازه خودرو قیمت‌گذاری کند.
|
||||
<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="expanded"
|
||||
@click="expanded = !expanded"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<AppIcon name="folder" size="sm" class="text-brand-600 dark:text-brand-500" />
|
||||
<h2 class="text-base font-semibold text-text">کلاس‌بندی خدمات</h2>
|
||||
</div>
|
||||
<p v-if="!expanded" class="mt-1 truncate text-xs text-muted">
|
||||
{{ collapsedSummary }}
|
||||
</p>
|
||||
</div>
|
||||
<label class="flex shrink-0 items-center gap-2 text-sm text-text">
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="enabled"
|
||||
@change="onToggleEnabled"
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<label class="flex items-center gap-2 text-sm text-text" @click.stop>
|
||||
<input type="checkbox" :checked="enabled" @change="onToggleEnabled" />
|
||||
فعال
|
||||
</label>
|
||||
<AppIcon
|
||||
:name="expanded ? 'chevron-up' : 'chevron-down'"
|
||||
size="sm"
|
||||
class="text-muted"
|
||||
/>
|
||||
فعال
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<p v-if="!enabled" class="text-sm text-muted">
|
||||
در حالت غیرفعال، هر خدمت یک قیمت ثابت دارد. با فعال‌کردن، می‌توانید کلاس‌ها را تعریف کنید.
|
||||
</p>
|
||||
<div v-show="expanded" class="mt-3 space-y-3">
|
||||
<p class="text-xs leading-relaxed text-muted">
|
||||
اختیاری — برای مثال کارواش می‌تواند بر اساس اندازه خودرو قیمت‌گذاری کند.
|
||||
</p>
|
||||
|
||||
<template v-else>
|
||||
<p v-if="error" class="rounded-xl border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600">
|
||||
{{ error }}
|
||||
</p>
|
||||
<p v-if="!enabled" class="text-sm text-muted">
|
||||
در حالت غیرفعال، هر خدمت یک قیمت ثابت دارد. با فعال‌کردن، می‌توانید کلاس‌ها را تعریف کنید.
|
||||
</p>
|
||||
|
||||
<div v-if="loading" class="text-sm text-muted">در حال بارگذاری…</div>
|
||||
<template v-else>
|
||||
<p
|
||||
v-if="error"
|
||||
class="rounded-xl border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-600"
|
||||
>
|
||||
{{ error }}
|
||||
</p>
|
||||
|
||||
<ul v-else-if="classes.length" class="space-y-2">
|
||||
<li
|
||||
v-for="item in classes"
|
||||
:key="item.id"
|
||||
class="rounded-xl border border-border bg-surface px-3 py-2"
|
||||
>
|
||||
<div v-if="editingId === item.id" class="space-y-2">
|
||||
<AppInput id="editClassTitle" v-model="editForm.title" label="عنوان کلاس" required />
|
||||
<div v-if="loading" class="text-sm text-muted">در حال بارگذاری…</div>
|
||||
|
||||
<ul v-else-if="classes.length" class="space-y-2">
|
||||
<li
|
||||
v-for="item in classes"
|
||||
:key="item.id"
|
||||
class="rounded-xl border border-border bg-surface px-3 py-2"
|
||||
>
|
||||
<div v-if="editingId === item.id" class="space-y-2">
|
||||
<AppInput id="editClassTitle" v-model="editForm.title" label="عنوان کلاس" required />
|
||||
<div class="space-y-1.5">
|
||||
<label for="editClassDesc" class="block text-sm font-medium text-muted">توضیح (اختیاری)</label>
|
||||
<textarea
|
||||
id="editClassDesc"
|
||||
v-model="editForm.description"
|
||||
rows="2"
|
||||
class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-sm text-text outline-none focus:border-brand-500"
|
||||
/>
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-xs text-muted">
|
||||
<input v-model="editForm.isActive" type="checkbox" />
|
||||
فعال
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<AppButton class="!w-auto flex-1" :loading="saving" @click="saveEdit(item.id)">
|
||||
ذخیره
|
||||
</AppButton>
|
||||
<AppButton variant="ghost" class="!w-auto px-4" @click="cancelEdit">انصراف</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex items-start justify-between gap-2">
|
||||
<div class="min-w-0">
|
||||
<p class="font-medium text-text">{{ item.title }}</p>
|
||||
<p v-if="item.description" class="mt-0.5 text-xs text-muted">{{ item.description }}</p>
|
||||
<span
|
||||
v-if="!item.isActive"
|
||||
class="mt-1 inline-block rounded-lg bg-surface-3 px-2 py-0.5 text-xs text-muted"
|
||||
>
|
||||
غیرفعال
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-1">
|
||||
<AppIconButton icon="pencil" label="ویرایش کلاس" @click="startEdit(item)" />
|
||||
<AppIconButton icon="trash" label="حذف کلاس" variant="danger" @click="onDelete(item)" />
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p v-else class="text-sm text-muted">هنوز کلاسی تعریف نشده است.</p>
|
||||
|
||||
<form class="space-y-3 border-t border-border pt-3" @submit.prevent="onAdd">
|
||||
<p class="text-sm font-medium text-text">افزودن کلاس</p>
|
||||
<AppInput id="classTitle" v-model="form.title" label="عنوان کلاس" required />
|
||||
<div class="space-y-1.5">
|
||||
<label for="editClassDesc" class="block text-sm font-medium text-muted">توضیح (اختیاری)</label>
|
||||
<label for="classDesc" class="block text-sm font-medium text-muted">توضیح (اختیاری)</label>
|
||||
<textarea
|
||||
id="editClassDesc"
|
||||
v-model="editForm.description"
|
||||
id="classDesc"
|
||||
v-model="form.description"
|
||||
rows="2"
|
||||
class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-sm text-text outline-none focus:border-brand-500"
|
||||
/>
|
||||
</div>
|
||||
<label class="flex items-center gap-2 text-xs text-muted">
|
||||
<input v-model="editForm.isActive" type="checkbox" />
|
||||
فعال
|
||||
</label>
|
||||
<div class="flex gap-2">
|
||||
<AppButton class="!w-auto flex-1" :loading="saving" @click="saveEdit(item.id)">
|
||||
ذخیره
|
||||
</AppButton>
|
||||
<AppButton variant="ghost" class="!w-auto px-4" @click="cancelEdit">انصراف</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex items-start justify-between gap-2">
|
||||
<div class="min-w-0">
|
||||
<p class="font-medium text-text">{{ item.title }}</p>
|
||||
<p v-if="item.description" class="mt-0.5 text-xs text-muted">{{ item.description }}</p>
|
||||
<span
|
||||
v-if="!item.isActive"
|
||||
class="mt-1 inline-block rounded-lg bg-surface-3 px-2 py-0.5 text-xs text-muted"
|
||||
>
|
||||
غیرفعال
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex shrink-0 gap-1">
|
||||
<AppButton variant="ghost" class="!w-auto px-2 text-xs" @click="startEdit(item)">
|
||||
ویرایش
|
||||
</AppButton>
|
||||
<AppButton variant="danger" class="!w-auto px-2 text-xs" @click="onDelete(item)">
|
||||
حذف
|
||||
</AppButton>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p v-else class="text-sm text-muted">هنوز کلاسی تعریف نشده است.</p>
|
||||
|
||||
<form class="space-y-3 border-t border-border pt-3" @submit.prevent="onAdd">
|
||||
<p class="text-sm font-medium text-text">افزودن کلاس</p>
|
||||
<AppInput id="classTitle" v-model="form.title" label="عنوان کلاس" required />
|
||||
<div class="space-y-1.5">
|
||||
<label for="classDesc" class="block text-sm font-medium text-muted">توضیح (اختیاری)</label>
|
||||
<textarea
|
||||
id="classDesc"
|
||||
v-model="form.description"
|
||||
rows="2"
|
||||
class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-sm text-text outline-none focus:border-brand-500"
|
||||
/>
|
||||
</div>
|
||||
<AppButton type="submit" :loading="adding">افزودن کلاس</AppButton>
|
||||
</form>
|
||||
</template>
|
||||
<AppButton type="submit" :loading="adding">افزودن کلاس</AppButton>
|
||||
</form>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import {
|
||||
createBusinessServiceClass,
|
||||
deleteBusinessServiceClass,
|
||||
@@ -110,6 +126,8 @@ import {
|
||||
import { ApiError } from '@/api/client';
|
||||
import type { BusinessServiceClass } from '@/api/types';
|
||||
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';
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -122,6 +140,7 @@ const emit = defineEmits<{
|
||||
'update:enabled': [value: boolean];
|
||||
}>();
|
||||
|
||||
const expanded = ref(false);
|
||||
const classes = ref<BusinessServiceClass[]>([]);
|
||||
const loading = ref(false);
|
||||
const adding = ref(false);
|
||||
@@ -132,6 +151,15 @@ const editingId = ref<string | null>(null);
|
||||
const form = ref({ title: '', description: '' });
|
||||
const editForm = ref({ title: '', description: '', isActive: true });
|
||||
|
||||
const collapsedSummary = computed(() => {
|
||||
if (!props.enabled) return 'غیرفعال — هر خدمت یک قیمت ثابت';
|
||||
if (loading.value) return 'فعال — در حال بارگذاری…';
|
||||
const count = classes.value.length;
|
||||
if (count === 0) return 'فعال — هنوز کلاسی تعریف نشده';
|
||||
const activeCount = classes.value.filter((c) => c.isActive).length;
|
||||
return `فعال · ${count} کلاس (${activeCount} فعال)`;
|
||||
});
|
||||
|
||||
async function load() {
|
||||
if (!props.enabled) {
|
||||
classes.value = [];
|
||||
|
||||
@@ -19,16 +19,21 @@ import {
|
||||
CircleCheck,
|
||||
Clock,
|
||||
ClipboardList,
|
||||
Eye,
|
||||
EyeOff,
|
||||
FolderOpen,
|
||||
Home,
|
||||
LayoutDashboard,
|
||||
MapPin,
|
||||
Moon,
|
||||
Plus,
|
||||
Pencil,
|
||||
Search,
|
||||
Store,
|
||||
Sun,
|
||||
Trash2,
|
||||
User,
|
||||
UserCog,
|
||||
Users,
|
||||
X,
|
||||
} from '@lucide/vue';
|
||||
@@ -55,6 +60,11 @@ const iconMap: Record<AppIconName, Component> = {
|
||||
'chevron-down': ChevronDown,
|
||||
'chevron-up': ChevronUp,
|
||||
clock: Clock,
|
||||
pencil: Pencil,
|
||||
trash: Trash2,
|
||||
'user-cog': UserCog,
|
||||
eye: Eye,
|
||||
'eye-off': EyeOff,
|
||||
};
|
||||
|
||||
const props = withDefaults(
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/50 disabled:pointer-events-none disabled:opacity-50"
|
||||
:class="variantClasses"
|
||||
:aria-label="label"
|
||||
:disabled="disabled"
|
||||
@click="emit('click', $event)"
|
||||
>
|
||||
<AppIcon :name="icon" size="sm" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import AppIcon from '@/components/ui/AppIcon.vue';
|
||||
import type { AppIconName } from '@/types/icons';
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
icon: AppIconName;
|
||||
label: string;
|
||||
variant?: 'default' | 'danger';
|
||||
disabled?: boolean;
|
||||
}>(),
|
||||
{
|
||||
variant: 'default',
|
||||
disabled: false,
|
||||
},
|
||||
);
|
||||
|
||||
const emit = defineEmits<{ click: [event: MouseEvent] }>();
|
||||
|
||||
const variantClasses = computed(() =>
|
||||
props.variant === 'danger'
|
||||
? 'text-muted hover:bg-red-500/10 hover:text-red-600'
|
||||
: 'text-muted hover:bg-surface-3 hover:text-text',
|
||||
);
|
||||
</script>
|
||||
@@ -3,22 +3,40 @@
|
||||
<label v-if="label" :for="id" class="block text-sm font-medium text-muted">
|
||||
{{ label }}
|
||||
</label>
|
||||
<input
|
||||
:id="id"
|
||||
v-model="model"
|
||||
class="w-full rounded-xl border border-border bg-surface-2 px-4 py-3 text-text outline-none transition placeholder:text-[var(--color-placeholder)] focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
|
||||
:class="ltr ? 'text-left' : ''"
|
||||
v-bind="$attrs"
|
||||
/>
|
||||
<div class="relative">
|
||||
<input
|
||||
:id="id"
|
||||
v-model="model"
|
||||
class="w-full rounded-xl border border-border bg-surface-2 py-3 text-text outline-none transition placeholder:text-[var(--color-placeholder)] focus:border-brand-500 focus:ring-2 focus:ring-brand-500/30"
|
||||
:class="inputPaddingClass"
|
||||
:type="resolvedType"
|
||||
v-bind="inputAttrs"
|
||||
/>
|
||||
<button
|
||||
v-if="isPassword"
|
||||
type="button"
|
||||
class="absolute top-1/2 flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg text-muted transition hover:text-text"
|
||||
:class="toggleButtonClass"
|
||||
:aria-label="showPassword ? 'مخفی کردن رمز' : 'نمایش رمز'"
|
||||
@click="showPassword = !showPassword"
|
||||
>
|
||||
<AppIcon :name="showPassword ? 'eye-off' : 'eye'" size="sm" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, useAttrs } from 'vue';
|
||||
import AppIcon from '@/components/ui/AppIcon.vue';
|
||||
|
||||
defineOptions({ inheritAttrs: false });
|
||||
|
||||
const model = defineModel<string>({ default: '' });
|
||||
const attrs = useAttrs();
|
||||
const showPassword = ref(false);
|
||||
|
||||
withDefaults(
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
label?: string;
|
||||
id?: string;
|
||||
@@ -26,4 +44,25 @@ withDefaults(
|
||||
}>(),
|
||||
{ ltr: false },
|
||||
);
|
||||
|
||||
const isPassword = computed(() => attrs.type === 'password');
|
||||
|
||||
const resolvedType = computed(() => {
|
||||
if (!isPassword.value) return attrs.type as string | undefined;
|
||||
return showPassword.value ? 'text' : 'password';
|
||||
});
|
||||
|
||||
const inputAttrs = computed(() => {
|
||||
const { type: _type, ...rest } = attrs;
|
||||
return rest;
|
||||
});
|
||||
|
||||
const inputPaddingClass = computed(() => {
|
||||
if (isPassword.value) {
|
||||
return props.ltr ? 'pl-4 pr-11 text-left' : 'pl-11 pr-4';
|
||||
}
|
||||
return props.ltr ? 'px-4 text-left' : 'px-4';
|
||||
});
|
||||
|
||||
const toggleButtonClass = computed(() => (props.ltr ? 'right-1' : 'left-1'));
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user