@projectcaluma/ember-form 10.0.1 → 11.0.0-beta.2

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

@@ -1,4 +1,10 @@
+# We can not symlink this file so an exact copy exists in another package:
+# packages/form-builder/addon/gql/fragments/field.graphql
+#
+# When changing this file the other must also receive the same changes.
+
 fragment SimpleQuestion on Question {
+  id
   slug
   label
   isRequired
@@ -9,6 +15,7 @@ fragment SimpleQuestion on Question {
     textMinLength: minLength
     textMaxLength: maxLength
     textDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
@@ -17,6 +24,7 @@ fragment SimpleQuestion on Question {
     textareaMinLength: minLength
     textareaMaxLength: maxLength
     textareaDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
@@ -25,6 +33,7 @@ fragment SimpleQuestion on Question {
     integerMinValue: minValue
     integerMaxValue: maxValue
     integerDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
@@ -33,6 +42,7 @@ fragment SimpleQuestion on Question {
     floatMinValue: minValue
     floatMaxValue: maxValue
     floatDefaultAnswer: defaultAnswer {
+      id
       value
     }
     placeholder
@@ -41,6 +51,7 @@ fragment SimpleQuestion on Question {
     choiceOptions: options {
       edges {
         node {
+          id
           slug
           label
           isArchived
@@ -48,6 +59,7 @@ fragment SimpleQuestion on Question {
       }
     }
     choiceDefaultAnswer: defaultAnswer {
+      id
       value
     }
   }
@@ -55,6 +67,7 @@ fragment SimpleQuestion on Question {
     multipleChoiceOptions: options {
       edges {
         node {
+          id
           slug
           label
           isArchived
@@ -62,11 +75,13 @@ fragment SimpleQuestion on Question {
       }
     }
     multipleChoiceDefaultAnswer: defaultAnswer {
+      id
       value
     }
   }
   ... on DateQuestion {
     dateDefaultAnswer: defaultAnswer {
+      id
       value
     }
   }
@@ -84,8 +99,10 @@ fragment SimpleQuestion on Question {
 }
 
 fragment FieldTableQuestion on Question {
+  id
   ... on TableQuestion {
     rowForm {
+      id
       slug
       questions {
         edges {
@@ -96,6 +113,7 @@ fragment FieldTableQuestion on Question {
       }
     }
     tableDefaultAnswer: defaultAnswer {
+      id
       value {
         id
         answers {
@@ -103,6 +121,7 @@ fragment FieldTableQuestion on Question {
             node {
               id
               question {
+                id
                 slug
               }
               ... on StringAnswer {
@@ -129,10 +148,12 @@ fragment FieldTableQuestion on Question {
 }
 
 fragment FieldQuestion on Question {
+  id
   ...SimpleQuestion
   ...FieldTableQuestion
   ... on FormQuestion {
     subForm {
+      id
       slug
       name
       questions {
@@ -140,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 {
@@ -166,6 +189,7 @@ fragment FieldQuestion on Question {
 fragment SimpleAnswer on Answer {
   id
   question {
+    id
     slug
   }
   ... on StringAnswer {
@@ -182,6 +206,7 @@ fragment SimpleAnswer on Answer {
   }
   ... on FileAnswer {
     fileValue: value {
+      id
       uploadUrl
       downloadUrl
       metadata
@@ -194,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;
-  }),
-});
+  }
+}

package/addon/lib/base.js

@@ -1,35 +1,44 @@
-import { getOwner } from "@ember/application";
+import { setOwner } from "@ember/application";
 import { assert } from "@ember/debug";
-import EmberObject from "@ember/object";
+import { registerDestructor } from "@ember/destroyable";
 import { inject as service } from "@ember/service";
 
-export default EmberObject.extend({
-  calumaStore: service(),
+export default class Base {
+  @service calumaStore;
 
-  init(...args) {
-    this._super(...args);
+  constructor({ raw, owner }) {
+    assert("`owner` must be passed as an argument", owner);
 
-    assert("Owner must be injected", getOwner(this));
+    assert("A primary key `pk` must be defined on the object", "pk" in this);
 
-    // answers don't need a pk if they are new
-    if (!/Answer$/.test(this.get("raw.__typename"))) {
-      assert("A primary key `pk` must be passed", this.pk);
-      assert(
-        "The primary key `pk` must be readonly",
-        !Object.getOwnPropertyDescriptor(this, "pk").writable
-      );
-    }
+    setOwner(this, owner);
 
-    if (this.pk) {
-      this.calumaStore.push(this);
+    if (raw) {
+      this.raw = raw;
     }
-  },
 
-  willDestroy(...args) {
-    this._super(...args);
+    registerDestructor(this, () => {
+      if (this.pk) {
+        this.calumaStore.delete(this.pk);
+      }
+    });
+  }
 
+  /**
+   * The raw data of the object
+   *
+   * @property {Object} raw
+   */
+  raw = {};
+
+  /**
+   * Push the object into the caluma store
+   *
+   * @method pushIntoStore
+   */
+  pushIntoStore() {
     if (this.pk) {
-      this.calumaStore.delete(this.pk);
+      this.calumaStore.push(this);
     }
-  },
-});
+  }
+}