Refactor frontend array field filters to mixins

changelog/entries/unreleased/refactor/2802_refactor_array_filter_mixins.json

@@ -0,0 +1,7 @@
+{
+    "type": "refactor",
+    "message": "Refactor array filter mixins",
+    "issue_number": 2802,
+    "bullet_points": [],
+    "created_at": "2024-07-17"
+}

web-frontend/modules/core/mixins.js

@@ -0,0 +1,49 @@
+/**
+ * Supporting JS module to define and use plain
+ * JavaScript mixins.
+ */
+
+/**
+ * The mix function can be used to extend a class with mixin
+ * objects that provide common behavior.
+ *
+ * In case that the class define a function that exists in the
+ * mixin, the class implementation will take precedence over
+ * the function in the mixin.
+ *
+ * Typical usage:
+ *
+ * const canFlyMixin = {
+ *    fly() {
+ *      ...
+ *    }
+ *  }
+ *
+ *  const canSwimMixin = {
+ *    swim() {
+ *      ...
+ *    }
+ *  }
+ *
+ *  class Animal {
+ *    constructor(name) {
+ *      this.name = name;
+ *    }
+ *  }
+ *
+ *  class Duck extends mix(canFlyMixin, canSwimMixin, Animal) {}
+ */
+export function mix(...chain) {
+  const [baseClass, ...mixins] = chain.reverse()
+
+  for (const mixin of mixins) {
+    for (const [key, value] of Object.entries(mixin)) {
+      /* eslint no-prototype-builtins: "off" */
+      if (!baseClass.prototype.hasOwnProperty(key)) {
+        baseClass.prototype[key] = value
+      }
+    }
+  }
+
+  return baseClass
+}

web-frontend/modules/database/arrayFilterMixins.js

@@ -6,15 +6,6 @@ import {
   genericHasValueLengthLowerThanFilter,
 } from '@baserow/modules/database/utils/fieldFilters'
 
