[O2B-1534] Migrate log overview to use filtering model pattern

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

@@ -11,12 +11,12 @@
  * or submit itself to any jurisdiction.
  */
 
-import { FilterInputModel } from '../../common/filters/FilterInputModel.js';
+import { RawTextFilterModel } from '../../common/filters/RawTextFilterModel.js';
 
 /**
  * Model to handle the state of the Author Filter
  */
-export class AuthorFilterModel extends FilterInputModel {
+export class AuthorFilterModel extends RawTextFilterModel {
     /**
      * Constructor
      *
@@ -32,7 +32,7 @@ export class AuthorFilterModel extends FilterInputModel {
      * @return {boolean} true if '!Anonymous' is included in the raw filter string, false otherwise.
      */
     isAnonymousExcluded() {
-        return this._raw.includes('!Anonymous');
+        return this._value.includes('!Anonymous');
     }
 
     /**
@@ -42,28 +42,13 @@ export class AuthorFilterModel extends FilterInputModel {
      */
     toggleAnonymousFilter() {
         if (this.isAnonymousExcluded()) {
-            this._raw = this._raw.split(',')
+            this._value = this._value.split(',')
                 .filter((author) => author.trim() !== '!Anonymous')
                 .join(',');
         } else {
-            this._raw += super.isEmpty ? '!Anonymous' : ', !Anonymous';
+            this._value += super.isEmpty ? '!Anonymous' : ', !Anonymous';
         }
 
-        this._value = this.valueFromRaw(this._raw);
-        this.notify();
-    }
-
-    /**
-     * Reset the filter to its default value and notify the observers.
-     *
-     * @return {void}
-     */
-    clear() {
-        if (this.isEmpty) {
-            return;
-        }
-
-        super.reset();
         this.notify();
     }
 }

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

@@ -14,19 +14,7 @@
 import { h } from '/js/src/index.js';
 import { iconX } from '/js/src/icons.js';
 import { switchInput } from '../../../common/form/switchInput.js';
-
-/**
- * Returns a text input field that can be used to filter logs by author
- *
- * @param {AuthorFilterModel} authorFilterModel The author filter model object
- * @returns {Component} A text box that allows the user to enter an author substring to match against all logs
- */
-const authorFilterTextInput = (authorFilterModel) => h('input.w-40', {
-    type: 'text',
-    id: 'authorFilterText',
-    value: authorFilterModel.raw,
-    oninput: (e) => authorFilterModel.update(e.target.value),
-});
+import { rawTextFilter } from '../../common/filters/rawTextFilter.js';
 
 /**
  * Returns a button that can be used to reset the author filter.
@@ -36,7 +24,7 @@ const authorFilterTextInput = (authorFilterModel) => h('input.w-40', {
  */
 const resetAuthorFilterButton = (authorFilterModel) => h(
     '.btn.btn-pill.f7',
-    { disabled: authorFilterModel.isEmpty, onclick: () => authorFilterModel.clear() },
+    { disabled: authorFilterModel.isEmpty, onclick: () => authorFilterModel.reset() },
     iconX(),
 );
 
@@ -55,11 +43,16 @@ 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', [
+    rawTextFilter(filteringModel.get('authorFilter'), {
+        classes: ['w-40'],
+        id: 'authorFilterText',
+        value: filteringModel.get('authorFilter').raw,
+    }),
+    resetAuthorFilterButton(filteringModel.get('authorFilter')),
+    excludeAnonymousLogAuthorToggle(filteringModel.get('authorFilter')),
 ]);

lib/public/components/Filters/common/filters/textFilter.js

@@ -16,13 +16,13 @@ import { h } from '/js/src/index.js';
 /**
  * Returns a text filter component
  *
- * @param {FilterInputModel|TextTokensFilterModel} filterInputModel the model of the text filter
+ * @param {TextTokensFilterModel} textTokensFilterModel the model of the text filter
  * @param {Object} attributes the additional attributes to pass to the component, such as id and classes
  * @return {Component} the filter component
  */
-export const textFilter = (filterInputModel, attributes) => h('input', {
+export const textFilter = (textTokensFilterModel, attributes) => h('input', {
     ...attributes,
     type: 'text',
-    value: filterInputModel.raw,
-    oninput: (e) => filterInputModel.update(e.target.value),
+    value: textTokensFilterModel.raw,
+    oninput: (e) => textTokensFilterModel.update(e.target.value),
 }, '');