feat: move methodsFilterModelFilter to filteringModel

Author: GuustMetz

lib/public/components/Filters/QcFlagTypesFilter/bad.js

@@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright CERN and copyright holders of ALICE Trg. This software is
+ * distributed under the terms of the GNU General Public License v3 (GPL
+ * Version 3), copied verbatim in the file "COPYING".
+ *
+ * See http://alice-Trg.web.cern.ch/license for full licensing information.
+ *
+ * In applying this license CERN does not waive the privileges and immunities
+ * granted to it by virtue of its status as an Intergovernmental Organization
+ * or submit itself to any jurisdiction.
+ */
+
+import { radioButton } from '../../common/form/inputs/radioButton.js';
+import { h } from '/js/src/index.js';
+
+/**
+ * Radiobutton filter for the qcFlag 'bad' filter
+ * @param {SelectionModel} selectionModel the a selectionmodel
+ * @return {vnode} A number of radiobuttons corresponding with the selection options
+ */
+const badFilterRadioButtons = (selectionModel) => {
+    const name = 'badFilterRadio';
+    return h(
+        '.form-group-header.flex-row.w-100',
+        selectionModel.options.map((option) => {
+            const { label } = option;
+            const action = () => selectionModel.select(option);
+            const isChecked = selectionModel.isSelected(option);
+
+            return radioButton({ label, isChecked, action, name });
+        }),
+    );
+};
+
+export default badFilterRadioButtons;

lib/public/components/common/selection/SelectionModel.js

@@ -331,4 +331,16 @@ export class SelectionModel extends Observable {
     get optionsSelectedByDefault() {
         return this._defaultSelection;
     }
+
+    /**
+     * Returns the normalized value of the selection
+     *
+     * @return {string|boolean|number} the normalized value
+     * @abstract
+     */
+    get normalized() {
+        return (this._allowEmpty || this._multiple)
+            ? this._selectedOptions.join()
+            : this.current;
+    }
 }

lib/public/views/QcFlagTypes/ActiveColumns/qcFlagTypesActiveColumns.js

@@ -14,8 +14,8 @@
 import { h } from '/js/src/index.js';
 import { formatTimestamp } from '../../../utilities/formatting/formatTimestamp.js';
 import { textFilter } from '../../../components/Filters/common/filters/textFilter.js';
-import { checkboxes } from '../../../components/Filters/common/filters/checkboxFilter.js';
 import { qcFlagTypeColoredBadge } from '../../../components/qcFlags/qcFlagTypeColoredBadge.js';
+import badFilterRadioButtons from '../../../components/Filters/QcFlagTypesFilter/bad.js';
 
 /**
  * List of active columns for a QC Flag Types table
@@ -54,10 +54,7 @@ export const qcFlagTypesActiveColumns = {
         name: 'Bad',
         visible: true,
         sortable: true,
-        filter: ({ isBadFilterModel }) => checkboxes(
-            isBadFilterModel,
-            { class: 'w-75 mt1', selector: 'qc-flag-type-bad-filter' },
-        ),
+        filter: ({ filteringModel }) => badFilterRadioButtons(filteringModel.get('bad')),
         classes: 'f6 w-5',
         format: (bad) => bad ? h('.danger', 'Yes') : h('.success', 'No'),
     },

lib/public/views/QcFlagTypes/Overview/QcFlagTypesOverviewModel.js

@@ -30,12 +30,14 @@ export class QcFlagTypesOverviewModel extends OverviewPageModel {
         this._filteringModel = new FilteringModel({
             names: new TextTokensFilterModel(),
             methods: new TextTokensFilterModel(),
+            bad: new SelectionModel({
+                availableOptions: [{ label: 'Any' }, { label: 'Bad', value: true }, { label: 'Not Bad', value: false }],
+                defaultSelection: [{ label: 'Any' }],
+                allowEmpty: false,
+                multiple: false,
+            }),
         });
 
-        this._isBadFilterModel =
-            new SelectionModel({ availableOptions: [{ label: 'Bad', value: true }, { label: 'Not Bad', value: false }] });
-        this._registerFilter(this._isBadFilterModel);
-
         this._filteringModel.observe(() => {
             this._pagination.silentlySetCurrentPage(1);
             this.load();
@@ -48,18 +50,7 @@ export class QcFlagTypesOverviewModel extends OverviewPageModel {
      * @inheritdoc
      */
     getRootEndpoint() {
-        const params = {};
-        if (this.isAnyFilterActive()) {
-            params.filter = {
-                names: this._filteringModel.get("names").normalized,
-                methods: this._filteringModel.get("methods").normalized,
-                bad: this._isBadFilterModel.selected.length === 2
-                    ? undefined
-                    : this._isBadFilterModel.selected[0],
-            };
-        }
-
-        return buildUrl('/api/qcFlagTypes', params);
+        return buildUrl('/api/qcFlagTypes', { filter: this._filteringModel.normalized });
     }
 
     /**
@@ -71,37 +62,13 @@ export class QcFlagTypesOverviewModel extends OverviewPageModel {
         return this._filteringModel;
     }
 
-    /**
-     * Returns filter model for filtering bad and not bad flags
-     *
-     * @return {TextTokensFilterModel} filter model for filtering bad and not bad flags
-     */
-    get isBadFilterModel() {
-        return this._isBadFilterModel;
-    }
-
-    /**
-     * Register a new filter model
-     *
-     * @param {FilterModel} filterModel the filter model to register
-     * @return {void}
-     * @private
-     */
-    _registerFilter(filterModel) {
-        filterModel.visualChange$.bubbleTo(this);
-        filterModel.observe(() => {
-            this._pagination.silentlySetCurrentPage(1);
-            this.load();
-        });
-    }
-
     /**
      * States whether any filter is active
      *
      * @return {boolean} true if any filter is active
      */
     isAnyFilterActive() {
-        return this._filteringModel.isAnyFilterActive() || this._isBadFilterModel.selected.length;
+        return this._filteringModel.isAnyFilterActive();
     }
 
     /**
@@ -111,7 +78,6 @@ export class QcFlagTypesOverviewModel extends OverviewPageModel {
      */
     reset() {
         this._filteringModel.reset();
-        this._isBadFilterModel.reset();
         super.reset();
     }
 }

test/public/qcFlagTypes/overview.test.js

@@ -112,7 +112,7 @@ module.exports = () => {
     it('should successfully apply QC flag type bad filter', async () => {
         await waitForTableLength(page, 7);
 
-        await pressElement(page, '.bad-filter input[type=checkbox]', true);
+        await pressElement(page, '#badFilterRadioBad', true);
         await checkColumnValuesWithRegex(page, 'bad', '^Yes$');
 
         await pressElement(page, '#reset-filters', true);