@projectcaluma/ember-form-builder 10.0.2 → 11.0.0-beta.10

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

@@ -11,7 +11,6 @@
     >
       {{#if (and f.model.isDirty @slug)}}
         <div class="uk-alert-warning uk-animation-fade" uk-alert>
-          <a href="#" class="uk-alert-close" uk-close></a>
           <div uk-grid class="uk-grid-small">
             <div class="uk-width-auto uk-flex uk-flex-middle">
               <UkIcon @icon="warning" @ratio={{1.2}} />
@@ -141,6 +140,7 @@
           @label={{t "caluma.form-builder.question.confirmationText"}}
           @name="infoText"
           @type="textarea"
+          {{autoresize mode="height"}}
         />
       {{else}}
         <div class="uk-margin">
@@ -208,13 +208,13 @@
         />
 
         <f.input
-          @name="meta.formatValidators"
+          @name="formatValidators"
           @label={{t "caluma.form-builder.question.formatValidators"}}
-          @placeholder={{t "caluma.form-builder.question.choose"}}
+          @placeholder={{t "caluma.form-builder.question.no-selection"}}
           @required={{false}}
           @renderComponent={{component "cfb-form-editor/question/validation"}}
-          @on-update={{changeset-set f.model "meta.formatValidators"}}
-          @value={{changeset-get f.model "meta.formatValidators"}}
+          @on-update={{changeset-set f.model "formatValidators"}}
+          @value={{changeset-get f.model "formatValidators"}}
         />
       {{/if}}
 
@@ -296,10 +296,10 @@
           @type="select"
           @required={{true}}
           @label={{t "caluma.form-builder.question.dataSource"}}
-          @options={{or this.availableDataSources.lastSuccessful.value array}}
+          @options={{or this.availableDataSources.lastSuccessful.value (array)}}
           @optionTargetPath="name"
           @optionLabelPath="info"
-          @includeBlank={{t "caluma.form-builder.question.choose"}}
+          @prompt={{t "caluma.form-builder.question.no-selection"}}
         />
       {{/if}}
 
@@ -329,9 +329,9 @@
             as |fi|
           >
             <PowerSelect
-              @options={{or this.availableForms.lastSuccessful.value array}}
+              @options={{or this.availableForms.lastSuccessful.value (array)}}
               @selected={{fi.value}}
-              @placeholder={{t "caluma.form-builder.question.choose"}}
+              @placeholder={{t "caluma.form-builder.question.no-selection"}}
               @onBlur={{fi.setDirty}}
               @onChange={{fi.update}}
               @searchField="slug"
@@ -342,6 +342,7 @@
               @noMatchesMessage={{t
                 "caluma.form-builder.question.search-empty"
               }}
+              @renderInPlace={{true}}
               as |form|
             >
               <span
@@ -403,9 +404,9 @@
           as |fi|
         >
           <PowerSelect
-            @options={{or this.availableForms.lastSuccessful.value array}}
+            @options={{or this.availableForms.lastSuccessful.value (array)}}
             @selected={{fi.value}}
-            @placeholder={{t "caluma.form-builder.question.choose"}}
+            @placeholder={{t "caluma.form-builder.question.no-selection"}}
             @onBlur={{fi.setDirty}}
             @onChange={{fi.update}}
             @searchField="slug"
@@ -414,6 +415,7 @@
               "caluma.form-builder.question.search-placeholder"
             }}
             @noMatchesMessage={{t "caluma.form-builder.question.search-empty"}}
+            @renderInPlace={{true}}
             as |form|
           >
             <span class="uk-width-auto uk-margin-small-right uk-text-truncate">
@@ -436,7 +438,7 @@
         @optionTargetPath="component"
         @optionLabelPath="label"
         @options={{this.availableOverrides}}
-        class="uk-flex uk-flex-between uk-flex-column"
+        @prompt={{t "caluma.form-builder.question.no-selection"}}
       />
 
       <f.input
@@ -444,12 +446,11 @@
         @label={{t "caluma.form-builder.question.isArchived"}}
         @required={{true}}
         @renderComponent={{component "cfb-toggle-switch" size="small"}}
