Convert Quality Chooser to SFC (#6737)

* Fixes for `quality-chooser`

- Fix preset selector changing to a preset if the custom-selected qualities sum up to that preset.
- Fix empty custom view when previous preset was `keep`.
- Fix recalculating backlogged episodes after archiving.
- Fix backlogged episodes text always showing in red.
- Catch errors in async backlogged episodes computed prop.
- Use reduce instead of `filter`+`map` (more efficient)
- Remove unneeded map to integers on allowed/preferred watches
  (reason - `.number` modifer was missing on the `v-model`s)

* Rename to SFC and register, comment out Python code

* Move "initial quality" code to `main.mako`

* Simple linting

* Update backlog link

* Replace with getters and import `api`

* Add component to AddShowOptions

* Add basic QualityChooser tests

* Fix bugs

- Clear the preferred selection when deselecting all allowed qualities
- If changing to **OR from** `keep`, restore the original value

* Get the default show quality from the store

* Replace `seriesSlug` with `showSlug` prop

* Fix show qualities key in API description

* Simplify `manage_massEdit`

* Sort out the template and inline styles

* Update CHANGELOG.md

* [Bundle]

CHANGELOG.md

@@ -8,6 +8,7 @@
 #### Improvements
 - Converted the sub-menu into a Vue SFC ([#6724](https://github.com/pymedusa/Medusa/pull/6724))
 - Converted View Log page into a Vue SFC ([#6738](https://github.com/pymedusa/Medusa/pull/6738))
+- Converted the Quality Chooser into a Vue SFC ([#6737](https://github.com/pymedusa/Medusa/pull/6737))
 
 #### Fixes
 - Fixed lists not being saved when used with comma separated items ([#6428](https://github.com/pymedusa/Medusa/pull/6428))

dredd/api-description.yml

@@ -1075,7 +1075,7 @@ definitions:
                 items:
                   type: integer
                   format: int32
-              prefered:
+              preferred:
                 type: array
                 items:
                   type: integer

themes-default/slim/src/components/add-show-options.vue

@@ -7,7 +7,11 @@
                         <span>Quality</span>
                     </label>
                     <div class="col-sm-10 content">
-                        <quality-chooser :overall-quality="defaultConfig.quality" @update:quality:allowed="quality.allowed = $event" @update:quality:preferred="quality.preferred = $event"></quality-chooser>
+                        <quality-chooser
+                            :overall-quality="defaultConfig.quality"
+                            @update:quality:allowed="quality.allowed = $event"
+                            @update:quality:preferred="quality.preferred = $event"
+                        />
                     </div>
                 </div>
             </div>
@@ -86,15 +90,18 @@
 import { mapState, mapGetters } from 'vuex';
 import { apiRoute } from '../api';
 import { combineQualities } from '../utils';
-import { ConfigToggleSlider } from './helpers';
+import {
+    ConfigToggleSlider,
+    QualityChooser
+} from './helpers';
 import AnidbReleaseGroupUi from './anidb-release-group-ui.vue';
 
 export default {
     name: 'add-show-options',
     components: {
         AnidbReleaseGroupUi,
-        ConfigToggleSlider
-        // @TODO: Add `QualityChooser`
+        ConfigToggleSlider,
+        QualityChooser
     },
     props: {
         showName: {

themes-default/slim/src/components/helpers/index.js

@@ -8,6 +8,7 @@ export { default as FileBrowser } from './file-browser.vue';
 export { default as LanguageSelect } from './language-select.vue';
 export { default as NamePattern } from './name-pattern.vue';
 export { default as PlotInfo } from './plot-info.vue';
+export { default as QualityChooser } from './quality-chooser.vue';
 export { default as QualityPill } from './quality-pill.vue';
 export { default as ScrollButtons } from './scroll-buttons.vue';
 export { default as SelectList } from './select-list.vue';