better filter?

resources/views/adult/index.twig

@@ -20,19 +20,13 @@
                         {% if available_filters.genres %}
                         <div class="mb-4">
                             <h6 class="fw-bold text-dark mb-2">Genres</h6>
-                            {% for genre in available_filters.genres %}
+                            <select class="form-select select2" name="genres[]" multiple data-placeholder="Select genres...">
-                            <div class="form-check">
+                                {% for genre in available_filters.genres %}
-                                <input class="form-check-input"
+                                <option value="{{ genre }}" {{ genre in filters.genres ? 'selected' : '' }}>
-                                       type="checkbox"
-                                       name="genres[]"
-                                       value="{{ genre }}"
-                                       id="genre_{{ genre|lower|replace({' ': '_'}) }}"
-                                       {{ genre in filters.genres ? 'checked' : '' }}>
-                                <label class="form-check-label small" for="genre_{{ genre|lower|replace({' ': '_'}) }}">
                                     {{ genre }}
-                                </label>
+                                </option>
-                            </div>
+                                {% endfor %}
-                            {% endfor %}
+                            </select>
                         </div>
                         {% endif %}
 
@@ -40,19 +34,13 @@
                         {% if available_filters.directors %}
                         <div class="mb-4">
                             <h6 class="fw-bold text-dark mb-2">Directors</h6>
-                            {% for director in available_filters.directors %}
+                            <select class="form-select select2" name="directors[]" multiple data-placeholder="Select directors...">
-                            <div class="form-check">
+                                {% for director in available_filters.directors %}
-                                <input class="form-check-input"
+                                <option value="{{ director }}" {{ director in filters.directors ? 'selected' : '' }}>
-                                       type="checkbox"
-                                       name="directors[]"
-                                       value="{{ director }}"
-                                       id="director_{{ director|lower|replace({' ': '_'}) }}"
-                                       {{ director in filters.directors ? 'checked' : '' }}>
-                                <label class="form-check-label small" for="director_{{ director|lower|replace({' ': '_'}) }}">
                                     {{ director }}
-                                </label>
+                                </option>
-                            </div>
+                                {% endfor %}
-                            {% endfor %}
+                            </select>
                         </div>
                         {% endif %}
 
@@ -384,19 +372,55 @@
     </div>
 </div>
 
+<style>
+/* Custom styles for Select2 integration */
+.select2-container {
+    z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
+}
+
+.select2-selection {
+    min-height: 38px;
+}
+
+.select2-selection__choice {
+    background-color: #0d6efd !important;
+    border: none !important;
+    color: white !important;
+}
+
+.select2-selection__choice__remove {
+    color: white !important;
+    margin-right: 5px;
+}
+
+.select2-selection__choice__remove:hover {
+    color: #f8f9fa !important;
+}
+</style>
+
 <script>
+$(document).ready(function() {
+    // Initialize Select2 for all select2 elements
+    $('.select2').select2({
+        width: '100%',
+        allowClear: true,
+        placeholder: function() {
+            return $(this).data('placeholder');
+        }
+    });
+
+    // Auto-submit filter form when Select2 selection changes
+    $('.select2').on('change', function() {
+        document.getElementById('filterForm').submit();
+    });
+});
+
 document.getElementById('per_page')?.addEventListener('change', function() {
     const url = new URL(window.location);
     url.searchParams.set('per_page', this.value);
     url.searchParams.set('page', '1'); // Reset to first page
     window.location = url.toString();
 });
-
-// Auto-submit filter form when checkboxes change
-document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(function(checkbox) {
-    checkbox.addEventListener('change', function() {
-        document.getElementById('filterForm').submit();
-    });
-});
 </script>
+
 {% endblock %}

resources/views/games/index.twig

@@ -20,19 +20,13 @@
                         {% if available_filters.genres %}
                         <div class="mb-4">
                             <h6 class="fw-bold text-dark mb-2">Genres</h6>
