@projectcaluma/ember-form 10.0.2 → 11.0.0-beta.3

package/addon/components/cf-field-value.js

@@ -3,7 +3,7 @@ import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import moment from "moment";
 
-import getFileAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/get-fileanswer-info.graphql";
+import getFileAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/fileanswer-info.graphql";
 
 export default class CfFieldValueComponent extends Component {
   @queryManager apollo;
@@ -11,7 +11,7 @@ export default class CfFieldValueComponent extends Component {
   get value() {
     const field = this.args.field;
 
-    switch (field.question.__typename) {
+    switch (field.questionType) {
       case "ChoiceQuestion":
       case "DynamicChoiceQuestion": {
         return field.selected;
@@ -23,8 +23,8 @@ export default class CfFieldValueComponent extends Component {
       case "FileQuestion": {
         const answerValue = field.answer.value;
         return {
-          fileAnswerId: answerValue && field.answer.id,
-          label: answerValue && answerValue.name,
+          fileAnswerId: answerValue && field.answer.raw.id,
+          label: answerValue?.name,
         };
       }
       case "DateQuestion": {
@@ -34,22 +34,17 @@ export default class CfFieldValueComponent extends Component {
       }
 
       default:
-        return {
-          label: field.answer.value,
-        };
+        return { label: field.answer.value };
     }
   }
 
   @action
-  async download(fileAnswerId) {
+  async download(id) {
     const { downloadUrl } = await this.apollo.query(
-      {
-        query: getFileAnswerInfoQuery,
-        variables: { id: fileAnswerId },
-        fetchPolicy: "cache-and-network",
-      },
+      { query: getFileAnswerInfoQuery, variables: { id } },
       "node.fileValue"
     );
+
     window.open(downloadUrl, "_blank");
   }
 }

package/addon/components/cf-field.hbs

@@ -16,8 +16,8 @@
         {{/let}}
       </div>
 
-      {{#if (and @field.question.infoText this.infoTextVisible)}}
-        <CfField::info @text={{@field.question.infoText}} />
+      {{#if (and @field.question.raw.infoText this.infoTextVisible)}}
+        <CfField::info @text={{@field.question.raw.infoText}} />
       {{/if}}
 
       {{#if this.saveIndicatorVisible}}

package/addon/components/cf-field.js

@@ -1,8 +1,7 @@
 import { getOwner } from "@ember/application";
 import { set } from "@ember/object";
 import Component from "@glimmer/component";
-import { timeout } from "ember-concurrency";
-import { restartableTask } from "ember-concurrency-decorators";
+import { timeout, restartableTask } from "ember-concurrency";
 
 import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-type";
 
@@ -28,7 +27,7 @@ export default class CfFieldComponent extends Component {
 
   get labelVisible() {
     return (
-      !this.args.field?.question.meta.hideLabel &&
+      !this.args.field?.question.raw.meta.hideLabel &&
       !hasQuestionType(this.args.field?.question, "static", "action-button")
     );
   }

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

@@ -1,6 +1,6 @@
 <li
   class="cf-navigation__item uk-width-auto
-    {{if (or @item.active @item.childrenActive) "uk-active"}}"
+    {{if (or @item.active @item.childrenActive) 'uk-active'}}"
 >
   <LinkTo @query={{hash displayedForm=@item.slug}}>
     {{#if (and @useAsHeading this.active)}}
@@ -19,7 +19,7 @@
     {{/if}}
     <span
       class="cf-navigation__item__icon cf-navigation__item__icon--{{@item.state}}
-        {{if @item.dirty "cf-navigation__item__icon--dirty"}}"
+        {{if @item.dirty 'cf-navigation__item__icon--dirty'}}"
     ></span>
   </LinkTo>
 

package/addon/components/cf-navigation.hbs

@@ -1,4 +1,7 @@
-<ul class="uk-tab uk-tab-left uk-width-auto" {{did-insert this.goToNextItem}}>
+<ul
+  class="uk-tab uk-tab-left uk-width-auto"
+  {{did-insert @navigation.goToNextItemIfNonNavigable}}
+>
   {{#each @navigation.rootItems as |item|}}
     <CfNavigationItem
       @item={{item}}

package/addon/components/document-validity.js

@@ -1,6 +1,6 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
-import { restartableTask } from "ember-concurrency-decorators";
+import { restartableTask } from "ember-concurrency";
 
 /**
  * Component to check the validity of a document

package/addon/gql/fragments/field.graphql

@@ -4,6 +4,7 @@
 # When changing this file the other must also receive the same changes.
 
 fragment SimpleQuestion on Question {
+  id
   slug
   label
   isRequired
@@ -14,6 +15,7 @@ fragment SimpleQuestion on Question {
     textMinLength: minLength
     textMaxLength: maxLength
     textDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
@@ -22,6 +24,7 @@ fragment SimpleQuestion on Question {
     textareaMinLength: minLength
     textareaMaxLength: maxLength
     textareaDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
@@ -30,6 +33,7 @@ fragment SimpleQuestion on Question {
     integerMinValue: minValue
     integerMaxValue: maxValue
     integerDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
@@ -38,6 +42,7 @@ fragment SimpleQuestion on Question {
     floatMinValue: minValue
     floatMaxValue: maxValue
     floatDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
@@ -46,6 +51,7 @@ fragment SimpleQuestion on Question {
     choiceOptions: options {
       edges {
         node {
+          id
           slug
           label
           isArchived
@@ -53,6 +59,7 @@ fragment SimpleQuestion on Question {
       }
     }
     choiceDefaultAnswer: defaultAnswer {
+      id
       value
     }
   }
@@ -60,6 +67,7 @@ fragment SimpleQuestion on Question {
     multipleChoiceOptions: options {
       edges {
         node {
+          id
           slug
           label
           isArchived
@@ -67,11 +75,13 @@ fragment SimpleQuestion on Question {
       }
     }
     multipleChoiceDefaultAnswer: defaultAnswer {
+      id
       value
     }
   }
   ... on DateQuestion {
     dateDefaultAnswer: defaultAnswer {
+      id
       value
     }
   }
@@ -89,8 +99,10 @@ fragment SimpleQuestion on Question {
 }
 
 fragment FieldTableQuestion on Question {
+  id
   ... on TableQuestion {
     rowForm {
+      id
       slug
       questions {
         edges {
@@ -101,6 +113,7 @@ fragment FieldTableQuestion on Question {
       }
     }
     tableDefaultAnswer: defaultAnswer {
+      id
       value {
         id
         answers {
@@ -108,6 +121,7 @@ fragment FieldTableQuestion on Question {
             node {
               id
               question {
+                id
                 slug
               }
               ... on StringAnswer {
@@ -134,10 +148,12 @@ fragment FieldTableQuestion on Question {
 }
 
 fragment FieldQuestion on Question {
+  id
   ...SimpleQuestion
   ...FieldTableQuestion
   ... on FormQuestion {
     subForm {
+      id
       slug
       name
       questions {
@@ -145,10 +161,12 @@ fragment FieldQuestion on Question {
           node {
             # This part here limits our query to 2 level deep nested forms. This
             # has to be solved in another way!
+            id
             ...SimpleQuestion
             ...FieldTableQuestion
             ... on FormQuestion {
               subForm {
+                id
                 slug
                 name
                 questions {
@@ -171,6 +189,7 @@ fragment FieldQuestion on Question {
 fragment SimpleAnswer on Answer {
   id
   question {
+    id
     slug
   }
   ... on StringAnswer {
@@ -187,6 +206,7 @@ fragment SimpleAnswer on Answer {
   }
   ... on FileAnswer {
     fileValue: value {
+      id
       uploadUrl
       downloadUrl
       metadata
@@ -199,11 +219,13 @@ fragment SimpleAnswer on Answer {
 }
 
 fragment FieldAnswer on Answer {
+  id
   ...SimpleAnswer
   ... on TableAnswer {
     tableValue: value {
       id
       form {
+        id
         slug
         questions {
           edges {

package/addon/gql/mutations/save-document-table-answer.graphql

@@ -1,6 +1,6 @@
 #import * from '../fragments/field.graphql'
 
-mutation saveDocumentTableAnswer($input: SaveDocumentTableAnswerInput!) {
+mutation SaveDocumentTableAnswer($input: SaveDocumentTableAnswerInput!) {
   saveDocumentTableAnswer(input: $input) {
     answer {
       ...FieldAnswer

package/addon/gql/mutations/save-document.graphql

@@ -12,6 +12,7 @@ mutation SaveDocument($input: SaveDocumentInput!) {
         }
       }
       form {
+        id
         slug
         questions {
           edges {

package/addon/gql/queries/{get-document-answers.graphql → document-answers.graphql}

@@ -1,11 +1,12 @@
 #import * from '../fragments/field.graphql'
 
-query GetDocumentAnswers($id: ID!) {
+query DocumentAnswers($id: ID!) {
   allDocuments(filter: [{ id: $id }]) {
     edges {
       node {
         id
         form {
+          id
           slug
         }
         workItem {

package/addon/gql/queries/{get-document-forms.graphql → document-forms.graphql}

@@ -1,9 +1,10 @@
 #import FieldQuestion, FieldTableQuestion, SimpleQuestion from '../fragments/field.graphql'
 
-query GetDocumentForms($slug: String!) {
+query DocumentForms($slug: String!) {
   allForms(filter: [{ slug: $slug }]) {
     edges {
       node {
+        id
         slug
         name
         meta

package/addon/gql/queries/{get-document-used-dynamic-options.graphql → document-used-dynamic-options.graphql}

@@ -1,9 +1,10 @@
-query GetDocumentUsedDynamicOptions($document: ID!, $question: ID!) {
+query DocumentUsedDynamicOptions($document: ID!, $question: ID!) {
   allUsedDynamicOptions(
     filter: [{ document: $document }, { question: $question }]
   ) {
     edges {
       node {
+        id
         slug
         label
       }

package/addon/gql/queries/{get-dynamic-options.graphql → dynamic-options.graphql}

@@ -1,7 +1,8 @@
-query GetDynamicOptions($question: String!) {
+query DynamicOptions($question: String!) {
   allQuestions(filter: [{ slug: $question }], first: 1) {
     edges {
       node {
+        id
         slug
         ... on DynamicChoiceQuestion {
           dynamicChoiceOptions: options {

package/addon/gql/queries/{get-fileanswer-info.graphql → fileanswer-info.graphql}

@@ -1,8 +1,9 @@
-query GetFileAnswerInfo($id: ID!) {
+query FileAnswerInfo($id: ID!) {
   node(id: $id) {
     id
     ... on FileAnswer {
       fileValue: value {
+        id
         uploadUrl
         downloadUrl
         metadata

package/addon/helpers/get-widget.js

@@ -0,0 +1,50 @@
+import Helper from "@ember/component/helper";
+import { warn } from "@ember/debug";
+import { inject as service } from "@ember/service";
+
+/**
+ * Helper for getting the right widget.
+ *
+ * This helper expects n objects as positional parameters. It checks if the
+ * object has a widget override in it's metadata. If one exists it checks if
+ * said widget was registered in the caluma options service and then returns
+ * the widget name. If it doesn't have a valid widget, the next object will be
+ * checked. If no object returns a valid widget, the passed default widget will
+ * be used.
+ *
+ * ```hbs
+ * {{component (get-widget field.question someobject default="cf-form") foo=bar}}
+ * ```
+ *
+ * @function getWidget
+ * @param {Array} params
+ * @param {Object} [options]
+ * @param {String} [options.default]
+ */
+export default class GetWidgetHelper extends Helper {
+  @service calumaOptions;
+
+  compute(params, { default: defaultWidget = "cf-field/input" }) {
+    for (const obj of params) {
+      const widget = obj?.raw?.meta?.widgetOverride;
+      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" }
+      );
+
+      if (override) return widget;
+    }
+
+    return defaultWidget;
+  }
+}

package/addon/lib/answer.js

@@ -1,130 +1,166 @@
 import { getOwner } from "@ember/application";
 import { assert } from "@ember/debug";
-import { computed } from "@ember/object";
-import { inject as service } from "@ember/service";
 import { camelize } from "@ember/string";
 import { isEmpty } from "@ember/utils";
+import { dedupeTracked, cached } from "tracked-toolbox";
 
 import { decodeId } from "@projectcaluma/ember-core/helpers/decode-id";
 import Base from "@projectcaluma/ember-form/lib/base";
 import { parseDocument } from "@projectcaluma/ember-form/lib/parsers";
 
+/**
+ * Class that automatically defines all keys of the passed object as deduped
+ * tracked property and assigns the initial value.
+ *
+ * @class DedupedTrackedObject
+ * @private
+ */
+class DedupedTrackedObject {
+  constructor(obj) {
+    Object.entries(obj).forEach(([key, value]) => {
+      Object.defineProperty(
+        this,
+        key,
+        dedupeTracked(this, key, { initializer: () => value })
+      );
+    });
+  }
+}
+
 /**
  * Object which represents an answer in context of a field
  *
  * @class Answer
  */
-export default Base.extend({
-  calumaStore: service(),
+export default class Answer extends Base {
+  constructor({ raw, field, ...args }) {
+    assert("`field` must be passed as an argument", field);
 
-  init(...args) {
     assert(
       "A graphql answer `raw` must be passed",
-      this.raw && /Answer$/.test(this.raw.__typename)
+      /Answer$/.test(raw?.__typename)
     );
 
-    if (this.raw.id) {
-      this.set("pk", `Answer:${decodeId(this.raw.id)}`);
-    }
+    super({ raw, ...args });
+
+    this.field = field;
+    this.raw = new DedupedTrackedObject(raw);
 
-    this._super(...args);
+    this.pushIntoStore();
+  }
+
+  /**
+   * The field this answer originates from
+   *
+   * @property {Field} field
+   */
+  field = null;
+
+  /**
+   * The raw data of the answer. This is the only `raw` property that is tracked
+   * since only the answers properties are changed while rendering the form.
+   *
+   * @property {DedupedTrackedObject} raw
+   */
+  raw = {};
 
-    this.setProperties(this.raw);
-  },
+  /**
+   * The primary key of the answer.
+   *
+   * @property {String} pk
+   */
+  @cached
+  get pk() {
+    return this.uuid && `Answer:${this.uuid}`;
+  }
 
   /**
    * The uuid of the answer
    *
    * @property {String} uuid
-   * @accessor
    */
-  uuid: computed("raw.id", function () {
+  @cached
+  get uuid() {
     return this.raw.id ? decodeId(this.raw.id) : null;
-  }),
+  }
 
-  isNew: computed("uuid", "value", function () {
+  /**
+   * Whether the answer is new. This is true when there is no object from the
+   * backend or the value is empty.
+   *
+   * @property {Boolean} isNew
+   */
+  @cached
+  get isNew() {
     return !this.uuid || isEmpty(this.value);
-  }),
+  }
 
   /**
    * The name of the property in which the value is stored. This depends on the
    * type of the answer.
    *
-   *
    * @property {String} _valueKey
-   * @accessor
    * @private
    */
-  _valueKey: computed("__typename", function () {
+  @cached
+  get _valueKey() {
     return (
-      this.__typename && camelize(this.__typename.replace(/Answer$/, "Value"))
+      this.raw.__typename &&
+      camelize(this.raw.__typename.replace(/Answer$/, "Value"))
     );
-  }),
+  }
 
   /**
    * The value of the answer, the type of this value depends on the type of the
    * answer. For table answers this returns an array of documents.
    *
    * @property {String|Number|String[]|Document[]} value
-   * @computed
    */
-  value: computed(
-    "field.document",
-    "_valueKey",
-    "dateValue",
-    "fileValue",
-    "floatValue",
-    "integerValue",
-    "listValue.[]",
-    "stringValue",
-    "tableValue.[]",
-    {
-      get() {
-        const value = this.get(this._valueKey);
-
-        if (this._valueKey === "tableValue" && value) {
-          return value.map((document) => {
-            const existing = this.calumaStore.find(
-              `Document:${decodeId(document.id)}`
-            );
-
-            return (
-              existing ||
-              getOwner(this)
-                .factoryFor("caluma-model:document")
-                .create({
-                  raw: parseDocument(document),
-                  parentDocument: this.field.document,
-                })
-            );
-          });
-        }
-
-        return value;
-      },
-      set(_, value) {
-        value = [undefined, ""].includes(value) ? null : value;
-
-        if (this._valueKey) {
-          this.set(this._valueKey, value);
-        }
-
-        return value;
-      },
+  @cached
+  get value() {
+    const value = this.raw[this._valueKey];
+
+    if (this._valueKey === "tableValue" && value) {
+      const owner = getOwner(this);
+      const Document = owner.factoryFor("caluma-model:document").class;
+
+      return value.map((document) => {
+        if (document instanceof Document) return document;
+
+        const existing = this.calumaStore.find(
+          `Document:${decodeId(document.id)}`
+        );
+
+        return (
+          existing ||
+          new Document({
+            raw: parseDocument(document),
+            parentDocument: this.field.document,
+            owner,
+          })
+        );
+      });
+    }
+
+    return value;
+  }
+
+  set value(value) {
+    if (this._valueKey) {
+      this.raw[this._valueKey] = [undefined, ""].includes(value) ? null : value;
     }
-  ),
+  }
 
   /**
    * The value serialized for a backend request.
    *
    * @property {String|Number|String[]} serializedValue
-   * @accessor
    */
-  serializedValue: computed("__typename", "value", function () {
-    if (this.__typename === "TableAnswer") {
+  get serializedValue() {
+    if (this.raw.__typename === "TableAnswer") {
       return (this.value || []).map(({ uuid }) => uuid);
     }
 
     return this.value;
-  }),
-});
+  }
+}