@projectcaluma/ember-form 14.8.2 → 14.9.0

package/addon/components/cf-content.hbs

@@ -1,42 +1,47 @@
-{{#if this.loading}}
-  <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
-{{else if this.document}}
-  {{#let
-    (hash
-      document=this.document
-      navigation=(component
-        "cf-navigation"
-        navigation=this.navigation
-        useAsHeading=(or @useAsHeading false)
-        headingBaseLevel=(or @headingBaseLevel 1)
-      )
-      pagination=(component "cf-pagination" navigation=this.navigation)
-      form=(component
-        "cf-form-wrapper"
+<div class="{{if @compare 'cf-content-compare' 'cf-content'}}">
+  {{#if this.loading}}
+    <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
+  {{else if this.document}}
+    {{#let
+      (hash
         document=this.document
-        fieldset=this.fieldset
-        context=@context
-        disabled=@disabled
-        onSave=@onSave
+        navigation=(component
+          "cf-navigation"
+          navigation=this.navigation
+          useAsHeading=(or @useAsHeading false)
+          headingBaseLevel=(or @headingBaseLevel 1)
+          compare=@compare
+        )
+        pagination=(component "cf-pagination" navigation=this.navigation)
+        form=(component
+          "cf-form-wrapper"
+          document=this.document
+          fieldset=this.fieldset
+          context=@context
+          compare=@compare
+          disabled=@disabled
+          onSave=@onSave
+        )
       )
-    )
-    as |content|
-  }}
-    {{#if (has-block)}}
-      {{yield content}}
-    {{else if (gt this.document.fieldsets.length 1)}}
-      <div uk-grid>
-        <div class="uk-width-1-1 uk-width-1-3@m"><content.navigation /></div>
-        <div class="uk-width-1-1 uk-width-2-3@m">
-          <content.form />
-          <hr />
-          <content.pagination />
+      as |content|
+    }}
+      {{#if (has-block)}}
+        {{yield content}}
+      {{else if (gt this.document.fieldsets.length 1)}}
+        <div uk-grid>
+          <div class="uk-width-1-1 uk-width-1-3@m"><content.navigation /></div>
+          <div class="uk-width-1-1 uk-width-2-3@m">
+            {{yield to="formHeader"}}
+            <content.form />
+            <hr />
+            <content.pagination />
+          </div>
         </div>
-      </div>
-    {{else}}
-      <content.form />
-    {{/if}}
-  {{/let}}
-{{else}}
-  {{yield to="notfound"}}
-{{/if}}
+      {{else}}
+        <content.form />
+      {{/if}}
+    {{/let}}
+  {{else}}
+    {{yield to="notfound"}}
+  {{/if}}
+</div>

package/addon/components/cf-content.js

@@ -6,6 +6,7 @@ import { queryManager } from "ember-apollo-client";
 import { task } from "ember-concurrency";
 import { trackedTask } from "reactiveweb/ember-concurrency";
 
+import getDocumentAnswersCompareQuery from "@projectcaluma/ember-form/gql/queries/document-answers-compare.graphql";
 import getDocumentAnswersQuery from "@projectcaluma/ember-form/gql/queries/document-answers.graphql";
 import getDocumentFormsQuery from "@projectcaluma/ember-form/gql/queries/document-forms.graphql";
 import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
@@ -30,6 +31,12 @@ import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
  *   </div>
  * </CfContent>
  * ```
+ * To use this component for a comparison between two document revisions, pass @compare
+ *
+ * <CfContent @documentId="some-id" @compare={{hash
+      from=this.fromDate
+      to=this.toDate
+ * }} />
  *
  * If you're rendering multi-page forms, the component also expects a query
  * param `displayedForm`:
@@ -72,6 +79,13 @@ export default class CfContentComponent extends Component {
    * @argument {Boolean} disabled
    */
 
+  /**
+   * Can be used to pass "compare" context information from the outside.
+   * Pass a hash with `from` and optional `to` date to compare documents.
+   *
+   * @argument {Object} compare
+   */
+
   /**
    * Whether the form should be displayed as loading, this can be used to
    * indicate a loading state if the application calling this component is
@@ -131,16 +145,39 @@ export default class CfContentComponent extends Component {
 
     if (!this.args.documentId) return;
 
-    const [answerDocument] = (
-      await this.apollo.query(
-        {
-          query: getDocumentAnswersQuery,
-          fetchPolicy: "network-only",
-          variables: { id: this.args.documentId },
+    const owner = getOwner(this);
+    const Document = owner.factoryFor("caluma-model:document").class;
+    const Navigation = owner.factoryFor("caluma-model:navigation").class;
+
+    let answerDocument = null;
+    let historicalDocument = null;
+
+    if (!this.args.compare) {
+      [answerDocument] = (
+        await this.apollo.query(
+          {
+            query: getDocumentAnswersQuery,
+            fetchPolicy: "network-only",
+            variables: { id: this.args.documentId },
+          },
+          "allDocuments.edges",
+        )
+      ).map(({ node }) => node);
+    } else {
+      const { from, to } = this.args.compare;
+
+      const data = await this.apollo.query({
+        query: getDocumentAnswersCompareQuery,
+        fetchPolicy: "network-only",
+        variables: {
+          documentId: this.args.documentId,
+          from,
+          to: to ?? new Date(),
         },
-        "allDocuments.edges",
-      )
-    ).map(({ node }) => node);
+      });
+      historicalDocument = data.fromRevision;
+      answerDocument = data.toRevision;
+    }
 
     const [form] = (
       await this.apollo.query(
@@ -153,16 +190,15 @@ export default class CfContentComponent extends Component {
       )
     ).map(({ node }) => node);
 
-    const owner = getOwner(this);
-    const Document = owner.factoryFor("caluma-model:document").class;
-    const Navigation = owner.factoryFor("caluma-model:navigation").class;
-
     const raw = parseDocument({ ...answerDocument, form });
 
     const document = new Document({
       raw,
       owner,
-      dataSourceContext: this.args.context,
+      historicalDocument: historicalDocument
+        ? parseDocument({ ...historicalDocument, form })
+        : null,
+      compare: this.args.compare,
     });
     const navigation = new Navigation({ document, owner });
 

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

@@ -16,11 +16,7 @@
     as |modal|
   >
     <modal.body>
-      <MarkdownToHtml
-        @markdown={{@text}}
-        @openLinksInNewWindow={{true}}
-        @extensions="DOMPurify"
-      />
+      <MarkdownToHtml @markdown={{@text}} @openLinksInNewWindow={{true}} />
     </modal.body>
   </UkModal>
 </div>

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

@@ -2,7 +2,9 @@
   {{#if (and (gt i 0) (not @field.raw.question.meta.vertical))}}<br />{{/if}}
   <label
     class="{{if @field.isInvalid 'uk-form-danger'}}
-      {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}"
+      {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}
+      {{if (this.isAnswerRemoved option) 'diff-from-version'}}
+      {{if (this.isAnswerAdded option) 'diff-to-version'}}"
   >
     <input
       class="uk-checkbox uk-margin-small-right"

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

@@ -11,6 +11,21 @@ import { localCopy } from "tracked-toolbox";
 export default class CfFieldInputCheckboxComponent extends Component {
   @localCopy("args.field.value") selected;
 
+  isAnswerRemoved = (option) => {
+    return (
+      this.args.field.compare &&
+      (this.args.field.answer?.historicalValue ?? []).includes(option.slug) &&
+      !(this.args.field.answer?.value ?? []).includes(option.slug)
+    );
+  };
+  isAnswerAdded = (option) => {
+    return (
+      this.args.field.compare &&
+      !(this.args.field.answer?.historicalValue ?? []).includes(option.slug) &&
+      (this.args.field.answer?.value ?? []).includes(option.slug)
+    );
+  };
+
   /**
    * Update the value of the field with the slugs of the currently checked
    * boxes.

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

@@ -1,32 +1,39 @@
-<div class="uk-inline uk-width-1-1">
-  {{#unless @disabled}}
-    <a
-      class="uk-form-icon uk-form-icon-flip"
-      href="#"
-      {{uk-tooltip (t "caluma.form.delete")}}
-      {{on "click" this.clearCalendar}}
-    >
-      <UkIcon @icon="close" />
-    </a>
-  {{/unless}}
-  <EmberFlatpickr
-    id={{@field.pk}}
-    name={{@field.pk}}
-    class="uk-input {{if @disabled 'uk-disabled'}}"
-    readonly={{@disabled}}
-    placeholder={{@field.question.raw.placeholder}}
-    @disabled={{@disabled}}
-    @locale={{this.locale}}
-    @date={{or @field.answer.value null}}
-    @altFormat={{this.dateFormat}}
-    @altInput={{true}}
-    @allowInput={{true}}
-    @onChange={{this.onChange}}
-    @onReady={{this.onReady}}
-    @onClose={{this.onClose}}
-    @minDate={{@minDate}}
-    @maxDate={{@maxDate}}
-    aria-labelledby={{@field.labelId}}
-    ...attributes
+{{#if @compare}}
+  <CfField::InputCompare::TextDiff
+    @currentValue={{format-date @field.answer.value}}
+    @historicalValue={{format-date @field.answer.historicalValue}}
   />
-</div>
+{{else}}
+  <div class="uk-inline uk-width-1-1">
+    {{#unless @disabled}}
+      <a
+        class="uk-form-icon uk-form-icon-flip"
+        href="#"
+        {{uk-tooltip (t "caluma.form.delete")}}
+        {{on "click" this.clearCalendar}}
+      >
+        <UkIcon @icon="close" />
+      </a>
+    {{/unless}}
+    <EmberFlatpickr
+      id={{@field.pk}}
+      name={{@field.pk}}
+      class="uk-input {{if @disabled 'uk-disabled'}}"
+      readonly={{@disabled}}
+      placeholder={{@field.question.raw.placeholder}}
+      @disabled={{@disabled}}
+      @locale={{this.locale}}
+      @date={{or @field.answer.value null}}
+      @altFormat={{this.dateFormat}}
+      @altInput={{true}}
+      @allowInput={{true}}
+      @onChange={{this.onChange}}
+      @onReady={{this.onReady}}
+      @onClose={{this.onClose}}
+      @minDate={{@minDate}}
+      @maxDate={{@maxDate}}
+      aria-labelledby={{@field.labelId}}
+      ...attributes
+    />
+  </div>
+{{/if}}

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

@@ -1,15 +1,22 @@
-<input
-  type="number"
-  step={{this.floatStep}}
-  class="uk-input
-    {{if @field.isInvalid 'uk-form-danger'}}
-    {{if this.disabled 'uk-disabled'}}"
-  readonly={{this.disabled}}
-  name={{@field.pk}}
-  id={{@field.pk}}
-  value={{@field.value}}
-  min={{@field.question.raw.floatMinValue}}
-  max={{@field.question.raw.floatMaxValue}}
-  placeholder={{@field.question.raw.placeholder}}
-  {{on "input" this.input}}
-/>
+{{#if @compare}}
+  <CfField::InputCompare::TextDiff
+    @currentValue={{@field.answer.value}}
+    @historicalValue={{@field.answer.historicalValue}}
+  />
+{{else}}
+  <input
+    type="number"
+    step={{this.floatStep}}
+    class="uk-input
+      {{if @field.isInvalid 'uk-form-danger'}}
+      {{if this.disabled 'uk-disabled'}}"
+    readonly={{this.disabled}}
+    name={{@field.pk}}
+    id={{@field.pk}}
+    value={{@field.value}}
+    min={{@field.question.raw.floatMinValue}}
+    max={{@field.question.raw.floatMaxValue}}
+    placeholder={{@field.question.raw.placeholder}}
+    {{on "input" this.input}}
+  />
+{{/if}}

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

@@ -1,15 +1,22 @@
-<input
-  type="number"
-  step="1"
-  class="uk-input
-    {{if @field.isInvalid 'uk-form-danger'}}
-    {{if @disabled 'uk-disabled'}}"
-  name={{@field.pk}}
-  id={{@field.pk}}
-  value={{@field.answer.value}}
-  min={{@field.question.raw.integerMinValue}}
-  max={{@field.question.raw.integerMaxValue}}
-  placeholder={{@field.question.raw.placeholder}}
-  readonly={{@disabled}}
-  {{on "input" this.input}}
-/>
+{{#if @compare}}
+  <CfField::InputCompare::TextDiff
+    @currentValue={{@field.answer.value}}
+    @historicalValue={{@field.answer.historicalValue}}
+  />
+{{else}}
+  <input
+    type="number"
+    step="1"
+    class="uk-input
+      {{if @field.isInvalid 'uk-form-danger'}}
+      {{if @disabled 'uk-disabled'}}"
+    name={{@field.pk}}
+    id={{@field.pk}}
+    value={{@field.answer.value}}
+    min={{@field.question.raw.integerMinValue}}
+    max={{@field.question.raw.integerMaxValue}}
+    placeholder={{@field.question.raw.placeholder}}
+    readonly={{@disabled}}
+    {{on "input" this.input}}
+  />
+{{/if}}

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

@@ -1,12 +1,19 @@
-<input
-  type="text"
-  class="uk-input
-    {{if @field.isInvalid 'uk-form-danger'}}
-    {{if this.disabled 'uk-disabled'}}"
-  name={{@field.pk}}
-  id={{@field.pk}}
-  value={{this.displayValue}}
-  placeholder={{@field.question.raw.placeholder}}
-  readonly={{this.disabled}}
-  {{on "input" this.input}}
-/>
+{{#if @compare}}
+  <CfField::InputCompare::TextDiff
+    @currentValue={{this.displayValue}}
+    @historicalValue={{this.historicalDisplayValue}}
+  />
+{{else}}
+  <input
+    type="text"
+    class="uk-input
+      {{if @field.isInvalid 'uk-form-danger'}}
+      {{if this.disabled 'uk-disabled'}}"
+    name={{@field.pk}}
+    id={{@field.pk}}
+    value={{this.displayValue}}
+    placeholder={{@field.question.raw.placeholder}}
+    readonly={{this.disabled}}
+    {{on "input" this.input}}
+  />
+{{/if}}

package/addon/components/cf-field/input/number-separator.js

@@ -11,11 +11,19 @@ export default class CfFieldInputNumberSeparatorComponent extends Component {
   }
 
   get displayValue() {
-    if (isNaN(parseFloat(this.args.field.value))) {
+    return this.formatValue(this.args.field.value);
+  }
+
+  get historicalDisplayValue() {
+    return this.formatValue(this.args.field.answer?.historicalValue);
+  }
+
+  formatValue(value) {
+    if (isNaN(parseFloat(value))) {
       return "";
     }
 
-    return this.intl.formatNumber(this.args.field.value, {
+    return this.intl.formatNumber(value, {
       maximumFractionDigits: 20,
     });
   }

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

@@ -1,12 +1,12 @@
 <this.selectComponent
   @options={{@field.options}}
-  @selected={{@field.selected}}
+  @selected={{this.selected}}
   @disabled={{@disabled}}
   @allowClear={{true}}
   @preventScroll={{true}}
   @searchEnabled={{this.searchEnabled}}
   @searchField="label"
-  @triggerId={{@field.pk}}
+  @triggerId={{this.triggerId}}
   @renderInPlace={{true}}
   @placeholder={{this.placeholder}}
   @loadingMessage={{t "caluma.form.power-select.options-loading"}}

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

@@ -15,6 +15,18 @@ import PowerSelectMultipleComponent from "ember-power-select/components/power-se
 export default class CfFieldInputPowerselectComponent extends Component {
   @service intl;
 
+  get selected() {
+    return this.args.compare
+      ? this.args.field.historicalSelected
+      : this.args.field.selected;
+  }
+
+  get triggerId() {
+    return this.args.compare
+      ? `${this.args.field.pk}-compare`
+      : this.args.field.pk;
+  }
+
   get multiple() {
     return this.args.field?.question.isMultipleChoice;
   }

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

@@ -2,7 +2,9 @@
   {{#if (and (gt i 0) (not @field.raw.question.meta.vertical))}}<br />{{/if}}
   <label
     class="{{if @field.isInvalid 'uk-form-danger'}}
-      {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}"
+      {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}
+      {{if (this.isAnswerRemoved option) 'diff-from-version'}}
+      {{if (this.isAnswerAdded option) 'diff-to-version'}}"
   >
     <input
       class="uk-radio uk-margin-small-right"

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

@@ -2,6 +2,21 @@ import { action } from "@ember/object";
 import Component from "@glimmer/component";
 
 export default class CfFieldInpuRadio extends Component {
+  isAnswerRemoved = (option) => {
+    return (
+      this.args.compare &&
+      this.args.field.answer?.historicalValue === option.slug &&
+      this.args.field.answer?.value !== option.slug
+    );
+  };
+  isAnswerAdded = (option) => {
+    return (
+      this.args.compare &&
+      this.args.field.answer?.historicalValue !== option.slug &&
+      this.args.field.answer?.value === option.slug
+    );
+  };
+
   @action
   reset(event) {
     event.preventDefault();

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

@@ -1,5 +1,4 @@
 <MarkdownToHtml
   @markdown={{@field.question.raw.staticContent}}
   @openLinksInNewWindow={{true}}
-  @extensions="DOMPurify"
 />

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

@@ -1,6 +1,9 @@
 <table class="uk-table uk-table-divider uk-margin-remove-vertical">
   <thead>
     <tr>
+      {{#if @compare}}
+        <th></th>
+      {{/if}}
       {{#each this.columns as |column|}}
         <th>{{column.label}}</th>
       {{/each}}
@@ -9,7 +12,34 @@
   </thead>
   <tbody>
     {{#each @field.answer.value as |document|}}
-      <tr>
+      <tr
+        class="{{if (this.isDocumentAdded document) 'diff-added'}}
+          {{if (this.isDocumentDeleted document) 'diff-removed'}}
+          {{if (this.isDocumentModified document) 'diff-modified'}}"
+      >
+        {{#if @compare}}
+          <td>
+            {{#if (this.isDocumentAdded document)}}
+              <UkIcon
+                @icon="plus-circle"
+                class="uk-text-success"
+                {{uk-tooltip (t "caluma.form.compare.diff.added")}}
+              />
+            {{else if (this.isDocumentDeleted document)}}
+              <UkIcon
+                @icon="minus-circle"
+                class="uk-text-danger"
+                {{uk-tooltip (t "caluma.form.compare.diff.removed")}}
+              />
+            {{else if (this.isDocumentModified document)}}
+              <UkIcon
+                @icon="pencil"
+                class="uk-text-warning"
+                {{uk-tooltip (t "caluma.form.compare.diff.modified")}}
+              />
+            {{/if}}
+          </td>
+        {{/if}}
         {{#each this.columns as |column|}}
           <td>
             <CfFieldValue
@@ -118,6 +148,7 @@
         />
         <DocumentValidity
           @document={{this.documentToEdit}}
+          @skipBackendValidation={{true}}
           as |isValid validate|
         >
           <UkButton

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

@@ -26,6 +26,16 @@ export default class CfFieldInputTableComponent extends Component {
     return parseDocument(raw);
   }
 
+  isDocumentAdded = (document) => {
+    return this.args.compare && document?.raw?.historyType === "+";
+  };
+  isDocumentDeleted = (document) => {
+    return this.args.compare && document?.raw?.historyType === "-";
+  };
+  isDocumentModified = (document) => {
+    return this.args.compare && document?.raw?.historyType === "~";
+  };
+
   get questions() {
     return this.args.field.question.raw.rowForm.questions.edges.map(
       (edge) => edge.node,

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

@@ -1,14 +1,21 @@
-<input
-  type="text"
-  class="uk-input
-    {{if @field.isInvalid 'uk-form-danger'}}
-    {{if @disabled 'uk-disabled'}}"
-  name={{@field.pk}}
-  id={{@field.pk}}
-  value={{@field.answer.value}}
-  placeholder={{@field.question.raw.placeholder}}
-  readonly={{@disabled}}
-  minlength={{@field.question.raw.textMinLength}}
-  maxlength={{@field.question.raw.textMaxLength}}
-  {{on "input" this.input}}
-/>
+{{#if @compare}}
+  <CfField::InputCompare::TextDiff
+    @currentValue={{@field.answer.value}}
+    @historicalValue={{@field.answer.historicalValue}}
+  />
+{{else}}
+  <input
+    type="text"
+    class="uk-input
+      {{if @field.isInvalid 'uk-form-danger'}}
+      {{if @disabled 'uk-disabled'}}"
+    name={{@field.pk}}
+    id={{@field.pk}}
+    value={{@field.answer.value}}
+    placeholder={{@field.question.raw.placeholder}}
+    readonly={{@disabled}}
+    minlength={{@field.question.raw.textMinLength}}
+    maxlength={{@field.question.raw.textMaxLength}}
+    {{on "input" this.input}}
+  />
+{{/if}}

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

@@ -1,14 +1,21 @@
-<textarea
-  class="uk-textarea
-    {{if @field.isInvalid 'uk-form-danger'}}
-    {{if @disabled 'uk-disabled'}}"
-  name={{@field.pk}}
-  id={{@field.pk}}
-  placeholder={{@field.question.raw.placeholder}}
-  minlength={{@field.question.raw.textareaMinLength}}
-  maxlength={{@field.question.raw.textareaMaxLength}}
-  readonly={{@disabled}}
-  value={{@field.answer.value}}
-  {{on "input" this.input}}
-  {{autoresize mode="height"}}
->{{@field.answer.value}}</textarea>
+{{#if @compare}}
+  <CfField::InputCompare::TextareaDiff
+    @currentValue={{@field.answer.value}}
+    @historicalValue={{@field.answer.historicalValue}}
+  />
+{{else}}
+  <textarea
+    class="uk-textarea
+      {{if @field.isInvalid 'uk-form-danger'}}
+      {{if @disabled 'uk-disabled'}}"
+    name={{@field.pk}}
+    id={{@field.pk}}
+    placeholder={{@field.question.raw.placeholder}}
+    minlength={{@field.question.raw.textareaMinLength}}
+    maxlength={{@field.question.raw.textareaMaxLength}}
+    readonly={{@disabled}}
+    value={{@field.answer.value}}
+    {{on "input" this.input}}
+    {{autoresize mode="height"}}
+  >{{@field.answer.value}}</textarea>
+{{/if}}