@projectcaluma/ember-form-builder 9.0.5 → 10.0.0

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

@@ -1,20 +1,22 @@
 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";
+import saveActionButtonQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-action-button-question.graphql";
 import saveCalculatedFloatQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-calculated-float-question.graphql";
 import saveChoiceQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-choice-question.graphql";
 import saveDateQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-date-question.graphql";
@@ -57,8 +59,13 @@ export const TYPES = {
   StaticQuestion: saveStaticQuestionMutation,
   DateQuestion: saveDateQuestionMutation,
   CalculatedFloatQuestion: saveCalculatedFloatQuestionMutation,
+  ActionButtonQuestion: saveActionButtonQuestionMutation,
 };
 
+const ACTIONS = ["COMPLETE", "SKIP"];
+
+const COLORS = ["PRIMARY", "SECONDARY", "DEFAULT"];
+
 const TYPES_ANSWER = {
   StringAnswer: saveDefaultStringAnswerMutation,
   IntegerAnswer: saveDefaultIntegerAnswerMutation,
@@ -68,33 +75,17 @@ const TYPES_ANSWER = {
   TableAnswer: saveDefaultTableAnswerMutation,
 };
 
-export default Component.extend({
-  validations,
-
-  notification: service(),
-  intl: service(),
-  calumaOptions: service(),
-
-  apollo: queryManager(),
-
-  linkSlug: true,
-
-  possibleTypes: computed(function () {
-    return Object.keys(TYPES).map((value) => ({
-      value,
-      label: this.intl.t(`caluma.form-builder.question.types.${value}`),
-    }));
-  }),
+export default class CfbFormEditorQuestion extends Component {
+  @service notification;
+  @service intl;
+  @service calumaOptions;
+  @queryManager apollo;
 
-  async didReceiveAttrs() {
-    this._super();
-    await this.data.perform();
-    await this.availableForms.perform();
-    await this.availableDataSources.perform();
-  },
+  @tracked linkSlug = true;
 
-  data: task(function* () {
-    if (!this.slug) {
+  @restartableTask
+  *data() {
+    if (!this.args.slug) {
       return A([
         {
           node: {
@@ -116,6 +107,10 @@ export default Component.extend({
             subForm: {},
             meta: {},
             dataSource: "",
+            // action button
+            action: ACTIONS[0],
+            color: COLORS[0],
+            validateOnEnter: false,
             __typename: Object.keys(TYPES)[0],
           },
         },
@@ -125,14 +120,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 +143,45 @@ 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}`),
+    }));
+  }
+
+  get possibleActions() {
+    return ACTIONS.map((value) => ({
+      value,
+      label: this.intl.t(`caluma.form-builder.question.actions.${value}`),
+    }));
+  }
 
-  availableOverrides: computed("changeset.__typename", function () {
+  get possibleColors() {
+    return COLORS.map((value) => ({
+      value,
+      label: this.intl.t(`caluma.form-builder.question.colors.${value}`),
+    }));
+  }
+
+  get availableOverrides() {
     const type = this.changeset.get("__typename");
     const overrides = this.calumaOptions
       .getComponentOverrides()
@@ -162,54 +193,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 +222,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 +234,7 @@ export default Component.extend({
     }
 
     return input;
-  },
+  }
 
   _getIntegerQuestionInput(changeset) {
     return {
@@ -240,7 +242,7 @@ export default Component.extend({
       maxValue: parseInt(changeset.get("integerMaxValue")),
       placeholder: changeset.get("placeholder"),
     };
-  },
+  }
 
   _getFloatQuestionInput(changeset) {
     return {
@@ -248,7 +250,7 @@ export default Component.extend({
       maxValue: parseFloat(changeset.get("floatMaxValue")),
       placeholder: changeset.get("placeholder"),
     };
-  },
+  }
 
   _getTextQuestionInput(changeset) {
     return {
@@ -256,7 +258,7 @@ export default Component.extend({
       maxLength: parseInt(changeset.get("maxLength")),
       placeholder: changeset.get("placeholder"),
     };
-  },
+  }
 
   _getTextareaQuestionInput(changeset) {
     return {
@@ -264,59 +266,68 @@ 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"),
     };
-  },
+  }
+
+  _getActionButtonQuestionInput(changeset) {
+    return {
+      action: changeset.get("action"),
+      color: changeset.get("color"),
+      validateOnEnter: Boolean(changeset.get("validateOnEnter")),
+    };
+  }
 
-  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 +336,10 @@ export default Component.extend({
         });
       })
     );
-  }),
+  }
 
-  saveDefaultAnswer: task(function* (question, changeset) {
+  @task
+  *saveDefaultAnswer(question, changeset) {
     if (!changeset.get("defaultAnswer")) {
       return;
     }
@@ -357,9 +369,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 +388,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 +406,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 +414,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 +440,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/addon/gql/mutations/add-form-question.graphql

@@ -1,5 +1,5 @@
-# import * from '@projectcaluma/ember-form-builder/gql/fragments/form-info.graphql'
-# import * from '@projectcaluma/ember-form-builder/gql/fragments/question-info.graphql'
+#import FormInfo from '../fragments/form-info.graphql'
+#import QuestionInfo from '../fragments/question-info.graphql'
 
 mutation AddFormQuestion($input: AddFormQuestionInput!, $search: String) {
   addFormQuestion(input: $input) {

package/addon/gql/mutations/remove-form-question.graphql

@@ -1,5 +1,5 @@
-# import * from '@projectcaluma/ember-form-builder/gql/fragments/form-info.graphql'
-# import * from '@projectcaluma/ember-form-builder/gql/fragments/question-info.graphql'
+#import FormInfo from '../fragments/form-info.graphql'
+#import QuestionInfo from '../fragments/question-info.graphql'
 
 mutation RemoveFormQuestion($input: RemoveFormQuestionInput!, $search: String) {
   removeFormQuestion(input: $input) {

package/addon/gql/mutations/reorder-form-questions.graphql

@@ -1,5 +1,5 @@
-# import * from '@projectcaluma/ember-form-builder/gql/fragments/form-info.graphql'
-# import * from '@projectcaluma/ember-form-builder/gql/fragments/question-info.graphql'
+#import FormInfo from '../fragments/form-info.graphql'
+#import QuestionInfo from '../fragments/question-info.graphql'
 
 mutation ReorderFormQuestions(
   $input: ReorderFormQuestionsInput!

package/addon/gql/mutations/save-action-button-question.graphql

@@ -0,0 +1,15 @@
+#import QuestionInfo from '../fragments/question-info.graphql'
+
+mutation SaveActionButtonQuestion($input: SaveActionButtonQuestionInput!) {
+  saveActionButtonQuestion(input: $input) {
+    question {
+      ...QuestionInfo
+      ... on ActionButtonQuestion {
+        action
+        color
+        validateOnEnter
+      }
+    }
+    clientMutationId
+  }
+}

package/addon/gql/mutations/save-calculated-float-question.graphql

@@ -1,4 +1,4 @@
-# import * from '@projectcaluma/ember-form-builder/gql/fragments/question-info.graphql'
+#import QuestionInfo from '../fragments/question-info.graphql'
 
 mutation SaveCalculatedFloatQuestion(
   $input: SaveCalculatedFloatQuestionInput!

package/addon/gql/mutations/save-choice-question.graphql

@@ -1,4 +1,4 @@
-# import * from '@projectcaluma/ember-form-builder/gql/fragments/question-info.graphql'
+#import QuestionInfo from '../fragments/question-info.graphql'
 
 mutation SaveChoiceQuestion($input: SaveChoiceQuestionInput!) {
   saveChoiceQuestion(input: $input) {

package/addon/gql/mutations/save-date-question.graphql

@@ -1,4 +1,4 @@
-# import * from '@projectcaluma/ember-form-builder/gql/fragments/question-info.graphql'
+#import QuestionInfo from '../fragments/question-info.graphql'
 
 mutation SaveDateQuestion($input: SaveDateQuestionInput!) {
   saveDateQuestion(input: $input) {