@projectcaluma/ember-form 14.8.3 → 14.9.1

package/addon/lib/compare.js

@@ -0,0 +1,161 @@
+import { isEmpty } from "@ember/utils";
+import isEqual from "lodash.isequal";
+
+import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
+import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
+
+/**
+ * Serializes a value into a comparable format, ignoring
+ * falsey differences.
+ *
+ * @param {*} v
+ * @returns {*}
+ */
+export function comparisonValue(v) {
+  // ignore falsey differences.
+  if (isEmpty(v)) {
+    return null;
+  }
+
+  // compare arrays as sorted serialized strings.
+  if (Array.isArray(v)) {
+    return v.map(comparisonValue).toSorted().toString();
+  }
+
+  return v;
+}
+
+/**
+ * Filters a table answer to a comparable format, dropping all
+ * non-relevant fields for comparison.
+ *
+ * @param {*} answer
+ * @returns {Object|null}
+ */
+export function filterTableAnswer(answer) {
+  const v = { ...answer.node };
+  if (isEmpty(v)) {
+    return null;
+  }
+
+  // drop question object, but keep the slug for comparison.
+  v.questionSlug = v.question?.slug ?? "";
+
+  // drop all non-relevant fields for value comparison.
+  delete v.__typename;
+  delete v.historyDate;
+  delete v.historyType;
+  delete v.historyUserId;
+  delete v.question;
+  delete v.id;
+  delete v.documentId;
+
+  // flatten all remaining keys as comparable values.
+  for (const key of Object.keys(v)) {
+    v[key] = comparisonValue(v[key]);
+  }
+
+  return v;
+}
+
+/**
+ * Creates an object that is suitable for comparison, filtering out
+ * non-relevant fields and sorting answers by question slug.
+ *
+ * @param {Object} doc
+ * @returns {Object}
+ */
+export function comparableDocument(doc) {
+  return {
+    id: doc.id,
+    answers: {
+      edges: doc.answers.edges
+        .map((answer) => ({
+          node: filterTableAnswer(answer),
+        }))
+        .toSorted((a, b) => {
+          return a.node.questionSlug.localeCompare(b.node.questionSlug);
+        }),
+    },
+  };
+}
+
+/**
+ * Compares two table documents for equality.
+ *
+ * @param {Object} docA
+ * @param {Object} docB
+ * @returns {Boolean}
+ */
+export function compareTableDocument(docA, docB) {
+  return isEqual(comparableDocument(docA), comparableDocument(docB));
+}
+
+/**
+ * Compares current and historical table values, returning
+ * a list of documents with correct history types for diffing.
+ *
+ * @param {*} owner
+ * @param {*} field
+ * @param {*} value
+ * @param {*} historicalValue
+ * @returns a set of documents for comparison
+ */
+export function historicalTableValue(owner, field, value, historicalValue) {
+  const Document = owner.factoryFor("caluma-model:document").class;
+
+  return (
+    value
+      .map((document) => {
+        let historyType = document.historyType;
+
+        // find corresponding historical document to compare.
+        const historicalDocument = historicalValue?.find(
+          (histDoc) => histDoc.id === document.id,
+        );
+
+        // if the document is marked as removed and there is no historical counterpart,
+        // we skip it from the diff view. (the original document does not
+        // include documents that were removed before the historical snapshot).
+        if (historyType === "-" && !historicalDocument) {
+          return false;
+        }
+
+        if (historyType === "~") {
+          if (!historicalDocument) {
+            // If a document is marked as modified, but has no historical counterpart,
+            // it means it was added as a new document in the current set.
+            // If there is another document in the historical set with identical
+            // flat table values, we treat this as an unchanged document.
+            // (when re-added the same with a different id)
+            historyType = historicalValue?.find(
+              (histDoc) =>
+                decodeId(histDoc.id) !== decodeId(document.id) &&
+                compareTableDocument(histDoc, document),
+            )
+              ? "="
+              : "+";
+          } else if (compareTableDocument(document, historicalDocument)) {
+            // If the modified document has identical flat table values
+            // to the historical document, we treat it as identical.
+            historyType = "=";
+          }
+        }
+
+        return new Document({
+          raw: parseDocument({
+            ...document,
+            historicalAnswers: historicalDocument?.answers,
+            historyType,
+          }),
+          parentDocument: field.document,
+          historicalDocument: historicalDocument
+            ? parseDocument(historicalDocument)
+            : undefined,
+          owner,
+        });
+      })
+      // filter out dropped documents;
+      .filter(Boolean)
+  );
+}