-export function fieldSupportsFilter(fieldType, filterMixin) {
-  for (const [key, value] of Object.entries(filterMixin)) {
-    /* eslint no-prototype-builtins: "off" */
-    if (!fieldType.prototype.hasOwnProperty(key)) {
-      fieldType.prototype[key] = value
-    }
-  }
-}
-
 export const hasEmptyValueFilterMixin = {
   getHasEmptyValueFilterFunction(field) {
     return genericHasEmptyValueFilter

web-frontend/modules/database/fieldTypes.js

@@ -16,17 +16,16 @@ import {
   isValidURL,
 } from '@baserow/modules/core/utils/string'
 import {
-  fieldSupportsFilter,
-  hasEmptyValueFilterMixin,
   hasValueContainsFilterMixin,
   hasValueEqualFilterMixin,
   hasValueContainsWordFilterMixin,
   hasValueLengthIsLowerThanFilterMixin,
-} from '@baserow/modules/database/fieldFilterCompatibility'
+  hasEmptyValueFilterMixin,
+} from '@baserow/modules/database/arrayFilterMixins'
 import moment from '@baserow/modules/core/moment'
 import guessFormat from 'moment-guess'
 import { Registerable } from '@baserow/modules/core/registry'
-
+import { mix } from '@baserow/modules/core/mixins'
 import FieldNumberSubForm from '@baserow/modules/database/components/field/FieldNumberSubForm'
 import FieldAutonumberSubForm from '@baserow/modules/database/components/field/FieldAutonumberSubForm'
 import FieldDurationSubForm from '@baserow/modules/database/components/field/FieldDurationSubForm'
@@ -142,12 +141,6 @@ import FormViewFieldMultipleLinkRow from '@baserow/modules/database/components/v
 import FormViewFieldMultipleSelectCheckboxes from '@baserow/modules/database/components/view/form/FormViewFieldMultipleSelectCheckboxes'
 import FormViewFieldSingleSelectRadios from '@baserow/modules/database/components/view/form/FormViewFieldSingleSelectRadios'
 
-import {
-  BaserowFormulaArrayType,
-  BaserowFormulaCharType,
-  BaserowFormulaTextType,
-} from '@baserow/modules/database/formula/formulaTypes'
-
 import { trueValues } from '@baserow/modules/core/utils/constants'
 import {
   getDateMomentFormat,
@@ -3485,7 +3478,14 @@ export class PhoneNumberFieldType extends FieldType {
   }
 }
 
-export class FormulaFieldType extends FieldType {
+export class FormulaFieldType extends mix(
+  hasEmptyValueFilterMixin,
+  hasValueEqualFilterMixin,
+  hasValueContainsFilterMixin,
+  hasValueContainsWordFilterMixin,
+  hasValueLengthIsLowerThanFilterMixin,
+  FieldType
+) {
   static getType() {
     return 'formula'
   }
@@ -4240,37 +4240,3 @@ export class PasswordFieldType extends FieldType {
     return RowHistoryFieldPassword
   }
 }
-
-fieldSupportsFilter(FormulaFieldType, hasEmptyValueFilterMixin)
-fieldSupportsFilter(BaserowFormulaArrayType, hasEmptyValueFilterMixin)
-fieldSupportsFilter(BaserowFormulaTextType, hasEmptyValueFilterMixin)
-fieldSupportsFilter(BaserowFormulaCharType, hasEmptyValueFilterMixin)
-
-fieldSupportsFilter(FormulaFieldType, hasValueEqualFilterMixin)
-fieldSupportsFilter(BaserowFormulaArrayType, hasValueEqualFilterMixin)
-fieldSupportsFilter(BaserowFormulaTextType, hasValueEqualFilterMixin)
-fieldSupportsFilter(BaserowFormulaCharType, hasValueEqualFilterMixin)
-
-fieldSupportsFilter(FormulaFieldType, hasValueContainsFilterMixin)
-fieldSupportsFilter(BaserowFormulaArrayType, hasValueContainsFilterMixin)
-fieldSupportsFilter(BaserowFormulaTextType, hasValueContainsFilterMixin)
-fieldSupportsFilter(BaserowFormulaCharType, hasValueContainsFilterMixin)
-
-fieldSupportsFilter(FormulaFieldType, hasValueContainsWordFilterMixin)
-fieldSupportsFilter(BaserowFormulaArrayType, hasValueContainsWordFilterMixin)
-fieldSupportsFilter(BaserowFormulaTextType, hasValueContainsWordFilterMixin)
-fieldSupportsFilter(BaserowFormulaCharType, hasValueContainsWordFilterMixin)
-
-fieldSupportsFilter(FormulaFieldType, hasValueLengthIsLowerThanFilterMixin)
-fieldSupportsFilter(
-  BaserowFormulaArrayType,
-  hasValueLengthIsLowerThanFilterMixin
-)
-fieldSupportsFilter(
-  BaserowFormulaTextType,
-  hasValueLengthIsLowerThanFilterMixin
-)
-fieldSupportsFilter(
-  BaserowFormulaCharType,
-  hasValueLengthIsLowerThanFilterMixin
-)

web-frontend/modules/database/formula/formulaTypes.js

@@ -46,6 +46,14 @@ import FunctionalGridViewFieldURL from '@baserow/modules/database/components/vie
 import GridViewFieldURL from '@baserow/modules/database/components/view/grid/fields/GridViewFieldURL.vue'
 import RowCardFieldURL from '@baserow/modules/database/components/card/RowCardFieldURL.vue'
 import FunctionalFormulaURLArrayItem from '@baserow/modules/database/components/formula/array/FunctionalFormulaURLArrayItem.vue'
+import { mix } from '@baserow/modules/core/mixins'
+import {
+  hasEmptyValueFilterMixin,
+  hasValueEqualFilterMixin,
+  hasValueContainsFilterMixin,
+  hasValueContainsWordFilterMixin,
+  hasValueLengthIsLowerThanFilterMixin,
+} from '@baserow/modules/database/arrayFilterMixins'
 
 export class BaserowFormulaTypeDefinition extends Registerable {
   getIconClass() {
@@ -184,7 +192,14 @@ export class BaserowFormulaTypeDefinition extends Registerable {
   }
 }
 
-export class BaserowFormulaTextType extends BaserowFormulaTypeDefinition {
+export class BaserowFormulaTextType extends mix(
+  hasEmptyValueFilterMixin,
+  hasValueEqualFilterMixin,
+  hasValueContainsFilterMixin,
+  hasValueContainsWordFilterMixin,
+  hasValueLengthIsLowerThanFilterMixin,
+  BaserowFormulaTypeDefinition
+) {
   static getType() {
     return 'text'
   }
@@ -222,7 +237,14 @@ export class BaserowFormulaTextType extends BaserowFormulaTypeDefinition {
   }
 }
 
-export class BaserowFormulaCharType extends BaserowFormulaTypeDefinition {
+export class BaserowFormulaCharType extends mix(
+  hasEmptyValueFilterMixin,
+  hasValueEqualFilterMixin,
+  hasValueContainsFilterMixin,
+  hasValueContainsWordFilterMixin,
+  hasValueLengthIsLowerThanFilterMixin,
+  BaserowFormulaTypeDefinition
+) {
   static getType() {
     return 'char'
   }
@@ -492,7 +514,15 @@ export class BaserowFormulaInvalidType extends BaserowFormulaTypeDefinition {
     return false
   }
 }
-export class BaserowFormulaArrayType extends BaserowFormulaTypeDefinition {
+
+export class BaserowFormulaArrayType extends mix(
+  hasEmptyValueFilterMixin,
+  hasValueEqualFilterMixin,
+  hasValueContainsFilterMixin,
+  hasValueContainsWordFilterMixin,
+  hasValueLengthIsLowerThanFilterMixin,
+  BaserowFormulaTypeDefinition
+) {
   static getType() {
     return 'array'
   }