Simplify catalog settings layout
This commit is contained in:
Ruslan Bakiev
@@ -27,9 +27,9 @@ const settingsQuery = useQuery(CatalogProductTypeSettingsDocument);
|
||||
const saveSettingMutation = useMutation(UpsertCatalogProductTypeSettingDocument, { throws: 'never' });
|
||||
|
||||
const forms = reactive<Record<string, CatalogSettingForm>>({});
|
||||
const savingState = reactive<Record<string, boolean>>({});
|
||||
const successMessage = reactive<Record<string, string>>({});
|
||||
const errorMessage = reactive<Record<string, string>>({});
|
||||
const isSavingAll = ref(false);
|
||||
const saveSuccess = ref('');
|
||||
const saveError = ref('');
|
||||
|
||||
const settings = computed<CatalogSettingItem[]>(() => settingsQuery.result.value?.catalogProductTypeSettings ?? []);
|
||||
|
||||
@@ -61,9 +61,6 @@ function parseOptionalInteger(value: string) {
|
||||
|
||||
function formFor(item: CatalogSettingItem) {
|
||||
forms[item.productType] ??= createForm(item);
|
||||
savingState[item.productType] ??= false;
|
||||
successMessage[item.productType] ??= '';
|
||||
errorMessage[item.productType] ??= '';
|
||||
return forms[item.productType];
|
||||
}
|
||||
|
||||
@@ -75,32 +72,23 @@ watch(
|
||||
for (const productType of Object.keys(forms)) {
|
||||
if (!activeTypes.has(productType)) {
|
||||
Reflect.deleteProperty(forms, productType);
|
||||
Reflect.deleteProperty(savingState, productType);
|
||||
Reflect.deleteProperty(successMessage, productType);
|
||||
Reflect.deleteProperty(errorMessage, productType);
|
||||
}
|
||||
}
|
||||
|
||||
for (const item of items) {
|
||||
forms[item.productType] = createForm(item);
|
||||
savingState[item.productType] ??= false;
|
||||
successMessage[item.productType] ??= '';
|
||||
errorMessage[item.productType] ??= '';
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
async function saveProductTypeSetting(productType: string) {
|
||||
const form = forms[productType];
|
||||
if (!form) {
|
||||
return;
|
||||
}
|
||||
|
||||
successMessage[productType] = '';
|
||||
errorMessage[productType] = '';
|
||||
savingState[productType] = true;
|
||||
async function saveAllSettings() {
|
||||
saveSuccess.value = '';
|
||||
saveError.value = '';
|
||||
isSavingAll.value = true;
|
||||
|
||||
for (const item of settings.value) {
|
||||
const form = formFor(item);
|
||||
const result = await saveSettingMutation.mutate({
|
||||
input: {
|
||||
productType: form.productType,
|
||||
@@ -114,26 +102,23 @@ async function saveProductTypeSetting(productType: string) {
|
||||
},
|
||||
});
|
||||
|
||||
savingState[productType] = false;
|
||||
|
||||
if (!result?.data?.upsertCatalogProductTypeSetting) {
|
||||
errorMessage[productType] = saveSettingMutation.error.value?.message || 'Не удалось сохранить настройки.';
|
||||
saveError.value = saveSettingMutation.error.value?.message || `Не удалось сохранить настройки для "${form.productType}".`;
|
||||
isSavingAll.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
forms[productType] = createForm(result.data.upsertCatalogProductTypeSetting);
|
||||
successMessage[productType] = 'Настройки сохранены.';
|
||||
forms[item.productType] = createForm(result.data.upsertCatalogProductTypeSetting);
|
||||
}
|
||||
|
||||
isSavingAll.value = false;
|
||||
saveSuccess.value = 'Настройки сохранены.';
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="space-y-6">
|
||||
<div class="space-y-2">
|
||||
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
|
||||
<p class="text-sm leading-6 text-[#557562]">
|
||||
Правила конструктора по каждому типу товара: длина, своя втулка, своя надпись и видимость короба.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="settingsQuery.loading.value" class="manager-empty-state">
|
||||
Загружаем настройки каталога...
|
||||
@@ -150,62 +135,33 @@ async function saveProductTypeSetting(productType: string) {
|
||||
class="rounded-[28px] bg-white p-5 shadow-[0_18px_38px_rgba(18,56,36,0.08)]"
|
||||
>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-xl font-bold text-[#123824]">{{ item.productType }}</h2>
|
||||
<p class="text-sm text-[#557562]">
|
||||
Определяет, какие параметры клиент сможет менять на витрине для этого типа товара.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<label class="surface-card flex items-start gap-3 rounded-[22px] p-4">
|
||||
<input v-model="formFor(item).allowCustomLength" type="checkbox" class="toggle toggle-success mt-1">
|
||||
<span>
|
||||
<span class="block font-semibold text-[#123824]">Своя длина</span>
|
||||
<span class="mt-1 block text-sm text-[#557562]">Разрешить длину вне стандартного списка.</span>
|
||||
</span>
|
||||
<label class="surface-card flex items-center justify-between gap-4 rounded-[22px] p-4">
|
||||
<span class="text-sm font-semibold text-[#123824]">Своя длина</span>
|
||||
<input v-model="formFor(item).allowCustomLength" type="checkbox" class="toggle toggle-success">
|
||||
</label>
|
||||
|
||||
<label class="surface-card flex items-start gap-3 rounded-[22px] p-4">
|
||||
<input v-model="formFor(item).allowCustomSleeveBrand" type="checkbox" class="toggle toggle-success mt-1">
|
||||
<span>
|
||||
<span class="block font-semibold text-[#123824]">Своя втулка</span>
|
||||
<span class="mt-1 block text-sm text-[#557562]">Клиент сможет запросить втулку со своим вариантом.</span>
|
||||
</span>
|
||||
<label class="surface-card flex items-center justify-between gap-4 rounded-[22px] p-4">
|
||||
<span class="text-sm font-semibold text-[#123824]">Своя втулка</span>
|
||||
<input v-model="formFor(item).allowCustomSleeveBrand" type="checkbox" class="toggle toggle-success">
|
||||
</label>
|
||||
|
||||
<label class="surface-card flex items-start gap-3 rounded-[22px] p-4">
|
||||
<input v-model="formFor(item).allowCustomLabel" type="checkbox" class="toggle toggle-success mt-1">
|
||||
<span>
|
||||
<span class="block font-semibold text-[#123824]">Своя надпись</span>
|
||||
<span class="mt-1 block text-sm text-[#557562]">Разрешить индивидуальную надпись или маркировку.</span>
|
||||
</span>
|
||||
<label class="surface-card flex items-center justify-between gap-4 rounded-[22px] p-4">
|
||||
<span class="text-sm font-semibold text-[#123824]">Своя надпись</span>
|
||||
<input v-model="formFor(item).allowCustomLabel" type="checkbox" class="toggle toggle-success">
|
||||
</label>
|
||||
|
||||
<label class="surface-card flex items-start gap-3 rounded-[22px] p-4">
|
||||
<input v-model="formFor(item).showQuantityPerBox" type="checkbox" class="toggle toggle-success mt-1">
|
||||
<span>
|
||||
<span class="block font-semibold text-[#123824]">Показывать короб</span>
|
||||
<span class="mt-1 block text-sm text-[#557562]">Если выключено, параметр короба скрывается из клиентского каталога.</span>
|
||||
</span>
|
||||
<label class="surface-card flex items-center justify-between gap-4 rounded-[22px] p-4">
|
||||
<span class="text-sm font-semibold text-[#123824]">Показывать короб</span>
|
||||
<input v-model="formFor(item).showQuantityPerBox" type="checkbox" class="toggle toggle-success">
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="rounded-[24px] bg-[#f7fbf8] p-4">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold uppercase tracking-[0.12em] text-[#355947]">Диапазон длины</h3>
|
||||
<p class="mt-1 text-sm text-[#557562]">Минимум, максимум и шаг для пользовательской длины.</p>
|
||||
</div>
|
||||
<span
|
||||
class="rounded-full px-3 py-1 text-xs font-bold uppercase tracking-[0.12em]"
|
||||
:class="formFor(item).allowCustomLength ? 'bg-[#e8f5ec] text-[#1c6b45]' : 'bg-[#eef2ef] text-[#6b7f71]'"
|
||||
>
|
||||
{{ formFor(item).allowCustomLength ? 'Включено' : 'Выключено' }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid gap-3 md:grid-cols-3">
|
||||
<div v-if="formFor(item).allowCustomLength" class="rounded-[24px] bg-[#f7fbf8] p-4">
|
||||
<div class="mb-4 text-sm font-bold uppercase tracking-[0.12em] text-[#355947]">Диапазон длины</div>
|
||||
<div class="grid gap-3 md:grid-cols-3">
|
||||
<label class="space-y-2">
|
||||
<span class="text-sm font-semibold text-[#123824]">Мин. длина, м</span>
|
||||
<input
|
||||
@@ -214,7 +170,6 @@ async function saveProductTypeSetting(productType: string) {
|
||||
min="1"
|
||||
step="1"
|
||||
class="input manager-field w-full"
|
||||
:disabled="!formFor(item).allowCustomLength"
|
||||
>
|
||||
</label>
|
||||
|
||||
@@ -226,7 +181,6 @@ async function saveProductTypeSetting(productType: string) {
|
||||
min="1"
|
||||
step="1"
|
||||
class="input manager-field w-full"
|
||||
:disabled="!formFor(item).allowCustomLength"
|
||||
>
|
||||
</label>
|
||||
|
||||
@@ -238,28 +192,27 @@ async function saveProductTypeSetting(productType: string) {
|
||||
min="1"
|
||||
step="1"
|
||||
class="input manager-field w-full"
|
||||
:disabled="!formFor(item).allowCustomLength"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="space-y-1 text-sm">
|
||||
<p v-if="successMessage[item.productType]" class="font-semibold text-[#1c6b45]">{{ successMessage[item.productType] }}</p>
|
||||
<p v-if="errorMessage[item.productType]" class="font-semibold text-[#c4472d]">{{ errorMessage[item.productType] }}</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn h-11 rounded-full border-0 bg-[#139957] px-5 text-sm font-semibold text-white hover:bg-[#0d854a]"
|
||||
:disabled="savingState[item.productType]"
|
||||
@click="saveProductTypeSetting(item.productType)"
|
||||
>
|
||||
{{ savingState[item.productType] ? 'Сохраняем…' : 'Сохранить' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div v-if="saveSuccess || saveError" class="space-y-2 text-sm">
|
||||
<p v-if="saveSuccess" class="font-semibold text-[#1c6b45]">{{ saveSuccess }}</p>
|
||||
<p v-if="saveError" class="font-semibold text-[#c4472d]">{{ saveError }}</p>
|
||||
</div>
|
||||
|
||||
<div v-if="settings.length" class="flex justify-end">
|
||||
<button
|
||||
class="btn h-11 rounded-full border-0 bg-[#139957] px-6 text-sm font-semibold text-white hover:bg-[#0d854a]"
|
||||
:disabled="isSavingAll"
|
||||
@click="saveAllSettings"
|
||||
>
|
||||
{{ isSavingAll ? 'Сохраняем…' : 'Сохранить' }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user