|
21 | 21 | <!-- Filters and Bulk Actions --> |
22 | 22 | <div class="card-body border-bottom"> |
23 | 23 | <div class="row g-3 align-items-end"> |
| 24 | + <!-- Search --> |
| 25 | + <div class="col-md-4"> |
| 26 | + <label for="search-input" class="form-label small fw-medium"><?= __('common.search') ?></label> |
| 27 | + <div class="input-group"> |
| 28 | + <input type="text" id="search-input" class="form-control" placeholder="Buscar feeds..." value="<?= $this->e($searchQuery ?? '') ?>"> |
| 29 | + <button class="btn btn-primary" type="button" id="search-btn"> |
| 30 | + <i class="bi bi-search"></i> |
| 31 | + </button> |
| 32 | + <?php if (!empty($searchQuery)): ?> |
| 33 | + <button class="btn btn-outline-secondary" type="button" id="clear-search-btn"> |
| 34 | + <i class="bi bi-x-lg"></i> |
| 35 | + </button> |
| 36 | + <?php endif; ?> |
| 37 | + </div> |
| 38 | + </div> |
| 39 | + |
24 | 40 | <!-- Status Filter --> |
25 | 41 | <div class="col-md-4"> |
26 | 42 | <label for="status-filter" class="form-label small fw-medium"><?= __('admin.feeds.filter_status') ?></label> |
27 | | - <select id="status-filter" class="form-select" onchange="window.location.href='/admin/feeds?status=' + this.value"> |
| 43 | + <select id="status-filter" class="form-select"> |
28 | 44 | <option value=""><?= __('admin.feeds.all_status') ?></option> |
29 | 45 | <option value="online" <?= $currentStatus === 'online' ? 'selected' : '' ?>><?= __('status.online') ?></option> |
30 | 46 | <option value="offline" <?= $currentStatus === 'offline' ? 'selected' : '' ?>><?= __('status.offline') ?></option> |
|
35 | 51 | </div> |
36 | 52 |
|
37 | 53 | <!-- Bulk Actions --> |
38 | | - <div class="col-md-8"> |
| 54 | + <div class="col-md-4"> |
39 | 55 | <div class="d-flex gap-2 flex-wrap"> |
40 | 56 | <button id="bulk-categories-btn" class="btn btn-outline-primary" disabled> |
41 | 57 | <i class="bi bi-folder me-1"></i> |
|
338 | 354 | <?php $this->start('scripts') ?> |
339 | 355 | <script> |
340 | 356 | document.addEventListener('DOMContentLoaded', function() { |
| 357 | + // Search functionality |
| 358 | + const searchInput = document.getElementById('search-input'); |
| 359 | + const searchBtn = document.getElementById('search-btn'); |
| 360 | + const clearSearchBtn = document.getElementById('clear-search-btn'); |
| 361 | + const statusFilter = document.getElementById('status-filter'); |
| 362 | + |
| 363 | + function performSearch() { |
| 364 | + const searchValue = searchInput.value.trim(); |
| 365 | + const statusValue = statusFilter.value; |
| 366 | + const params = new URLSearchParams(); |
| 367 | + |
| 368 | + if (searchValue) { |
| 369 | + params.append('search', searchValue); |
| 370 | + } |
| 371 | + if (statusValue) { |
| 372 | + params.append('status', statusValue); |
| 373 | + } |
| 374 | + |
| 375 | + window.location.href = '/admin/feeds?' + params.toString(); |
| 376 | + } |
| 377 | + |
| 378 | + searchBtn.addEventListener('click', performSearch); |
| 379 | + |
| 380 | + searchInput.addEventListener('keypress', function(e) { |
| 381 | + if (e.key === 'Enter') { |
| 382 | + performSearch(); |
| 383 | + } |
| 384 | + }); |
| 385 | + |
| 386 | + if (clearSearchBtn) { |
| 387 | + clearSearchBtn.addEventListener('click', function() { |
| 388 | + const params = new URLSearchParams(); |
| 389 | + const statusValue = statusFilter.value; |
| 390 | + if (statusValue) { |
| 391 | + params.append('status', statusValue); |
| 392 | + } |
| 393 | + window.location.href = '/admin/feeds?' + params.toString(); |
| 394 | + }); |
| 395 | + } |
| 396 | + |
| 397 | + statusFilter.addEventListener('change', function() { |
| 398 | + const searchValue = searchInput.value.trim(); |
| 399 | + const params = new URLSearchParams(); |
| 400 | + |
| 401 | + if (searchValue) { |
| 402 | + params.append('search', searchValue); |
| 403 | + } |
| 404 | + if (this.value) { |
| 405 | + params.append('status', this.value); |
| 406 | + } |
| 407 | + |
| 408 | + window.location.href = '/admin/feeds?' + params.toString(); |
| 409 | + }); |
| 410 | + |
341 | 411 | function showModal(modalElement) { |
342 | 412 | modalElement.classList.add('show'); |
343 | 413 | modalElement.style.display = 'block'; |
|
0 commit comments