@projectcaluma/ember-form 14.8.2 → 14.9.0

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

@@ -0,0 +1,9 @@
+<div
+  class="cf-compare-note uk-text-muted uk-text-small uk-flex uk-flex-middle uk-padding-small uk-padding-remove-left uk-padding-remove-bottom"
+>
+  {{t
+    "caluma.form.compare.note"
+    username=(user-name (or @historyUserId @field.answer.raw.historyUserId))
+    date=(format-date (or @historyDate @field.answer.raw.historyDate))
+  }}
+</div>

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

@@ -0,0 +1,6 @@
+<div class="uk-form-controls">
+  <div class="uk-input uk-disabled">
+    <s class="diff-from-version">{{@historicalValue}}</s>
+    <span class="diff-to-version">{{@currentValue}}</span>
+  </div>
+</div>

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

@@ -0,0 +1,6 @@
+<div class="uk-form-controls">
+  <div class="uk-textarea uk-disabled">
+    <div class="diff-from-version"><s>{{@historicalValue}}</s></div>
+    <div class="diff-to-version">{{@currentValue}}</div>
+  </div>
+</div>

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/document-validity.js

@@ -70,34 +70,7 @@ export default class DocumentValidity extends Component {
         ),
       );
 
-      const { isValid, errors } = await this.apollo.query(
-        {
-          query: documentValidityQuery,
-          fetchPolicy: "network-only",
-          variables: { id: this.args.document.uuid },
-        },
-        "documentValidity.edges.0.node",
-      );
-
-      if (!isValid) {
-        errors
-          .filter(({ errorCode }) => errorCode === "format_validation_failed")
-          .forEach(({ slug, errorMsg, documentId }) => {
-            const pk = `Document:${documentId}:Question:${slug}`;
-            const field = this.calumaStore.findByPk(pk);
-            const parentField = field.document.parentField;
-
-            // Add the error manually as the frontend does not validate format
-            // validators - only the backend.
-            field.addManualError("format", { errorMsg }, field.value);
-
-            if (parentField) {
-              // If the affected field is in a table row, we need to mark the
-              // table answer as invalid as well.
-              parentField.addManualError("table", {}, null);
-            }
-          });
-      }
+      await this.#runBackendValidation();
 
       if (this.isValid) {
         this.args.onValid?.();
@@ -111,6 +84,39 @@ export default class DocumentValidity extends Component {
     }
   });
 
+  async #runBackendValidation() {
+    if (this.args.skipBackendValidation) return;
+
+    const { isValid, errors } = await this.apollo.query(
+      {
+        query: documentValidityQuery,
+        fetchPolicy: "network-only",
+        variables: { id: this.args.document.uuid },
+      },
+      "documentValidity.edges.0.node",
+    );
+
+    if (!isValid) {
+      errors
+        .filter(({ errorCode }) => errorCode === "format_validation_failed")
+        .forEach(({ slug, errorMsg, documentId }) => {
+          const pk = `Document:${documentId}:Question:${slug}`;
+          const field = this.calumaStore.findByPk(pk);
+          const parentField = field.document.parentField;
+
+          // Add the error manually as the frontend does not validate format
+          // validators - only the backend.
+          field.addManualError("format", { errorMsg }, field.value);
+
+          if (parentField) {
+            // If the affected field is in a table row, we need to mark the
+            // table answer as invalid as well.
+            parentField.addManualError("table", {}, null);
+          }
+        });
+    }
+  }
+
   @action
   validate() {
     return this._validate.perform();

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) {