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

package/addon/lib/question.js

@@ -1,7 +1,8 @@
 import { assert } from "@ember/debug";
 import { camelize } from "@ember/string";
 import { queryManager } from "ember-apollo-client";
-import { dropTask, lastValue } from "ember-concurrency";
+import { dropTask } from "ember-concurrency";
+import { trackedTask } from "ember-resources/util/ember-concurrency";
 import { cached } from "tracked-toolbox";
 
 import getDynamicOptions from "@projectcaluma/ember-form/gql/queries/dynamic-options.graphql";
@@ -71,13 +72,20 @@ export default class Question extends Base {
     );
 
     return (
-      question.node.dynamicChoiceOptions ||
+      question.node.dynamicChoiceOptions ??
       question.node.dynamicMultipleChoiceOptions
     );
   }
 
-  @lastValue("loadDynamicOptions") dynamicChoiceOptions;
-  @lastValue("loadDynamicOptions") dynamicMultipleChoiceOptions;
+  dynamicOptions = trackedTask(this, this.loadDynamicOptions, () => []);
+
+  get dynamicChoiceOptions() {
+    return this.dynamicOptions.value ?? [];
+  }
+
+  get dynamicMultipleChoiceOptions() {
+    return this.dynamicOptions.value ?? [];
+  }
 
   /**
    * Whether the question is a single choice question

package/addon/modifiers/autoresize.js

@@ -0,0 +1,14 @@
+import { registerDestructor } from "@ember/destroyable";
+import { inject as service } from "@ember/service";
+import AutoresizeModifier from "ember-autoresize-modifier/modifiers/autoresize";
+
+export default class CustomAutoresizeModifier extends AutoresizeModifier {
+  @service inViewport;
+
+  modify(...args) {
+    super.modify(...args);
+
+    this.inViewport.watchElement(this.element).onEnter(this.resize);
+    registerDestructor(this, () => this.inViewport.stopWatching(this.element));
+  }
+}

package/addon/services/caluma-store.js

@@ -43,6 +43,8 @@ export default class CalumaStoreService extends Service {
   clear() {
     this._store.forEach((obj) => obj.destroy());
 
+    // `this._store` is not an ember array but a native map
+    // eslint-disable-next-line ember/no-array-prototype-extensions
     this._store.clear();
   }
 }

package/app/components/cf-field/{input/file.js → hint.js}

@@ -1 +1 @@
-export { default } from "@projectcaluma/ember-form/components/cf-field/input/file";
+export { default } from "@projectcaluma/ember-form/components/cf-field/hint";

package/app/components/cf-field/input/files.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/components/cf-field/input/files";

package/app/helpers/format-graphql-error.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/helpers/format-graphql-error";

package/app/helpers/get-widget.js

@@ -1,4 +1 @@
-export {
-  default,
-  getWidget,
-} from "@projectcaluma/ember-form/helpers/get-widget";
+export { default } from "@projectcaluma/ember-form/helpers/get-widget";

package/app/instance-initializers/form-widget-overrides.js

@@ -0,0 +1,4 @@
+export {
+  default,
+  initialize,
+} from "@projectcaluma/ember-form/instance-initializers/form-widget-overrides";

package/app/modifiers/autoresize.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form/modifiers/autoresize";

package/app/styles/@projectcaluma/ember-form.scss

@@ -3,21 +3,11 @@
 @import "../cf-field";
 @import "../cf-navigation";
 
-@import "../uikit-overwrites";
-
-.cf-checkbox_label {
-  display: block;
-  position: relative;
-  padding-left: 26px;
+@import "../flatpickr";
 
-  .uk-checkbox {
-    position: absolute;
-    top: 0.25em;
-    left: 0;
-    margin: 0;
-  }
+@import "../uikit-overwrites";
 
-  & + br {
-    display: none;
-  }
+.table-controls > .uk-icon {
+  min-height: 20px;
+  min-width: 20px;
 }

package/app/styles/_flatpickr.scss

@@ -0,0 +1,47 @@
+$flatpickr-today-color: $global-warning-background;
+$flatpickr-selected-color: $global-primary-background;
+
+span.flatpickr-day {
+  font-weight: $base-body-font-weight;
+
+  &.today:not(.selected) {
+    border-bottom-color: $flatpickr-today-color;
+
+    &:hover {
+      background: $flatpickr-today-color;
+      border-color: $flatpickr-today-color;
+    }
+  }
+
+  &.selected {
+    background: $flatpickr-selected-color;
+    border-color: $flatpickr-selected-color;
+    font-weight: 700;
+
+    &:hover {
+      background: darken($flatpickr-selected-color, 10%);
+      border-color: darken($flatpickr-selected-color, 10%);
+    }
+  }
+}
+
+.flatpickr-months {
+  .flatpickr-prev-month:hover,
+  .flatpickr-next-month:hover {
+    color: $flatpickr-today-color;
+  }
+}
+
+span.flatpickr-weekday {
+  font-size: $global-small-font-size;
+  font-weight: $base-body-font-weight;
+}
+
+.flatpickr-current-month {
+  font-size: $global-font-size;
+  font-weight: $base-body-font-weight;
+
+  .flatpickr-monthDropdown-months {
+    font-weight: $base-body-font-weight;
+  }
+}

package/blueprints/@projectcaluma/ember-form/index.js

@@ -10,7 +10,7 @@ module.exports = {
         { name: "ember-cli-showdown" },
         { name: "ember-composable-helpers" },
         { name: "ember-math-helpers" },
-        { name: "ember-pikaday" },
+        { name: "ember-flatpickr" },
         { name: "ember-power-select" },
         { name: "ember-autoresize-modifier" },
       ],

package/index.js

@@ -2,4 +2,16 @@
 
 module.exports = {
   name: require("./package").name,
+
+  included(...args) {
+    const app = this._findHost(this);
+
+    app.options.flatpickr = {
+      locales: ["de", "fr"],
+      theme: "airbnb",
+      ...(app.options.flatpickr ?? {}),
+    };
+
+    this._super.included.apply(this, args);
+  },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.0.0-beta.3",
+  "version": "11.0.0-beta.31",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -9,70 +9,80 @@
   "homepage": "https://docs.caluma.io/ember-caluma",
   "repository": "github:projectcaluma/ember-caluma",
   "scripts": {
-    "test": "npm-run-all test:*",
+    "test": "npm-run-all --print-name \"lint\" \"test:*\"",
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
-    "@glimmer/component": "^1.0.4",
-    "@glimmer/tracking": "^1.0.4",
-    "@projectcaluma/ember-core": "^11.0.0-beta.2",
-    "ember-apollo-client": "^3.2.0",
-    "ember-auto-import": "^2.4.0",
-    "ember-autoresize-modifier": "^0.5.0",
+    "@ember/string": "^3.0.0",
+    "@embroider/macros": "^1.9.0",
+    "@embroider/util": "^1.9.0",
+    "@glimmer/component": "^1.1.2",
+    "@glimmer/tracking": "^1.1.2",
+    "@projectcaluma/ember-core": "^11.0.0-beta.31",
+    "ember-apollo-client": "~4.0.2",
+    "ember-auto-import": "^2.4.3",
+    "ember-autoresize-modifier": "^0.6.0",
     "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.0.1",
+    "ember-cli-htmlbars": "^6.1.1",
     "ember-cli-showdown": "^6.0.1",
     "ember-composable-helpers": "^5.0.0",
-    "ember-fetch": "^8.1.1",
-    "ember-in-viewport": "^4.0.0",
+    "ember-concurrency": "^2.3.7",
+    "ember-fetch": "^8.1.2",
+    "ember-flatpickr": "^3.2.3",
+    "ember-in-viewport": "^4.0.2",
     "ember-intl": "^5.7.2",
-    "ember-math-helpers": "^2.18.0",
-    "ember-pikaday": "^3.0.0",
-    "ember-power-select": "^5.0.3",
-    "ember-resources": "^4.1.3",
-    "ember-uikit": "^5.0.0-beta.3",
-    "ember-validators": "^4.0.1",
+    "ember-math-helpers": "^2.18.2",
+    "ember-power-select": "^6.0.1",
+    "ember-resources": "^5.4.0",
+    "ember-uikit": "^6.1.0",
+    "ember-validators": "^4.1.2",
     "graphql": "^15.8.0",
     "jexl": "^2.3.0",
     "lodash.isequal": "^4.5.0",
-    "moment": "^2.29.1",
+    "luxon": "^3.0.4",
     "tracked-toolbox": "^1.2.3"
   },
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
-    "@ember/test-helpers": "2.6.0",
-    "@embroider/test-setup": "1.0.0",
-    "@faker-js/faker": "6.0.0-alpha.3",
-    "@projectcaluma/ember-testing": "10.2.0-beta.2",
-    "@projectcaluma/ember-workflow": "11.0.0-beta.1",
+    "@ember/test-helpers": "2.7.0",
+    "@embroider/test-setup": "1.8.3",
+    "@faker-js/faker": "7.6.0",
+    "@projectcaluma/ember-testing": "11.0.0-beta.31",
+    "@projectcaluma/ember-workflow": "^11.0.0-beta.31",
     "broccoli-asset-rev": "3.0.0",
-    "ember-cli": "3.28.5",
+    "ember-cli": "4.8.0",
     "ember-cli-code-coverage": "1.0.3",
-    "ember-cli-dependency-checker": "3.2.0",
+    "ember-cli-dependency-checker": "3.3.1",
     "ember-cli-inject-live-reload": "2.1.0",
-    "ember-cli-mirage": "2.4.0",
+    "ember-cli-mirage": "3.0.0-alpha.3",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
     "ember-disable-prototype-extensions": "1.1.3",
-    "ember-export-application-global": "2.0.1",
     "ember-load-initializers": "2.1.2",
-    "ember-maybe-import-regenerator": "1.0.0",
-    "ember-qunit": "5.1.5",
+    "ember-qunit": "6.0.0",
     "ember-resolver": "8.0.3",
-    "ember-source": "3.28.8",
+    "ember-source": "4.8.0",
     "ember-source-channel-url": "3.0.0",
     "ember-try": "2.0.0",
     "loader.js": "4.7.0",
-    "miragejs": "0.1.43",
+    "miragejs": "0.1.45",
     "npm-run-all": "4.1.5",
-    "qunit": "2.17.2",
+    "qunit": "2.19.2",
     "qunit-dom": "2.0.0",
-    "uuid": "8.3.2",
-    "webpack": "5.67.0"
+    "uuid": "9.0.0",
+    "webpack": "5.74.0"
+  },
+  "peerDependencies": {
+    "@projectcaluma/ember-workflow": "^11.0.0-beta.31"
+  },
+  "peerDependenciesMeta": {
+    "@projectcaluma/ember-workflow": {
+      "optional": true
+    }
   },
   "engines": {
-    "node": "12.* || 14.* || >= 16"
+    "node": "14.* || 16.* || >= 18"
   },
   "ember": {
     "edition": "octane"

package/translations/de.yaml

@@ -12,6 +12,10 @@ caluma:
     optionNotAvailable: "Diese Option ist nicht mehr verfügbar"
     info: "Mehr Informationen"
 
+    error:
+      intro: "Oh nein, auf unserer Seite ist etwas schief gelaufen. Ihre Antwort konnte nicht gespeichert werden."
+      details: "Technische Details:"
+
     navigation:
       next: "Weiter"
       previous: "Zurück"
@@ -34,7 +38,6 @@ caluma:
       options-empty: "Keine Optionen vorhanden"
       search-placeholder: "Hier tippen um zu suchen"
       search-empty: "Keine Optionen gefunden"
-      null: "Keine Auswahl"
 
     validation:
       blank: "Dieses Feld darf nicht leer gelassen werden"
@@ -43,11 +46,8 @@ caluma:
       greaterThanOrEqualTo: "Die Eingabe in diesem Feld darf nicht kleiner als {gte} sein"
       lessThanOrEqualTo: "Die Eingabe in diesem Feld darf nicht grösser als {lte} sein"
       notAnInteger: "Bitte geben Sie eine ganze Zahl ein"
-      inclusion: "'{value}' ist kein gültiger Wert für dieses Feld"
+      inclusion: '"{label}" ist kein gültiger Wert für dieses Feld'
+      deleteFailed: "Beim Löschen ist ein Fehler aufgetreten."
       uploadFailed: "Beim Hochladen ist ein Fehler aufgetreten."
       format: "{errorMsg}"
       table: "Mindestens eine Zeile der Tabelle wurde nicht korrekt ausgefüllt"
-
-    pikaday:
-      month-previous: "Vorheriger Monat"
-      month-next: "Nächster Monat"

package/translations/en.yaml

@@ -12,6 +12,10 @@ caluma:
     optionNotAvailable: "This option is not available anymore"
     info: "More information"
 
+    error:
+      intro: "Oh no, something went wrong on our side. Your answer could not be saved."
+      details: "Technical details:"
+
     navigation:
       next: "Next"
       previous: "Previous"
@@ -34,7 +38,6 @@ caluma:
       options-empty: "No options available"
       search-placeholder: "Type here to search options"
       search-empty: "Search didn't match any options"
-      null: "No selection"
 
     validation:
       blank: "This field can't be blank"
@@ -43,11 +46,8 @@ caluma:
       greaterThanOrEqualTo: "The value of this field must be greater than or equal to {gte}"
       lessThanOrEqualTo: "The value of this field must be less than or equal to {lte}"
       notAnInteger: "The value of this field must be an integer"
-      inclusion: "'{value}' is not a valid value for this field"
+      inclusion: '"{label}" is not a valid value for this field'
+      deleteFailed: "An error occured during deletion."
       uploadFailed: "An error occured during upload."
       format: "{errorMsg}"
       table: "At least one row of the table was not filled in correctly"
-
-    pikaday:
-      month-previous: "Previous month"
-      month-next: "Next month"

package/translations/fr.yaml

@@ -12,6 +12,10 @@ caluma:
     optionNotAvailable: "Cette option n'est plus disponible"
     info: "Plus d'informations"
 
+    error:
+      intro: "Oh non, quelque chose a mal tourné de notre côté. Votre réponse n'a pas pu être sauvegardée."
+      details: "Détails techniques :"
+
     navigation:
       next: "suivante"
       previous: "précédente"
@@ -34,7 +38,6 @@ caluma:
       options-empty: "Pas d'options disponibles"
       search-placeholder: "Tapez ici pour rechercher"
       search-empty: "Pas d'options trouvées"
-      null: "Aucune sélection"
 
     validation:
       blank: "Ce champ ne doit pas être laissé vide"
@@ -43,11 +46,8 @@ caluma:
       greaterThanOrEqualTo: "La valeur indiquée dans ce champ ne doit pas être inférieure à {gte} "
       lessThanOrEqualTo: "L'entrée dans ce champ ne doit pas être supérieure à {lte} "
       notAnInteger: "Veuillez entrer un nombre entier"
-      inclusion: "'{value}' n'est pas une valeur valide pour ce champ"
+      inclusion: '"{label}" n''est pas une valeur valide pour ce champ'
+      deleteFailed: "Une erreur est survenue lors de la suppression."
       uploadFailed: "Une erreur s'est produite pendant le téléchargement."
       format: "{errorMsg}"
       table: "Au moins une ligne du tableau n'a pas été remplie correctement"
-
-    pikaday:
-      month-previous: "Mois précédent"
-      month-next: "Mois suivant"

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

@@ -1,32 +0,0 @@
-<div class="uk-flex-middle uk-grid-divider uk-grid-column-small" uk-grid>
-  <div uk-form-custom="target: true">
-
-    <input
-      type="file"
-      name={{@field.pk}}
-      id={{@field.pk}}
-      disabled={{@disabled}}
-      {{on "change" this.save}}
-    />
-    <UkButton @color="primary" @disabled={{@disabled}}>
-      {{t "caluma.form.selectFile"}}
-    </UkButton>
-  </div>
-  {{#if (and this.downloadUrl this.downloadName)}}
-    <div>
-      <UkButton
-        data-test-download-link
-        @color="link"
-        @onClick={{this.download}}
-      >
-        {{this.downloadName}}
-      </UkButton>
-      <UkIcon
-        class="uk-icon-button uk-margin-small-left"
-        role="button"
-        @icon="trash"
-        {{on "click" this.delete}}
-      />
-    </div>
-  {{/if}}
-</div>

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

@@ -1,89 +0,0 @@
-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/fileanswer-info.graphql";
-
-export default class CfFieldInputFileComponent extends Component {
-  @service intl;
-
-  @queryManager apollo;
-
-  get downloadUrl() {
-    return this.args.field?.answer?.value?.downloadUrl;
-  }
-
-  get downloadName() {
-    return this.args.field?.answer?.value?.name;
-  }
-
-  @action
-  async download() {
-    const { downloadUrl } = await this.apollo.watchQuery(
-      {
-        query: getFileAnswerInfoQuery,
-        variables: { id: this.args.field.answer.raw.id },
-        fetchPolicy: "cache-and-network",
-      },
-      "node.fileValue"
-    );
-
-    if (downloadUrl) {
-      window.open(downloadUrl, "_blank");
-    }
-  }
-
-  @action
-  async save({ target }) {
-    const file = target.files[0];
-
-    if (!file) {
-      return;
-    }
-
-    const { fileValue } = await this.args.onSave(file.name);
-
-    try {
-      const response = await fetch(fileValue.uploadUrl, {
-        method: "PUT",
-        body: file,
-      });
-
-      if (!response.ok) {
-        throw new Error();
-      }
-
-      this.args.field.answer.value = {
-        name: file.name,
-        downloadUrl: fileValue.downloadUrl,
-      };
-    } catch (error) {
-      await this.args.onSave(null);
-      this.args.field._errors = [{ type: "uploadFailed" }];
-    } finally {
-      // eslint-disable-next-line require-atomic-updates
-      target.value = "";
-    }
-  }
-
-  @action
-  async delete() {
-    try {
-      await this.apollo.mutate({
-        mutation: removeAnswerMutation,
-        variables: {
-          input: {
-            answer: this.args.field.answer.uuid,
-          },
-        },
-      });
-
-      await this.args.onSave(null);
-    } catch (error) {
-      this.args.field._errors = [{ type: "deleteFailed" }];
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-import Component from "@glimmer/component";
-
-export default class CfFieldLabelComponent extends Component {
-  get optional() {
-    if (this.args.field?.question.isCalculated) {
-      return false;
-    }
-
-    return this.args.field?.optional;
-  }
-}

package/addon/gql/mutations/remove-answer.graphql

@@ -1,7 +0,0 @@
-mutation RemoveAnswer($input: RemoveAnswerInput!) {
-  removeAnswer(input: $input) {
-    answer {
-      id
-    }
-  }
-}

package/addon/gql/mutations/save-document-file-answer.graphql

@@ -1,9 +0,0 @@
-#import * from '../fragments/field.graphql'
-
-mutation SaveDocumentFileAnswer($input: SaveDocumentFileAnswerInput!) {
-  saveDocumentFileAnswer(input: $input) {
-    answer {
-      ...FieldAnswer
-    }
-  }
-}

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,
-};