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

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;
   }
 
   /**
@@ -96,22 +120,17 @@ export default class CfContentComponent extends Component {
       this.router.currentRoute?.queryParams.displayedForm ||
       this.document?.raw.form.slug;
 
-    const fieldset = this.document.fieldsets.find(
+    return this.document.fieldsets.find(
       (fieldset) => fieldset.form.slug === slug
     );
-
-    if (!fieldset) {
-      this.router.replaceWith({
-        queryParams: { displayedForm: "" },
-      });
-    }
-
-    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 +152,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/info.hbs

@@ -12,7 +12,7 @@
   <UkModal
     @visible={{this.modalVisible}}
     @stack={{true}}
-    @on-hide={{this.hideModal}}
+    @onHide={{this.hideModal}}
     as |modal|
   >
     <modal.body>

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,14 @@
 {{#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'}}
+      {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}"
+  >
     <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.hbs

@@ -17,7 +17,7 @@
       <UkButton
         data-test-download-link
         @color="link"
-        @on-click={{this.download}}
+        @onClick={{this.download}}
       >
         {{this.downloadName}}
       </UkButton>

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/radio.hbs

@@ -1,6 +1,9 @@
 {{#each @field.options as |option i|}}
   {{#if (gt i 0)}}<br />{{/if}}
-  <label class={{if @field.isInvalid "uk-form-danger"}}>
+  <label
+    class="{{if @field.isInvalid 'uk-form-danger'}}
+      {{if @field.raw.question.meta.vertical 'uk-margin-large-right'}}"
+  >
     <input
       class="uk-radio uk-margin-small-right"
       type="radio"

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

@@ -28,7 +28,7 @@
             <button
               data-test-edit-row
               type="button"
-              class="uk-button-link uk-flex-inline uk-margin-small-left"
+              class="uk-button uk-button-link uk-flex-inline uk-margin-small-left"
               title={{t "caluma.form.edit"}}
               {{on "click" (fn this.edit document)}}
             >
@@ -39,7 +39,7 @@
               <button
                 data-test-delete-row
                 type="button"
-                class="uk-button-link uk-flex-inline uk-margin-small-left"
+                class="uk-button uk-button-link uk-flex-inline uk-margin-small-left"
                 title={{t "caluma.form.delete"}}
                 {{on "click" (fn (perform this.delete) document)}}
               >
@@ -59,7 +59,7 @@
           <UkButton
             @size="small"
             @color="default"
-            @on-click={{perform this.add}}
+            @onClick={{perform this.add}}
             data-test-add-row
           >
             <UkIcon @icon="plus" />
@@ -74,7 +74,7 @@
 {{#if this.documentToEdit}}
   <UkModal
     @visible={{this.showAddModal}}
-    @on-hide={{perform this.closeModal}}
+    @onHide={{perform this.close}}
     @bgClose={{false}}
     as |modal|
   >
@@ -91,7 +91,7 @@
         <UkButton
           @label={{t "caluma.form.close"}}
           @color="primary"
-          @on-click={{perform this.close}}
+          @onClick={{perform this.close}}
           @disabled={{this.close.isRunning}}
           @loading={{this.close.isRunning}}
           data-test-close
@@ -99,7 +99,7 @@
       {{else}}
         <UkButton
           @label={{t "caluma.form.cancel"}}
-          @on-click={{perform this.close}}
+          @onClick={{perform this.close}}
           @disabled={{this.close.isRunning}}
           @loading={{this.close.isRunning}}
           data-test-cancel
@@ -114,7 +114,7 @@
             @type="submit"
             @disabled={{or this.save.isRunning (not isValid)}}
             @loading={{this.save.isRunning}}
-            @on-click={{fn (perform this.save) validate}}
+            @onClick={{fn (perform this.save) validate}}
             data-test-save
           />
         </DocumentValidity>

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,13 @@
 <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}}
+  {{autoresize mode="height"}}
 >{{@field.answer.value}}</textarea>

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

@@ -1,6 +1,15 @@
 {{#if this.type}}
   {{#let (component (concat "cf-field/input/" this.type)) as |InputComponent|}}
-    <div class="uk-form-controls">
+    <div
+      class="uk-form-controls
+        {{if
+          (and
+            (has-question-type @field.question 'multiple-choice' 'choice')
+            @field.question.raw.meta.vertical
+          )
+          'uk-flex'
+        }}"
+    >
       <InputComponent
         @field={{@field}}
         @disabled={{@disabled}}

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.hbs

@@ -2,7 +2,7 @@
   <UkButton
     @color="link"
     @label={{this.value.label}}
-    @on-click={{fn this.download this.value.fileAnswerId}}
+    @onClick={{fn this.download this.value.fileAnswerId}}
   />
 {{else}}
   {{this.value.label}}