From 36a88033f7acc877cfcf65056148881ed491b9de Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Fri, 3 Apr 2026 16:15:46 +0700
Subject: [PATCH] style(catalog): split configurator fields into two columns

---
 .../catalog/CatalogConfigurator.vue           | 114 +++++++++++++-----
 1 file changed, 84 insertions(+), 30 deletions(-)

diff --git a/app/components/catalog/CatalogConfigurator.vue b/app/components/catalog/CatalogConfigurator.vue
index 68c517e..49d5100 100644
--- a/app/components/catalog/CatalogConfigurator.vue
+++ b/app/components/catalog/CatalogConfigurator.vue
@@ -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>