-                            {% for genre in available_filters.genres %}
+                            <select class="form-select select2" name="genres[]" multiple data-placeholder="Select genres...">
-                            <div class="form-check">
+                                {% for genre in available_filters.genres %}
-                                <input class="form-check-input"
+                                <option value="{{ genre }}" {{ genre in filters.genres ? 'selected' : '' }}>
-                                       type="checkbox"
-                                       name="genres[]"
-                                       value="{{ genre }}"
-                                       id="genre_{{ genre|lower|replace({' ': '_'}) }}"
-                                       {{ genre in filters.genres ? 'checked' : '' }}>
-                                <label class="form-check-label small" for="genre_{{ genre|lower|replace({' ': '_'}) }}">
                                     {{ genre }}
-                                </label>
+                                </option>
-                            </div>
+                                {% endfor %}
-                            {% endfor %}
+                            </select>
                         </div>
                         {% endif %}
 
@@ -40,19 +34,13 @@
                         {% if available_filters.platforms %}
                         <div class="mb-4">
                             <h6 class="fw-bold text-dark mb-2">Platforms</h6>
-                            {% for platform in available_filters.platforms %}
+                            <select class="form-select select2" name="platforms[]" multiple data-placeholder="Select platforms...">
-                            <div class="form-check">
+                                {% for platform in available_filters.platforms %}
-                                <input class="form-check-input"
+                                <option value="{{ platform }}" {{ platform in filters.platforms ? 'selected' : '' }}>
-                                       type="checkbox"
-                                       name="platforms[]"
-                                       value="{{ platform }}"
-                                       id="platform_{{ platform|lower|replace({' ': '_'}) }}"
-                                       {{ platform in filters.platforms ? 'checked' : '' }}>
-                                <label class="form-check-label small" for="platform_{{ platform|lower|replace({' ': '_'}) }}">
                                     {{ platform }}
-                                </label>
+                                </option>
-                            </div>
+                                {% endfor %}
-                            {% endfor %}
+                            </select>
                         </div>
                         {% endif %}
 
@@ -359,19 +347,55 @@
     </div>
 </div>
 
+<style>
+/* Custom styles for Select2 integration */
+.select2-container {
+    z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
+}
+
+.select2-selection {
+    min-height: 38px;
+}
+
+.select2-selection__choice {
+    background-color: #0d6efd !important;
+    border: none !important;
+    color: white !important;
+}
+
+.select2-selection__choice__remove {
+    color: white !important;
+    margin-right: 5px;
+}
+
+.select2-selection__choice__remove:hover {
+    color: #f8f9fa !important;
+}
+</style>
+
 <script>
+$(document).ready(function() {
+    // Initialize Select2 for all select2 elements
+    $('.select2').select2({
+        width: '100%',
+        allowClear: true,
+        placeholder: function() {
+            return $(this).data('placeholder');
+        }
+    });
+
+    // Auto-submit filter form when Select2 selection changes
+    $('.select2').on('change', function() {
+        document.getElementById('filterForm').submit();
+    });
+});
+
 document.getElementById('per_page')?.addEventListener('change', function() {
     const url = new URL(window.location);
     url.searchParams.set('per_page', this.value);
     url.searchParams.set('page', '1'); // Reset to first page
     window.location = url.toString();
 });
-
-// Auto-submit filter form when checkboxes change
-document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(function(checkbox) {
-    checkbox.addEventListener('change', function() {
-        document.getElementById('filterForm').submit();
-    });
-});
 </script>
+
 {% endblock %}

resources/views/layouts/app.twig

@@ -6,6 +6,8 @@
     <title>{{ title }} - Media Collector</title>
     <!-- Bootstrap CSS CDN -->
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Select2 CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
     <!-- In the head section of app.twig -->
     {% if app_env == 'production' %}
         {% if manifest['resources/css/app.css'] is defined %}
