Files
webapp/app/components/catalog/QuoteForm.vue
Ruslan Bakiev 0efc4eddfd
All checks were successful
Build Docker Image / build (push) Successful in 3m59s
Simplify catalog UI - remove chips, add drawer for list
- Remove product/hub chips from QuoteForm.vue (duplicate of toggle)
- Add drawer state to useCatalogSearch.ts (isDrawerOpen, selectDrawerItem, applyDrawerFilter)
- Convert SelectionPanel to drawer with header, scrollable content, and footer
- Add "Список" button to CatalogPage.vue to open drawer
- Add "Применить фильтр" button in drawer footer
- Add slide animations for drawer (left on desktop, up on mobile)
- Update translations: catalog.list, catalog.applyFilter
2026-01-26 14:36:42 +07:00

72 lines
1.8 KiB
Vue

<template>
<div class="flex flex-col gap-4">
<h3 class="font-semibold text-lg">{{ $t('catalog.quote.title') }}</h3>
<!-- Quantity input -->
<div class="form-control">
<label class="label py-1">
<span class="label-text text-xs text-base-content/70">{{ $t('catalog.filters.quantity') }}</span>
</label>
<input
v-model="localQuantity"
type="number"
:placeholder="$t('catalog.quote.enterQty')"
class="input input-bordered input-sm"
min="1"
@blur="emit('update-quantity', localQuantity)"
@keyup.enter="emit('update-quantity', localQuantity)"
/>
</div>
<!-- Action buttons -->
<div class="flex gap-2 mt-2">
<button
class="btn btn-primary flex-1"
:disabled="!canSearch"
@click="emit('search')"
>
<Icon name="lucide:search" size="16" />
{{ $t('catalog.quote.search') }}
</button>
<button
v-if="hasAnyFilter"
class="btn btn-ghost btn-sm"
@click="emit('clear-all')"
>
{{ $t('catalog.quote.clear') }}
</button>
</div>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
productId?: string
productLabel?: string
hubId?: string
hubLabel?: string
supplierId?: string
supplierLabel?: string
quantity?: string
canSearch: boolean
}>()
const emit = defineEmits<{
'edit-filter': [type: string]
'remove-filter': [type: string]
'update-quantity': [value: string]
'search': []
'clear-all': []
}>()
const localQuantity = ref(props.quantity || '')
watch(() => props.quantity, (newVal) => {
localQuantity.value = newVal || ''
})
const hasAnyFilter = computed(() => {
return !!(props.productId || props.hubId || props.supplierId || props.quantity)
})
</script>