@projectcaluma/ember-form 11.0.0-beta.5 → 11.0.0-beta.9

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+# [@projectcaluma/ember-form-v11.0.0-beta.9](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.8...@projectcaluma/ember-form-v11.0.0-beta.9) (2022-02-07)
+
+
+### Bug Fixes
+
+* **action-button:** only hide action button visually if disabled ([e292f09](https://github.com/projectcaluma/ember-caluma/commit/e292f093c33efd0b99a73674f8f83de5f496bf40))
+* **deps:** remove moment altogether and update ember-pikday ([b2f7fa2](https://github.com/projectcaluma/ember-caluma/commit/b2f7fa28fa076897addd36e5964c926c671508ff))
+* **form:** change file download actions to query and network-only ([aa4458e](https://github.com/projectcaluma/ember-caluma/commit/aa4458e944263f0f00ba1684a4f7bbfa83d2efea))
+
+
+### BREAKING CHANGES
+
+* **deps:** The host app now needs to opt-in to use the default
+pikaday styles: https://github.com/adopted-ember-addons/ember-pikaday#styles
+
+# [@projectcaluma/ember-form-v11.0.0-beta.8](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.7...@projectcaluma/ember-form-v11.0.0-beta.8) (2022-02-03)
+
+
+### Bug Fixes
+
+* dye file upload button in default color ([ad9e1b8](https://github.com/projectcaluma/ember-caluma/commit/ad9e1b8ed18c8228c495142af1bbe1f2c219c088))
+* **form:** fix isNew state of answers without backend object ([c10129f](https://github.com/projectcaluma/ember-caluma/commit/c10129ffe76d7751cd0105c71fc4ba010323e2e4))
+
+# [@projectcaluma/ember-form-v11.0.0-beta.7](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.6...@projectcaluma/ember-form-v11.0.0-beta.7) (2022-02-03)
+
+
+### Bug Fixes
+
+* **validation:** sync format validator validation with backend ([ee66968](https://github.com/projectcaluma/ember-caluma/commit/ee66968230b9f0e4c5a4df8bdb3f8e58b44b5b82))
+
+
+### BREAKING CHANGES
+
+* **validation:** Use the `formatValidators` property of the backend to store and read
+format validators instead of the `meta.formatValidators` so the backend
+validates as well. For more information on how to migrate check the
+migration guide to v11.
+
+# [@projectcaluma/ember-form-v11.0.0-beta.6](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.5...@projectcaluma/ember-form-v11.0.0-beta.6) (2022-02-02)
+
+
+### Bug Fixes
+
+* **action-button:** hide field wrapper if action button is not displayed ([1d4b701](https://github.com/projectcaluma/ember-caluma/commit/1d4b701af35d48d072001f3295b905b1065daffe))
+* render static questions ([28fff94](https://github.com/projectcaluma/ember-caluma/commit/28fff9487e4ad3153fe267db4b66208ad858aaac))
+* **table:** fix styling of table fields ([30c5903](https://github.com/projectcaluma/ember-caluma/commit/30c590389ed82c37ebf666f1484501c66ca8f0bb))
+
 # [@projectcaluma/ember-form-v11.0.0-beta.5](https://github.com/projectcaluma/ember-caluma/compare/@projectcaluma/ember-form-v11.0.0-beta.4...@projectcaluma/ember-form-v11.0.0-beta.5) (2022-02-01)
 
 

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

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

@@ -22,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.raw.id },
-        fetchPolicy: "cache-and-network",
+        fetchPolicy: "network-only",
       },
       "node.fileValue"
     );

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

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

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

@@ -1,4 +1,4 @@
-<table class="uk-table uk-table-divider">
+<table class="uk-table uk-table-divider uk-margin-remove-vertical">
   <thead>
     <tr>
       {{#each this.columns as |column|}}
@@ -25,27 +25,27 @@
                 class="uk-animation-fade uk-text-danger"
               />
             {{/if}}
-            <button
-              data-test-edit-row
-              type="button"
-              class="uk-button uk-button-link uk-flex-inline uk-margin-small-left"
+            <UkButton
+              @color="link"
+              @onClick={{fn this.edit document}}
               title={{t "caluma.form.edit"}}
-              {{on "click" (fn this.edit document)}}
+              class="uk-flex-inline uk-margin-small-left"
+              data-test-edit-row
             >
               <UkIcon @icon="pencil" />
-              <span class="uk-hidden">{{t "caluma.form.edit"}}</span>
-            </button>
+              <span hidden>{{t "caluma.form.edit"}}</span>
+            </UkButton>
             {{#unless @disabled}}
-              <button
-                data-test-delete-row
-                type="button"
-                class="uk-button uk-button-link uk-flex-inline uk-margin-small-left"
+              <UkButton
+                @color="link"
+                @onClick={{fn (perform this.delete) document}}
                 title={{t "caluma.form.delete"}}
-                {{on "click" (fn (perform this.delete) document)}}
+                class="uk-flex-inline uk-margin-small-left"
+                data-test-delete-row
               >
                 <UkIcon @icon="trash" />
-                <span class="uk-hidden">{{t "caluma.form.delete"}}</span>
-              </button>
+                <span hidden>{{t "caluma.form.delete"}}</span>
+              </UkButton>
             {{/unless}}
           </div>
         </td>
@@ -57,12 +57,13 @@
       <tr>
         <td colspan={{add this.columns.length 1}} class="uk-text-center">
           <UkButton
-            @size="small"
+            @color="link"
             @onClick={{perform this.add}}
+            title={{t "caluma.form.addRow"}}
             data-test-add-row
           >
             <UkIcon @icon="plus" />
-            <span class="uk-hidden">{{t "caluma.form.addRow"}}</span>
+            <span hidden>{{t "caluma.form.addRow"}}</span>
           </UkButton>
         </td>
       </tr>
@@ -85,7 +86,7 @@
       />
     </modal.body>
 
-    <modal.footer @class="uk-text-right">
+    <modal.footer class="uk-text-right">
       {{#if @disabled}}
         <UkButton
           @label={{t "caluma.form.close"}}

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

@@ -1,9 +1,24 @@
-{{#if this.value.fileAnswerId}}
-  <UkButton
-    @color="link"
-    @label={{this.value.label}}
-    @onClick={{fn this.download this.value.fileAnswerId}}
-  />
+{{#if (has-question-type @field.question "choice" "dynamic-choice")}}
+  {{@field.selected.label}}
+{{else if (has-question-type
+  @field.question "multiple-choice" "multiple-dynamic-choice"
+)}}
+  {{#each @field.selected as |opt i|}}{{if (gt i 0) ", "}}{{opt.label}}{{/each}}
+{{else if (has-question-type @field.question "date")}}
+  {{format-date
+    @field.answer.value
+    day="2-digit"
+    month="2-digit"
+    year="numeric"
+  }}
+{{else if (has-question-type @field.question "file")}}
+  {{#if @field.answer.value}}
+    <UkButton
+      @color="link"
+      @label={{@field.answer.value.name}}
+      @onClick={{fn this.download @field.answer.raw.id}}
+    />
+  {{/if}}
 {{else}}
-  {{this.value.label}}
+  {{@field.answer.value}}
 {{/if}}

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

@@ -1,50 +1,25 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
-import moment from "moment";
 
 import getFileAnswerInfoQuery from "@projectcaluma/ember-form/gql/queries/fileanswer-info.graphql";
 
 export default class CfFieldValueComponent extends Component {
   @queryManager apollo;
 
-  get value() {
-    const field = this.args.field;
-
-    switch (field.questionType) {
-      case "ChoiceQuestion":
-      case "DynamicChoiceQuestion": {
-        return field.selected;
-      }
-      case "MultipleChoiceQuestion":
-      case "DynamicMultipleChoiceQuestion": {
-        return { label: field.selected.map(({ label }) => label).join(", ") };
-      }
-      case "FileQuestion": {
-        const answerValue = field.answer.value;
-        return {
-          fileAnswerId: answerValue && field.answer.raw.id,
-          label: answerValue?.name,
-        };
-      }
-      case "DateQuestion": {
-        return {
-          label: field.answer.value && moment(field.answer.value).format("L"),
-        };
-      }
-
-      default:
-        return { label: field.answer.value };
-    }
-  }
-
   @action
   async download(id) {
     const { downloadUrl } = await this.apollo.query(
-      { query: getFileAnswerInfoQuery, variables: { id } },
+      {
+        query: getFileAnswerInfoQuery,
+        variables: { id },
+        fetchPolicy: "network-only",
+      },
       "node.fileValue"
     );
 
-    window.open(downloadUrl, "_blank");
+    if (downloadUrl) {
+      window.open(downloadUrl, "_blank");
+    }
   }
 }

package/addon/components/cf-field.hbs

@@ -1,6 +1,10 @@
 {{#if this.visible}}
   <div
-    class="uk-margin"
+    class="uk-margin
+      {{if
+        (and @disabled (has-question-type @field.question 'action-button'))
+        'uk-hidden'
+      }}"
     {{did-insert this.registerComponent}}
     {{will-destroy this.unregisterComponent}}
   >

package/addon/gql/fragments/field.graphql

@@ -19,6 +19,15 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    formatValidators {
+      edges {
+        node {
+          slug
+          regex
+          errorMsg
+        }
+      }
+    }
   }
   ... on TextareaQuestion {
     textareaMinLength: minLength
@@ -28,6 +37,15 @@ fragment SimpleQuestion on Question {
       value
     }
     placeholder
+    formatValidators {
+      edges {
+        node {
+          slug
+          regex
+          errorMsg
+        }
+      }
+    }
   }
   ... on IntegerQuestion {
     integerMinValue: minValue

package/addon/lib/field.js

@@ -3,6 +3,7 @@ import { assert } from "@ember/debug";
 import { associateDestroyableChild } from "@ember/destroyable";
 import { inject as service } from "@ember/service";
 import { camelize } from "@ember/string";
+import { isEmpty } from "@ember/utils";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
 import { restartableTask, lastValue, dropTask } from "ember-concurrency";
@@ -63,7 +64,6 @@ const fieldIsHiddenOrEmpty = (field) => {
  */
 export default class Field extends Base {
   @service intl;
-  @service validator;
 
   @queryManager apollo;
 
@@ -113,6 +113,7 @@ export default class Field extends Base {
 
       answer = new Answer({
         raw: {
+          id: null,
           __typename: answerType,
           question: { slug: this.raw.question.slug },
           [camelize(answerType.replace(/Answer$/, "Value"))]: null,
@@ -628,6 +629,35 @@ export default class Field extends Base {
     this._errors = errors;
   }
 
+  /**
+   * Validate the value against the regexes of the given format validators.
+   *
+   * @method _validateFormatValidators
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
+   * @private
+   */
+  _validateFormatValidators() {
+    const validators =
+      this.question.raw.formatValidators?.edges.map((edge) => edge.node) ?? [];
+    const value = this.answer.value;
+
+    if (isEmpty(value)) {
+      // empty values should not be validated since they are handled by the
+      // requiredness validation
+      return validators.map(() => true);
+    }
+
+    return validators.map((validator) => {
+      return (
+        new RegExp(validator.regex).test(value) || {
+          type: "format",
+          context: { errorMsg: validator.errorMsg },
+          value,
+        }
+      );
+    });
+  }
+
   /**
    * Method to validate if a question is required or not.
    *
@@ -647,15 +677,12 @@ export default class Field extends Base {
    * predefined by the question.
    *
    * @method _validateTextQuestion
-   * @return {Promise<Boolean|Object>} A promise which resolves into an object if invalid or true if valid
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
    * @private
    */
-  async _validateTextQuestion() {
+  _validateTextQuestion() {
     return [
-      ...(await this.validator.validate(
-        this.answer.value,
-        this.question.raw.meta.formatValidators ?? []
-      )),
+      ...this._validateFormatValidators(),
       validate("length", this.answer.value, {
         min: this.question.raw.textMinLength || 0,
         max: this.question.raw.textMaxLength || Number.POSITIVE_INFINITY,
@@ -668,15 +695,12 @@ export default class Field extends Base {
    * than predefined by the question.
    *
    * @method _validateTextareaQuestion
-   * @return {Promise<Boolean|Object>} A promise which resolves into an object if invalid or true if valid
+   * @return {Array<Boolean|Object>} An array of error objects or `true`
    * @private
    */
-  async _validateTextareaQuestion() {
+  _validateTextareaQuestion() {
     return [
-      ...(await this.validator.validate(
-        this.answer.value,
-        this.question.raw.meta.formatValidators ?? []
-      )),
+      ...this._validateFormatValidators(),
       validate("length", this.answer.value, {
         min: this.question.raw.textareaMinLength || 0,
         max: this.question.raw.textareaMaxLength || Number.POSITIVE_INFINITY,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.0.0-beta.5",
+  "version": "11.0.0-beta.9",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -16,7 +16,7 @@
   "dependencies": {
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@projectcaluma/ember-core": "^11.0.0-beta.2",
+    "@projectcaluma/ember-core": "^11.0.0-beta.4",
     "ember-apollo-client": "^3.2.0",
     "ember-auto-import": "^2.4.0",
     "ember-autoresize-modifier": "^0.5.0",
@@ -24,19 +24,20 @@
     "ember-cli-htmlbars": "^6.0.1",
     "ember-cli-showdown": "^6.0.1",
     "ember-composable-helpers": "^5.0.0",
+    "ember-concurrency": "^2.2.0",
     "ember-fetch": "^8.1.1",
     "ember-in-viewport": "^4.0.0",
     "ember-intl": "^5.7.2",
     "ember-math-helpers": "^2.18.1",
-    "ember-pikaday": "^3.0.0",
+    "ember-pikaday": "^4.0.0",
     "ember-power-select": "^5.0.3",
-    "ember-resources": "^4.2.0",
-    "ember-uikit": "^5.0.0-beta.9",
+    "ember-resources": "^4.3.1",
+    "ember-uikit": "^5.0.0",
     "ember-validators": "^4.1.0",
     "graphql": "^15.8.0",
     "jexl": "^2.3.0",
     "lodash.isequal": "^4.5.0",
-    "moment": "^2.29.1",
+    "luxon": "^2.3.0",
     "tracked-toolbox": "^1.2.3"
   },
   "devDependencies": {
@@ -44,7 +45,7 @@
     "@ember/test-helpers": "2.6.0",
     "@embroider/test-setup": "1.0.0",
     "@faker-js/faker": "6.0.0-alpha.5",
-    "@projectcaluma/ember-testing": "10.2.0-beta.2",
+    "@projectcaluma/ember-testing": "11.0.0-beta.2",
     "@projectcaluma/ember-workflow": "11.0.0-beta.3",
     "broccoli-asset-rev": "3.0.0",
     "ember-cli": "3.28.5",

package/addon/instance-initializers/setup-pikaday-i18n.js

@@ -1,35 +0,0 @@
-import EmberObject from "@ember/object";
-import { inject as service } from "@ember/service";
-import moment from "moment";
-
-class Translations extends EmberObject {
-  @service intl;
-
-  get previousMonth() {
-    return this.intl.t("caluma.form.pikaday.month-previous");
-  }
-
-  get nextMonth() {
-    return this.intl.t("caluma.form.pikaday.month-next");
-  }
-
-  months = moment.localeData().months();
-  weekdays = moment.localeData().weekdays();
-  weekdaysShort = moment.localeData().weekdaysShort();
-}
-
-export function initialize(applicationInstance) {
-  applicationInstance.register("pikaday-i18n:main", Translations, {
-    singleton: true,
-  });
-  applicationInstance.inject(
-    "component:pikaday-input",
-    "i18n",
-    "pikaday-i18n:main"
-  );
-}
-
-export default {
-  name: "setup-pikaday-i18n",
-  initialize,
-};