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

111
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); 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) { function requiredKeys(group: ProductGroup) {
return visibleFields(group).map((field) => field.key); return visibleFields(group).map((field) => field.key);
} }
@@ -516,74 +500,37 @@ function decrementSelected(group: ProductGroup) {
<h2 class="text-2xl font-bold text-[#163624]">{{ group.typeLabel }}</h2> <h2 class="text-2xl font-bold text-[#163624]">{{ group.typeLabel }}</h2>
</div> </div>
<div class="grid gap-8 md:grid-cols-2"> <div class="grid content-start gap-4 md:grid-cols-2 2xl:grid-cols-3">
<div class="space-y-4"> <div
<div v-for="field in visibleFields(group)"
v-for="field in visibleFieldsByColumn(group).leftColumn" :key="`${group.key}-${field.key}`"
:key="`${group.key}-${field.key}`" class="rounded-[22px] border border-base-200 bg-[#fbfcfb] p-4"
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>
<p class="text-sm font-semibold text-[#163624]">{{ field.label }}</p>
<div class="mt-3 flex flex-wrap gap-2"> <div class="mt-3 flex flex-wrap gap-2">
<label <label
v-for="option in getAllFieldOptions(group, field.key)" v-for="option in getAllFieldOptions(group, field.key)"
:key="`${group.key}-${field.key}-${option}`" :key="`${group.key}-${field.key}-${option}`"
class="btn btn-sm rounded-full text-sm normal-case shadow-none transition" class="btn btn-sm rounded-full text-sm normal-case shadow-none transition"
:class="[ :class="[
getGroupState(group)[field.key] === option getGroupState(group)[field.key] === option
? 'bg-neutral text-neutral-content' ? 'bg-neutral text-neutral-content'
: isOptionAvailable(group, field.key, option) : isOptionAvailable(group, field.key, option)
? 'bg-base-100 text-base-content hover:bg-base-200' ? 'bg-base-100 text-base-content hover:bg-base-200'
: 'bg-[#eef1f4] text-[#7b8591] hover:bg-[#e3e7eb]', : 'bg-[#eef1f4] text-[#7b8591] hover:bg-[#e3e7eb]',
'cursor-pointer', '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)"
> >
<input <span>{{ formatOptionLabel(field.key, option) }}</span>
type="radio" </label>
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 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>
</div> </div>