-        class="uk-flex uk-flex-between uk-flex-column"
       />
 
       <UkButton
         @color="link"
-        @on-click={{toggle-action "showAdvanced" this}}
+        @onClick={{toggle-action "showAdvanced" this}}
         class="uk-flex uk-flex-middle uk-margin"
       >
         {{#if this.showAdvanced}}
@@ -467,7 +468,6 @@
             @required={{true}}
             @label={{t "caluma.form-builder.question.validateOnEnter"}}
             @renderComponent={{component "cfb-toggle-switch" size="small"}}
-            class="uk-flex uk-flex-between uk-flex-column"
           />
         {{/if}}
 
@@ -494,6 +494,14 @@
             />
           </div>
         {{/if}}
+
+        <div class="uk-margin">
+          <f.input
+            @label={{t "caluma.form-builder.question.meta"}}
+            @name="meta"
+            @renderComponent={{component "cfb-code-editor" language="json"}}
+          />
+        </div>
       {{/if}}
 
       <div class="uk-text-right">

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

@@ -1,16 +1,14 @@
-import { getOwner } from "@ember/application";
 import { A } from "@ember/array";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { camelize } from "@ember/string";
+import { macroCondition, isTesting } from "@embroider/macros";
 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 { 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";
@@ -107,6 +105,7 @@ export default class CfbFormEditorQuestion extends Component {
             subForm: {},
             meta: {},
             dataSource: "",
+            formatValidators: null,
             // action button
             action: ACTIONS[0],
             color: COLORS[0],
@@ -183,16 +182,10 @@ export default class CfbFormEditorQuestion extends Component {
 
   get availableOverrides() {
     const type = this.changeset.get("__typename");
-    const overrides = this.calumaOptions
-      .getComponentOverrides()
-      .filter((override) => {
-        return !override.types || override.types.includes(type);
-      });
 
-    return [
-      { label: this.intl.t("caluma.form.power-select.null"), component: "" },
-      ...overrides,
-    ];
+    return this.calumaOptions.getComponentOverrides().filter((override) => {
+      return !override.types || override.types.includes(type);
+    });
   }
 
   get model() {
@@ -213,16 +206,20 @@ export default class CfbFormEditorQuestion extends Component {
     const slug =
       ((!this.args.slug && this.prefix) || "") + changeset.get("slug");
 
+    const rawMeta = changeset.get("meta");
+
     const input = {
       slug,
       label: changeset.get("label"),
       isHidden: changeset.get("isHidden"),
       infoText: changeset.get("infoText"),
-      meta: JSON.stringify(changeset.get("meta").unwrap()),
+      meta: JSON.stringify(rawMeta?.unwrap?.() ?? rawMeta),
       isArchived: changeset.get("isArchived"),
     };
 
-    if (!hasQuestionType(changeset, "static", "calculated-float")) {
+    if (
+      !hasQuestionType(changeset, "static", "calculated-float", "action-button")
+    ) {
       Object.assign(input, {
         isRequired: changeset.get("isRequired"),
       });
@@ -257,6 +254,9 @@ export default class CfbFormEditorQuestion extends Component {
       minLength: parseInt(changeset.get("minLength")),
       maxLength: parseInt(changeset.get("maxLength")),
       placeholder: changeset.get("placeholder"),
+      formatValidators: changeset
+        .get("formatValidators")
+        ?.edges.map((edge) => edge.node.slug),
     };
   }
 
@@ -265,6 +265,9 @@ export default class CfbFormEditorQuestion extends Component {
       minLength: parseInt(changeset.get("minLength")),
       maxLength: parseInt(changeset.get("maxLength")),
       placeholder: changeset.get("placeholder"),
+      formatValidators: changeset
+        .get("formatValidators")
+        ?.edges.map((edge) => edge.node.slug),
     };
   }
 
@@ -326,7 +329,7 @@ export default class CfbFormEditorQuestion extends Component {
 
   @task
   *saveOptions(changeset) {
-    yield all(
+    yield Promise.all(
       (changeset.get("options.edges") || []).map(async ({ node: option }) => {
         const { label, slug, isArchived } = option;
 
@@ -406,7 +409,7 @@ export default class CfbFormEditorQuestion extends Component {
         this.intl.t("caluma.form-builder.notification.question.save.success")
       );
 
-      optional([this.args["on-after-submit"]])(question);
+      this.args.onAfterSubmit?.(question);
     } catch (e) {
       // eslint-disable-next-line no-console
       console.error(e);
@@ -419,10 +422,9 @@ export default class CfbFormEditorQuestion extends Component {
   @restartableTask
   *validateSlug(slug, changeset) {
     /* istanbul ignore next */
-    if (
-      getOwner(this).resolveRegistration("config:environment").environment !==
-      "test"
-    ) {
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
       yield timeout(500);
     }
 

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

@@ -12,11 +12,11 @@
       {{else}}
         <CfbFormEditor::QuestionList
           @form={{@slug}}
-          @on-edit-question={{@on-edit-question}}
-          @on-create-question={{@on-create-question}}
-          @on-after-add-question={{@on-after-add-question}}
-          @on-after-remove-question={{@on-after-remove-question}}
-          @on-click-form={{@on-click-form}}
+          @onEditQuestion={{@onEditQuestion}}
+          @onCreateQuestion={{@onCreateQuestion}}
+          @onAfterAddQuestion={{@onAfterAddQuestion}}
+          @onAfterRemoveQuestion={{@onAfterRemoveQuestion}}
+          @onClickForm={{@onClickForm}}
         />
       {{/if}}
     </div>

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

@@ -12,7 +12,7 @@
       type="button"
       uk-icon="pencil"
       class="uk-icon-button"
-      {{on "click" (fn (optional @on-edit-form) @item)}}
+      {{on "click" (fn (optional @onEditForm) @item)}}
     >
     </button>
   </span>

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

@@ -1,76 +1,73 @@
-<div
-  ...attributes
-  {{did-insert (perform this.fetchForms)}}
-  {{did-update (perform this.fetchForms)}}
->
-  <div class="uk-flex uk-flex-between">
-    <div class="uk-button-group">
-      {{#each (array "active" "archived" "all") as |category|}}
-        <UkButton
-          data-test-filter={{category}}
-          @on-click={{fn this.setFilter "category" category}}
-          @label={{t (concat "caluma.form-builder.form." category)}}
-          @class={{if (eq this.category category) "uk-button-primary" ""}}
-        />
-      {{/each}}
-    </div>
-    <div>
+<div class="uk-flex uk-flex-between">
+  <div class="uk-button-group">
+    {{#each this.categories as |category|}}
       <UkButton
-        data-test-new-form
-        @on-click={{optional @on-new-form}}
-        @label={{t "caluma.form-builder.form.new"}}
+        data-test-filter={{category.value}}
+        @onClick={{fn @onUpdateCategory category.value}}
+        @label={{category.label}}
+        @color={{if (eq @category category.value) "primary"}}
       />
-    </div>
+    {{/each}}
   </div>
-  <form
-    class="uk-search uk-search-default uk-width-1-1 uk-margin-small-top"
-    {{on "submit" this.submit}}
-  >
-    <span class="uk-search-icon-flip" uk-search-icon></span>
-    <input
-      data-test-form-search-input
-      class="uk-search-input"
-      type="search"
-      placeholder="{{t "caluma.form-builder.global.search"}}..."
-      aria-label="{{t "caluma.form-builder.global.search"}}"
-      value={{this.search}}
-      {{on "input" (fn this.setFilter "search")}}
+  <div>
+    <UkButton
+      data-test-new-form
+      @onClick={{optional @onNewForm}}
+      @label={{t "caluma.form-builder.form.new"}}
     />
-  </form>
-  {{#if this.formsQuery.isLoading}}
-    <div class="uk-height-small uk-flex uk-flex-center uk-flex-middle">
-      <UkSpinner ratio="2" />
-    </div>
-  {{else if this.formsQuery.value.length}}
-    <ul data-test-form-list class="uk-list uk-list-divider uk-list-large">
-      {{#each this.formsQuery.value key="id" as |item|}}
-        <CfbFormList::Item
-          data-test-form-list-item={{item.slug}}
-          @item={{item}}
-          @on-edit-form={{@on-edit-form}}
-        />
-      {{/each}}
-      {{#if this.formsQuery.hasNextPage}}
-        <li class="uk-text-center cfb-pointer">
-          <a
-            data-test-form-loader-button
-            href="#"
-            {{on "click" this.loadMoreForms}}
-          >
-            {{t "caluma.form-builder.form.loadMore"}}
-          </a>
-        </li>
-      {{/if}}
-    </ul>
-  {{else}}
-    <div
-      data-test-form-list-empty
-      class="uk-padding-large uk-padding-remove-horizontal uk-text-center"
-    >
-      <UkIcon @icon="search" @ratio={{10}} />
-      <p class="uk-text-muted">
-        {{t "caluma.form-builder.form.empty"}}
-      </p>
-    </div>
-  {{/if}}
-</div>
+  </div>
+</div>
+
+<div class="uk-search uk-search-default uk-width-1-1 uk-margin-top">
+  <span class="uk-search-icon-flip" uk-search-icon></span>
+  <input
+    data-test-form-search-input
+    class="uk-search-input"
+    type="search"
+    placeholder="{{t 'caluma.form-builder.global.search'}}..."
+    aria-label="{{t 'caluma.form-builder.global.search'}}"
+    value={{@search}}
+    {{on "input" (perform this.search)}}
+  />
+</div>
+
+{{#if this.formsQuery.value.length}}
+  <ul data-test-form-list class="uk-list uk-list-divider uk-list-large">
+    {{#each this.formsQuery.value key="id" as |item|}}
+      <CfbFormList::Item
+        data-test-form-list-item={{item.slug}}
+        @item={{item}}
+        @onEditForm={{@onEditForm}}
+      />
+    {{/each}}
+    {{#if this.formsQuery.isLoading}}
+      <li class="uk-text-center">
+        <UkSpinner />
+      </li>
+    {{else if this.formsQuery.hasNextPage}}
+      <li class="uk-text-center cfb-pointer">
+        <a
+          data-test-form-loader-button
+          href="#"
+          {{on "click" this.formsQuery.fetchMore}}
+        >
+          {{t "caluma.form-builder.form.loadMore"}}
+        </a>
+      </li>
+    {{/if}}
+  </ul>
+{{else if this.formsQuery.isLoading}}
+  <div class="uk-height-small uk-flex uk-flex-center uk-flex-middle">
+    <UkSpinner @ratio={{2}} />
+  </div>
+{{else}}
+  <div
+    data-test-form-list-empty
+    class="uk-padding-large uk-padding-remove-horizontal uk-text-center"
+  >
+    <UkIcon @icon="search" @ratio={{10}} />
+    <p class="uk-text-muted">
+      {{t "caluma.form-builder.form.empty"}}
+    </p>
+  </div>
+{{/if}}

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

@@ -1,61 +1,71 @@
-import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { macroCondition, isTesting } from "@embroider/macros";
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { queryManager } from "ember-apollo-client";
-import { timeout } from "ember-concurrency";
-import { restartableTask } from "ember-concurrency-decorators";
+import { timeout, restartableTask } from "ember-concurrency";
 
-import calumaQuery from "@projectcaluma/ember-core/caluma-query";
+import { useCalumaQuery } from "@projectcaluma/ember-core/caluma-query";
 import { allForms } from "@projectcaluma/ember-core/caluma-query/queries";
 
 export default class ComponentsCfbFormListComponent extends Component {
-  @queryManager apollo;
+  @service intl;
 
-  @calumaQuery({ query: allForms, options: { pageSize: 20 } }) formsQuery;
+  formsQuery = useCalumaQuery(this, allForms, () => ({
+    options: { pageSize: 20 },
+    filter: this.filter,
+    order: [{ attribute: "NAME", direction: "ASC" }],
+  }));
 
-  @tracked category = "active";
-  @tracked search = "";
+  get categories() {
+    return [
+      {
+        value: "active",
+        label: this.intl.t("caluma.form-builder.form.active"),
+      },
+      {
+        value: "archived",
+        label: this.intl.t("caluma.form-builder.form.isArchived"),
+      },
+      {
+        value: "published",
+        label: this.intl.t("caluma.form-builder.form.isPublished"),
+      },
+      {
+        value: "unpublished",
+        label: this.intl.t("caluma.form-builder.form.draft"),
+      },
+      { value: "all", label: this.intl.t("caluma.form-builder.form.all") },
+    ];
+  }
 
   get filter() {
     const isArchived =
-      this.category === "active"
+      this.args.category === "active"
         ? { isArchived: false }
-        : this.category === "archived"
+        : this.args.category === "archived"
         ? { isArchived: true }
         : null;
 
-    const search = this.search ? { search: this.search } : null;
-
-    return [isArchived, search].filter(Boolean) || null;
-  }
+    const search = this.args.search ? { search: this.args.search } : null;
 
-  @action
-  setFilter(name, eventOrValue) {
-    this[name] =
-      eventOrValue instanceof Event ? eventOrValue.target.value : eventOrValue;
-
-    this.fetchForms.perform();
-  }
-
-  @action
-  submit(event) {
-    event.preventDefault();
-  }
-
-  @action
-  loadMoreForms(e) {
-    e.preventDefault();
+    const isPublished =
+      this.args.category === "unpublished"
+        ? { isPublished: false }
+        : this.args.category === "published"
+        ? { isPublished: true }
+        : null;
 
-    this.formsQuery.fetchMore();
+    return [isArchived, isPublished, search].filter(Boolean) || null;
   }
 
   @restartableTask
-  *fetchForms() {
-    yield timeout(500);
+  *search(event) {
+    /* istanbul ignore next */
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      yield timeout(500);
+    }
 
-    yield this.formsQuery.fetch({
-      filter: this.filter,
-      order: [{ attribute: "NAME", direction: "ASC" }],
-    });
+    this.args.onUpdateSearch(event.target.value);
   }
 }

package/addon/components/cfb-navigation.hbs

@@ -4,7 +4,7 @@
       <LinkTo
         @route={{crumb.routeName}}
         class="uk-text-large uk-text-truncate cfb-navigation__item__link
-          {{if crumb.disabled "uk-disabled"}}"
+          {{if crumb.disabled 'uk-disabled'}}"
       >
         {{crumb.title}}
       </LinkTo>

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

@@ -1,4 +1,4 @@
-<div class="uk-flex uk-flex-column {{unless @noMargin "uk-margin"}}">
+<div class="uk-flex uk-flex-column {{unless @noMargin 'uk-margin'}}">
   <@labelComponent />
 
   <div class="uk-form-controls" ...attributes>
@@ -7,7 +7,7 @@
       @size={{@size}}
       @name={{@name}}
       @disabled={{@disabled}}
-      @on-toggle={{@update}}
+      @onToggle={{@update}}
     />
   </div>
 

package/addon/controllers/index.js

@@ -1,10 +1,16 @@
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import { tracked } from "@glimmer/tracking";
 
 export default class IndexController extends Controller {
   @service router;
 
+  queryParams = ["search", "category"];
+
+  @tracked search = "";
+  @tracked category = "active";
+
   @action
   newForm() {
     this.router.transitionTo("new");

package/addon/engine.js

@@ -6,16 +6,13 @@ import config from "./config/environment";
 
 const { modulePrefix } = config;
 
-/* eslint-disable ember/avoid-leaking-state-in-ember-objects */
-const Eng = Engine.extend({
-  modulePrefix,
-  Resolver,
+export default class FormBuilderEngine extends Engine {
+  modulePrefix = modulePrefix;
+  Resolver = Resolver;
 
-  dependencies: {
-    services: ["apollo", "notification", "intl", "caluma-options", "validator"],
-  },
-});
+  dependencies = {
+    services: ["apollo", "notification", "intl", "caluma-options"],
+  };
+}
 
-loadInitializers(Eng, modulePrefix);
-
-export default Eng;
+loadInitializers(FormBuilderEngine, modulePrefix);