feat: replace the multi checkboxes from the bad filter with radio buttons.

Author: GuustMetz

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

@@ -0,0 +1,35 @@
+/**
+ * @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

@@ -162,10 +162,17 @@ export class SelectionModel extends Observable {
             selectOption = option;
         }
 
+        console.log('option', option);
+        console.log('selectOption', selectOption);
+        console.log('!this.isSelected(selectOption)', !this.isSelected(selectOption));
+
         if (selectOption && !this.isSelected(selectOption)) {
             if (this._multiple || this._selectedOptions.length === 0) {
+                console.log('pushed');
+                
                 this._selectedOptions.push(selectOption);
             } else {
+                console.log('replaced');
                 this._selectedOptions = [selectOption];
             }
 
@@ -331,4 +338,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: ({ filteringModel }) => checkboxes(
-            filteringModel.get('bad'),
-            { 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,7 +30,14 @@ export class QcFlagTypesOverviewModel extends OverviewPageModel {
         this._filteringModel = new FilteringModel({
             names: new TextTokensFilterModel(),
             methods: new TextTokensFilterModel(),
-            bad: new SelectionModel({ availableOptions: [{ label: 'Bad', value: true }, { label: 'Not Bad', value: false }] })
+            bad: new SelectionModel(
+                {
+                    availableOptions: [{ label: 'Any' }, { label: 'Bad', value: true }, { label: 'Not Bad', value: false }],
+                    defaultSelection: [{ label: 'Any' }],
+                    allowEmpty: false,
+                    multiple: false,
+                }
+            )
         });
 
         this._filteringModel.observe(() => {
@@ -45,16 +52,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._filteringModel.get('bad').selected.length === 2 ? undefined : this._filteringModel.get('bad').selected[0],
-            };
-        }
-
-        return buildUrl('/api/qcFlagTypes', params);
+        return buildUrl('/api/qcFlagTypes', { filter: this._filteringModel.normalized });
     }
 
     /**

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);