smaa/octopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat(ui): improve product search and document info section UI

Browse Source 
- Collapse incoming document info by default with toggle animation
- Add inline cost price editing in incoming document items
- Make product search picker more compact (smaller inputs, reduced padding)
- Display new inventory lines at the top of the table
- Update product search picker styling for better visual hierarchy
This commit is contained in:
Andrey Smakotin
2026-01-26 22:58:20 +03:00
parent 32bc0d2c39
commit 67ad0e50ee
4 changed files with 261 additions and 250 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
myproject/products/templates/products/components/product_search_picker.html
View File

@@ -48,27 +48,27 @@ ProductSearchPicker.init('#writeoff-products', {
{% if skip_stock_filter %}data-skip-stock-filter="true"{% endif %}>
<div class="card shadow-sm">
<!-- Строка поиска -->
<div class="card-header bg-white py-3">
<!-- Строка поиска - компактный размер -->
<div class="card-header bg-white py-1">
<div class="input-group">
<span class="input-group-text bg-light border-end-0">
<i class="bi bi-search text-primary"></i>
</span>
<input type="text"
class="form-control form-control-lg border-start-0 product-picker-search"
class="form-control form-control-sm border-start-0 product-picker-search"
placeholder="{{ title|default:'Поиск товара по названию, артикулу...' }}"
style="box-shadow: none;">
<button class="btn btn-outline-secondary product-picker-search-clear"
<button class="btn btn-outline-secondary btn-sm product-picker-search-clear"
type="button" style="display: none;">
<i class="bi bi-x-lg"></i>
<i class="bi bi-x"></i>
</button>
</div>
</div>
{% if show_filters|default:True %}
<!-- Фильтры -->
<div class="card-body border-bottom py-2">
<div class="d-flex gap-2 align-items-center flex-wrap">
<!-- Фильтры - компактный вид -->
<div class="card-body border-bottom py-1">
<div class="d-flex gap-1 align-items-center flex-wrap">
{% if categories %}
<!-- Фильтр по категории -->
<select class="form-select form-select-sm product-picker-category" style="width: auto;">
@@ -113,29 +113,29 @@ ProductSearchPicker.init('#writeoff-products', {
</div>
{% endif %}
<!-- Контент: сетка/список товаров -->
<div class="card-body product-picker-content" style="max-height: {{ content_height|default:'400px' }}; overflow-y: auto;">
<!-- Контент: сетка/список товаров - компактный -->
<div class="card-body product-picker-content p-1" style="max-height: {{ content_height|default:'400px' }}; overflow-y: auto;">
<!-- Индикатор загрузки -->
<div class="product-picker-loading text-center py-4" style="display: none;">
<div class="spinner-border text-primary" role="status">
<div class="product-picker-loading text-center py-2" style="display: none;">
<div class="spinner-border spinner-border-sm text-primary" role="status">
<span class="visually-hidden">Загрузка...</span>
</div>
</div>
<!-- Сетка товаров -->
<div class="row g-2 product-picker-grid" data-view="{{ initial_view|default:'list' }}">
<div class="row g-1 product-picker-grid" data-view="{{ initial_view|default:'list' }}">
<!-- Товары загружаются через AJAX -->
</div>
<!-- Пустой результат -->
<div class="product-picker-empty text-center py-4 text-muted" style="display: none;">
<i class="bi bi-search fs-1 opacity-25"></i>
<p class="mb-0 mt-2">Товары не найдены</p>
<div class="product-picker-empty text-center py-2 text-muted" style="display: none;">
<i class="bi bi-search fs-5 opacity-25"></i>
<p class="mb-0 mt-1 small">Товары не найдены</p>
</div>
</div>
<!-- Футер с кнопкой действия -->
<div class="card-footer bg-white py-2 d-flex justify-content-between align-items-center flex-wrap gap-2">
<!-- Футер с кнопкой действия - компактный -->
<div class="card-footer bg-white py-1 d-flex justify-content-between align-items-center flex-wrap gap-1">
<div></div>
<button class="btn btn-primary btn-sm product-picker-add-selected" disabled>