@beinformed/ui 1.9.0-beta.6 → 1.9.1

package/src/models/contentconfiguration/__tests__/ContentConfigurationResults.spec.js

@@ -33,14 +33,14 @@ describe("ContentConfigurationResults", () => {
   });
 
   it("can handle configuration with description object", () => {
-    const rawText =
+    const message =
       "<p>The property value is ${EstimatedPropertyValue} and my personal deposit is ${MortgageDeposit}. The mortgage is a repayment mortgage for a term of ${MortgageTermInYears} years. The rate type is ${InterestRateType} for a period of ${PeriodOfInterestRate}.</p>";
 
     const contributions = {
       label: "Total cost of mortgage",
       description: {
         id: "CalculatorResults.TotalCostOfMortgage.introText",
-        rawText,
+        message,
       },
       layouthint: ["render-description:TotalCostOfMortgage"],
       attributes: ["TotalCostOfMortgage"],
@@ -59,7 +59,7 @@ describe("ContentConfigurationResults", () => {
     );
 
     expect(contentConfigurationResults.label).toBe("Total cost of mortgage");
-    expect(contentConfigurationResults.description).toBe(rawText);
+    expect(contentConfigurationResults.description).toBe(message);
     expect(contentConfigurationResults.attributes).toStrictEqual([
       "TotalCostOfMortgage",
     ]);
@@ -87,15 +87,15 @@ describe("ContentConfigurationResults", () => {
   });
 
   it("can handle configuration with description string", () => {
-    const rawText =
+    const message =
       "<p>The property value is ${EstimatedPropertyValue} and my personal deposit is ${MortgageDeposit}. The mortgage is a repayment mortgage for a term of ${MortgageTermInYears} years. The rate type is ${InterestRateType} for a period of ${PeriodOfInterestRate}.</p>";
 
     const contentConfigurationResults = new ContentConfigurationResults({
       label: "Total cost of mortgage",
-      description: rawText,
+      description: message,
     });
 
     expect(contentConfigurationResults.label).toBe("Total cost of mortgage");
-    expect(contentConfigurationResults.description).toBe(rawText);
+    expect(contentConfigurationResults.description).toBe(message);
   });
 });

package/src/models/form/FormObjectModel.js

@@ -295,8 +295,12 @@ export default class FormObjectModel extends BaseModel {
    * Get introText of form object
    */
   get introText(): string {
+    if (this.data.content?.text) {
+      return this.data.content.text.message ?? this.data.content.text;
+    }
+
     return (
-      this.contributions.introText?.rawText ?? this.contributions.introText
+      this.contributions.introText?.message ?? this.contributions.introText
     );
   }
 

package/src/models/form/__tests__/FormObjectModel.spec.js

@@ -19,7 +19,7 @@ const data = {
 const contributions = {
   repeatable: false,
   label: "Create person",
-  introText: { id: "IntroTextID", rawText: "This is introtext" },
+  introText: { id: "IntroTextID", message: "This is introtext" },
   attributes: [
     {
       Name: {
@@ -122,7 +122,7 @@ describe("formObjectModel", () => {
     const contributions2 = {
       repeatable: false,
       label: "Create person",
-      introText: { id: "IntroTextID", rawText: "This is new introtext" },
+      introText: { id: "IntroTextID", message: "This is new introtext" },
       attributes: [],
     };
 

package/src/models/form/__tests__/FormWithContentData.json

@@ -19,6 +19,7 @@
             {
               "elementid": "UitslagBlaastestType",
               "content": {
+                "header": { "label": "Header label" },
                 "label": "Uitslag blaastest label",
                 "elements": [
                   {

package/src/models/layouthint/LayoutHintCollection.js

@@ -35,11 +35,13 @@ export default class LayoutHintCollection extends BaseCollection<string> {
   has(...hints: Array<string>): boolean {
     const hintArray = hints.length > 0 ? [...hints] : [];
 
-    return hintArray.some(
-      (hint) =>
-        this.layouthint.includes(hint) ||
-        this.layouthint.some((hint2) => hint2.startsWith(hint))
-    );
+    return hintArray
+      .flat()
+      .some(
+        (hint) =>
+          this.layouthint.includes(hint) ||
+          this.layouthint.some((hint2) => hint2.startsWith(hint))
+      );
   }
 
   /**
@@ -51,8 +53,7 @@ export default class LayoutHintCollection extends BaseCollection<string> {
    */
   hasExact(...hints: Array<string>): boolean {
     const hintArray = hints.length > 0 ? [...hints] : [];
-
-    return hintArray.some((hint) => this.layouthint.includes(hint));
+    return hintArray.flat().some((hint) => this.layouthint.includes(hint));
   }
 
   /**

package/src/models/list/ListDetailModel.js

@@ -133,6 +133,25 @@ export default class ListDetailModel extends DetailModel {
     this._contentConfiguration = configuration;
   }
 
+  /**
+   * Getting the introduction text configured on the case view
+   */
+  get introtext(): string {
+    if (this.data._text) {
+      return this.data._text.message ?? this.data._text;
+    }
+
+    if (this.contributions.text) {
+      return this.contributions.text.message ?? this.contributions.text;
+    }
+
+    if (Array.isArray(this.contributions.texts)) {
+      return this.contributions.texts[0].text;
+    }
+
+    return "";
+  }
+
   /**
    */
   setResultSection() {

package/src/models/list/ListModel.js

@@ -98,12 +98,16 @@ export default class ListModel extends ResourceModel {
    * Getting the introduction text
    */
   get introtext(): string {
-    if (this.contributions.texts) {
-      const text = this.contributions.texts.find(
-        (item) => item.type === "master"
-      );
+    if (this.data.text) {
+      return this.data.text.message ?? this.data.text;
+    }
+
+    if (this.contributions.text) {
+      return this.contributions.text.message ?? this.contributions.text;
+    }
 
-      return text ? text.text : "";
+    if (Array.isArray(this.contributions.texts)) {
+      return this.contributions.texts[0].text;
     }
 
     return "";

package/src/models/list/__tests__/ListDetailModel.spec.js

@@ -27,4 +27,68 @@ describe("listDetailModel", () => {
       "Highly Inappropriate Tales for Young People"
     );
   });
+
+  it("should be able to handle different kind of introtext", () => {
+    const listdetailOldStructure = new ListDetailModel({
+      key: "Book",
+      data: data.Book,
+      contributions: contributions.Book,
+    });
+
+    expect(listdetailOldStructure.introtext).toBe("<p>This is introtext</p>");
+
+    const listdetailFromDataPlain = new ListDetailModel({
+      key: "Book",
+      data: {
+        _text: "<p>This is introtext</p>",
+        ...data.Book,
+      },
+      contributions: contributions.Book,
+    });
+
+    expect(listdetailFromDataPlain.introtext).toBe("<p>This is introtext</p>");
+
+    const listdetailFromDataApplicationMessage = new ListDetailModel({
+      key: "Book",
+      data: {
+        ...data.Book,
+        _text: {
+          message: "<p>This is introtext</p>",
+        },
+      },
+      contributions: contributions.Book,
+    });
+
+    expect(listdetailFromDataApplicationMessage.introtext).toBe(
+      "<p>This is introtext</p>"
+    );
+
+    const listdetailFromNewContributionsRawTextMessage = new ListDetailModel({
+      key: "Book",
+      data: data.Book,
+      contributions: {
+        ...contributions.Book,
+        text: {
+          message: "<p>This is introtext</p>",
+        },
+      },
+    });
+
+    expect(listdetailFromNewContributionsRawTextMessage.introtext).toBe(
+      "<p>This is introtext</p>"
+    );
+
+    const listdetailFromNewContributionsSimpleMessage = new ListDetailModel({
+      key: "Book",
+      data: data.Book,
+      contributions: {
+        ...contributions.Book,
+        text: "<p>This is introtext</p>",
+      },
+    });
+
+    expect(listdetailFromNewContributionsSimpleMessage.introtext).toBe(
+      "<p>This is introtext</p>"
+    );
+  });
 });

package/src/models/list/__tests__/ListModel.spec.js

@@ -54,8 +54,70 @@ describe("listModel spec", () => {
 
     expect(list.headers).toHaveLength(6);
 
-    expect(list.introtext).toStrictEqual(
-      "<p>This is a list of <em>books</em><br />For each book the <strong>contributers</strong> and the <strong>publishers</strong> are added as <u>additional details</u>.<br />For more information see amazon</p>"
+    expect(list.introtext).toStrictEqual("<p>This is introtext</p>");
+  });
+
+  it("should be able to handle different kind of introtext", () => {
+    const listOldStructure = new ListModel({
+      key: "Books",
+      data: mockList.Books,
+      contributions: mockListContributions.Books,
+    });
+
+    expect(listOldStructure.introtext).toBe("<p>This is introtext</p>");
+
+    const listFromDataPlain = new ListModel({
+      key: "Books",
+      data: {
+        text: "<p>This is introtext</p>",
+        ...mockList.Books,
+      },
+      contributions: mockListContributions.Books,
+    });
+
+    expect(listFromDataPlain.introtext).toBe("<p>This is introtext</p>");
+
+    const listFromDataApplicationMessage = new ListModel({
+      key: "Books",
+      data: {
+        ...mockList.Books,
+        text: {
+          message: "<p>This is introtext</p>",
+        },
+      },
+      contributions: mockListContributions.Books,
+    });
+
+    expect(listFromDataApplicationMessage.introtext).toBe(
+      "<p>This is introtext</p>"
+    );
+
+    const listFromNewContributionsRawTextMessage = new ListModel({
+      key: "Books",
+      data: mockList.Books,
+      contributions: {
+        ...mockListContributions.Books,
+        text: {
+          message: "<p>This is introtext</p>",
+        },
+      },
+    });
+
+    expect(listFromNewContributionsRawTextMessage.introtext).toBe(
+      "<p>This is introtext</p>"
+    );
+
+    const listFromNewContributionsSimpleMessage = new ListModel({
+      key: "Books",
+      data: mockList.Books,
+      contributions: {
+        ...mockListContributions.Books,
+        text: "<p>This is introtext</p>",
+      },
+    });
+
+    expect(listFromNewContributionsSimpleMessage.introtext).toBe(
+      "<p>This is introtext</p>"
     );
   });
 });

package/src/models/list/__tests__/caselist-34.contributions.json

@@ -5,7 +5,7 @@
     "texts": [
       {
         "type": "master",
-        "text": "<p>This view contains all the data about this book. It contains a list of the creators and editions. A person can be an author(1) or an illustrator(2)<br /><br />This is a list of books that is ordered by the role (author (1), co-author, illustrator(2)) of the person that contributed to the book.<br /><br />1) An author is broadly defined as &quot;the person who originated or gave existence to anything&quot; and whose authorship determines responsibility for what was created. Narrowly defined, an author is the originator of any written work and can also be described as a writer.<br /><br />2) An illustrator is an artist who specializes in enhancing writing or elucidating concepts by providing a visual representation that corresponds to the content of the associated text or idea. The illustration may be intended to clarify complicated concepts or objects that are difficult to describe textually, which is the reason illustrations are often found in children&#39;s books.<br /></p>"
+        "text": "<p>This is introtext</p>"
       }
     ],
     "_links": {

package/src/models/list/__tests__/listContributions.json

@@ -6,7 +6,7 @@
     "texts": [
       {
         "type": "master",
-        "text": "<p>This is a list of <em>books</em><br />For each book the <strong>contributers</strong> and the <strong>publishers</strong> are added as <u>additional details</u>.<br />For more information see amazon</p>"
+        "text": "<p>This is introtext</p>"
       }
     ],
     "actions": [

package/src/models/panels/GroupingPanelModel.js

@@ -78,22 +78,23 @@ export default class GroupingPanelModel extends ResourceModel {
    * Check if an introtext exists for this caseview
    */
   hasIntroText(): boolean {
-    return (
-      this.contributions.texts &&
-      this.contributions.texts.find((item) => item.type === "master")
-    );
+    return this.introtext !== "";
   }
 
   /**
    * Getting the introduction text configured on the grouping panel
    */
   get introtext(): string {
-    if (this.contributions.texts) {
-      const text = this.contributions.texts.find(
-        (item) => item.type === "master"
-      );
+    if (this.data._text) {
+      return this.data._text.message ?? this.data._text;
+    }
+
+    if (this.contributions.text) {
+      return this.contributions.text.message ?? this.contributions.text;
+    }
 
-      return text ? text.text : "";
+    if (Array.isArray(this.contributions.texts)) {
+      return this.contributions.texts[0].text;
     }
 
     return "";

package/src/models/panels/__tests__/GroupingPanelModel.spec.js

@@ -1,5 +1,9 @@
 import GroupingPanelModel from "../GroupingPanelModel";
 
+import panelJson from "./groupingPanel.json";
+import panelContributionsJson from "./groupingPanelContributions.json";
+import CaseViewModel from "../../caseview/CaseViewModel";
+
 describe("groupingPanelModel", () => {
   it("should be able to create an empty GroupingPanelModel object", () => {
     const groupingPanel = new GroupingPanelModel();
@@ -30,4 +34,90 @@ describe("groupingPanelModel", () => {
       })
     ).toBe(true);
   });
+
+  it("should be able to create a grouping panel from a typical modular UI json structure", () => {
+    const groupingPanel = new GroupingPanelModel({
+      key: "AskingQuestions",
+      data: panelJson,
+      contributions: panelContributionsJson,
+    });
+
+    expect(groupingPanel).toBeInstanceOf(GroupingPanelModel);
+
+    expect(groupingPanel.key).toBe("AskingQuestions");
+    expect(groupingPanel.label).toBe("Asking questions");
+
+    expect(groupingPanel.links).toHaveLength(8);
+    expect(groupingPanel.panelLinks).toHaveLength(1);
+
+    expect(groupingPanel.hasIntroText()).toBe(true);
+  });
+
+  it("should be able to handle different kind of introtext", () => {
+    const groupingPanelOldStructure = new CaseViewModel({
+      key: "Book",
+      data: panelJson,
+      contributions: panelContributionsJson,
+    });
+
+    expect(groupingPanelOldStructure.introtext).toBe(
+      "<p>This is introtext</p>"
+    );
+
+    const groupingPanelFromDataPlain = new CaseViewModel({
+      key: "Book",
+      data: {
+        _text: "<p>This is introtext</p>",
+        ...panelJson,
+      },
+      contributions: panelContributionsJson,
+    });
+
+    expect(groupingPanelFromDataPlain.introtext).toBe(
+      "<p>This is introtext</p>"
+    );
+
+    const groupingPanelFromDataApplicationMessage = new CaseViewModel({
+      key: "Book",
+      data: {
+        ...panelJson,
+        _text: {
+          message: "<p>This is introtext</p>",
+        },
+      },
+      contributions: panelContributionsJson,
+    });
+
+    expect(groupingPanelFromDataApplicationMessage.introtext).toBe(
+      "<p>This is introtext</p>"
+    );
+
+    const groupingPanelFromNewContributionsRawTextMessage = new CaseViewModel({
+      key: "Book",
+      data: panelJson,
+      contributions: {
+        ...panelContributionsJson,
+        text: {
+          message: "<p>This is introtext</p>",
+        },
+      },
+    });
+
+    expect(groupingPanelFromNewContributionsRawTextMessage.introtext).toBe(
+      "<p>This is introtext</p>"
+    );
+
+    const groupingPanelFromNewContributionsSimpleMessage = new CaseViewModel({
+      key: "Book",
+      data: panelJson,
+      contributions: {
+        ...panelContributionsJson,
+        text: "<p>This is introtext</p>",
+      },
+    });
+
+    expect(groupingPanelFromNewContributionsSimpleMessage.introtext).toBe(
+      "<p>This is introtext</p>"
+    );
+  });
 });

package/src/models/panels/__tests__/groupingPanel.json

@@ -0,0 +1,30 @@
+{
+  "_links": {
+    "self": { "href": "/iq-content/case/1/asking-questions" },
+    "api_doc": {
+      "href": "/api-docs/v3/iq-content/case/(case-id)/asking-questions"
+    },
+    "contributions": {
+      "href": "/contributions/iq-content/case/(case-id)/asking-questions"
+    },
+    "Decisions": { "href": "/iq-content/case/1/asking-questions/decisions" },
+    "taskgroup": [
+      {
+        "href": "/iq-content/case/1/asking-questions/labels",
+        "name": "Labels"
+      },
+      {
+        "href": "/iq-content/case/1/asking-questions/properties",
+        "name": "Properties"
+      },
+      {
+        "href": "/iq-content/case/1/asking-questions/sources",
+        "name": "Sources"
+      },
+      {
+        "href": "/iq-content/case/1/asking-questions/text-fragments",
+        "name": "TextFragments"
+      }
+    ]
+  }
+}

package/src/models/panels/__tests__/groupingPanelContributions.json

@@ -0,0 +1,46 @@
+{
+  "label": "Asking questions",
+  "resourcetype": "GroupingPanel",
+  "layouthint": ["hint"],
+  "texts": [
+    {
+      "type": "master",
+      "text": "<p>This is introtext</p>"
+    }
+  ],
+  "_links": {
+    "panel": [
+      {
+        "name": "Decisions",
+        "label": "Decisions",
+        "resourcetype": "InstrumentResultListPanel"
+      }
+    ],
+    "taskgroup": [
+      {
+        "name": "Labels",
+        "label": "Labels",
+        "layouthint": ["not-in-dropdown"],
+        "resourcetype": "TaskGroup"
+      },
+      {
+        "name": "Properties",
+        "label": "Properties",
+        "layouthint": ["not-in-dropdown"],
+        "resourcetype": "TaskGroup"
+      },
+      {
+        "name": "Sources",
+        "label": "Sources",
+        "layouthint": ["not-in-dropdown"],
+        "resourcetype": "TaskGroup"
+      },
+      {
+        "name": "TextFragments",
+        "label": "Text fragments",
+        "layouthint": ["not-in-dropdown"],
+        "resourcetype": "TaskGroup"
+      }
+    ]
+  }
+}

package/src/models/types.js

@@ -44,6 +44,7 @@ import type LookupOptionsModel from "./lookup/LookupOptionsModel";
 import type BaseFilterModel from "./filters/BaseFilterModel";
 import type AttributeCollection from "./attributes/AttributeCollection";
 import type AttributeModel from "./attributes/AttributeModel";
+import type LayoutHintCollection from "./layouthint/LayoutHintCollection";
 
 export type ModularUIModel =
   | ApplicationModel
@@ -176,49 +177,75 @@ export type FilesizeConstraintsType = {
 };
 
 export type PropertyData = { type: string, label: string, value: string };
-export type TextFragmentData = { type: string, label: string, text: string };
+export type TextFragmentData = {
+  type: string,
+  label: string,
+  text: string | { id?: string, message: string, properties?: Object },
+};
 export type SectionData = {
   id: string,
   type: string,
   label?: string,
   number?: string,
-  body: string,
+  body: string | { id?: string, message: string, properties?: Object },
   _links: { self: { href: string } },
   childSections: Array<SectionData>,
   subSections: Array<SectionData>,
 };
 
-export type PropertiesElement = {
-  propertiesElement: {
+export type PropertyElement = {
+  propertyElement: {
     label: string,
-    id: string,
+    layouthint: Array<string>,
     properties: Array<PropertyData>,
   },
 };
 export type TextFragmentElement = {
   textFragmentElement: {
     label: string,
-    id: string,
+    layouthint: Array<string>,
     textfragments: Array<TextFragmentData>,
   },
 };
 export type ContentElement = {
   contentElement: {
     label: string,
+    layouthint: Array<string>,
     sections: Array<SectionData>,
   },
 };
-export type ContentData = {
-  label: string | null,
-  elements: Array<PropertiesElement | TextFragmentElement | ContentElement>,
-};
 
+type PropertyElementMapped = {
+  propertyElement: {
+    label: string,
+    layouthint: LayoutHintCollection,
+    properties: Array<PropertyData>,
+  },
+};
+type TextFragmentElementMapped = {
+  textFragmentElement: {
+    label: string,
+    layouthint: LayoutHintCollection,
+    textfragments: Array<TextFragmentData>,
+  },
+};
 type ContentElementMapped = {
   contentElement: {
     label: string,
+    layouthint: LayoutHintCollection,
     sections: Array<SectionModel>,
   },
 };
+
 export type ContentAll = Array<
-  PropertiesElement | TextFragmentElement | ContentElementMapped
+  PropertyElementMapped | TextFragmentElementMapped | ContentElementMapped
 >;
+
+export type ContentData = {
+  header: {
+    label?: string,
+    description?: { id?: string, message: string, properties?: Object },
+  },
+  label?: string,
+  elements: Array<PropertyElement | TextFragmentElement | ContentElement>,
+};

package/src/modularui/ModularUIRequest.js

@@ -475,6 +475,7 @@ class ModularUIRequest {
 
     if (model instanceof FormModel) {
       const newData = JSON.parse(model.validationData);
+      // $FlowFixMe incompatible-call
       return JSON.stringify(deepmerge(prevData || {}, newData));
     }
 

package/src/utils/helpers/text.js

@@ -0,0 +1,23 @@
+// @flow
+import { isPlainObject } from "./objects";
+
+/**
+ * Handles text that is in the ApplicationMessage form ({ id: string, message: string, properties: object })
+ * @param text
+ * @returns {string}
+ */
+export const retrieveText = (
+  text:
+    | string
+    | { id?: string, message: string, properties?: { [key: string]: any } }
+): string => {
+  if (typeof text === "string") {
+    return text;
+  }
+
+  if (isPlainObject(text) && "message" in text) {
+    return text.message;
+  }
+
+  return "";
+};

package/src/utils/index.js

@@ -18,6 +18,7 @@ export * from "./helpers/createHash";
 export { default as createUUID } from "./helpers/createUUID";
 export * from "./helpers/sanitizeHtml";
 export * from "./helpers/objects";
+export * from "./helpers/text";
 
 // number
 export { default as DecimalFormat } from "./number/DecimalFormat";