@beinformed/ui 1.32.0 → 1.33.0-beta.2

package/src/models/attributes/StringAttributeModel.js

@@ -117,16 +117,28 @@ export default class StringAttributeModel extends AttributeModel {
 
     if (this.isBSN()) {
       constraints.add(new BSNConstraint());
-    } else if (this.isIBAN()) {
+    } else if (
+      this.isIBAN() &&
+      (this.operator === "" ||
+        this.operator === "exactly" ||
+        this.operator === "isNot")
+    ) {
+      // validate iban when no operator is set or exact or isNot
       constraints.add(new IBANConstraint());
     }
 
-    if (this.isZipcode() && this.regexp) {
+    if (
+      this.isZipcode() &&
+      (this.operator === "" ||
+        this.operator === "exactly" ||
+        this.operator === "isNot")
+    ) {
+      // validate zip when regex is set is set or exact or isNot
       constraints.add(
         new RegexConstraint({
           messageKey: "Constraint.ZipCode.InvalidFormat",
           defaultMessage: "Must be a valid Dutch ZIP code, e.g. 1234 AB",
-          regex: this.regexp,
+          regex: new RegExp("^[1-9][0-9]{3} ?[a-zA-Z]{2}$", "gi"),
         }),
       );
     } else if (this.isEmail() && this.regexp) {
@@ -162,15 +174,23 @@ export default class StringAttributeModel extends AttributeModel {
   formatIBAN(value: string): string {
     const noFormat = this.removeFormat(value);
 
-    const groups = noFormat.replace(/\s/g, "").match(/.{1,4}/g);
-    return groups == null ? "" : groups.join(" ");
+    if (
+      this.operator === "" ||
+      this.operator === "exactly" ||
+      this.operator === "isNot"
+    ) {
+      const groups = noFormat.replace(/\s/g, "").match(/.{1,4}/g);
+      return groups == null ? "" : groups.join(" ");
+    }
+
+    return noFormat;
   }
 
   /**
    */
   formatZipcode(value: string): string {
     const noFormat = this.removeFormat(value);
-    if (noFormat.length > 4) {
+    if (noFormat.length === 6) {
       return (
         noFormat.substring(0, 4) + " " + noFormat.substring(4).toUpperCase()
       );
@@ -191,19 +211,29 @@ export default class StringAttributeModel extends AttributeModel {
       return "";
     }
 
-    if (this.isIBAN()) {
-      return this.formatIBAN(value);
+    if (typeof value !== "string") {
+      return value;
     }
 
-    if (this.isZipcode()) {
-      return this.formatZipcode(value);
-    }
+    const values = this.isMultiple ? value.split(",") : [value];
 
-    if (this.isBSN()) {
-      return this.formatBSN(value);
-    }
+    return values
+      .map((val) => {
+        if (this.isIBAN()) {
+          return this.formatIBAN(val);
+        }
 
-    return value;
+        if (this.isZipcode()) {
+          return this.formatZipcode(val);
+        }
+
+        if (this.isBSN()) {
+          return this.formatBSN(val);
+        }
+
+        return val;
+      })
+      .join(",");
   }
 
   /**
@@ -214,7 +244,7 @@ export default class StringAttributeModel extends AttributeModel {
     }
 
     if (this.isIBAN() || this.isZipcode() || this.isBSN()) {
-      return value.replace(/\.|\s/g, "");
+      return value.replace(/[^a-z0-9,]/gi, "");
     }
 
     return value;
@@ -238,7 +268,17 @@ export default class StringAttributeModel extends AttributeModel {
   set inputvalue(value: string) {
     this._inputvalue = value;
 
-    this.value = value == null ? value : this.removeFormat(value);
+    if (value == null) {
+      this.value = value;
+    } else if (this.isMultiple) {
+      this.value = value
+        .split(",")
+        .map((val) => this.removeFormat(val))
+        .join(",");
+    } else {
+      this.value = this.removeFormat(value);
+    }
+
     this.validate(this.validateValue);
   }
 
@@ -246,7 +286,9 @@ export default class StringAttributeModel extends AttributeModel {
    */
   get readonlyvalue(): string {
     if (typeof this.value === "string") {
-      return this.formatValue(this.value);
+      const formattedValue = this.formatValue(this.value);
+      // fix for rendering of multiple spaces
+      return formattedValue.replace(/ {2}/gi, " \u00A0");
     }
 
     return this.value == null ? "" : this.value;
@@ -280,4 +322,11 @@ export default class StringAttributeModel extends AttributeModel {
     // default value (also applied for email address + download attribute)
     return ATTRIBUTE_WIDTH.MEDIUM;
   }
+
+  /**
+   * Indicates if a value is multiple choice, used for filters
+   */
+  get isMultiple(): boolean {
+    return this.getContribution("multiplechoice", false);
+  }
 }

package/src/models/attributes/__tests__/StringAttributeModel.spec.js

@@ -112,4 +112,27 @@ describe("stringAttributeModel", () => {
 
     expect(attribute).not.toBe(clonedAttribute);
   });
+
+  it("handles multiple spaces in the readonlyvalue", () => {
+    const attribute = new StringAttributeModel({}, { type: "string" });
+
+    attribute.update("test     test");
+
+    expect(attribute.value).toBe("test     test");
+    expect(attribute.inputvalue).toBe("test     test");
+    expect(attribute.readonlyvalue).toBe("test \u00A0 \u00A0 test");
+  });
+
+  it("format isMultiple with escaped comma", () => {
+    const attribute = new StringAttributeModel(
+      {},
+      { type: "string", multiplechoice: true },
+    );
+
+    attribute.update("test     test");
+
+    expect(attribute.value).toBe("test     test");
+    expect(attribute.inputvalue).toBe("test     test");
+    expect(attribute.readonlyvalue).toBe("test \u00A0 \u00A0 test");
+  });
 });

package/src/models/filters/__tests__/ZipcodeFilter.spec.js

@@ -0,0 +1,111 @@
+import FilterModel from "../FilterModel";
+
+describe("filterModel", () => {
+  let data;
+  let contributions;
+
+  beforeEach(() => {
+    data = {
+      name: "zipfilter",
+      param: "zipfilter",
+    };
+
+    contributions = {
+      label: "zipfilter",
+      layouthint: ["zipcode"],
+      multiplechoice: false,
+      operator: "exactly",
+      type: "string",
+    };
+  });
+
+  it("should be able to create a filter from a typical modular UI json filter structure without value", () => {
+    const filter = new FilterModel(data, contributions);
+
+    expect(filter).toBeInstanceOf(FilterModel);
+    expect(filter.label).toBe("zipfilter");
+    expect(filter.name).toBe("zipfilter");
+    expect(filter.value).toBeNull();
+    expect(filter.inputvalue).toBeUndefined();
+    expect(filter.type).toBe("string");
+  });
+
+  it("modular ui input, zipcode no space", () => {
+    const stringFilterWithValue = { ...data };
+
+    stringFilterWithValue.value = "1234AB";
+
+    const filter = new FilterModel(stringFilterWithValue, contributions);
+
+    expect(filter).toBeInstanceOf(FilterModel);
+    expect(filter.attribute.value).toBe("1234AB");
+    expect(filter.attribute.inputvalue).toBe("1234 AB");
+    expect(filter.params).toStrictEqual([
+      {
+        name: "zipfilter",
+        value: "1234AB",
+      },
+    ]);
+
+    filter.reset();
+    expect(filter.attribute.inputvalue).toBe("");
+    expect(filter.attribute.value).toBeNull();
+  });
+
+  it("modular ui input, zipcode space", () => {
+    const filter = new FilterModel(data, contributions);
+
+    filter.update(filter.attribute, "1234 AB");
+
+    expect(filter).toBeInstanceOf(FilterModel);
+    expect(filter.attribute.value).toBe("1234AB");
+    expect(filter.attribute.inputvalue).toBe("1234 AB");
+    expect(filter.params).toStrictEqual([
+      {
+        name: "zipfilter",
+        value: "1234AB",
+      },
+    ]);
+
+    expect(filter.isValid).toBe(true);
+  });
+
+  it("modular ui input, wrong zipcode", () => {
+    const filter = new FilterModel(data, contributions);
+
+    filter.update(filter.attribute, "123");
+
+    expect(filter).toBeInstanceOf(FilterModel);
+    expect(filter.attribute.value).toBe("123");
+    expect(filter.attribute.inputvalue).toBe("123");
+    expect(filter.params).toStrictEqual([
+      {
+        name: "zipfilter",
+        value: "123",
+      },
+    ]);
+
+    expect(filter.isValid).toBe(false);
+  });
+
+  it("modular ui input - starts with, zipcode part", () => {
+    const filter = new FilterModel(data, {
+      operator: "startsWith",
+      contributions,
+    });
+
+    filter.update(filter.attribute, "123");
+
+    expect(filter).toBeInstanceOf(FilterModel);
+    expect(filter.attribute.value).toBe("123");
+    expect(filter.attribute.inputvalue).toBe("123");
+    expect(filter.params).toStrictEqual([
+      {
+        name: "zipfilter",
+        value: "123",
+      },
+    ]);
+
+    expect(filter.isValid).toBe(true);
+  });
+});