fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align catalog parameter layout

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-09 14:43:58 +07:00
parent 8d6bc7346c
commit 21ce43b790
1 changed files with 29 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/components/catalog/CatalogConfigurator.vue
View File

@@ -232,22 +232,6 @@ function visibleFields(group: ProductGroup) {
return parameterFields.filter((field) => getAllFieldOptions(group, field.key).length > 1);
}
function visibleFieldsByColumn(group: ProductGroup) {
const visibleKeys = new Set(visibleFields(group).map((field) => field.key));
const leftColumn = parameterFields.filter((field) => (
visibleKeys.has(field.key)
&& ['widthMm', 'lengthM'].includes(field.key)
));
const rightColumn = parameterFields.filter((field) => (
visibleKeys.has(field.key)
&& ['thicknessMicron', 'quantityPerBox', 'sleeveBrand', 'colorTag', 'labelTag'].includes(field.key)
));
return { leftColumn, rightColumn };
}
function requiredKeys(group: ProductGroup) {
return visibleFields(group).map((field) => field.key);
}
@@ -516,12 +500,11 @@ function decrementSelected(group: ProductGroup) {
<h2 class="text-2xl font-bold text-[#163624]">{{ group.typeLabel }}</h2>
</div>
<div class="grid gap-8 md:grid-cols-2">
<div class="space-y-4">
<div class="grid content-start gap-4 md:grid-cols-2 2xl:grid-cols-3">
<div
v-for="field in visibleFieldsByColumn(group).leftColumn"
v-for="field in visibleFields(group)"
:key="`${group.key}-${field.key}`"
class="border-b border-base-200 pb-4 last:border-b-0 last:pb-0"
class="rounded-[22px] border border-base-200 bg-[#fbfcfb] p-4"
>
<p class="text-sm font-semibold text-[#163624]">{{ field.label }}</p>
@@ -551,42 +534,6 @@ function decrementSelected(group: ProductGroup) {
</div>
</div>
</div>
<div class="space-y-4">
<div
v-for="field in visibleFieldsByColumn(group).rightColumn"
:key="`${group.key}-${field.key}`"
class="border-b border-base-200 pb-4 last:border-b-0 last:pb-0"
>
<p class="text-sm font-semibold text-[#163624]">{{ field.label }}</p>
<div class="mt-3 flex flex-wrap gap-2">
<label
v-for="option in getAllFieldOptions(group, field.key)"
:key="`${group.key}-${field.key}-${option}`"
class="btn btn-sm rounded-full text-sm normal-case shadow-none transition"
:class="[
getGroupState(group)[field.key] === option
? 'bg-neutral text-neutral-content'
: isOptionAvailable(group, field.key, option)
? 'bg-base-100 text-base-content hover:bg-base-200'
: 'bg-[#eef1f4] text-[#7b8591] hover:bg-[#e3e7eb]',
'cursor-pointer',
]"
>
<input
type="radio"
class="sr-only"
:name="`${group.key}-${field.key}`"
:checked="getGroupState(group)[field.key] === option"
@change="updateField(group, field.key, option)"
>
<span>{{ formatOptionLabel(field.key, option) }}</span>
</label>
</div>
</div>
</div>
</div>
</div>
<aside class="p-4 md:p-5 xl:col-span-1">