fix: select all button

2025-04-26 21:38:17 -05:00
parent 9d350a572d
commit e9ccb5ad2b
4 changed files with 103 additions and 66 deletions
--- a/assets/controllers/result_filter_controller.js
+++ b/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());
+    }
 }
--- a/assets/controllers/tv_results_controller.js
+++ b/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');
    }
--- a/templates/search/partial/filter.html.twig
+++ b/templates/search/partial/filter.html.twig
@@ -1,13 +1,14 @@
-<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"
 >
+    <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">
        <label for="resolution">
            Resolution
-        <select id="resolution" data-result-filter-target="resolution" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-sm">
+            <select id="resolution" data-result-filter-target="resolution" class="px-1 py-0.5 bg-stone-100 text-gray-800 rounded-md">
                <option {{ filter.resolution == "n/a" ? "selected" }}
                        value="">n/a</option>
                <option {{ filter.resolution == "720p" ? "selected" }}
@@ -20,7 +21,7 @@
        </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">
+            <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 {{ filter.codec == "n/a" ? "selected" }}
                        value="">n/a</option>
                <option {{ filter.codec == "-" ? "selected" }}
@@ -33,20 +34,21 @@
        </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">
+            <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-sm">
+            <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-sm">
+                <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>
@@ -65,4 +67,15 @@
        >
            <twig:ux:icon name="codex:loader" height="20" width="20" data-loading-icon-target="icon" class="text-end" />
        </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>
--- a/templates/torrentio/tvshows.html.twig
+++ b/templates/torrentio/tvshows.html.twig
@@ -10,6 +10,10 @@
                ><span {{ stimulus_target('tv-results', 'count') }}>{{ results.results|length }}</span> results</small>
            </span>
        </div>
+        <div class="flex flex-col gap-4 justify-between">
+            <input type="checkbox"
+                   {{ stimulus_target('tv-results', 'episodeSelector') }}
+            />
            <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">
@@ -17,6 +21,7 @@
                </svg>
            </div>
        </div>
+    </div>
    <div class="inline-block overflow-hidden rounded-lg">
        {{ include('torrentio/partial/option-table.html.twig', {controller: 'tv-results'}) }}
    </div>