fix: select all button

assets/controllers/result_filter_controller.js

@@ -21,7 +21,7 @@ export default class extends Controller {
     }
 
     static outlets = ['movie-results', 'tv-results']
-    static targets = ['resolution', 'codec', 'language', 'provider', 'season']
+    static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'selectAll']
     static values = {
         'media-type': String,
         'episodes': Array,
@@ -29,7 +29,8 @@ export default class extends Controller {
 
     connect() {
         if (this.mediaTypeValue === "tvshows") {
-            this.activeFilter['season'] = 1;}
+            this.activeFilter['season'] = 1;
+        }
     }
 
     async movieResultsOutletConnected(outlet) {
@@ -163,4 +164,13 @@ export default class extends Controller {
 
         await results.forEach((list) => filterOperation(list, currentSeason));
     }
+
+    uncheckSelectAllBtn() {
+        console.log('hurr');
+        this.selectAllTarget.checked = false;
+    }
+
+    selectAllEpisodes() {
+        this.tvResultsOutlets.forEach((episode) => episode.selectEpisodeForDownload());
+    }
 }

assets/controllers/tv_results_controller.js

@@ -15,7 +15,7 @@ export default class extends Controller {
         active: Boolean,
     };
 
-    static targets = ['list', 'count']
+    static targets = ['list', 'count', 'episodeSelector']
     static outlets = ['loading-icon']
 
     options = []
@@ -35,6 +35,8 @@ export default class extends Controller {
                     if (this.options.length > 0) {
                         this.options.forEach((option) => option.querySelector('.download-btn').dataset['title'] = this.titleValue);
                         this.options[0].querySelector('input[type="checkbox"]').checked = true;
+                    } else {
+                        this.episodeSelectorTarget.disabled = true;
                     }
                     this.optionsLoaded = true;
                     this.loadingIconOutlet.increaseCount();
@@ -52,6 +54,7 @@ export default class extends Controller {
 
     setInActive() {
         this.activeValue = false;
+        this.episodeSelectorTarget.checked = false;
         this.element.classList.add('hidden');
     }
 
@@ -59,6 +62,12 @@ export default class extends Controller {
         return this.activeValue;
     }
 
+    selectEpisodeForDownload() {
+        if (true === this.isActive() && this.episodeSelectorTarget.disabled === false) {
+            this.episodeSelectorTarget.checked = !this.episodeSelectorTarget.checked;
+        }
+    }
+
     toggleList() {
         this.listTarget.classList.toggle('hidden');
     }

templates/search/partial/filter.html.twig

@@ -1,68 +1,81 @@
-<div id="filter" class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg"
+<div id="filter" class="flex flex-col gap-4"
         {{ stimulus_controller('result_filter') }}
         {{ stimulus_action('result_filter', 'filter', 'change') }}
      data-result-filter-media-type-value="{{ results.media.mediaType }}"
      data-result-filter-movie-results-outlet=".results"
      data-result-filter-tv-results-outlet=".results"
 >
-    <label for="resolution">
+    <div class="w-full p-4 flex flex-row gap-4 bg-stone-500 text-md text-gray-500 dark:text-gray-50 rounded-lg">
-        Resolution
+        <label for="resolution">
-        <select id="resolution" data-result-filter-target="resolution" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
+            Resolution
-            <option {{ filter.resolution == "n/a" ? "selected" }}
+            <select id="resolution" data-result-filter-target="resolution" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md">
-                    value="">n/a</option>
+                <option {{ filter.resolution == "n/a" ? "selected" }}
-            <option {{ filter.resolution == "720p" ? "selected" }}
+                        value="">n/a</option>
-                    value="720p">720p</option>
+                <option {{ filter.resolution == "720p" ? "selected" }}
-            <option {{ filter.resolution == "1080p" ? "selected" }}
+                        value="720p">720p</option>
-                    value="1080p">1080p</option>
+                <option {{ filter.resolution == "1080p" ? "selected" }}
-            <option {{ filter.resolution == "2160p" ? "selected" }}
+                        value="1080p">1080p</option>
-                    value="2160p">2160p</option>
+                <option {{ filter.resolution == "2160p" ? "selected" }}
-        </select>
+                        value="2160p">2160p</option>
-    </label>
-    <label for="codec">
-        Codec
-        <select id="codec" data-result-filter-target="codec" class="px-1 py-0.5 bg-stone-100 text-sm text-gray-800 rounded-sm">
-            <option {{ filter.codec == "n/a" ? "selected" }}
-                    value="">n/a</option>
-            <option {{ filter.codec == "-" ? "selected" }}
-                    value="-">-</option>
-            <option {{ filter.codec == "h264" ? "selected" }}
-                    value="h264">h264</option>
-            <option {{ filter.codec == "h265" ? "selected" }}
-                    value="h265">h265/HEVC</option>
-        </select>
-    </label>
-    <label for="language">
-        Language
-        <select id="language" data-result-filter-target="language" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
-            <option selected value="{{ filter.language }}">{{ filter.language }}</option>
-        </select>
-    </label>
-    <label for="provider">
-        Provider
-        <select id="provider" data-result-filter-target="provider" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
-            <option selected value="">n/a</option>
-        </select>
-    </label>
-    {% if results.media.mediaType == "tvshows" %}
-        <label for="season">
-            Season
-            <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
-                <option selected value="1">1</option>
-                {% for season in range(2, results.media.episodes|length) %}
-                    <option value="{{ season }}">{{ season }}</option>
-                {% endfor %}
             </select>
         </label>
-        {#                        <label for="episodeNumber">#}
+        <label for="codec">
-        {#                            Episode#}
+            Codec
-        {#                            <select id="episodeNumber" name="episodeNumber" data-result-filter-target="episode" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">#}
+            <select id="codec" data-result-filter-target="codec" class="px-1 py-0.5 bg-stone-100 text-sm text-gray-800 rounded-md">
-        {#                                <option selected value="">n/a</option>#}
+                <option {{ filter.codec == "n/a" ? "selected" }}
-        {#                            </select>#}
+                        value="">n/a</option>
-        {#                        </label>#}
+                <option {{ filter.codec == "-" ? "selected" }}
-    {% endif %}
+                        value="-">-</option>
-    <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
+                <option {{ filter.codec == "h264" ? "selected" }}
+                        value="h264">h264</option>
+                <option {{ filter.codec == "h265" ? "selected" }}
+                        value="h265">h265/HEVC</option>
+            </select>
+        </label>
+        <label for="language">
+            Language
+            <select id="language" data-result-filter-target="language" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md">
+                <option selected value="{{ filter.language }}">{{ filter.language }}</option>
+            </select>
+        </label>
+        <label for="provider">
+            Provider
+            <select id="provider" data-result-filter-target="provider" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md">
+                <option selected value="">n/a</option>
+            </select>
+        </label>
+        {% if results.media.mediaType == "tvshows" %}
+            <label for="season">
+                Season
+                <select id="season" name="season" value="1" data-result-filter-target="season" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md"
+                        {{ stimulus_action('result_filter', 'uncheckSelectAllBtn', 'change') }}>
+                    <option selected value="1">1</option>
+                    {% for season in range(2, results.media.episodes|length) %}
+                        <option value="{{ season }}">{{ season }}</option>
+                    {% endfor %}
+                </select>
+            </label>
+            {#                        <label for="episodeNumber">#}
+            {#                            Episode#}
+            {#                            <select id="episodeNumber" name="episodeNumber" data-result-filter-target="episode" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">#}
+            {#                                <option selected value="">n/a</option>#}
+            {#                            </select>#}
+            {#                        </label>#}
+        {% endif %}
+        <span {{ stimulus_controller('loading_icon', {total: (results.media.mediaType == "tvshows") ? results.media.episodes[1]|length : 1, count: 0}) }}
             class="loading-icon"
-    >
+        >
-        <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
+            <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
-    </span>
+        </span>
+    </div>
+
+    {% if results.media.mediaType == "tvshows" %}
+    <div class="flex flex-row gap-2 justify-end px-8">
+        <button class="px-1.5 py-1 bg-green-600 rounded-md text-sm">Download Selected</button>
+        <input type="checkbox" name="selectAll" id="selectAll"
+                {{ stimulus_target('result_filter', 'selectAll') }}
+                {{ stimulus_action('result_filter', 'selectAllEpisodes', 'change') }}
+        />
+    </div>
+    {% endif %}
 </div>

templates/torrentio/tvshows.html.twig

@@ -10,11 +10,16 @@
                 ><span {{ stimulus_target('tv-results', 'count') }}>{{ results.results|length }}</span> results</small>
             </span>
         </div>
-        <div class="flex flex-col items-end hover:cursor-pointer"
+        <div class="flex flex-col gap-4 justify-between">
-             {{ stimulus_action('tv-results', 'toggleList', 'click') }}>
+            <input type="checkbox"
-            <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 32 32">
+                   {{ stimulus_target('tv-results', 'episodeSelector') }}
-                <path fill="currentColor" d="m16 10l10 10l-1.4 1.4l-8.6-8.6l-8.6 8.6L6 20z"/>
+            />
-            </svg>
+            <div class="flex flex-col items-end hover:cursor-pointer"
+                    {{ stimulus_action('tv-results', 'toggleList', 'click') }}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 32 32">
+                    <path fill="currentColor" d="m16 10l10 10l-1.4 1.4l-8.6-8.6l-8.6 8.6L6 20z"/>
+                </svg>
+            </div>
         </div>
     </div>
     <div class="inline-block overflow-hidden rounded-lg">