@projectcaluma/ember-form-builder 9.0.2 → 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(),
-
-  model: reads("data.lastSuccessful.value.firstObject.node"),
+  get model() {
+    return this.data.lastSuccessful?.value?.firstObject?.node;
+  }
 
-  changeset: computed("model", function () {
-    return new Changeset(this.model, lookupValidator(validations));
-  }),
+  get changeset() {
+    return new Changeset(this.model, lookupValidator(validations), 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,21 +304,21 @@ export default Component.extend({
         });
       })
     );
-  }),
-
-  saveDefaultAnswer: task(function* (question, changeset) {
-    const answer = changeset.get("defaultAnswer");
+  }
 
-    if (!answer) {
+  @task
+  *saveDefaultAnswer(question, changeset) {
+    if (!changeset.get("defaultAnswer")) {
       return;
     }
 
-    const valueKey = camelize(answer.__typename.replace(/Answer$/, "Value"));
-    const value = answer[valueKey];
+    const typename = changeset.get("defaultAnswer.__typename");
+    const valueKey = camelize(typename.replace(/Answer$/, "Value"));
+    const value = changeset.get(`defaultAnswer.${valueKey}`);
 
     // We need to map the UUIDs of the document's if the user didn't touch
     // the default answer and thus never triggered the onUpdate action.
-    if (answer.__typename === "TableAnswer" && typeof value[0] !== "string") {
+    if (typename === "TableAnswer" && typeof value[0] !== "string") {
       return;
     }
 
@@ -348,7 +327,7 @@ export default Component.extend({
     // Save or remove depending on the value.
     const mutation = !isAddMutation
       ? removeDefaultAnswerMutation
-      : TYPES_ANSWER[answer.__typename];
+      : TYPES_ANSWER[typename];
 
     const input = { question: question.slug };
 
@@ -358,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);
 
@@ -376,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: "",
           },
@@ -394,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);
@@ -402,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 !==
@@ -427,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-navigation.js

@@ -7,7 +7,7 @@ export default class CfbNavigationComponent extends Component {
   @service router;
 
   get _routes() {
-    const currentRoute = this.router.currentRouteName;
+    const currentRoute = `${this.router._mountPoint}.${this.router.currentRouteName}`;
     if (!currentRoute) return [];
 
     const routeParts = currentRoute.split(".");

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/addon/controllers/edit/questions/edit.js

@@ -1,9 +1,12 @@
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 
 export default class EditQuestionsEditController extends Controller {
+  @service router;
+
   @action
   afterSubmit() {
-    this.transitionToRoute("edit");
+    this.router.transitionTo("edit");
   }
 }

package/addon/controllers/edit/questions/new.js

@@ -1,9 +1,12 @@
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 
 export default class EditQuestionsNewController extends Controller {
+  @service router;
+
   @action
   afterSubmit({ slug }) {
-    this.transitionToRoute("edit.questions.edit", slug);
+    this.router.transitionTo("edit.questions.edit", slug);
   }
 }

package/addon/controllers/edit.js

@@ -7,12 +7,12 @@ export default class EditController extends Controller {
 
   @action
   createQuestion() {
-    this.transitionToRoute("edit.questions.new");
+    this.router.transitionTo("edit.questions.new");
   }
 
   @action
   editQuestion({ slug }) {
-    this.transitionToRoute("edit.questions.edit", slug);
+    this.router.transitionTo("edit.questions.edit", slug);
   }
 
   @action
@@ -21,12 +21,12 @@ export default class EditController extends Controller {
       /edit\.questions\.edit$/.test(this.router.currentRouteName) &&
       new RegExp(`/${slug}$`).test(this.router.currentURL)
     ) {
-      this.transitionToRoute("edit.general");
+      this.router.transitionTo("edit.general");
     }
   }
 
   @action
   clickForm({ slug }) {
-    this.transitionToRoute("edit", slug);
+    this.router.transitionTo("edit", slug);
   }
 }

package/addon/controllers/index.js

@@ -1,14 +1,17 @@
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 
 export default class IndexController extends Controller {
+  @service router;
+
   @action
   newForm() {
-    this.transitionToRoute("new");
+    this.router.transitionTo("new");
   }
 
   @action
   editForm({ slug }) {
-    this.transitionToRoute("edit", slug);
+    this.router.transitionTo("edit", slug);
   }
 }