@projectcaluma/ember-form 10.0.0 → 11.0.0-beta.1

package/addon/components/cf-content.hbs

@@ -1,44 +1,41 @@
 {{#if @documentId}}
-  <div {{did-insert (perform this.fetchData)}} {{will-destroy this.teardown}}>
-    {{#if this.fetchData.isRunning}}
-      <div class="uk-text-center"><UkSpinner @ratio={{2}} /></div>
-    {{else if this.document}}
-      {{#let
-        (hash
+  {{#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"
           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"
-            document=this.document
-            fieldset=this.fieldset
-            context=@context
-            disabled=@disabled
-          )
+          fieldset=this.fieldset
+          context=@context
+          disabled=@disabled
         )
-        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 />
-            </div>
+      )
+      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 />
           </div>
-        {{else}}
-          <content.form />
-        {{/if}}
-      {{/let}}
-    {{/if}}
-  </div>
+        </div>
+      {{else}}
+        <content.form />
+      {{/if}}
+    {{/let}}
+  {{/if}}
 {{/if}}

package/addon/components/cf-content.js

@@ -1,12 +1,13 @@
 import { getOwner } from "@ember/application";
-import { action } from "@ember/object";
+import { destroy, registerDestructor } from "@ember/destroyable";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
-import { dropTask } from "ember-concurrency-decorators";
+import { dropTask } from "ember-concurrency";
+import { useTask } from "ember-resources";
 
-import getDocumentAnswersQuery from "@projectcaluma/ember-form/gql/queries/get-document-answers.graphql";
-import getDocumentFormsQuery from "@projectcaluma/ember-form/gql/queries/get-document-forms.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";
 
 /**
@@ -62,7 +63,7 @@ export default class CfContentComponent extends Component {
    * Can be used to pass "context" information from the outside through
    * to custom overrides.
    *
-   * @argument {*} context
+   * @argument {Object} context
    */
 
   /**
@@ -71,17 +72,40 @@ export default class CfContentComponent extends Component {
    * @argument {Boolean} disabled
    */
 
+  /**
+   * Whether the form should be displayed as loading, this can be used to
+   * indicate a loading state if the application calling this component is
+   * loading additional data.
+   *
+   * @argument {Boolean} loading
+   */
+
   /**
    * The document to display
    *
    * @property {Document} document
    */
   get document() {
-    return this.fetchData.lastSuccessful?.value.document;
+    return this.data.value?.document;
   }
 
+  /**
+   * The navigation to display
+   *
+   * @property {Document} document
+   */
   get navigation() {
-    return this.fetchData.lastSuccessful?.value.navigation;
+    return this.data.value?.navigation;
+  }
+
+  /**
+   * Whether the component is in a loading state. This can be overwritten by
+   * passing `loading` as an argument
+   *
+   * @property {Boolean} loading
+   */
+  get loading() {
+    return this.args.loading || this.data.isRunning;
   }
 
   /**
@@ -109,9 +133,12 @@ export default class CfContentComponent extends Component {
     return fieldset;
   }
 
+  data = useTask(this, this.fetchData, () => [this.args.documentId]);
+
   @dropTask
   *fetchData() {
-    this.teardown();
+    if (this.document) destroy(this.document);
+    if (this.navigation) destroy(this.navigation);
 
     if (!this.args.documentId) return;
 
@@ -133,20 +160,20 @@ export default class CfContentComponent extends Component {
       "allForms.edges"
     )).map(({ node }) => node);
 
-    const document = getOwner(this)
-      .factoryFor("caluma-model:document")
-      .create({ raw: parseDocument({ ...answerDocument, form }) });
+    const owner = getOwner(this);
+    const Document = owner.factoryFor("caluma-model:document").class;
+    const Navigation = owner.factoryFor("caluma-model:navigation").class;
 
-    const navigation = getOwner(this)
-      .factoryFor("caluma-model:navigation")
-      .create({ document });
+    const raw = parseDocument({ ...answerDocument, form });
 
-    return { document, navigation };
-  }
+    const document = new Document({ raw, owner });
+    const navigation = new Navigation({ document, owner });
 
-  @action
-  teardown() {
-    if (this.document) this.document.destroy();
-    if (this.navigation) this.navigation.destroy();
+    registerDestructor(this, () => {
+      destroy(document);
+      destroy(navigation);
+    });
+
+    return { document, navigation };
   }
 }

package/addon/components/cf-field/input/action-button.hbs

@@ -7,7 +7,7 @@
     <WorkItemButton
       @workItemId={{this.workItem}}
       @mutation={{this.action}}
-      @label={{@field.question.label}}
+      @label={{@field.question.raw.label}}
       @disabled={{and (not-eq isValid null) (not isValid)}}
       @color={{this.color}}
       @beforeMutate={{fn this.beforeMutate validate}}

package/addon/components/cf-field/input/action-button.js

@@ -31,34 +31,36 @@ export default class CfFieldInputActionButtonComponent extends Component {
   }
 
   get action() {
-    return this.args.field.question.action.toLowerCase();
+    return this.args.field.question.raw.action.toLowerCase();
   }
 
   get color() {
-    return this.args.field.question.color.toLowerCase();
+    return this.args.field.question.raw.color.toLowerCase();
   }
 
   get type() {
-    return this.args.field.question.action === "COMPLETE" ? "submit" : "button";
+    return this.args.field.question.raw.action === "COMPLETE"
+      ? "submit"
+      : "button";
   }
 
   get validateOnEnter() {
     return (
-      this.args.field.question.action === "COMPLETE" &&
-      this.args.field.question.validateOnEnter
+      this.args.field.question.raw.action === "COMPLETE" &&
+      this.args.field.question.raw.validateOnEnter
     );
   }
 
   @action
   async beforeMutate(validateFn) {
     if (
-      this.args.field.question.action === "COMPLETE" &&
+      this.args.field.question.raw.action === "COMPLETE" &&
       !(await validateFn())
     ) {
       return false;
     }
 
-    const confirmText = this.args.field.question.infoText;
+    const confirmText = this.args.field.question.raw.infoText;
 
     return !confirmText || confirm(confirmText);
   }

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

@@ -1,10 +1,10 @@
 {{#each @field.options as |option i|}}
   {{#if (gt i 0)}}<br />{{/if}}
-  <label class="cf-checkbox_label {{if @field.isInvalid "uk-form-danger"}}">
+  <label class="cf-checkbox_label {{if @field.isInvalid 'uk-form-danger'}}">
     <input
       class="uk-checkbox uk-margin-small-right"
       type="checkbox"
-      name="{{@field.pk}}:Option:{{option.slug}}"
+      name={{@field.pk}}
       value={{option.slug}}
       checked={{includes option.slug @field.answer.value}}
       disabled={{@disabled}}

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

@@ -1,28 +1,6 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
 
-/**
- * Function to extract the option slug out of an input element. This is needed
- * since IE11 does not properly set the `value` attribute but sets the value to
- * `on` if checked and `off` if not. So for all sane browsers we use the
- * `value` attribute but for IE11 we use the appended option slug to the field
- * id as the input elements `name` property.
- *
- * E.g: An element with
- * `name="Document:xxx-xxx:Question:some-question:Option:some-option"` will
- * return `some-option`.
- *
- * For further information about this bug see
- * https://github.com/emberjs/ember.js/issues/15203
- *
- * @function getSlug
- * @param {Element} element The html input element
- * @return {String} The option slug
- */
-const getSlug = ({ value, name }) => {
-  return ["on", "off"].includes(value) ? name.split(":").pop() : value;
-};
-
 /**
  * Input component for the checkbox question type
  *
@@ -37,13 +15,15 @@ export default class CfFieldInputCheckboxComponent extends Component {
    * @method update
    */
   @action
-  update({ target }) {
-    const checkedBoxes = [
-      ...target.parentNode.parentNode.querySelectorAll(
-        "input[type=checkbox]:checked"
-      ),
-    ];
+  update({ target: { value, checked } }) {
+    const valueSet = new Set(this.args.field.value);
+
+    if (checked) {
+      valueSet.add(value);
+    } else {
+      valueSet.delete(value);
+    }
 
-    this.args.onSave([...new Set(checkedBoxes.map(getSlug))]);
+    this.args.onSave([...valueSet]);
   }
 }

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

@@ -1,10 +1,11 @@
-import { action, set } from "@ember/object";
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
+import fetch from "fetch";
 
 import removeAnswerMutation from "@projectcaluma/ember-form/gql/mutations/remove-answer.graphql";
-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 CfFieldInputFileComponent extends Component {
   @service intl;
@@ -24,7 +25,7 @@ export default class CfFieldInputFileComponent extends Component {
     const { downloadUrl } = await this.apollo.watchQuery(
       {
         query: getFileAnswerInfoQuery,
-        variables: { id: this.args.field.answer.id },
+        variables: { id: this.args.field.answer.raw.id },
         fetchPolicy: "cache-and-network",
       },
       "node.fileValue"
@@ -55,15 +56,13 @@ export default class CfFieldInputFileComponent extends Component {
         throw new Error();
       }
 
-      // eslint-disable-next-line ember/classic-decorator-no-classic-methods
-      set(this.args.field.answer, "value", {
+      this.args.field.answer.value = {
         name: file.name,
         downloadUrl: fileValue.downloadUrl,
-      });
+      };
     } catch (error) {
       await this.args.onSave(null);
-      // eslint-disable-next-line ember/classic-decorator-no-classic-methods
-      set(this.args.field, "_errors", [{ type: "uploadFailed" }]);
+      this.args.field._errors = [{ type: "uploadFailed" }];
     } finally {
       // eslint-disable-next-line require-atomic-updates
       target.value = "";
@@ -84,7 +83,7 @@ export default class CfFieldInputFileComponent extends Component {
 
       await this.args.onSave(null);
     } catch (error) {
-      set(this.args.field, "_errors", [{ type: "deleteFailed" }]);
+      this.args.field._errors = [{ type: "deleteFailed" }];
     }
   }
 }

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

@@ -2,13 +2,13 @@
   type="number"
   step="0.001"
   class="uk-input
-    {{if @field.isInvalid "uk-form-danger"}}
-    {{if this.disabled "uk-disabled"}}"
+    {{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.floatMinValue}}
-  max={{@field.question.floatMaxValue}}
+  min={{@field.question.raw.floatMinValue}}
+  max={{@field.question.raw.floatMaxValue}}
   {{on "input" this.input}}
 />

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

@@ -2,14 +2,14 @@
   type="number"
   step="1"
   class="uk-input
-    {{if @field.isInvalid "uk-form-danger"}}
-    {{if @disabled "uk-disabled"}}"
+    {{if @field.isInvalid 'uk-form-danger'}}
+    {{if @disabled 'uk-disabled'}}"
   name={{@field.pk}}
   id={{@field.pk}}
   value={{@field.answer.value}}
-  min={{@field.question.integerMinValue}}
-  max={{@field.question.integerMaxValue}}
-  placeholder={{@field.question.placeholder}}
+  min={{@field.question.raw.integerMinValue}}
+  max={{@field.question.raw.integerMaxValue}}
+  placeholder={{@field.question.raw.placeholder}}
   readonly={{@disabled}}
   {{on "input" this.input}}
 />

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

@@ -4,7 +4,7 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
-import { dropTask } from "ember-concurrency-decorators";
+import { dropTask } from "ember-concurrency";
 import UIkit from "uikit";
 
 import removeDocumentMutation from "@projectcaluma/ember-form/gql/mutations/remove-document.graphql";
@@ -37,13 +37,13 @@ export default class CfFieldInputTableComponent extends Component {
   }
 
   get questions() {
-    return this.args.field.question.rowForm.questions.edges.map(
+    return this.args.field.question.raw.rowForm.questions.edges.map(
       (edge) => edge.node
     );
   }
 
   get columns() {
-    const config = this.args.field.question.meta.columnsToDisplay;
+    const config = this.args.field.question.raw.meta.columnsToDisplay;
 
     if (config?.length) {
       return this.questions.filter((question) =>
@@ -59,17 +59,19 @@ export default class CfFieldInputTableComponent extends Component {
     const raw = yield this.apollo.mutate(
       {
         mutation: saveDocumentMutation,
-        variables: { input: { form: this.args.field.question.rowForm.slug } },
+        variables: {
+          input: { form: this.args.field.question.raw.rowForm.slug },
+        },
       },
       "saveDocument.document"
     );
 
-    const newDocument = getOwner(this)
-      .factoryFor("caluma-model:document")
-      .create({
-        raw: this.parseDocument(raw),
-        parentDocument: this.args.field.document,
-      });
+    const owner = getOwner(this);
+    const newDocument = new (owner.factoryFor("caluma-model:document").class)({
+      raw: this.parseDocument(raw),
+      parentDocument: this.args.field.document,
+      owner,
+    });
 
     this.documentToEditIsNew = true;
     this.documentToEdit = newDocument;

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

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

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

@@ -1,12 +1,12 @@
 <textarea
   class="uk-textarea
-    {{if @field.isInvalid "uk-form-danger"}}
-    {{if @disabled "uk-disabled"}}"
+    {{if @field.isInvalid 'uk-form-danger'}}
+    {{if @disabled 'uk-disabled'}}"
   name={{@field.pk}}
   id={{@field.pk}}
-  placeholder={{@field.question.placeholder}}
-  minlength={{@field.question.textareaMinLength}}
-  maxlength={{@field.question.textareaMaxLength}}
+  placeholder={{@field.question.raw.placeholder}}
+  minlength={{@field.question.raw.textareaMinLength}}
+  maxlength={{@field.question.raw.textareaMaxLength}}
   readonly={{@disabled}}
   {{on "input" this.input}}
 >{{@field.answer.value}}</textarea>

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

@@ -22,7 +22,7 @@ export default class CfFieldInputComponent extends Component {
    * @accessor
    */
   get type() {
-    const typename = this.args.field?.question.__typename;
+    const typename = this.args.field?.question.raw.__typename;
 
     return (
       typename &&

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

@@ -1,6 +1,6 @@
 <label class="uk-form-label" for={{@field.pk}}>
   <span class="uk-text-bold">
-    {{@field.question.label}}
+    {{@field.question.raw.label}}
   </span>
 
   {{#if this.optional}}

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/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