chore: move all filters denoted as so to a filteringModel

Author: Guust

lib/public/components/Filters/LogsFilter/author/authorFilter.js

@@ -55,11 +55,12 @@ export const excludeAnonymousLogAuthorToggle = (authorFilterModel) => switchInpu
 /**
  * Returns a authorFilter component with text input, reset button, and anonymous exclusion button.
  *
- * @param {LogModel} logModel the log model object
- * @returns {Component} the author filter component
+ * @param {LogsOverviewModel} logsOverviewModel the log overview model
+ * @param {FilteringModel} logsOverviewModel.filteringModel the runs overview model
+ * @return {Component} the filter component
  */
-export const authorFilter = ({ authorFilter }) => h('.flex-row.items-center.g3', [
-    authorFilterTextInput(authorFilter),
-    resetAuthorFilterButton(authorFilter),
-    excludeAnonymousLogAuthorToggle(authorFilter),
+export const authorFilter = ({ filteringModel }) => h('.flex-row.items-center.g3', [
+    authorFilterTextInput(filteringModel.get('authorFilter')),
+    resetAuthorFilterButton(filteringModel.get('authorFilter')),
+    excludeAnonymousLogAuthorToggle(filteringModel.get('authorFilter')),
 ]);

lib/public/views/Logs/ActiveColumns/logsActiveColumns.js

@@ -71,8 +71,16 @@ export const logsActiveColumns = {
         visible: true,
         sortable: true,
         size: 'w-30',
-        filter: ({ titleFilter }) => textFilter(
-            titleFilter,
+
+        /**
+         * Title filter component
+         *
+         * @param {LogsOverviewModel} logOverviewModel the logs overview model
+         * @param {FilteringModel} logOverviewModel.filteringModel filtering model
+         * @return {Component} the filter component
+         */
+        filter: ({ filteringModel }) => textFilter(
+            filteringModel.get('titleFilter'),
             {
                 id: 'titleFilterText',
                 class: 'w-75 mt1',
@@ -92,8 +100,16 @@ export const logsActiveColumns = {
         name: 'Content',
         visible: false,
         size: 'w-10',
-        filter: ({ contentFilter }) => textFilter(
-            contentFilter,
+
+        /**
+         * Content filter component
+         *
+         * @param {LogsOverviewModel} logOverviewModel the logs overview model
+         * @param {FilteringModel} logOverviewModel.filteringModel filtering model
+         * @return {Component} the filter component
+         */
+        filter: ({ filteringModel }) => textFilter(
+            filteringModel.get('contentFilter'),
             {
                 id: 'contentFilterText',
                 class: 'w-75 mt1',

lib/public/views/Logs/Overview/LogsOverviewModel.js

@@ -20,6 +20,7 @@ import { AuthorFilterModel } from '../../../components/Filters/LogsFilter/author
 import { PaginationModel } from '../../../components/Pagination/PaginationModel.js';
 import { getRemoteDataSlice } from '../../../utilities/fetch/getRemoteDataSlice.js';
 import { tagsProvider } from '../../../services/tag/tagsProvider.js';
+import { FilteringModel } from '../../../components/Filters/common/FilteringModel.js';
 
 /**
  * Model representing handlers for log entries page
@@ -36,6 +37,12 @@ export class LogsOverviewModel extends Observable {
     constructor(model, excludeAnonymous = false) {
         super();
 
+        this._filteringModel = new FilteringModel({
+            authorFilter: new AuthorFilterModel(),
+            titleFilter: new FilterInputModel(),
+            contentFilter: new FilterInputModel(),
+        });
+
         // Sub-models
         this._listingTagsFilterModel = new TagFilterModel(tagsProvider.items$);
         this._listingTagsFilterModel.observe(() => this._applyFilters());
@@ -49,16 +56,6 @@ export class LogsOverviewModel extends Observable {
         this._pagination.observe(() => this.fetchLogs());
         this._pagination.itemsPerPageSelector$.observe(() => this.notify());
 
-        // Filtering models
-        this._authorFilter = new AuthorFilterModel();
-        this._registerFilter(this._authorFilter);
-
-        this._titleFilter = new FilterInputModel();
-        this._registerFilter(this._titleFilter);
-
-        this._contentFilter = new FilterInputModel();
-        this._registerFilter(this._contentFilter);
-
         this._logs = RemoteData.NotAsked();
 
         const updateDebounceTime = () => {
@@ -67,7 +64,7 @@ export class LogsOverviewModel extends Observable {
         model.appConfiguration$.observe(() => updateDebounceTime());
         updateDebounceTime();
 
-        excludeAnonymous && this._authorFilter.update('!Anonymous');
+        excludeAnonymous && this._filteringModel.get('authorFilter').update('!Anonymous');
 
         this.reset(false);
     }
@@ -119,10 +116,7 @@ export class LogsOverviewModel extends Observable {
      * @return {undefined}
      */
     reset(fetch = true) {
-        this.titleFilter.reset();
-        this.contentFilter.reset();
-        this.authorFilter.reset();
-
+        this._filteringModel.reset();
         this.createdFilterFrom = '';
         this.createdFilterTo = '';
 
@@ -153,9 +147,7 @@ export class LogsOverviewModel extends Observable {
      */
     isAnyFilterActive() {
         return (
-            !this._titleFilter.isEmpty
-            || !this._contentFilter.isEmpty
-            || !this._authorFilter.isEmpty
+            !this._filteringModel.isAnyFilterActive()
             || this.createdFilterFrom !== ''
             || this.createdFilterTo !== ''
             || !this.listingTagsFilterModel.isEmpty
@@ -289,6 +281,15 @@ export class LogsOverviewModel extends Observable {
         }
     }
 
+    /**
+     * Return the model managing all filters
+     *
+     * @return {FilteringModel} the filtering model
+     */
+    get filteringModel() {
+        return this._filteringModel;
+    }
+
     /**
      * Return the model handling the filtering on tags
      *
@@ -375,16 +376,18 @@ export class LogsOverviewModel extends Observable {
     _getFilterQueryParams() {
         const sortOn = this._overviewSortModel.appliedOn;
         const sortDirection = this._overviewSortModel.appliedDirection;
-
+        const titleFilter = this._filteringModel.get('titleFilter');
+        const contentFilter = this._filteringModel.get('contentFilter');
+        const authorFilter = this._filteringModel.get('authorFilter');
         return {
-            ...!this._titleFilter.isEmpty && {
-                'filter[title]': this._titleFilter.value,
+            ...!titleFilter.isEmpty && {
+                'filter[title]': titleFilter.value,
             },
-            ...!this._contentFilter.isEmpty && {
-                'filter[content]': this._contentFilter.value,
+            ...!contentFilter.isEmpty && {
+                'filter[content]': contentFilter.value,
             },
-            ...!this._authorFilter.isEmpty && {
-                'filter[author]': this._authorFilter.value,
+            ...!authorFilter.isEmpty && {
+                'filter[author]': authorFilter,
             },
             ...this.createdFilterFrom && {
                 'filter[created][from]':

lib/public/views/Logs/Overview/index.js

@@ -39,7 +39,7 @@ const logOverviewScreen = ({ logs: { overviewModel: logsOverviewModel } }) => {
         h('#main-action-bar.flex-row.justify-between.header-container.pv2', [
             h('.flex-row.g3', [
                 filtersPanelPopover(logsOverviewModel, logsActiveColumns),
-                excludeAnonymousLogAuthorToggle(logsOverviewModel.authorFilter),
+                excludeAnonymousLogAuthorToggle(logsOverviewModel.filteringModel.get('authorFilter')),
             ]),
             actionButtons(),
         ]),