{% extends 'base.html.twig' %}
{% set menuMode = 'catalog' %}
{% set title = 'Каталог' %}
{% block stylesheets %}
{{ parent() }}
<style>
.table-catalog {
font-size: 11px;
}
.card-filter .form-label {
font-size: 12px;
margin-bottom: 0.2rem;
}
.card-filter .form-control-sm {
font-size: 11px;
}
.card-filter .form-check-label {
font-size: 12px;
}
.selection-wrapper {
position: fixed;
bottom: 40px;
right: 15px;
background: #212529;
color: white;
padding: 10px;
border-radius: 10px;
opacity: 0.7;
max-width: 20rem;
}
.selection-wrapper:hover {
opacity: 1;
}
</style>
{% endblock %}
{% block main %}
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="card">
<div class="card-header">Фильтрация</div>
<div class="card-body card-filter">
<form method="GET">
<div class="row">
<div class="col-md-12">
<div class="mb-1">
<label for="filter_name" class="form-label">Наименование</label>
<input type="text" class="form-control form-control-sm" id="filter_name" name="name" value="{{ app.request.get('name') }}">
</div>
</div>
<div class="col-md-6">
<div class="mb-1">
<label for="filter_provider_sku" class="form-label">Артикул поставщика</label>
<input type="text" class="form-control form-control-sm" id="filter_provider_sku" name="provider_sku" value="{{ app.request.get('provider_sku') }}">
</div>
</div>
<div class="col-md-6">
<div class="mb-1">
<label for="filter_site_sku" class="form-label">Артикул на сайте</label>
<input type="text" class="form-control form-control-sm" id="filter_site_sku" name="site_sku" value="{{ app.request.get('site_sku') }}">
</div>
</div>
<div class="col-md-12">
<div class="mb-1">
<label for="filter_site_sku" class="form-label">Бренд</label>
<select class="form-select form-select-sm" id="filter-brand" name="brand">
<option value="">Не выбран</option>
{% for brand in brands %}
<option value="{{ brand }}" {% if app.request.get('brand', '') == brand %}selected{% endif %}>{{ brand }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="col-md-12">
<div class="mb-1">
<label class="form-label">Наличие у поставщика</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="availability" value="" {% if app.request.get('availability', '') == '' %}checked{% endif %} id="filter_availability_all">
<label class="form-check-label" for="filter_availability_all">Все товары</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="availability" value="1" {% if app.request.get('availability', '') == '1' %}checked{% endif %} id="filter_availability_1">
<label class="form-check-label" for="filter_availability_1">Только в наличии</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="availability" value="0" {% if app.request.get('availability', '') == '0' %}checked{% endif %} id="filter_availability_0">
<label class="form-check-label" for="filter_availability_0">Только не в наличии</label>
</div>
</div>
</div>
<div class="col-md-12">
<div class="mb-2">
<label class="form-label">Привязка к сайту</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="connected" value="" {% if app.request.get('connected', '') == '' %}checked{% endif %} id="filter_connected_all">
<label class="form-check-label" for="filter_connected_all">Все товары</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="connected" value="1" {% if app.request.get('connected', '') == '1' %}checked{% endif %} id="filter_connected_1">
<label class="form-check-label" for="filter_connected_1">Только привязанные</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="connected" value="0" {% if app.request.get('connected', '') == '0' %}checked{% endif %} id="filter_connected_0">
<label class="form-check-label" for="filter_connected_0">Только не привязанные</label>
</div>
</div>
</div>
<div class="col-md-12">
<div class="d-grid gap-2">
<button type="submit" class="btn btn-sm btn-primary">Применить</button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="card mt-2">
<div class="card-header">Категории</div>
<div class="card-body p-0">
<div class="list-group list-group-flush">
{% if chosenCategory is not null %}
{% set url = path(app.request.attributes.get('_route'),
app.request.query|merge({c: chosenCategory.parent.id|default(null)})) %}
<a href="{{ url }}" class="list-group-item list-group-item-action active" aria-current="true"><-- Назад</a>
{% endif %}
{% for item in children %}
{% set url = path(app.request.attributes.get('_route'),
app.request.query|merge({c: item.id})) %}
<a href="{{ url }}" class="list-group-item list-group-item-action">{{ item.name }}</a>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col-md-10">
<div class="card">
<div class="card-header">Товары ({{ pagination.totalItemCount }} шт.)</div>
<div class="card-body">
<div class="mb-2">
{% for provider in providers %}
{% if provider != selectedProvider %}
<a class="btn btn-sm btn-outline-primary" href="{{ path('product_list', {provider: provider.id}) }}">{{ provider.name }}</a>
{% else %}
<a class="btn btn-sm btn-primary" href="{{ path('product_list') }}">{{ provider.name }}</a>
{% endif %}
{% endfor %}
</div>
<table class="table table-sm table-bordered table-catalog">
<thead>
<tr>
<th>
<input type="checkbox" class="js-select-all">
</th>
<th>ID</th>
<th>Наименование</th>
<th>Партномер</th>
<th>Всего поставщиков</th>
<th colspan="3">Оптимальный поставщик</th>
<th colspan="3">Привязка к сайту</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Поставщик</th>
<th>Цена</th>
<th>Количество</th>
<th>ID товара</th>
<th>ID варианта</th>
<th>SKU</th>
</tr>
</thead>
<tbody>
{% for product in pagination %}
{% set availability = priceCalculator.getOptimalAvailability(product) %}
<tr>
<td>
<input type="checkbox" data-id="{{ product.id }}" {% if product.id in app.session.get('selected', []) %}checked{% endif %} class="js-select-product">
</td>
<td>{{ product.id }}</td>
<td><a href="{{ path('product_view', {id: product.id}) }}">{{ product.name }}</a></td>
<td>{{ (product.availabilities|first).providerPartnumber|default('') }}</td>
<td>{{ product.availabilities|length }}</td>
{% if availability is not null %}
<td>{{ availability.provider.name }}</td>
<td>{{ priceCalculator.calculatePriceForAvailability(availability) }}</td>
<td>{{ availability.stock }}</td>
{% else %}
<td colspan="3" class="text-center">- - -</td>
{% endif %}
{% if product.connection is not null %}
<td>{{ product.connection.insalesProductId }}</td>
<td>{{ product.connection.insalesVariantId }}</td>
<td>{{ product.connection.insalesSku }}</td>
{% else %}
<td colspan="3" class="text-center">- - -</td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>
<div class="navigation">
{{ knp_pagination_render(pagination) }}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="selection-wrapper">
Выбрано: <span id="selected-count">{{ app.session.get('selected', [])|length }}</span> шт.
<hr class="m-0 my-2">
<div class="row">
<div class="col-md-12">
<div class="d-grid gap-2">
<a href="#" class="btn btn-sm btn-block btn-danger js-selected-flush my-1">Очистить</a>
</div>
</div>
<div class="col-md-12">
<div class="d-grid gap-2">
<a href="{{ path('product_export_selected') }}" class="btn btn-sm btn-block btn-primary my-1">Экспорт по оптим. поставщикам</a>
</div>
</div>
{% if selectedProvider is defined and selectedProvider is not null %}
<div class="col-md-12">
<div class="d-grid gap-2">
<a href="{{ path('product_export_selected', {provider_id: selectedProvider.id}) }}" class="btn btn-sm btn-block btn-primary my-1">Экспорт по {{ selectedProvider.name }}</a>
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
(function() {
const $selectAllProducts = $('.js-select-all');
const $selectProduct = $('.js-select-product');
const $selectedFlush = $('.js-selected-flush');
const $selectedCount = $('#selected-count');
$selectAllProducts.on('click', function() {
$selectProduct.each(function() {
$(this).prop('checked', !$(this).prop('checked')).trigger('change');
});
});
$selectedFlush.on('click', function () {
$.get('/api/productSelection/flush', function(res) {
$selectedCount.text(0);
$selectProduct.each(function() {
$(this).prop('checked', false);
});
});
});
$selectProduct.on('change', function () {
const $el = $(this);
const id = $el.attr('data-id');
$.get('/api/productSelection/changeState', {id: $el.attr('data-id')}, function(response) {
$selectedCount.text(response.COUNT);
});
});
})();
</script>
{% endblock %}