feat: updates option count for each episode when filter changes

assets/controllers/result_filter_controller.js

@@ -9,15 +9,14 @@ export default class extends Controller {
     H264_CODECS = ['h264', 'h.264', 'x264']
     H265_CODECS = ['h265', 'h.265', 'x265', 'hevc']
 
-    static outlets = ['movie-results']
+    static outlets = ['movie-results', 'tv-results']
     static targets = ['resolution', 'codec', 'language', 'provider', 'season', 'episode']
     static values = {
         'media-type': String
     }
 
     filter() {
-        let resultList = this.movieResultsOutlet;
-
+        let results = [];
         this.activeFilter = {
             "resolution": this.resolutionTarget.value,
             "codec": this.codecTarget.value,
@@ -25,12 +24,13 @@ export default class extends Controller {
             // "episodeNumber": this.episodeTarget.value,
         }
 
-        if ("tvshows" === this.mediaTypeValue) {
+        if ("movies" === this.mediaTypeValue) {
+            results = this.movieResultsOutlets;
+        } else if ("tvshows" === this.mediaTypeValue) {
+            results = this.tvResultsOutlets;
             this.activeFilter.season = this.seasonTarget.value;
         }
 
-        console.log(this.activeFilter);
-
         const filterOperation = (resultList) => {
             if (resultList.options.length <= 0) {
                 return false;
@@ -41,10 +41,6 @@ export default class extends Controller {
             let selectedCount = 0;
 
             resultList.options.forEach((option) => {
-                if (option.classList.contains('header-row')) {
-                    return;
-                }
-
                 const props = {
                     "resolution": option.querySelector('#resolution').textContent.trim(),
                     "codec": option.querySelector('#codec').textContent.trim(),
@@ -88,6 +84,10 @@ export default class extends Controller {
                 } else {
                     count = count + 1;
                 }
+
+                if ("tvshows" === this.mediaTypeValue) {
+                    resultList.countTarget.innerText = count;
+                }
             });
             // resultList.getOptionCountEl().innerHTML = `${count} options`;
             // resultList.getSelectedCountEl().innerHTML = `${selectedCount} selected`;
@@ -96,10 +96,6 @@ export default class extends Controller {
             });
         }
 
-        if (resultList) {
-            filterOperation(resultList);
-        } else {
-            this.resultListOutlets.forEach((resultList) => filterOperation(resultList));
-        }
+        results.forEach((list) => filterOperation(list));
     }
 }

assets/controllers/tv_results_controller.js

@@ -14,16 +14,18 @@ export default class extends Controller {
         active: Boolean,
     };
 
-    static targets = ['list']
-
+    static targets = ['list', 'count']
     static outlets = ['loading-icon']
 
+    options = []
+
     connect() {
         if (true === this.activeValue) {
             fetch(`/torrentio/tvshows/${this.tmdbIdValue}/${this.imdbIdValue}/${this.seasonValue}/${this.episodeValue}`)
                 .then(res => res.text())
                 .then(response => {
                     this.element.innerHTML = response;
+                    this.options = this.element.querySelectorAll('tbody tr');
                     this.loadingIconOutlet.increaseCount();
                 });
         }