@projectcaluma/ember-form 14.8.3 → 14.9.0

package/addon/components/cf-field/input-compare.hbs

@@ -0,0 +1,50 @@
+{{#let
+  (component
+    (ensure-safe-component (get-widget @field.question))
+    field=@field
+    disabled=true
+    context=@context
+    onSave=(perform this.save)
+  )
+  as |FieldComponent|
+}}
+  {{#if @field.isModified}}
+    <div
+      class="cf-compare cf-compare-{{@field.question.raw.__typename}}
+        {{if (eq @field.answer.raw.historyType '-') 'cf-compare-removed' ''}}
+        {{if (eq @field.answer.raw.historyType '+') 'cf-compare-added' ''}}
+        {{if (eq @field.answer.raw.historyType '~') 'cf-compare-modified' ''}}
+        "
+    >
+      {{#if this.compareOptions.combined}}
+        <div class="combined-diff">
+          <div hidden>
+            <FieldComponent @compare={{false}} />
+          </div>
+          <div class="diff-version">
+            <FieldComponent @compare={{@compare}} />
+          </div>
+        </div>
+        {{#unless this.compareOptions.disableChangesNote}}
+          <div class="changes-note">
+            <CfField::InputCompare::ChangesNote @field={{@field}} />
+          </div>
+        {{/unless}}
+      {{else}}
+        <div class="from-version">
+          <FieldComponent @compare={{@compare}} />
+        </div>
+        <div class="to-version">
+          <FieldComponent @compare={{false}} />
+        </div>
+        {{#unless this.compareOptions.disableChangesNote}}
+          <div class="changes-note">
+            <CfField::InputCompare::ChangesNote @field={{@field}} />
+          </div>
+        {{/unless}}
+      {{/if}}
+    </div>
+  {{else}}
+    <FieldComponent @compare={{false}} />
+  {{/if}}
+{{/let}}

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

@@ -0,0 +1,60 @@
+import { service } from "@ember/service";
+import Component from "@glimmer/component";
+import { task } from "ember-concurrency";
+
+import { parseWidgetType } from "@projectcaluma/ember-form/lib/parsers";
+
+/**
+ * Component for wrapping the compare input components
+ *
+ * @class CfFieldInputCompareComponent
+ */
+export default class CfFieldInputCompareComponent extends Component {
+  @service calumaOptions;
+
+  /**
+   * The compare input options.
+   *
+   * @property {} compareOptions
+   * @accessor
+   */
+  get compareOptions() {
+    const { widget } = parseWidgetType(this.calumaOptions, [
+      this.args.field.question,
+    ]);
+
+    const override = this.calumaOptions
+      .getComponentOverrides()
+      .find(({ component }) => component === widget);
+
+    if (widget === "cf-field/input") {
+      const typeName = this.args.field?.question?.raw?.__typename;
+      const compareOptions = {
+        TextQuestion: { combined: true },
+        IntegerQuestion: { combined: true },
+        MultipleChoiceQuestion: { combined: true },
+        ChoiceQuestion: { combined: true },
+        DateQuestion: { combined: true },
+        TextareaQuestion: { combined: true },
+        TableQuestion: { combined: true, disableChangesNote: true },
+      };
+
+      if (typeName in compareOptions) {
+        return compareOptions[typeName];
+      }
+    }
+
+    return override?.compareOptions;
+  }
+
+  /**
+   * In comparison mode, never perform a save, but keep a method
+   * to bind to the components.
+   *
+   * @method save
+   * @param {String|Number|String[]} value The new value to save to the field
+   */
+  save = task({ restartable: true }, async (value) => {
+    return value;
+  });
+}

package/addon/components/cf-field/input.hbs

@@ -4,5 +4,6 @@
     @disabled={{@disabled}}
     @onSave={{@onSave}}
     @context={{@context}}
+    @compare={{@compare}}
   />
 </div>

package/addon/components/cf-field.hbs

@@ -18,17 +18,26 @@
 
     <div class="uk-flex">
       <div class="uk-width-expand">
-        {{#let
-          (component (ensure-safe-component (get-widget @field.question)))
-          as |FieldComponent|
-        }}
-          <FieldComponent
+        {{#if @compare}}
+          <CfField::InputCompare
             @field={{@field}}
-            @disabled={{or @disabled @field.refreshAnswer.isRunning}}
+            @disabled={{true}}
             @context={{@context}}
-            @onSave={{perform this.save}}
+            @compare={{@compare}}
           />
-        {{/let}}
+        {{else}}
+          {{#let
+            (component (ensure-safe-component (get-widget @field.question)))
+            as |FieldComponent|
+          }}
+            <FieldComponent
+              @field={{@field}}
+              @disabled={{or @disabled @field.refreshAnswer.isRunning}}
+              @context={{@context}}
+              @onSave={{perform this.save}}
+            />
+          {{/let}}
+        {{/if}}
       </div>
 
       {{#if (and @field.question.raw.infoText this.infoTextVisible)}}

package/addon/components/cf-field.js

@@ -1,8 +1,8 @@
 import { action } from "@ember/object";
 import { service } from "@ember/service";
-import { macroCondition, isTesting } from "@embroider/macros";
+import { isTesting, macroCondition } from "@embroider/macros";
 import Component from "@glimmer/component";
-import { timeout, task } from "ember-concurrency";
+import { task, timeout } from "ember-concurrency";
 
 import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-type";
 
@@ -31,6 +31,10 @@ export default class CfFieldComponent extends Component {
     this.args.field._components.delete(this);
   }
 
+  get compare() {
+    return this.args.compare;
+  }
+
   get hasHiddenWidget() {
     return (
       this.args.field?.question.raw.meta.widgetOverride ===
@@ -77,7 +81,10 @@ export default class CfFieldComponent extends Component {
   }
 
   get saveIndicatorVisible() {
-    return !hasQuestionType(this.args.field?.question, "action-button");
+    return (
+      !this.compare &&
+      !hasQuestionType(this.args.field?.question, "action-button")
+    );
   }
 
   /**
@@ -89,6 +96,11 @@ export default class CfFieldComponent extends Component {
    * @param {String|Number|String[]} value The new value to save to the field
    */
   save = task({ restartable: true }, async (value) => {
+    // Do not save when in comparison mode.
+    if (this.compare) {
+      return;
+    }
+
     if (typeof this.args.onSave === "function") {
       return await this.args.onSave(this.args.field, value);
     }

package/addon/components/cf-form-wrapper.hbs

@@ -10,6 +10,7 @@
     @document={{@document}}
     @fieldset={{@fieldset}}
     @context={{@context}}
+    @compare={{@compare}}
     @disabled={{@disabled}}
     @onSave={{@onSave}}
   />

package/addon/components/cf-form.hbs

@@ -7,6 +7,7 @@
         @field={{field}}
         @disabled={{@disabled}}
         @context={{@context}}
+        @compare={{@compare}}
         @onSave={{@onSave}}
       />
     {{/if}}

package/addon/components/cf-navigation-item.hbs

@@ -17,10 +17,19 @@
         {{@item.label}}
       </span>
     {{/if}}
-    <span
-      class="cf-navigation__item__icon cf-navigation__item__icon--{{@item.state}}
-        {{if @item.dirty 'cf-navigation__item__icon--dirty'}}"
-    ></span>
+    {{#if @compare}}
+      {{#if (eq @item.compareState "modified")}}
+        <UkIcon
+          @icon="pencil"
+          class="cf-navigation__item__icon cf-navigation__item__icon--compare-{{@item.compareState}}"
+        />
+      {{/if}}
+    {{else}}
+      <span
+        class="cf-navigation__item__icon cf-navigation__item__icon--{{@item.state}}
+          {{if @item.dirty 'cf-navigation__item__icon--dirty'}}"
+      ></span>
+    {{/if}}
   </LinkTo>
 
   {{#if @item.visibleChildren}}
@@ -29,6 +38,7 @@
         <CfNavigationItem
           @item={{child}}
           @headingLevel={{add @headingLevel 1}}
+          @compare={{@compare}}
         />
       {{/each}}
     </ul>

package/addon/components/cf-navigation.hbs

@@ -7,6 +7,7 @@
       @item={{item}}
       @useAsHeading={{@useAsHeading}}
       @headingLevel={{@headingBaseLevel}}
+      @compare={{@compare}}
     />
     {{#unless item.fieldset.field}}
       <hr class="uk-divider-small uk-margin-small" />

package/addon/components/timeline-select.hbs

@@ -0,0 +1,20 @@
+<PowerSelect
+  class="uk-margin-bottom"
+  @selected={{@selected}}
+  @options={{@options}}
+  @searchEnabled={{false}}
+  @searchField="label"
+  @allowClear={{true}}
+  @onChange={{@onChange}}
+  as |option|
+>
+  {{#if (eq option.id "current")}}
+    {{t "caluma.form.compare.timeline.current"}}
+  {{else}}
+    {{option.label}}:
+    {{format-date option.startDate}}
+    {{#if option.endDate}}
+      -
+      {{format-date option.endDate}}{{/if}}
+  {{/if}}
+</PowerSelect>

package/addon/gql/queries/document-answers-compare.graphql

@@ -0,0 +1,157 @@
+#import FieldQuestion, SimpleQuestion, FieldTableQuestion from '../fragments/field.graphql'
+
+fragment SimpleRevisionAnswer on HistoricalAnswer {
+  id
+  historyDate
+  historyUserId
+  historyType
+  question {
+    slug
+    label
+    ... on ChoiceQuestion {
+      choiceOptions: options {
+        edges {
+          node {
+            slug
+            label
+          }
+        }
+      }
+    }
+    ... on DynamicChoiceQuestion {
+      dynamicChoiceOptions: options(context: $context) {
+        edges {
+          node {
+            slug
+            label
+          }
+        }
+      }
+    }
+    ... on MultipleChoiceQuestion {
+      multipleChoiceOptions: options {
+        edges {
+          node {
+            slug
+            label
+          }
+        }
+      }
+    }
+    ... on DynamicMultipleChoiceQuestion {
+      dynamicMultipleChoiceOptions: options(context: $context) {
+        edges {
+          node {
+            slug
+            label
+          }
+        }
+      }
+    }
+    __typename
+  }
+  ... on HistoricalStringAnswer {
+    historyId
+    stringValue: value
+  }
+  ... on HistoricalListAnswer {
+    historyId
+    listValue: value
+  }
+  ... on HistoricalIntegerAnswer {
+    historyId
+    integerValue: value
+  }
+  ... on HistoricalFloatAnswer {
+    historyId
+    floatValue: value
+  }
+  ... on HistoricalDateAnswer {
+    historyId
+    dateValue: value
+  }
+  __typename
+}
+
+fragment HistoricalTableValue on HistoricalDocument {
+  id: documentId
+  documentId: id
+  historyDate
+  historyType
+  historyUserId
+  form {
+    id
+    slug
+    questions {
+      edges {
+        node {
+          ...FieldQuestion
+        }
+      }
+    }
+  }
+  __typename
+}
+
+fragment RevisionDocument on HistoricalDocument {
+  historicalDocumentId: id
+  id: documentId
+  form {
+    id
+    slug
+  }
+}
+
+query (
+  $documentId: ID!
+  $from: DateTime!
+  $to: DateTime!
+  $context: JSONString
+) {
+  fromRevision: documentAsOf(id: $documentId, asOf: $from) {
+    ...RevisionDocument
+    answers: historicalAnswers(asOf: $from, excludeDeleted: true) {
+      edges {
+        node {
+          ...SimpleRevisionAnswer
+          ... on HistoricalTableAnswer {
+            tableValue: value(asOf: $from, excludeDeleted: true) {
+              ...HistoricalTableValue
+
+              answers: historicalAnswers(asOf: $from, excludeDeleted: true) {
+                edges {
+                  node {
+                    ...SimpleRevisionAnswer
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  toRevision: documentAsOf(id: $documentId, asOf: $to) {
+    ...RevisionDocument
+    answers: historicalAnswers(asOf: $to) {
+      edges {
+        node {
+          ...SimpleRevisionAnswer
+          ... on HistoricalTableAnswer {
+            tableValue: value(asOf: $to) {
+              ...HistoricalTableValue
+
+              answers: historicalAnswers(asOf: $to) {
+                edges {
+                  node {
+                    ...SimpleRevisionAnswer
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/addon/helpers/get-widget.js

@@ -1,10 +1,10 @@
 import Helper from "@ember/component/helper";
-import { warn } from "@ember/debug";
 import { inject as service } from "@ember/service";
 import { ensureSafeComponent } from "@embroider/util";
 
 import InputComponent from "@projectcaluma/ember-form/components/cf-field/input";
 import FormComponent from "@projectcaluma/ember-form/components/cf-form";
+import { parseWidgetType } from "@projectcaluma/ember-form/lib/parsers";
 
 const DEFAULT_WIDGETS = {
   "cf-field/input": InputComponent,
@@ -33,38 +33,24 @@ const DEFAULT_WIDGETS = {
 export default class GetWidgetHelper extends Helper {
   @service calumaOptions;
 
-  compute(params, { default: defaultWidget = "cf-field/input" }) {
-    for (const obj of params) {
-      let widget = obj?.raw?.meta?.widgetOverride;
-
-      if (obj?.useNumberSeparatorWidget) {
-        widget = "cf-field/input/number-separator";
-      }
-
-      if (!widget) {
-        continue;
-      }
-
-      const override =
-        widget &&
-        this.calumaOptions
-          .getComponentOverrides()
-          .find(({ component }) => component === widget);
-
-      warn(
-        `Widget override "${widget}" is not registered. Please register it by calling \`calumaOptions.registerComponentOverride\``,
-        override,
-        { id: "ember-caluma.unregistered-override" },
+  compute(params, options = {}) {
+    const { widget, override } = parseWidgetType(
+      this.calumaOptions,
+      params,
+      options,
+    );
+
+    if (override) {
+      const overrideWidget = this.calumaOptions
+        .getComponentOverrides()
+        .find(({ component }) => component === widget);
+
+      return ensureSafeComponent(
+        overrideWidget.componentClass ?? overrideWidget.component,
+        this,
       );
-
-      if (override) {
-        return ensureSafeComponent(
-          override.componentClass ?? override.component,
-          this,
-        );
-      }
     }
 
-    return ensureSafeComponent(DEFAULT_WIDGETS[defaultWidget], this);
+    return ensureSafeComponent(DEFAULT_WIDGETS[widget], this);
   }
 }

package/addon/instance-initializers/form-widget-overrides.js

@@ -33,6 +33,9 @@ class PowerSelectOverride {
     "DynamicChoiceQuestion",
     "DynamicMultipleChoiceQuestion",
   ];
+  compareOptions = {
+    combined: false,
+  };
 }
 
 class NumberSeparatorOverride {
@@ -47,6 +50,9 @@ class NumberSeparatorOverride {
   component = "cf-field/input/number-separator";
   componentClass = NumberSeparatorComponent;
   types = ["IntegerQuestion", "FloatQuestion", "CalculatedFloatQuestion"];
+  compareOptions = {
+    combined: true,
+  };
 }
 
 export function initialize(appInstance) {

package/addon/lib/answer.js

@@ -2,10 +2,11 @@ import { getOwner } from "@ember/application";
 import { assert } from "@ember/debug";
 import { camelize } from "@ember/string";
 import { isEmpty } from "@ember/utils";
-import { dedupeTracked, cached } from "tracked-toolbox";
+import { cached, dedupeTracked } from "tracked-toolbox";
 
 import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
 import Base from "@projectcaluma/ember-form/lib/base";
+import { historicalTableValue } from "@projectcaluma/ember-form/lib/compare";
 import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
 
 /**
@@ -33,7 +34,7 @@ class DedupedTrackedObject {
  * @class Answer
  */
 export default class Answer extends Base {
-  constructor({ raw, field, ...args }) {
+  constructor({ raw, field, historical, ...args }) {
     assert("`field` must be passed as an argument", field);
 
     assert(
@@ -45,6 +46,7 @@ export default class Answer extends Base {
 
     this.field = field;
     this.raw = new DedupedTrackedObject(raw);
+    this.historical = historical ? new DedupedTrackedObject(historical) : null;
 
     this.pushIntoStore();
   }
@@ -64,6 +66,14 @@ export default class Answer extends Base {
    */
   raw = {};
 
+  /**
+   * Get the compare context via the field.
+   * @property {Object} compare
+   */
+  get compare() {
+    return this.field.compare;
+  }
+
   /**
    * The primary key of the answer.
    *
@@ -106,7 +116,11 @@ export default class Answer extends Base {
   get _valueKey() {
     return (
       this.raw.__typename &&
-      camelize(this.raw.__typename.replace(/Answer$/, "Value"))
+      camelize(
+        this.raw.__typename
+          .replace(/^Historical/, "")
+          .replace(/Answer$/, "Value"),
+      )
     );
   }
 
@@ -121,6 +135,15 @@ export default class Answer extends Base {
     const value = this.raw[this._valueKey];
 
     if (this._valueKey === "tableValue" && value) {
+      // For a historical view for table values we map it differently to be able to
+      // show the diff.
+      if (this.compare) {
+        const owner = getOwner(this);
+        const historicalValue = this.historical?.[this._valueKey] || [];
+
+        return historicalTableValue(owner, this.field, value, historicalValue);
+      }
+
       const owner = getOwner(this);
       const Document = owner.factoryFor("caluma-model:document").class;
 
@@ -146,6 +169,18 @@ export default class Answer extends Base {
     return value;
   }
 
+  get historicalValue() {
+    return this.historical?.[this._valueKey];
+  }
+
+  get historicalDate() {
+    return this.historical?.historyDate;
+  }
+
+  get historicalUser() {
+    return this.historical?.historyUserId;
+  }
+
   set value(value) {
     if (this._valueKey) {
       this.raw[this._valueKey] = [undefined, ""].includes(value) ? null : value;