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

style(catalog): split configurator fields into two columns

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-03 16:15:46 +07:00
parent 67a1708a7a
commit 36a88033f7
1 changed files with 84 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -199,6 +199,22 @@ 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'].includes(field.key)
));
return { leftColumn, rightColumn };
}
function requiredKeys(group: ProductGroup) {
return visibleFields(group).map((field) => field.key);
}
@@ -422,38 +438,76 @@ function decrementSelected(group: ProductGroup) {
<h2 class="text-2xl font-bold text-[#163624]">{{ group.typeLabel }}</h2>
</div>
<div class="space-y-4">
<div
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"
>
<p class="text-sm font-semibold text-[#163624]">{{ field.label }}</p>
<div class="grid gap-8 md:grid-cols-2">
<div class="space-y-4">
<div
v-for="field in visibleFieldsByColumn(group).leftColumn"
: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 border text-sm normal-case shadow-none transition"
:class="[
getGroupState(group)[field.key] === option
? 'border-neutral bg-neutral text-neutral-content'
: 'border-base-300 bg-base-100 text-base-content hover:border-neutral/30 hover:bg-base-200',
!isOptionAvailable(group, field.key, option)
? 'pointer-events-none opacity-35'
: 'cursor-pointer',
]"
>
<input
type="radio"
class="sr-only"
:name="`${group.key}-${field.key}`"
:checked="getGroupState(group)[field.key] === option"
:disabled="!isOptionAvailable(group, field.key, option)"
@change="updateField(group, field.key, option)"
<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 border text-sm normal-case shadow-none transition"
:class="[
getGroupState(group)[field.key] === option
? 'border-neutral bg-neutral text-neutral-content'
: 'border-base-300 bg-base-100 text-base-content hover:border-neutral/30 hover:bg-base-200',
!isOptionAvailable(group, field.key, option)
? 'pointer-events-none opacity-35'
: 'cursor-pointer',
]"
>
<span>{{ formatOptionLabel(field.key, option) }}</span>
</label>
<input
type="radio"
class="sr-only"
:name="`${group.key}-${field.key}`"
:checked="getGroupState(group)[field.key] === option"
:disabled="!isOptionAvailable(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 border text-sm normal-case shadow-none transition"
:class="[
getGroupState(group)[field.key] === option
? 'border-neutral bg-neutral text-neutral-content'
: 'border-base-300 bg-base-100 text-base-content hover:border-neutral/30 hover:bg-base-200',
!isOptionAvailable(group, field.key, option)
? 'pointer-events-none opacity-35'
: 'cursor-pointer',
]"
>
<input
type="radio"
class="sr-only"
:name="`${group.key}-${field.key}`"
:checked="getGroupState(group)[field.key] === option"
:disabled="!isOptionAvailable(group, field.key, option)"
@change="updateField(group, field.key, option)"
>
<span>{{ formatOptionLabel(field.key, option) }}</span>
</label>
</div>
</div>
</div>
</div>