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

package/addon/components/cf-content.hbs

@@ -1,44 +1,39 @@
-{{#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
-          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
-          )
-        )
-        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>
-          </div>
-        {{else}}
+{{#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
+        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 />
-        {{/if}}
-      {{/let}}
+          <hr />
+          <content.pagination />
+        </div>
+      </div>
+    {{else}}
+      <content.form />
     {{/if}}
-  </div>
+  {{/let}}
 {{/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

@@ -4,7 +4,7 @@
     class="uk-icon-button"
     uk-icon="info"
     title={{t "caluma.form.info"}}
-    {{on "click" this.showModal}}
+    {{on "click" (fn (mut this.modalVisible) true)}}
   >
     <span class="uk-hidden">{{t "caluma.form.info"}}</span>
   </button>
@@ -12,7 +12,7 @@
   <UkModal
     @visible={{this.modalVisible}}
     @stack={{true}}
-    @on-hide={{this.hideModal}}
+    @onHide={{fn (mut this.modalVisible) false}}
     as |modal|
   >
     <modal.body>

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

@@ -1,21 +1,6 @@
-import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 
 export default class CfFieldInfoComponent extends Component {
   @tracked modalVisible = false;
-
-  @action
-  showModal(e) {
-    e.preventDefault();
-
-    this.modalVisible = true;
-  }
-
-  @action
-  hideModal(e) {
-    e.preventDefault();
-
-    this.modalVisible = false;
-  }
 }

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

@@ -1,19 +1,18 @@
-{{#unless @disabled}}
-  <DocumentValidity
-    @document={{@field.document}}
-    @validateOnEnter={{this.validateOnEnter}}
-    as |isValid validate|
-  >
-    <WorkItemButton
-      @workItemId={{this.workItem}}
-      @mutation={{this.action}}
-      @label={{@field.question.label}}
-      @disabled={{and (not-eq isValid null) (not isValid)}}
-      @color={{this.color}}
-      @beforeMutate={{fn this.beforeMutate validate}}
-      @onSuccess={{this.onSuccess}}
-      @onError={{this.onError}}
-      @type={{this.type}}
-    />
-  </DocumentValidity>
-{{/unless}}
+<DocumentValidity
+  @document={{@field.document}}
+  @validateOnEnter={{this.validateOnEnter}}
+  as |isValid validate|
+>
+  <WorkItemButton
+    @workItemId={{this.workItem}}
+    @mutation={{this.action}}
+    @label={{@field.question.raw.label}}
+    @disabled={{or (and (not-eq isValid null) (not isValid)) @disabled}}
+    @color={{this.color}}
+    @beforeMutate={{fn this.beforeMutate validate}}
+    @onSuccess={{this.onSuccess}}
+    @onError={{this.onError}}
+    @type={{this.type}}
+    class={{if @disabled "uk-hidden"}}
+  />
+</DocumentValidity>

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

@@ -13,13 +13,16 @@
     readonly
   />
 {{else}}
-  <PikadayInput
+  <input
     class="uk-input"
+    type="text"
     name={{@field.pk}}
     id={{@field.pk}}
-    @format="L"
-    @onSelection={{this.onChange}}
-    @useUTC={{true}}
-    @value={{@field.answer.value}}
+    {{pikaday
+      toString=this.formatDate
+      i18n=this.pikadayTranslations
+      value=@field.answer.value
+      onSelect=this.onChange
+    }}
   />
 {{/if}}

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

@@ -1,19 +1,37 @@
 import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
-import moment from "moment";
+import { DateTime, Info } from "luxon";
+import { cached } from "tracked-toolbox";
 
 export default class CfFieldInputDateComponent extends Component {
+  @service intl;
+
   @action
   onChange(date) {
     // Change Javascript date to ISO string if not null.
-    this.args.onSave(
-      date
-        ? moment({
-            day: date.getUTCDate(),
-            month: date.getUTCMonth(),
-            year: date.getUTCFullYear(),
-          }).format(moment.HTML5_FMT.DATE)
-        : null
-    );
+    this.args.onSave(date ? DateTime.fromJSDate(date).toISODate() : null);
+  }
+
+  @action
+  formatDate(date) {
+    return this.intl.formatDate(date, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  }
+
+  @cached
+  get pikadayTranslations() {
+    const locale = this.intl.primaryLocale;
+
+    return {
+      previousMonth: this.intl.t("caluma.form.pikaday.month-previous"),
+      nextMonth: this.intl.t("caluma.form.pikaday.month-next"),
+      months: Info.months("long", { locale }),
+      weekdays: Info.weekdays("long", { locale }),
+      weekdaysShort: Info.weekdays("short", { locale }),
+    };
   }
 }

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

@@ -8,7 +8,7 @@
       disabled={{@disabled}}
       {{on "change" this.save}}
     />
-    <UkButton @color="primary" @disabled={{@disabled}}>
+    <UkButton disabled={{@disabled}}>
       {{t "caluma.form.selectFile"}}
     </UkButton>
   </div>
@@ -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;
@@ -21,11 +22,11 @@ export default class CfFieldInputFileComponent extends Component {
 
   @action
   async download() {
-    const { downloadUrl } = await this.apollo.watchQuery(
+    const { downloadUrl } = await this.apollo.query(
       {
         query: getFileAnswerInfoQuery,
-        variables: { id: this.args.field.answer.id },
-        fetchPolicy: "cache-and-network",
+        variables: { id: this.args.field.answer.raw.id },
+        fetchPolicy: "network-only",
       },
       "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/static.hbs

@@ -1,4 +1,4 @@
 <MarkdownToHtml
-  @markdown={{@field.question.staticContent}}
+  @markdown={{@field.question.raw.staticContent}}
   @openLinksInNewWindow={{true}}
 />