When a user makes use of the shows quality preset options, the qualit… (

#7415)

* When a user makes use of the shows quality preset options, the qualities showed as "allowed" / yellow.
With this change a show quality preset will show green for matching qualities in the preset.
* When no preset is used but allowed and preferred are configured, it will show green when quality in preferred and yellow when quality in allowed.
* When a quality has been downloaded, but for ex the shows config has changed after. And the quality does not match quality or preferred. The row will show yellow.

* If quality.preferred is not configured, do not show yellow, for allowed matches.

* Update consts.js

Fix lint issues

* yarn bundle runtime.

* commit vendors

* Pass config qualities in stead of entire config.

* Simplify code

themes-default/slim/src/components/display-show.vue

@@ -620,7 +620,8 @@ export default {
         },
         rowStyleClassFn(row) {
             const { getOverviewStatus, show } = this;
-            return getOverviewStatus(row.status, row.quality, show.config.qualities).toLowerCase().trim();
+            const overview = getOverviewStatus(row.status, row.quality, show.config.qualities).toLowerCase().trim();
+            return overview;
         },
         /**
          * Add (reduce) the total episodes filesize.
@@ -1235,7 +1236,7 @@ tablesorter.css
 }
 
 .downloaded {
-    background-color: rgb(195, 227, 200);
+    background-color: rgb(255, 218, 138);
 }
 
 .failed {

themes-default/slim/src/components/show-header.vue

@@ -485,6 +485,7 @@ export default {
             const { getOverviewStatus, show } = this;
             const { seasons } = show;
             const summary = {
+                Downloaded: 0,
                 Skipped: 0,
                 Wanted: 0,
                 Allowed: 0,

themes-default/slim/src/store/modules/consts.js

@@ -54,9 +54,16 @@ const getters = {
         }
         return state.statuses.find(status => key === status.key || value === status.value);
     },
-    // Get an episode overview status using the episode status and quality
+    /**
+     * Get an episode overview status using the episode status and quality.
+     *
+     * @typedef {Object} - Episode status
+     * @property {Object} quality - Episode quality
+     * @property {Object} configQualities - Shows configured qualities (allowed and preferred)
+     * @returns {String} The overview status
+     */
     // eslint-disable-next-line no-unused-vars
-    getOverviewStatus: _state => (status, quality, showQualities) => {
+    getOverviewStatus: _state => (status, quality, configQualities) => {
         if (['Unset', 'Unaired'].includes(status)) {
             return 'Unaired';
         }
@@ -74,11 +81,20 @@ const getters = {
         }
 
         if (['Downloaded'].includes(status)) {
-            if (showQualities.preferred.includes(quality)) {
+            // Check if the show has been configured with only allowed qualities.
+            if (configQualities.allowed.length > 0 && configQualities.preferred.length === 0) {
+                // This is a hack, because technically the quality does not fit in the Preferred quality.
+                // But because 'preferred' translates to the css color "green", we use it.
+                if (configQualities.allowed.includes(quality)) {
+                    return 'Preferred';
+                }
+            }
+
+            if (configQualities.preferred.includes(quality)) {
                 return 'Preferred';
             }
 
-            if (showQualities.allowed.includes(quality)) {
+            if (configQualities.allowed.includes(quality)) {
                 return 'Allowed';
             }
         }