@@ -21,6 +23,10 @@
 <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
 <!-- Before closing </head> tag -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+<!-- jQuery (required for Select2) -->
+<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+<!-- Select2 JS -->
+<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
 {% if app_env == 'production' and manifest['resources/js/app.js'] is defined %}
     <script type="module" src="{{ base_url() }}/build/assets/{{ manifest['resources/js/app.js'].file }}"></script>
 {% else %}

resources/views/movies/index.twig

@@ -20,19 +20,13 @@
                         {% if available_filters.genres %}
                         <div class="mb-4">
                             <h6 class="fw-bold text-dark mb-2">Genres</h6>
-                            {% for genre in available_filters.genres %}
+                            <select class="form-select select2" name="genres[]" multiple data-placeholder="Select genres...">
-                            <div class="form-check">
+                                {% for genre in available_filters.genres %}
-                                <input class="form-check-input"
+                                <option value="{{ genre }}" {{ genre in filters.genres ? 'selected' : '' }}>
-                                       type="checkbox"
-                                       name="genres[]"
-                                       value="{{ genre }}"
-                                       id="genre_{{ genre|lower|replace({' ': '_'}) }}"
-                                       {{ genre in filters.genres ? 'checked' : '' }}>
-                                <label class="form-check-label small" for="genre_{{ genre|lower|replace({' ': '_'}) }}">
                                     {{ genre }}
-                                </label>
+                                </option>
-                            </div>
+                                {% endfor %}
-                            {% endfor %}
+                            </select>
                         </div>
                         {% endif %}
 
@@ -40,19 +34,13 @@
                         {% if available_filters.directors %}
                         <div class="mb-4">
                             <h6 class="fw-bold text-dark mb-2">Directors</h6>
-                            {% for director in available_filters.directors %}
+                            <select class="form-select select2" name="directors[]" multiple data-placeholder="Select directors...">
-                            <div class="form-check">
+                                {% for director in available_filters.directors %}
-                                <input class="form-check-input"
+                                <option value="{{ director }}" {{ director in filters.directors ? 'selected' : '' }}>
-                                       type="checkbox"
-                                       name="directors[]"
-                                       value="{{ director }}"
-                                       id="director_{{ director|lower|replace({' ': '_'}) }}"
-                                       {{ director in filters.directors ? 'checked' : '' }}>
-                                <label class="form-check-label small" for="director_{{ director|lower|replace({' ': '_'}) }}">
                                     {{ director }}
-                                </label>
+                                </option>
-                            </div>
+                                {% endfor %}
-                            {% endfor %}
+                            </select>
                         </div>
                         {% endif %}
 
@@ -378,19 +366,55 @@
     </div>
 </div>
 
+<style>
+/* Custom styles for Select2 integration */
+.select2-container {
+    z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
+}
+
+.select2-selection {
+    min-height: 38px;
+}
+
+.select2-selection__choice {
+    background-color: #0d6efd !important;
+    border: none !important;
+    color: white !important;
+}
+
+.select2-selection__choice__remove {
+    color: white !important;
+    margin-right: 5px;
+}
+
+.select2-selection__choice__remove:hover {
+    color: #f8f9fa !important;
+}
+</style>
+
 <script>
+$(document).ready(function() {
+    // Initialize Select2 for all select2 elements
+    $('.select2').select2({
+        width: '100%',
+        allowClear: true,
+        placeholder: function() {
+            return $(this).data('placeholder');
+        }
+    });
+
+    // Auto-submit filter form when Select2 selection changes
+    $('.select2').on('change', function() {
+        document.getElementById('filterForm').submit();
+    });
+});
+
 document.getElementById('per_page')?.addEventListener('change', function() {
     const url = new URL(window.location);
     url.searchParams.set('per_page', this.value);
     url.searchParams.set('page', '1'); // Reset to first page
     window.location = url.toString();
 });
