@projectcaluma/ember-form-builder 9.0.5 → 9.0.6

package/addon/components/cfb-form-editor/question.js

@@ -1,17 +1,18 @@
 import { getOwner } from "@ember/application";
 import { A } from "@ember/array";
-import Component from "@ember/component";
-import { computed, get } from "@ember/object";
-import { reads } from "@ember/object/computed";
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { camelize } from "@ember/string";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
 import Changeset from "ember-changeset";
 import lookupValidator from "ember-changeset-validations";
 import { optional } from "ember-composable-helpers/helpers/optional";
-import { task, timeout } from "ember-concurrency";
+import { dropTask, restartableTask, task, timeout } from "ember-concurrency";
 import { all } from "rsvp";
 
+import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-type";
 import slugify from "@projectcaluma/ember-core/utils/slugify";
 import addFormQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/add-form-question.graphql";
 import removeDefaultAnswerMutation from "@projectcaluma/ember-form-builder/gql/mutations/remove-default-answer.graphql";
@@ -68,33 +69,17 @@ const TYPES_ANSWER = {
   TableAnswer: saveDefaultTableAnswerMutation,
 };
 
-export default Component.extend({
-  validations,
+export default class CfbFormEditorQuestion extends Component {
+  @service notification;
+  @service intl;
+  @service calumaOptions;
+  @queryManager apollo;
 
-  notification: service(),
-  intl: service(),
-  calumaOptions: service(),
+  @tracked linkSlug = true;
 
-  apollo: queryManager(),
-
-  linkSlug: true,
-
-  possibleTypes: computed(function () {
-    return Object.keys(TYPES).map((value) => ({
-      value,
-      label: this.intl.t(`caluma.form-builder.question.types.${value}`),
-    }));
-  }),
-
-  async didReceiveAttrs() {
-    this._super();
-    await this.data.perform();
-    await this.availableForms.perform();
-    await this.availableDataSources.perform();
-  },
-
-  data: task(function* () {
-    if (!this.slug) {
+  @restartableTask
+  *data() {
+    if (!this.args.slug) {
       return A([
         {
           node: {
@@ -125,14 +110,15 @@ export default Component.extend({
     return yield this.apollo.watchQuery(
       {
         query: formEditorQuestionQuery,
-        variables: { slug: this.slug },
+        variables: { slug: this.args.slug },
         fetchPolicy: "cache-and-network",
       },
       "allQuestions.edges"
     );
-  }).restartable(),
+  }
 
-  availableForms: task(function* () {
+  @restartableTask
+  *availableForms() {
     const forms = yield this.apollo.watchQuery(
       {
         query: formListQuery,
@@ -147,10 +133,31 @@ export default Component.extend({
     if (!forms.map) {
       return [];
     }
-    return forms.mapBy("node").filter((form) => form.slug !== this.form);
-  }).restartable(),
+    return forms.mapBy("node").filter((form) => form.slug !== this.args.form);
+  }
+
+  @restartableTask
+  *availableDataSources() {
+    const dataSources = yield this.apollo.watchQuery(
+      { query: allDataSourcesQuery, fetchPolicy: "cache-and-network" },
+      "allDataSources.edges"
+    );
+    return dataSources.map((edge) => {
+      return {
+        ...edge.node,
+        __typename: undefined,
+      };
+    });
+  }
+
+  get possibleTypes() {
+    return Object.keys(TYPES).map((value) => ({
+      value,
+      label: this.intl.t(`caluma.form-builder.question.types.${value}`),
+    }));
+  }
 
-  availableOverrides: computed("changeset.__typename", function () {
+  get availableOverrides() {
     const type = this.changeset.get("__typename");
     const overrides = this.calumaOptions
       .getComponentOverrides()
@@ -162,54 +169,25 @@ export default Component.extend({
       { label: this.intl.t("caluma.form.power-select.null"), component: "" },
       ...overrides,
     ];
-  }),
+  }
 
-  availableDataSources: task(function* () {
-    const dataSources = yield this.apollo.watchQuery(
-      { query: allDataSourcesQuery, fetchPolicy: "cache-and-network" },
-      "allDataSources.edges"
-    );
-    return dataSources.map((edge) => {
-      return {
-        ...edge.node,
-        __typename: undefined,
-      };
-    });
-  }).restartable(),
+  get model() {
+    return this.data.lastSuccessful?.value?.firstObject?.node;
+  }
 
-  model: reads("data.lastSuccessful.value.firstObject.node"),
+  get changeset() {
+    return new Changeset(this.model, lookupValidator(validations), validations);
+  }
 
-  changeset: computed("model", function () {
-    return new Changeset(this.model, lookupValidator(validations));
-  }),
-
-  prefix: computed("calumaOptions.namespace", function () {
+  get prefix() {
     return this.calumaOptions.namespace
       ? `${this.calumaOptions.namespace}-`
       : "";
-  }),
-
-  requiredIrrelevant: computed("changeset.__typename", function () {
-    return ["StaticQuestion", "CalculatedFloatQuestion"].includes(
-      this.changeset.__typename
-    );
-  }),
-
-  requiredToggleVisible: computed(
-    "changeset.isRequired",
-    "requiredIrrelevant",
-    function () {
-      // the required toggle is only shown if the JEXL is a simple boolean and
-      // it's not irrelevant since it's not a question that takes any input
-      return (
-        ["true", "false"].includes(this.changeset.isRequired) &&
-        !this.requiredIrrelevant
-      );
-    }
-  ),
+  }
 
   getInput(changeset) {
-    const slug = ((!this.slug && this.prefix) || "") + changeset.get("slug");
+    const slug =
+      ((!this.args.slug && this.prefix) || "") + changeset.get("slug");
 
     const input = {
       slug,
@@ -220,7 +198,7 @@ export default Component.extend({
       isArchived: changeset.get("isArchived"),
     };
 
-    if (!this.requiredIrrelevant) {
+    if (!hasQuestionType(changeset, "static", "calculated-float")) {
       Object.assign(input, {
         isRequired: changeset.get("isRequired"),
       });
@@ -232,7 +210,7 @@ export default Component.extend({
     }
 
     return input;
-  },
+  }
 
   _getIntegerQuestionInput(changeset) {
     return {
@@ -240,7 +218,7 @@ export default Component.extend({
       maxValue: parseInt(changeset.get("integerMaxValue")),
       placeholder: changeset.get("placeholder"),
     };
-  },
+  }
 
   _getFloatQuestionInput(changeset) {
     return {
@@ -248,7 +226,7 @@ export default Component.extend({
       maxValue: parseFloat(changeset.get("floatMaxValue")),
       placeholder: changeset.get("placeholder"),
     };
-  },
+  }
 
   _getTextQuestionInput(changeset) {
     return {
@@ -256,7 +234,7 @@ export default Component.extend({
       maxLength: parseInt(changeset.get("maxLength")),
       placeholder: changeset.get("placeholder"),
     };
-  },
+  }
 
   _getTextareaQuestionInput(changeset) {
     return {
@@ -264,59 +242,60 @@ export default Component.extend({
       maxLength: parseInt(changeset.get("maxLength")),
       placeholder: changeset.get("placeholder"),
     };
-  },
+  }
 
   _getMultipleChoiceQuestionInput(changeset) {
     return {
       options: changeset.get("options.edges").map(({ node: { slug } }) => slug),
     };
-  },
+  }
 
   _getChoiceQuestionInput(changeset) {
     return {
       options: changeset.get("options.edges").map(({ node: { slug } }) => slug),
     };
-  },
+  }
 
   _getDynamicMultipleChoiceQuestionInput(changeset) {
     return {
       dataSource: changeset.get("dataSource"),
     };
-  },
+  }
 
   _getDynamicChoiceQuestionInput(changeset) {
     return {
       dataSource: changeset.get("dataSource"),
     };
-  },
+  }
 
   _getTableQuestionInput(changeset) {
     return {
       rowForm: changeset.get("rowForm.slug"),
     };
-  },
+  }
 
   _getFormQuestionInput(changeset) {
     return {
       subForm: changeset.get("subForm.slug"),
     };
-  },
+  }
 
   _getStaticQuestionInput(changeset) {
     return {
       staticContent: changeset.get("staticContent"),
     };
-  },
+  }
 
   _getCalculatedFloatQuestionInput(changeset) {
     return {
       calcExpression: changeset.get("calcExpression"),
     };
-  },
+  }
 
-  saveOptions: task(function* (changeset) {
+  @task
+  *saveOptions(changeset) {
     yield all(
-      (get(changeset, "options.edges") || []).map(async ({ node: option }) => {
+      (changeset.get("options.edges") || []).map(async ({ node: option }) => {
         const { label, slug, isArchived } = option;
 
         await this.apollo.mutate({
@@ -325,9 +304,10 @@ export default Component.extend({
         });
       })
     );
-  }),
+  }
 
-  saveDefaultAnswer: task(function* (question, changeset) {
+  @task
+  *saveDefaultAnswer(question, changeset) {
     if (!changeset.get("defaultAnswer")) {
       return;
     }
@@ -357,9 +337,10 @@ export default Component.extend({
     }
 
     yield this.apollo.mutate({ mutation, variables: { input } });
-  }),
+  }
 
-  submit: task(function* (changeset) {
+  @dropTask
+  *submit(changeset) {
     try {
       yield this.saveOptions.perform(changeset);
 
@@ -375,14 +356,14 @@ export default Component.extend({
 
       yield this.saveDefaultAnswer.perform(question, changeset);
 
-      if (!this.slug) {
+      if (!this.args.slug) {
         // This is a new question which must be added to the form after creating it
         yield this.apollo.mutate({
           mutation: addFormQuestionMutation,
           variables: {
             input: {
               question: question.slug,
-              form: this.form,
+              form: this.args.form,
             },
             search: "",
           },
@@ -393,7 +374,7 @@ export default Component.extend({
         this.intl.t("caluma.form-builder.notification.question.save.success")
       );
 
-      optional([this.get("on-after-submit")])(question);
+      optional([this.args["on-after-submit"]])(question);
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error(e);
@@ -401,9 +382,10 @@ export default Component.extend({
         this.intl.t("caluma.form-builder.notification.question.save.error")
       );
     }
-  }).drop(),
+  }
 
-  validateSlug: task(function* (slug, changeset) {
+  @restartableTask
+  *validateSlug(slug, changeset) {
     /* istanbul ignore next */
     if (
       getOwner(this).resolveRegistration("config:environment").environment !==
@@ -426,46 +408,56 @@ export default Component.extend({
         this.intl.t("caluma.form-builder.validations.question.slug")
       );
     }
-  }).restartable(),
-
-  actions: {
-    updateLabel(value, changeset) {
-      changeset.set("label", value);
-
-      if (!this.slug && this.linkSlug) {
-        const slug = slugify(value, { locale: this.intl.primaryLocale });
-
-        changeset.set("slug", slug);
-
-        this.validateSlug.perform(this.prefix + slug, changeset);
-      }
-    },
+  }
 
-    updateSlug(value, changeset) {
-      changeset.set("slug", value);
-      this.set("linkSlug", false);
-
-      this.validateSlug.perform(this.prefix + value, changeset);
-    },
-
-    /*
-     * This function adds the selected slugs to the columns to display
-     * list if it isnt present, otherwise it will remove the slug.
-     */
-    toggleColumnToDisplay(value) {
-      const displayed = new Set(this.changeset.get("meta.columnsToDisplay"));
+  @action
+  async fetchData() {
+    await this.data.perform();
+    await this.availableForms.perform();
+    await this.availableDataSources.perform();
+  }
 
-      displayed.delete(value) || displayed.add(value);
+  @action
+  updateLabel(value, changeset) {
+    changeset.set("label", value);
 
-      this.changeset.set("meta.columnsToDisplay", [...displayed]);
-    },
+    if (!this.args.slug && this.linkSlug) {
+      const slug = slugify(value, { locale: this.intl.primaryLocale });
 
-    updateSubForm(value, changeset) {
-      changeset.set("subForm.slug", value.slug);
-    },
+      changeset.set("slug", slug);
 
-    updateRowForm(value, changeset) {
-      changeset.set("rowForm.slug", value.slug);
-    },
-  },
-});
+      this.validateSlug.perform(this.prefix + slug, changeset);
+    }
+  }
+
+  @action
+  updateSlug(value, changeset) {
+    changeset.set("slug", value);
+    this.linkSlug = false;
+
+    this.validateSlug.perform(this.prefix + value, changeset);
+  }
+
+  /*
+   * This function adds the selected slugs to the columns to display
+   * list if it isnt present, otherwise it will remove the slug.
+   */
+  @action
+  toggleColumnToDisplay(value, changeset) {
+    const displayed = new Set(changeset.get("meta.columnsToDisplay"));
+
+    displayed.delete(value) || displayed.add(value);
+
+    changeset.set("meta.columnsToDisplay", [...displayed]);
+  }
+
+  @action
+  updateSubForm(value, changeset) {
+    changeset.set("subForm.slug", value.slug);
+  }
+
+  @action
+  updateRowForm(value, changeset) {
+    changeset.set("rowForm.slug", value.slug);
+  }
+}

package/addon/components/cfb-form-list.hbs

@@ -39,7 +39,7 @@
   </form>
   {{#if this.formsQuery.isLoading}}
     <div class="uk-height-small uk-flex uk-flex-center uk-flex-middle">
-      {{uk-spinner ratio=2}}
+      <UkSpinner ratio="2" />
     </div>
   {{else if this.formsQuery.value.length}}
     <ul data-test-form-list class="uk-list uk-list-divider uk-list-large">

package/addon/components/cfb-jexl-boolean-toggle-switch.hbs

@@ -1,10 +1,12 @@
-{{cfb-toggle-switch
-  labelComponent=labelComponent
-  hintComponent=hintComponent
-  errorComponent=errorComponent
-  value=boolValue
-  size=size
-  name=name
-  disabled=disabled
-  update=(action "toggle")
-}}
+<CfbToggleSwitch
+  @labelComponent={{@labelComponent}}
+  @hintComponent={{@hintComponent}}
+  @errorComponent={{@errorComponent}}
+  @disabled={{@disabled}}
+  @size={{@size}}
+  @name={{@name}}
+  @value={{this.boolValue}}
+  @update={{this.toggle}}
+  @noMargin={{true}}
+  class="uk-flex uk-flex-middle uk-height-1-1"
+/>

package/addon/components/cfb-jexl-boolean-toggle-switch.js

@@ -1,12 +1,13 @@
-import { computed } from "@ember/object";
-import RenderComponent from "ember-validated-form/components/validated-input/-themes/uikit/render";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 
-export default RenderComponent.extend({
-  boolValue: computed.equal("value", "true"),
+export default class CfbJexlBooleanToggleSwitch extends Component {
+  get boolValue() {
+    return this.args.value === "true";
+  }
 
-  actions: {
-    toggle(boolValue) {
-      this.update(String(boolValue));
-    },
-  },
-});
+  @action
+  toggle(boolValue) {
+    this.args.update(String(boolValue));
+  }
+}

package/addon/components/cfb-label.hbs

@@ -1,4 +1,12 @@
-{{label}}
-{{#unless required}}<span class="uk-text-muted uk-text-lowercase">({{t
-      "caluma.form-builder.global.optional"
-    }})</span>{{/unless}}
+<label
+  class="uk-form-label uk-flex uk-flex-between"
+  for={{@inputId}}
+  ...attributes
+>
+  {{yield}}{{@label}}
+  {{#unless @required}}
+    <span class="uk-text-muted uk-text-lowercase">
+      ({{t "caluma.form-builder.global.optional"}})
+    </span>
+  {{/unless}}
+</label>

package/addon/components/cfb-toggle-switch.hbs

@@ -1,14 +1,16 @@
-<@labelComponent />
+<div class="uk-flex uk-flex-column {{unless @noMargin "uk-margin"}}">
+  <@labelComponent />
 
-<div class="uk-form-controls">
-  <UkToggleSwitch
-    @value={{@value}}
-    @size={{@size}}
-    @name={{@name}}
-    @disabled={{@disabled}}
-    @on-toggle={{@update}}
-  />
-</div>
+  <div class="uk-form-controls" ...attributes>
+    <UkToggleSwitch
+      @value={{@value}}
+      @size={{@size}}
+      @name={{@name}}
+      @disabled={{@disabled}}
+      @on-toggle={{@update}}
+    />
+  </div>
 
-<@hintComponent />
-<@errorComponent />
+  <@hintComponent />
+  <@errorComponent />
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form-builder",
-  "version": "9.0.5",
+  "version": "9.0.6",
   "description": "Ember engine for building Caluma forms.",
   "keywords": [
     "ember-addon",
@@ -18,17 +18,17 @@
     "@ember/render-modifiers": "^2.0.0",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
-    "@projectcaluma/ember-core": "9.0.3",
-    "@projectcaluma/ember-form": "9.1.1",
+    "@projectcaluma/ember-core": "9.1.0",
+    "@projectcaluma/ember-form": "9.1.2",
     "codejar": "^3.5.0",
     "ember-apollo-client": "^3.2.0",
-    "ember-auto-import": "^2.2.0",
+    "ember-auto-import": "^2.2.3",
     "ember-changeset": "^3.15.0",
     "ember-changeset-validations": "^3.16.0",
     "ember-cli-babel": "^7.26.6",
-    "ember-cli-htmlbars": "^5.7.1",
+    "ember-cli-htmlbars": "^6.0.0",
     "ember-composable-helpers": "^4.5.0",
-    "ember-concurrency": "^2.1.2",
+    "ember-concurrency": "^2.2.0",
     "ember-concurrency-decorators": "^2.0.3",
     "ember-engines-router-service": "^0.3.0",
     "ember-fetch": "^8.0.4",
@@ -37,8 +37,8 @@
     "ember-power-select": "^4.1.6",
     "ember-test-selectors": "^6.0.0",
     "ember-uikit": "^4.0.0",
-    "ember-validated-form": "^3.0.3",
-    "graphql": "^15.6.0",
+    "ember-validated-form": "^5.0.0",
+    "graphql": "^15.6.1",
     "graphql-tag": "^2.12.5",
     "jexl": "^2.3.0",
     "moment": "^2.29.1",
@@ -46,11 +46,11 @@
   },
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
-    "@ember/test-helpers": "2.5.0",
-    "@embroider/test-setup": "0.45.0",
+    "@ember/test-helpers": "2.6.0",
+    "@embroider/test-setup": "0.47.1",
     "@projectcaluma/ember-testing": "9.0.0",
     "broccoli-asset-rev": "3.0.0",
-    "ember-cli": "3.28.1",
+    "ember-cli": "3.28.3",
     "ember-cli-code-coverage": "1.0.3",
     "ember-cli-dependency-checker": "3.2.0",
     "ember-cli-inject-live-reload": "2.1.0",
@@ -59,13 +59,13 @@
     "ember-cli-terser": "4.0.2",
     "ember-data": "3.28.3",
     "ember-disable-prototype-extensions": "1.1.3",
-    "ember-engines": "0.8.19",
+    "ember-engines": "0.8.20",
     "ember-export-application-global": "2.0.1",
     "ember-load-initializers": "2.1.2",
     "ember-maybe-import-regenerator": "1.0.0",
-    "ember-qunit": "5.1.4",
+    "ember-qunit": "5.1.5",
     "ember-resolver": "8.0.3",
-    "ember-source": "3.28.1",
+    "ember-source": "3.28.6",
     "ember-source-channel-url": "3.0.0",
     "ember-try": "1.4.0",
     "faker": "5.5.3",
@@ -73,7 +73,7 @@
     "npm-run-all": "4.1.5",
     "qunit": "2.17.2",
     "qunit-dom": "2.0.0",
-    "webpack": "5.58.0"
+    "webpack": "5.61.0"
   },
   "engines": {
     "node": "10.* || >= 12"

package/translations/de.yaml

@@ -75,8 +75,8 @@ caluma:
       choose: "-- bitte wählen --"
       search-placeholder: "Hier tippen um zu suchen"
       search-empty: "Keine Formulare gefunden"
-      columnsToDisplay: "Spalten zur Anzeige auswählen"
-      calcExpression: "Berechnungsformel"
+      columnsToDisplay: "Spalten zur Anzeige im Formular"
+      calcExpression: "Berechnungsformel (JEXL)"
 
       new: "Neue Frage"
 

package/translations/en.yaml

@@ -75,8 +75,8 @@ caluma:
       choose: "-- please choose --"
       search-placeholder: "Type here to search forms"
       search-empty: "Search didn't match any forms"
-      columnsToDisplay: "Select columns to be shown"
-      calcExpression: "Calculation formula"
+      columnsToDisplay: "Columns to be shown in the form"
+      calcExpression: "Calculation formula (JEXL)"
 
       new: "New question"
 

package/addon/components/cfb-float-input/input.js

@@ -1,12 +0,0 @@
-import InputComponent from "ember-validated-form/components/validated-input/types/-themes/uikit/input";
-
-export default InputComponent.extend({
-  init(...args) {
-    this._super(...args);
-
-    this.set("type", "number");
-  },
-
-  attributeBindings: ["step"],
-  step: "any",
-});