package/addon/lib/document.js

@@ -27,19 +27,23 @@ export default class Document extends Base {
     parentDocument,
     parentField,
     dataSourceContext,
+    historicalDocument,
+    compare,
     ...args
   }) {
     assert(
       "A graphql document `raw` must be passed",
-      raw?.__typename === "Document",
+      raw?.__typename.includes("Document"),
     );
 
     super({ raw, ...args });
 
+    this.historicalDocument = historicalDocument;
     this.parentDocument = parentDocument;
     this.parentField = parentField;
     this.dataSourceContext =
       dataSourceContext ?? parentDocument?.dataSourceContext;
+    this.compare = compare ?? parentDocument?.compare;
 
     this.pushIntoStore();
 
@@ -66,7 +70,11 @@ export default class Document extends Base {
         this,
         this.calumaStore.find(`${this.pk}:Form:${form.slug}`) ||
           new (owner.factoryFor("caluma-model:fieldset").class)({
-            raw: { form, answers: this.raw.answers },
+            raw: {
+              form,
+              answers: this.raw.answers,
+              historicalAnswers: this.historicalDocument?.answers,
+            },
             document: this,
             owner,
           }),

package/addon/lib/field.js

@@ -21,6 +21,7 @@ import saveDocumentTableAnswerMutation from "@projectcaluma/ember-form/gql/mutat
 import getDocumentUsedDynamicOptionsQuery from "@projectcaluma/ember-form/gql/queries/document-used-dynamic-options.graphql";
 import refreshAnswerQuery from "@projectcaluma/ember-form/gql/queries/refresh-answer.graphql";
 import Base from "@projectcaluma/ember-form/lib/base";
+import { comparisonValue } from "@projectcaluma/ember-form/lib/compare";
 import dependencies from "@projectcaluma/ember-form/lib/dependencies";
 
 export const TYPE_MAP = {
@@ -114,12 +115,23 @@ export default class Field extends Base {
         return;
       }
 
+      // If comparison is enabled and there is no answer, add the required
+      // historical raw answer data, and mark answer as not changed.
+      const rawHistorical = this.compare
+        ? {
+            historyType: "=",
+            historyDate: this.compare.to,
+          }
+        : {};
+
       answer = new Answer({
         raw: {
           id: null,
           __typename: answerType,
           question: { slug: this.raw.question.slug },
           [camelize(answerType.replace(/Answer$/, "Value"))]: null,
+          historical: null,
+          ...rawHistorical,
         },
         field: this,
         owner,
@@ -127,7 +139,12 @@ export default class Field extends Base {
     } else {
       answer =
         this.calumaStore.find(`Answer:${decodeId(this.raw.answer.id)}`) ||
-        new Answer({ raw: this.raw.answer, field: this, owner });
+        new Answer({
+          raw: this.raw.answer,
+          historical: this.raw.historicalAnswer,
+          field: this,
+          owner,
+        });
     }
 
     this.answer = associateDestroyableChild(this, answer);
@@ -166,6 +183,14 @@ export default class Field extends Base {
    */
   _components = new Set();
 
+  /**
+   * Get the compare context via the fieldset.
+   * @property {Object} compare
+   */
+  get compare() {
+    return this.fieldset.compare;
+  }
+
   /**
    * The primary key of the field. Consists of the document and question primary
    * keys.
@@ -197,6 +222,27 @@ export default class Field extends Base {
     return `${this.pk}:label`;
   }
 
+  /**
+   * Whether the field has been modified between two form timelines.
+   *
+   * @property {Boolean} isModified
+   */
+  get isModified() {
+    // table answers are manually compared to check if values actually changed,
+    // use the historyType attribute to check if changes were made.
+    if (this.question.raw.__typename === "TableQuestion") {
+      return (this.answer?.value ?? []).some((a) => {
+        return a.raw.historyType !== "=";
+      });
+    }
+
+    // other answer types can be compared directly, ignoring falsey differences.
+    return (
+      comparisonValue(this.answer?.value) !==
+      comparisonValue(this.answer?.historicalValue)
+    );
+  }
+
   /**
    * Whether the field is valid.
    *
@@ -293,6 +339,19 @@ export default class Field extends Base {
     return this.answer?.value;
   }
 
+  /**
+   * The historical value of the field
+   *
+   * @property {*} historicalValue
+   */
+  get historicalValue() {
+    if (this.question.isCalculated) {
+      return this.calculatedValue;
+    }
+
+    return this.answer?.historicalValue;
+  }
+
   /**
    * The computed value of a calculated float question
    *
@@ -465,6 +524,27 @@ export default class Field extends Base {
     return this.question.isMultipleChoice ? selected : selected[0];
   }
 
+  /**
+   * The historically selected option. This property is only used for choice
+   * questions. It can either return null if no value is selected yet, an
+   * object for single choices or an array of objects for multiple choices.
+   *
+   * @property {null|Object|Object[]} selected
+   */
+  get historicalSelected() {
+    if (!this.question.isChoice && !this.question.isMultipleChoice) {
+      return null;
+    }
+
+    const selected = this.options.filter(({ slug }) =>
+      this.question.isMultipleChoice
+        ? (this.historicalValue || []).includes(slug)
+        : this.historicalValue === slug,
+    );
+
+    return this.question.isMultipleChoice ? selected : selected[0];
+  }
+
   /**
    * The field's JEXL context.
    *

package/addon/lib/fieldset.js

@@ -59,6 +59,9 @@ export default class Fieldset extends Base {
               answer: this.raw.answers.find(
                 (answer) => answer?.question?.slug === question.slug,
               ),
+              historicalAnswer: this.raw.historicalAnswers?.find(
+                (answer) => answer?.question?.slug === question.slug,
+              ),
             },
             fieldset: this,
             owner,
@@ -69,6 +72,14 @@ export default class Fieldset extends Base {
     this.fields = fields;
   }
 
+  /**
+   * Get the compare context via the document.
+   * @property {Object} compare
+   */
+  get compare() {
+    return this.document.compare;
+  }
+
   /**
    * The primary key of the fieldset. Consists of the document and form primary
    * keys.

package/addon/lib/navigation.js

@@ -5,12 +5,17 @@ import {
   registerDestructor,
 } from "@ember/destroyable";
 import { action } from "@ember/object";
-import { next, cancel, once } from "@ember/runloop";
+import { cancel, next, once } from "@ember/runloop";
 import { inject as service } from "@ember/service";
 import { cached } from "tracked-toolbox";
 
 import Base from "@projectcaluma/ember-form/lib/base";
 
+const COMPARE_STATES = {
+  EQUAL: "equal",
+  MODIFIED: "modified",
+};
+
 const STATES = {
   EMPTY: "empty",
   IN_PROGRESS: "in-progress",
@@ -177,6 +182,28 @@ export class NavigationItem extends Base {
     return this.navigable || Boolean(this.visibleChildren.length);
   }
 
+  /**
+   * The current compare state consisting of the items and the childrens fieldset
+   * state.
+   *
+   * This can be one of 2 states:
+   * - `equal` if every fieldset is `equal`
+   * - `modified` if there are `modified` fieldsets
+   *
+   * @property {String} state
+   */
+  @cached
+  get compareState() {
+    const states = [
+      this.compareFieldsetState,
+      ...this.visibleChildren.map((child) => child.compareFieldsetState),
+    ].filter(Boolean);
+
+    return states.some((state) => state === COMPARE_STATES.MODIFIED)
+      ? COMPARE_STATES.MODIFIED
+      : COMPARE_STATES.EQUAL;
+  }
+
   /**
    * The current state consisting of the items and the childrens fieldset
    * state.
@@ -238,6 +265,29 @@ export class NavigationItem extends Base {
     );
   }
 
+  /**
+   * The current comparestate of the item's fieldset. This does not consider the state
+   * of children items.
+   *
+   * This can be one of 2 states:
+   * - `equal` if every field is equal
+   * - `modified` if there are modified fields
+   *
+   * @property {String} compareFieldsetState
+   */
+  @cached
+  get compareFieldsetState() {
+    if (!this.visibleFields.length) {
+      return null;
+    }
+
+    if (this.visibleFields.some((f) => f.isModified)) {
+      return COMPARE_STATES.MODIFIED;
+    }
+
+    return COMPARE_STATES.EQUAL;
+  }
+
   /**
    * The current state of the item's fieldset. This does not consider the state
    * of children items.

package/addon/lib/parsers.js

@@ -1,9 +1,9 @@
-import { assert } from "@ember/debug";
+import { assert, warn } from "@ember/debug";
 
 export const parseDocument = (response) => {
   assert(
     "The passed document must be a GraphQL document",
-    response.__typename === "Document",
+    response.__typename.includes("Document"),
   );
   assert("The passed document must include a form", response.form);
   assert("The passed document must include answers", response.answers);
@@ -11,7 +11,12 @@ export const parseDocument = (response) => {
   return {
     ...response,
     rootForm: parseForm(response.form),
-    answers: response.answers.edges.map(({ node }) => parseAnswer(node)),
+    answers: response.answers.edges.map(({ node }) =>
+      parseAnswer(node, response.historyType),
+    ),
+    historicalAnswers: response.historicalAnswers?.edges.map(({ node }) =>
+      parseAnswer(node, response.historyType),
+    ),
     forms: parseFormTree(response.form),
   };
 };
@@ -42,15 +47,61 @@ export const parseFormTree = (response) => {
   ];
 };
 
-export const parseAnswer = (response) => {
+export const parseAnswer = (response, historyType = null) => {
   assert(
     "The passed answer must be a GraphQL answer",
     /Answer$/.test(response.__typename),
   );
 
-  return { ...response };
+  // if a whole document is marked as added or removed, we need to
+  // propagate that to all the underlying answers as well.
+  return {
+    ...response,
+    // If the parent document was removed/added, propagate that
+    // history type to the answer as well.
+    historyType: ["-", "+"].includes(historyType)
+      ? historyType
+      : response.historyType,
+  };
 };
 
+/**
+ * Parse the widget and detects a widget override.
+ *
+ * @param {Array} params
+ * @param {Object} options
+ * @returns {Object} {widget: String, override: Boolean}
+ */
+export function parseWidgetType(calumaOptions, params, options = {}) {
+  for (const obj of params) {
+    let widget = obj?.raw?.meta?.widgetOverride;
+    if (obj?.useNumberSeparatorWidget) {
+      widget = "cf-field/input/number-separator";
+    }
+
+    if (!widget) {
+      continue;
+    }
+
+    if (
+      !calumaOptions
+        .getComponentOverrides()
+        .find(({ component }) => component === widget)
+    ) {
+      warn(
+        `Widget override "${widget}" is not registered. Please register it by calling \`calumaOptions.registerComponentOverride\``,
+        widget,
+        { id: "ember-caluma.unregistered-override" },
+      );
+      continue;
+    }
+
+    return { widget, override: true };
+  }
+
+  return { widget: options?.default ?? "cf-field/input", override: false };
+}
+
 export const parseQuestion = (response) => {
   assert(
     "The passed question must be a GraphQL question",
@@ -66,4 +117,5 @@ export default {
   parseFormTree,
   parseAnswer,
   parseQuestion,
+  parseWidgetType,
 };

package/addon/services/caluma-store.js

@@ -16,6 +16,18 @@ export default class CalumaStoreService extends Service {
       obj.storeKey,
     );
 
+    // Do not use the store for historical objects, because in the diff
+    // view we switch between different versions of the same object
+    // with the same ID, which should not be retrieved from the store.
+    const historyRegex = new RegExp("^Historical");
+    if (
+      historyRegex.test(obj?.raw?.__typename) ||
+      historyRegex.test(obj?.raw?.answer?.__typename) ||
+      (obj?.raw?.answers || []).some((a) => historyRegex.test(a?.__typename))
+    ) {
+      return false;
+    }
+
     const existing = this._store.get(obj.storeKey);
 
     if (existing) {

package/app/components/cf-field/input-compare/changes-note.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/components/cf-field/input-compare/changes-note";

package/app/components/cf-field/input-compare/text-diff.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/components/cf-field/input-compare/text-diff";

package/app/components/cf-field/input-compare/textarea-diff.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/components/cf-field/input-compare/textarea-diff";

package/app/components/cf-field/input-compare.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/components/cf-field/input-compare";

package/app/components/timeline-select.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/components/timeline-select";

package/app/styles/@projectcaluma/ember-form.scss

@@ -1,5 +1,6 @@
 @import "ember-uikit/variables-theme";
 @import "../cf-field";
+@import "../cf-content-compare";
 @import "../cf-navigation";
 @import "../flatpickr";
 @import "../uikit-overwrites";