-
-// Auto-submit filter form when checkboxes change
-document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(function(checkbox) {
-    checkbox.addEventListener('change', function() {
-        document.getElementById('filterForm').submit();
-    });
-});
 </script>
+
 {% endblock %}

resources/views/tvshows/index.twig

@@ -20,19 +20,13 @@
                         {% if available_filters.genres %}
                         <div class="mb-4">
                             <h6 class="fw-bold text-dark mb-2">Genres</h6>
-                            {% for genre in available_filters.genres %}
+                            <select class="form-select select2" name="genres[]" multiple data-placeholder="Select genres...">
-                            <div class="form-check">
+                                {% for genre in available_filters.genres %}
-                                <input class="form-check-input"
+                                <option value="{{ genre }}" {{ genre in filters.genres ? 'selected' : '' }}>
-                                       type="checkbox"
-                                       name="genres[]"
-                                       value="{{ genre }}"
-                                       id="genre_{{ genre|lower|replace({' ': '_'}) }}"
-                                       {{ genre in filters.genres ? 'checked' : '' }}>
-                                <label class="form-check-label small" for="genre_{{ genre|lower|replace({' ': '_'}) }}">
                                     {{ genre }}
-                                </label>
+                                </option>
-                            </div>
+                                {% endfor %}
-                            {% endfor %}
+                            </select>
                         </div>
                         {% endif %}
 
@@ -40,19 +34,13 @@
                         {% if available_filters.years %}
                         <div class="mb-4">
                             <h6 class="fw-bold text-dark mb-2">Years</h6>
-                            {% for year in available_filters.years %}
+                            <select class="form-select select2" name="years[]" multiple data-placeholder="Select years...">
-                            <div class="form-check">
+                                {% for year in available_filters.years %}
-                                <input class="form-check-input"
+                                <option value="{{ year }}" {{ year in filters.years ? 'selected' : '' }}>
-                                       type="checkbox"
-                                       name="years[]"
-                                       value="{{ year }}"
-                                       id="year_{{ year }}"
-                                       {{ year in filters.years ? 'checked' : '' }}>
-                                <label class="form-check-label small" for="year_{{ year }}">
                                     {{ year }}
-                                </label>
+                                </option>
-                            </div>
+                                {% endfor %}
-                            {% endfor %}
+                            </select>
                         </div>
                         {% endif %}
 
@@ -371,19 +359,55 @@
     </div>
 </div>
 
+<style>
+/* Custom styles for Select2 integration */
+.select2-container {
+    z-index: 1050; /* Ensure Select2 dropdown appears above other elements */
+}
+
+.select2-selection {
+    min-height: 38px;
+}
+
+.select2-selection__choice {
+    background-color: #0d6efd !important;
+    border: none !important;
+    color: white !important;
+}
+
+.select2-selection__choice__remove {
+    color: white !important;
+    margin-right: 5px;
+}
+
+.select2-selection__choice__remove:hover {
+    color: #f8f9fa !important;
+}
+</style>
+
 <script>
+$(document).ready(function() {
+    // Initialize Select2 for all select2 elements
+    $('.select2').select2({
+        width: '100%',
+        allowClear: true,
+        placeholder: function() {
+            return $(this).data('placeholder');
+        }
+    });
+
+    // Auto-submit filter form when Select2 selection changes
+    $('.select2').on('change', function() {
+        document.getElementById('filterForm').submit();
+    });
+});
+
 document.getElementById('per_page')?.addEventListener('change', function() {
     const url = new URL(window.location);
     url.searchParams.set('per_page', this.value);
     url.searchParams.set('page', '1'); // Reset to first page
     window.location = url.toString();
 });
-
-// Auto-submit filter form when checkboxes change
-document.querySelectorAll('#filterForm input[type="checkbox"]').forEach(function(checkbox) {
-    checkbox.addEventListener('change', function() {
-        document.getElementById('filterForm').submit();
-    });
-});
 </script>
+
 {% endblock %}