@projectcaluma/ember-form 12.8.0 → 12.10.0

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

@@ -1,6 +1,6 @@
 import { action } from "@ember/object";
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
+import { localCopy } from "tracked-toolbox";
 
 /**
  * Input component for the checkbox question type
@@ -9,7 +9,7 @@ import { tracked } from "@glimmer/tracking";
  * @argument {Field} field The field for this input type
  */
 export default class CfFieldInputCheckboxComponent extends Component {
-  @tracked selected = this.args.field.value;
+  @localCopy("args.field.value") selected;
 
   /**
    * Update the value of the field with the slugs of the currently checked

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

@@ -15,7 +15,7 @@
     class="uk-input {{if @disabled 'uk-disabled'}}"
     readonly={{@disabled}}
     @disabled={{@disabled}}
-    @locale={{this.locale}}
+    @locale={{this.localeObject}}
     @date={{or @field.answer.value null}}
     @altFormat={{this.dateFormat}}
     @altInput={{true}}

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

@@ -3,6 +3,7 @@ import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
+import lang from "flatpickr/dist/l10n";
 import { DateTime } from "luxon";
 
 export default class CfFieldInputDateComponent extends Component {
@@ -14,6 +15,10 @@ export default class CfFieldInputDateComponent extends Component {
     return this.intl.primaryLocale.split("-")[0];
   }
 
+  get localeObject() {
+    return lang[this.locale];
+  }
+
   get config() {
     return getOwner(this).resolveRegistration("config:environment");
   }

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

@@ -0,0 +1,12 @@
+<input
+  type="text"
+  class="uk-input
+    {{if @field.isInvalid 'uk-form-danger'}}
+    {{if this.disabled 'uk-disabled'}}"
+  name={{@field.pk}}
+  id={{@field.pk}}
+  value={{this.displayValue}}
+  placeholder={{@field.question.raw.placeholder}}
+  readonly={{this.disabled}}
+  {{on "input" this.input}}
+/>

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

@@ -0,0 +1,46 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { cached } from "tracked-toolbox";
+
+export default class CfFieldInputNumberSeparatorComponent extends Component {
+  @service intl;
+
+  get disabled() {
+    return this.args.disabled || this.args.field?.question.isCalculated;
+  }
+
+  get displayValue() {
+    if (!this.args.field.value) {
+      return "";
+    }
+
+    return this.intl.formatNumber(this.args.field.value, {
+      maximumFractionDigits: 20,
+    });
+  }
+
+  @cached
+  get thousandSeparator() {
+    return this.intl.formatNumber(11111).replace(/\p{Number}/gu, "");
+  }
+
+  @cached
+  get decimalSeparator() {
+    return this.intl.formatNumber(1.1).replace(/\p{Number}/gu, "");
+  }
+
+  @action
+  input({ target: { value } }) {
+    // We need to remove the thousand separator and replace the decimal
+    // separator with a dot in order to parse it into a number. Which character
+    // those are is determined per locale in the getters above.
+    const serialized = Number(
+      value
+        .replace(new RegExp(`\\${this.thousandSeparator}`, "g"), "")
+        .replace(new RegExp(`\\${this.decimalSeparator}`), "."),
+    );
+
+    this.args.onSave(isNaN(serialized) ? null : serialized);
+  }
+}

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

@@ -23,7 +23,7 @@
     {{/if}}
   </label>
 {{/each}}
-{{#if (and @field.optional @field.answer.value)}}
+{{#if (and @field.optional @field.answer.value (not @disabled))}}
   <br />
   <a href="" data-test-radio-reset {{on "click" this.reset}}>
     {{t "caluma.form.power-select.reset"}}

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

@@ -21,6 +21,15 @@
       @onClick={{fn this.download file.id}}
     />
   {{/each}}
+{{else if
+  (and
+    @field.answer.value
+    (eq
+      @field.question.raw.meta.widgetOverride "cf-field/input/number-separator"
+    )
+  )
+}}
+  {{format-number @field.answer.value maximumFractionDigits=20}}
 {{else}}
   {{@field.answer.value}}
 {{/if}}

package/addon/components/cf-field.hbs

@@ -23,7 +23,7 @@
         }}
           <FieldComponent
             @field={{@field}}
-            @disabled={{@disabled}}
+            @disabled={{or @disabled @field.refreshAnswer.isRunning}}
             @context={{@context}}
             @onSave={{perform this.save}}
           />
@@ -38,7 +38,7 @@
         <div
           class="cf-field__icon uk-padding-remove-vertical uk-flex uk-flex-middle uk-flex-center"
         >
-          {{#if this.save.isRunning}}
+          {{#if (or this.save.isRunning @field.refreshAnswer.isRunning)}}
             <UkSpinner class="uk-animation-fade" />
           {{else if (or this.save.last.isError @field.isInvalid)}}
             <div class="uk-flex-inline">

package/addon/gql/fragments/field.graphql

@@ -214,6 +214,7 @@ fragment FieldQuestion on Question {
 
 fragment SimpleAnswer on Answer {
   id
+  meta
   question {
     id
     slug

package/addon/gql/queries/refresh-answer.graphql

@@ -0,0 +1,18 @@
+#import * from '../fragments/field.graphql'
+
+query RefreshAnswer($document: ID!, $question: ID!) {
+  allDocuments(filter: [{ id: $document }]) {
+    edges {
+      node {
+        id
+        answers(filter: [{ questions: [$question] }]) {
+          edges {
+            node {
+              ...FieldAnswer
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -2,6 +2,7 @@ import { setOwner } from "@ember/application";
 import { inject as service } from "@ember/service";
 
 import HiddenComponent from "@projectcaluma/ember-form/components/cf-field/input/hidden";
+import NumberSeparatorComponent from "@projectcaluma/ember-form/components/cf-field/input/number-separator";
 import PowerSelectComponent from "@projectcaluma/ember-form/components/cf-field/input/powerselect";
 
 class HiddenOverride {
@@ -34,17 +35,30 @@ class PowerSelectOverride {
   ];
 }
 
-export function initialize(appInstance) {
-  const options = appInstance.lookup("service:caluma-options");
+class NumberSeparatorOverride {
+  @service intl;
 
-  const hiddenOverride = new HiddenOverride();
-  const powerSelectOverride = new PowerSelectOverride();
+  get label() {
+    return this.intl.t(
+      "caluma.form-builder.question.widgetOverrides.number-separator",
+    );
+  }
+
+  component = "cf-field/input/number-separator";
+  componentClass = NumberSeparatorComponent;
+  types = ["IntegerQuestion", "FloatQuestion", "CalculatedFloatQuestion"];
+}
 
-  setOwner(hiddenOverride, appInstance);
-  setOwner(powerSelectOverride, appInstance);
+export function initialize(appInstance) {
+  const options = appInstance.lookup("service:caluma-options");
 
-  options.registerComponentOverride(hiddenOverride);
-  options.registerComponentOverride(powerSelectOverride);
+  [HiddenOverride, PowerSelectOverride, NumberSeparatorOverride].forEach(
+    (cls) => {
+      const override = new cls();
+      setOwner(override, appInstance);
+      options.registerComponentOverride(override);
+    },
+  );
 }
 
 export default {

package/addon/lib/field.js

@@ -20,6 +20,7 @@ import saveDocumentListAnswerMutation from "@projectcaluma/ember-form/gql/mutati
 import saveDocumentStringAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-string-answer.graphql";
 import saveDocumentTableAnswerMutation from "@projectcaluma/ember-form/gql/mutations/save-document-table-answer.graphql";
 import getDocumentUsedDynamicOptionsQuery from "@projectcaluma/ember-form/gql/queries/document-used-dynamic-options.graphql";
+import refreshAnswerQuery from "@projectcaluma/ember-form/gql/queries/refresh-answer.graphql";
 import Base from "@projectcaluma/ember-form/lib/base";
 import dependencies from "@projectcaluma/ember-form/lib/dependencies";
 
@@ -634,6 +635,29 @@ export default class Field extends Base {
     this._errors = errors;
   }
 
+  @dropTask
+  *refreshAnswer() {
+    const response = yield this.apollo.query(
+      {
+        query: refreshAnswerQuery,
+        fetchPolicy: "network-only",
+        variables: {
+          document: this.document.uuid,
+          question: this.question.slug,
+        },
+      },
+      "allDocuments.edges",
+    );
+
+    const rawAnswer = response[0].node.answers.edges[0]?.node;
+
+    if (rawAnswer) {
+      Object.entries(rawAnswer).forEach(([key, value]) => {
+        this.answer.raw[key] = value;
+      });
+    }
+  }
+
   /**
    * Validate the value against the regexes of the given format validators.
    *

package/app/components/cf-field/input/number-separator.js

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

package/app/styles/_flatpickr.scss

@@ -1,4 +1,6 @@
 @use "sass:color";
+@import "flatpickr/dist/flatpickr";
+@import "flatpickr/dist/themes/airbnb";
 
 $flatpickr-today-color: $global-warning-background;
 $flatpickr-selected-color: $global-primary-background;

package/index.js

@@ -2,16 +2,4 @@
 
 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": "12.8.0",
+  "version": "12.10.0",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -9,22 +9,22 @@
   "homepage": "https://docs.caluma.io/ember-caluma",
   "repository": "github:projectcaluma/ember-caluma",
   "dependencies": {
-    "@babel/core": "^7.23.6",
+    "@babel/core": "^7.23.9",
     "@ember/string": "^3.1.1",
     "@embroider/macros": "^1.13.4",
     "@embroider/util": "^1.12.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "ember-apollo-client": "~4.0.2",
-    "ember-auto-import": "^2.7.1",
+    "ember-auto-import": "^2.7.2",
     "ember-autoresize-modifier": "^0.7.0",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0",
-    "ember-cli-showdown": "^7.0.0",
+    "ember-cli-showdown": "^8.0.0",
     "ember-composable-helpers": "^5.0.0",
     "ember-concurrency": "^3.1.1",
     "ember-fetch": "^8.1.2",
-    "ember-flatpickr": "^4.0.0",
+    "ember-flatpickr": "^6.0.0",
     "ember-in-viewport": "^4.1.0",
     "ember-intl": "^6.4.0",
     "ember-math-helpers": "^4.0.0",
@@ -33,18 +33,19 @@
     "ember-truth-helpers": "^4.0.3",
     "ember-uikit": "^9.0.0",
     "ember-validators": "^4.1.2",
+    "flatpickr": "^4.6.13",
     "graphql": "^15.8.0",
     "jexl": "^2.3.0",
     "lodash.isequal": "^4.5.0",
     "luxon": "^3.4.4",
     "tracked-toolbox": "^2.0.0",
-    "@projectcaluma/ember-core": "^12.8.0"
+    "@projectcaluma/ember-core": "^12.10.0"
   },
   "devDependencies": {
-    "@ember/optional-features": "2.0.0",
+    "@ember/optional-features": "2.1.0",
     "@ember/test-helpers": "3.2.1",
     "@embroider/test-setup": "3.0.3",
-    "@faker-js/faker": "8.3.1",
+    "@faker-js/faker": "8.4.1",
     "broccoli-asset-rev": "3.0.0",
     "ember-cli": "5.5.0",
     "ember-cli-clean-css": "3.0.0",
@@ -57,7 +58,7 @@
     "ember-load-initializers": "2.1.2",
     "ember-qunit": "8.0.2",
     "ember-resolver": "11.0.1",
-    "ember-source": "5.5.0",
+    "ember-source": "5.6.0",
     "ember-source-channel-url": "3.0.0",
     "ember-try": "3.0.0",
     "loader.js": "4.7.0",
@@ -66,13 +67,13 @@
     "qunit-dom": "3.0.0",
     "uikit": "3.17.11",
     "uuid": "9.0.1",
-    "webpack": "5.89.0",
-    "@projectcaluma/ember-testing": "12.8.0",
-    "@projectcaluma/ember-workflow": "12.8.0"
+    "webpack": "5.90.0",
+    "@projectcaluma/ember-testing": "12.10.0",
+    "@projectcaluma/ember-workflow": "12.10.0"
   },
   "peerDependencies": {
     "ember-source": "^4.0.0",
-    "@projectcaluma/ember-workflow": "^12.8.0"
+    "@projectcaluma/ember-workflow": "^12.10.0"
   },
   "dependenciesMeta": {
     "@projectcaluma/ember-core": {