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

refactor(catalog): streamline search and table actions

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-03 15:59:53 +07:00
parent cb5b20f2fa
commit 0f6444f721
1 changed files with 38 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -368,17 +368,35 @@ function decrementSelected(group: ProductGroup) {
<section class="space-y-5">
<h1 class="text-3xl font-extrabold text-[#0f2f20]">Каталог</h1>
<div class="surface-card rounded-3xl p-4 md:p-5">
<label class="form-control">
<span class="label-text">Поиск</span>
<input
v-model="search"
type="text"
class="input input-bordered w-full"
placeholder="Тип товара, SKU или параметр"
>
</label>
</div>
<label class="input input-bordered flex w-full items-center gap-3 rounded-full bg-white">
<svg
class="h-4 w-4 shrink-0 text-base-content/45"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.1667 14.1667L17.5 17.5"
stroke="currentColor"
stroke-width="1.6"
stroke-linecap="round"
stroke-linejoin="round"
/>
<circle
cx="8.75"
cy="8.75"
r="5.83333"
stroke="currentColor"
stroke-width="1.6"
/>
</svg>
<input
v-model="search"
type="text"
class="grow"
placeholder="Поиск по артикулу, типу товара или параметрам"
>
</label>
<div v-if="loading" class="alert surface-card border-0">Загрузка каталога...</div>
<div v-else-if="error" class="alert alert-error">{{ error.message }}</div>
@@ -484,7 +502,6 @@ function decrementSelected(group: ProductGroup) {
<table class="table border-separate border-spacing-0">
<thead>
<tr>
<th class="border-b border-base-300">Фото</th>
<th class="border-b border-base-300">Артикул</th>
<th class="border-b border-base-300">Ширина</th>
<th class="border-b border-base-300">Длина</th>
@@ -496,14 +513,6 @@ function decrementSelected(group: ProductGroup) {
</thead>
<tbody>
<tr v-for="product in group.products" :key="`${group.key}-${product.id}`">
<td class="border-b border-base-200">
<img
:src="createProductCover(product.name, product.sku)"
:alt="`Превью ${product.sku}`"
class="h-12 w-12 rounded-lg object-cover"
loading="lazy"
>
</td>
<td class="border-b border-base-200">{{ product.sku }}</td>
<td class="border-b border-base-200">{{ product.widthMm ?? '—' }}</td>
<td class="border-b border-base-200">{{ product.lengthM ?? '—' }}</td>
@@ -511,7 +520,14 @@ function decrementSelected(group: ProductGroup) {
<td class="border-b border-base-200">{{ product.sleeveBrand ?? '—' }}</td>
<td class="border-b border-base-200">{{ product.quantityPerBox ?? '—' }}</td>
<td class="border-b border-base-200 text-right">
<div class="ml-auto flex w-28 items-center justify-between rounded-xl border border-base-300 px-1 py-1">
<button
v-if="getQuantity(product.id) === 0"
class="btn h-9 rounded-full border-0 bg-[#139957] px-4 text-xs font-semibold text-white hover:bg-[#0d854a]"
@click="incrementProduct(product)"
>
В корзину
</button>
<div v-else class="ml-auto flex w-28 items-center justify-between rounded-xl border border-base-300 px-1 py-1">
<button
class="btn btn-xs btn-square"
:disabled="getQuantity(product.id) === 0"
@@ -519,7 +535,7 @@ function decrementSelected(group: ProductGroup) {
>
-
</button>
<span class="text-sm font-semibold">{{ getQuantity(product.id) }}</span>
<span class="min-w-8 text-center text-sm font-semibold">{{ getQuantity(product.id) }}</span>
<button class="btn btn-xs btn-square" @click="incrementProduct(product)">+</button>
</div>
</td>