PoC: compare documents

packages/-ember-caluma/app/controllers/demo/form-rendering.js

@@ -7,6 +7,8 @@ export default class DemoFormRenderingController extends Controller {
 
   queryParams = ["displayedForm"];
 
+  compareTo = new Date(Date.parse("14 May 2024 12:38:10 GMT"));
+
   @action actionButtonOnSuccess() {
     this.notification.success("Successfully submitted the form!");
   }

packages/-ember-caluma/app/routes/demo/form-rendering.js

@@ -13,7 +13,7 @@ export default class DemoFormRenderingRoute extends Route {
         fetchPolicy: "network-only",
         query: gql`
           query {
-            allDocuments(filter: [{ form: "formular-1" }]) {
+            allDocuments(filter: [{ form: "demo-formular-1" }]) {
               edges {
                 node {
                   id

packages/-ember-caluma/app/templates/demo/form-rendering.hbs

@@ -1,6 +1,7 @@
 {{#if @model}}
   <CfContent
     @documentId={{@model}}
+    @compareTo={{this.compareTo}}
     @context={{hash actionButtonOnSuccess=this.actionButtonOnSuccess}}
   />
 {{/if}}

packages/core/addon/-private/possible-types.js

@@ -53,6 +53,15 @@ export default {
     "AnalyticsTable",
     "AvailableField",
     "AnalyticsField",
+    "HistoricalStringAnswer",
+    "HistoricalListAnswer",
+    "HistoricalIntegerAnswer",
+    "HistoricalFloatAnswer",
+    "HistoricalDateAnswer",
+    "HistoricalTableAnswer",
+    "HistoricalDocument",
+    "HistoricalFilesAnswer",
+    "HistoricalFile",
     "DynamicOption",
   ],
   Answer: [
@@ -66,4 +75,13 @@ export default {
   ],
   Task: ["SimpleTask", "CompleteWorkflowFormTask", "CompleteTaskFormTask"],
   DynamicQuestion: ["DynamicChoiceQuestion", "DynamicMultipleChoiceQuestion"],
+  HistoricalAnswer: [
+    "HistoricalStringAnswer",
+    "HistoricalListAnswer",
+    "HistoricalIntegerAnswer",
+    "HistoricalFloatAnswer",
+    "HistoricalDateAnswer",
+    "HistoricalTableAnswer",
+    "HistoricalFilesAnswer",
+  ],
 };

packages/form/addon/components/cf-content.js

@@ -7,6 +7,7 @@ import { dropTask } from "ember-concurrency";
 import { trackedTask } from "reactiveweb/ember-concurrency";
 
 import getDocumentAnswersQuery from "@projectcaluma/ember-form/gql/queries/document-answers.graphql";
+import getDocumentAnswersCompareQuery from "@projectcaluma/ember-form/gql/queries/document-answers-compare.graphql";
 import getDocumentFormsQuery from "@projectcaluma/ember-form/gql/queries/document-forms.graphql";
 import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
 
@@ -134,14 +135,30 @@ export default class CfContentComponent extends Component {
 
     if (!this.args.documentId) return;
 
-    const [answerDocument] = (yield this.apollo.query(
-      {
-        query: getDocumentAnswersQuery,
+    let answerDocument;
+    let historicalDocument;
+    if (this.args.compareTo) {
+      const response = yield this.apollo.query({
+        query: getDocumentAnswersCompareQuery,
         fetchPolicy: "network-only",
-        variables: { id: this.args.documentId },
-      },
-      "allDocuments.edges",
-    )).map(({ node }) => node);
+        variables: {
+          id: this.args.documentId,
+          from: this.args.compareTo,
+          to: new Date(),
+        },
+      });
+      answerDocument = response.toRevision;
+      historicalDocument = response.fromRevision;
+    } else {
+      [answerDocument] = (yield this.apollo.query(
+        {
+          query: getDocumentAnswersQuery,
+          fetchPolicy: "network-only",
+          variables: { id: this.args.documentId },
+        },
+        "allDocuments.edges",
+      )).map(({ node }) => node);
+    }
 
     const [form] = (yield this.apollo.query(
       {
@@ -161,6 +178,9 @@ export default class CfContentComponent extends Component {
     const document = new Document({
       raw,
       owner,
+      historicalDocument: historicalDocument
+        ? parseDocument({ ...historicalDocument, form })
+        : null,
       dataSourceContext: this.args.context,
     });
     const navigation = new Navigation({ document, owner });

packages/form/addon/components/cf-field/input/integer.hbs

@@ -12,4 +12,9 @@
   placeholder={{@field.question.raw.placeholder}}
   readonly={{@disabled}}
   {{on "input" this.input}}
-/>
+/>
+
+{{log @field.answer}}
+{{#if @field.answer.historicalValue}}
+  Geändert! War: {{@field.answer.historicalValue}}
+{{/if}}

packages/form/addon/components/cf-field/input/number-separator.hbs

@@ -9,4 +9,9 @@
   placeholder={{@field.question.raw.placeholder}}
   readonly={{this.disabled}}
   {{on "input" this.input}}
-/>
+/>
+
+{{log @field.answer}}
+{{#if @field.answer.historicalValue}}
+  Geändert! War: {{@field.answer.historicalValue}}
+{{/if}}

packages/form/addon/components/cf-field/input/text.hbs

@@ -11,4 +11,8 @@
   minlength={{@field.question.raw.textMinLength}}
   maxlength={{@field.question.raw.textMaxLength}}
   {{on "input" this.input}}
-/>
+/>
+
+{{#if @field.answer.historicalValue}}
+  Geändert! War: {{@field.answer.historicalValue}}
+{{/if}}

packages/form/addon/lib/answer.js

@@ -33,7 +33,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(
@@ -42,9 +42,11 @@ export default class Answer extends Base {
     );
 
     super({ raw, ...args });
+    console.log("init Answer", raw, historical);
 
     this.field = field;
     this.raw = new DedupedTrackedObject(raw);
+    this.historical = historical ? new DedupedTrackedObject(historical) : null;
 
     this.pushIntoStore();
   }
@@ -106,7 +108,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"),
+      )
     );
   }
 
@@ -145,6 +151,12 @@ export default class Answer extends Base {
     return value;
   }
 
+  @cached
+  get historicalValue() {
+    return this.historical?.[this._valueKey];
+    // TODO: support tables
+  }
+
   set value(value) {
     if (this._valueKey) {
       this.raw[this._valueKey] = [undefined, ""].includes(value) ? null : value;

packages/form/addon/lib/document.js

@@ -22,14 +22,23 @@ const sum = (nums) => nums.reduce((num, base) => base + num, 0);
  * @class Document
  */
 export default class Document extends Base {
-  constructor({ raw, parentDocument, dataSourceContext, ...args }) {
+  constructor({
+    raw,
+    parentDocument,
+    dataSourceContext,
+    historicalDocument,
+    ...args
+  }) {
     assert(
       "A graphql document `raw` must be passed",
-      raw?.__typename === "Document",
+      raw?.__typename.includes("Document"),
     );
 
+    console.log("init Document", { raw, historicalDocument });
+
     super({ raw, ...args });
 
+    this.historicalDocument = historicalDocument;
     this.parentDocument = parentDocument;
     this.dataSourceContext =
       dataSourceContext ?? parentDocument?.dataSourceContext;
@@ -59,7 +68,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,
           }),

packages/form/addon/lib/field.js

@@ -72,6 +72,7 @@ export default class Field extends Base {
     assert("`fieldset` must be passed as an argument", fieldset);
 
     super({ fieldset, ...args });
+    console.log("init field", args);
 
     this.fieldset = fieldset;
 
@@ -121,7 +122,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);

packages/form/addon/lib/fieldset.js

@@ -22,6 +22,7 @@ export default class Fieldset extends Base {
       "A collection of graphql answers `raw.answers` must be passed",
       raw?.answers?.every((answer) => /Answer$/.test(answer.__typename)),
     );
+    console.log("init fieldset", raw);
 
     super({ raw, ...args });
 
@@ -61,6 +62,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,

packages/form/addon/lib/parsers.js

@@ -3,15 +3,20 @@ import { assert } 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);
+  assert(
+    "The passed document must include answers",
+    response.answers ?? response.historicalAnswers,
+  );
 
   return {
     ...response,
     rootForm: parseForm(response.form),
-    answers: response.answers.edges.map(({ node }) => parseAnswer(node)),
+    answers: (response.answers ?? response.historicalAnswers).edges.map(
+      ({ node }) => parseAnswer(node),
+    ),
     forms: parseFormTree(response.form),
   };
 };