[O2B-1547] Migrate lhc period overview model to use filtering model pattern (#2105)

* pdpBeamTypesFilterModel, namesFilterModel and yearsFilterModel are now stored in a FilteringModel instance
* pdpBeamTypesFilterModel, namesFilterModel and yearsFilterModel must now be accessed using the FilteringModel.get() funtion

Author: NarrowsProjects

lib/public/views/lhcPeriods/ActiveColumns/lhcPeriodsActiveColumns.js

@@ -30,8 +30,8 @@ export const lhcPeriodsActiveColumns = {
         name: 'Name',
         visible: true,
         sortable: true,
-        filter: ({ namesFilterModel }) => textFilter(
-            namesFilterModel,
+        filter: ({ filteringModel }) => textFilter(
+            filteringModel.get('names'),
             { class: 'w-75 mt1', placeholder: 'e.g. LHC22a, lhc23b, ...' },
         ),
         classes: 'w-15',
@@ -92,8 +92,8 @@ export const lhcPeriodsActiveColumns = {
         visible: true,
         sortable: true,
         format: (_, lhcPeriod) => formatLhcPeriodYear(lhcPeriod.name),
-        filter: ({ yearsFilterModel }) => textFilter(
-            yearsFilterModel,
+        filter: ({ filteringModel }) => textFilter(
+            filteringModel.get('years'),
             { class: 'w-75 mt1', placeholder: 'e.g. 2022, 2023, ...' },
         ),
         classes: 'w-7',
@@ -104,8 +104,8 @@ export const lhcPeriodsActiveColumns = {
         visible: true,
         sortable: true,
         format: (pdpBeamTypes) => pdpBeamTypes.length > 0 ? pdpBeamTypes.join(',') : '-',
-        filter: ({ pdpBeamTypesFilterModel }) => textFilter(
-            pdpBeamTypesFilterModel,
+        filter: ({ filteringModel }) => textFilter(
+            filteringModel.get('pdpBeamTypes'),
             { class: 'w-75 mt1', placeholder: 'e.g. pp, PbPb' },
         ),
         classes: 'w-7',

lib/public/views/lhcPeriods/Overview/LhcPeriodsOverviewModel.js

@@ -11,6 +11,7 @@
  * or submit itself to any jurisdiction.
  */
 
+import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
 import { TextTokensFilterModel } from '../../../components/Filters/common/filters/TextTokensFilterModel.js';
 import { OverviewPageModel } from '../../../models/OverviewModel.js';
 import { buildUrl } from '/js/src/index.js';
@@ -27,27 +28,33 @@ export class LhcPeriodsOverviewModel extends OverviewPageModel {
     constructor() {
         super();
 
-        this._namesFilterModel = new TextTokensFilterModel();
-        this._registerFilter(this._namesFilterModel);
-        this._yearsFilterModel = new TextTokensFilterModel();
-        this._registerFilter(this._yearsFilterModel);
-        this._pdpBeamTypesFilterModel = new TextTokensFilterModel();
-        this._registerFilter(this._pdpBeamTypesFilterModel);
+        this._filteringModel = new FilteringModel({
+            names: new TextTokensFilterModel(),
+            years: new TextTokensFilterModel(),
+            pdpBeamTypes: new TextTokensFilterModel(),
+        });
+
+        this._filteringModel.visualChange$.bubbleTo(this);
+        this._filteringModel.observe(() => {
+            this._pagination.silentlySetCurrentPage(1);
+            this.load();
+        });
     }
 
     /**
      * @inheritdoc
      */
     getRootEndpoint() {
-        const params = {
-            filter: {
-                names: this._namesFilterModel.normalized,
-                years: this._yearsFilterModel.normalized,
-                pdpBeamTypes: this._pdpBeamTypesFilterModel.normalized,
-            },
-        };
+        return buildUrl('/api/lhcPeriodsStatistics', { filter: this._filteringModel.normalized });
+    }
 
-        return buildUrl('/api/lhcPeriodsStatistics', params);
+    /**
+     * Return the model managing all filters
+     *
+     * @return {FilteringModel} the filtering model
+     */
+    get filteringModel() {
+        return this._filteringModel;
     }
 
     /**
@@ -66,61 +73,21 @@ export class LhcPeriodsOverviewModel extends OverviewPageModel {
         });
     }
 
-    /**
-     * Returns lhc periods names filter model
-     * @return {TextTokensFilterModel} lhc periods names filter model
-     */
-    get namesFilterModel() {
-        return this._namesFilterModel;
-    }
-
-    /**
-     * Returns lhc periods years filter model
-     * @return {TextTokensFilterModel} lhc periods years filter model
-     */
-    get yearsFilterModel() {
-        return this._yearsFilterModel;
-    }
-
-    /**
-     * Returns lhc periods beam type filter model
-     * @return {TextTokensFilterModel} lhc periods beam type filter model
-     */
-    get pdpBeamTypesFilterModel() {
-        return this._pdpBeamTypesFilterModel;
-    }
-
     /**
      * Reset this model to its default
      *
      * @returns {void}
      */
     reset() {
         super.reset();
-        this._namesFilterModel.reset();
-        this._yearsFilterModel.reset();
-        this._pdpBeamTypesFilterModel.reset();
-    }
-
-    /**
-     * 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();
-        });
+        this._filteringModel.reset();
     }
 
     /**
      * States whether any filter is active
      * @return {boolean} true if any filter is active
      */
     isAnyFilterActive() {
-        return !this._namesFilterModel.isEmpty || !this._yearsFilterModel.isEmpty || !this._pdpBeamTypesFilterModel.isEmpty;
+        return this._filteringModel.isAnyFilterActive();
     }
 }