@projectcaluma/ember-form-builder 10.0.3 → 11.0.0-beta.4

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

@@ -1,98 +1,91 @@
-<div
-  {{did-insert (perform this.data)}}
-  {{did-update (perform this.data) @slug}}
->
-  {{#if this.data.isRunning}}
-    <div class="uk-flex uk-flex-center uk-flex-middle uk-height-small">
-      <UkSpinner ratio="2" />
-    </div>
-  {{else}}
-    {{#with this.data.lastSuccessful.value.firstObject.node as |model|}}
-      <ValidatedForm
-        @model={{changeset model this.Validations}}
-        @on-submit={{perform this.submit}}
-        as |f|
-      >
-        <f.input
-          @type="text"
-          @label={{t "caluma.form-builder.form.name"}}
-          @name="name"
-          @required={{true}}
-          @on-update={{this.updateName}}
-        />
+{{#if this._data.isRunning}}
+  <div class="uk-flex uk-flex-center uk-flex-middle uk-height-small">
+    <UkSpinner ratio="2" />
+  </div>
+{{else if this.data}}
+  <ValidatedForm
+    @model={{changeset this.data this.Validations}}
+    @on-submit={{perform this.submit}}
+    as |f|
+  >
+    <f.input
+      @type="text"
+      @label={{t "caluma.form-builder.form.name"}}
+      @name="name"
+      @required={{true}}
+      @on-update={{this.updateName}}
+    />
 
-        {{#if (or @slug (not this.prefix))}}
+    {{#if (or @slug (not this.prefix))}}
+      <f.input
+        @type="text"
+        @name="slug"
+        @label={{t "caluma.form-builder.form.slug"}}
+        @required={{true}}
+        @disabled={{@slug}}
+        @on-update={{this.updateSlug}}
+      />
+    {{else}}
+      <f.input
+        @name="slug"
+        @required={{true}}
+        @disabled={{@slug}}
+        @label={{t "caluma.form-builder.question.slug"}}
+        @on-update={{this.updateSlug value="target.value"}}
+        as |fi|
+      >
+        <div class="cfb-prefixed">
+          <span class="cfb-prefixed-slug">{{this.prefix}}</span>
           <f.input
             @type="text"
-            @name="slug"
-            @label={{t "caluma.form-builder.form.slug"}}
-            @required={{true}}
-            @disabled={{@slug}}
-            @on-update={{this.updateSlug}}
+            @model={{fi.model}}
+            @name={{fi.name}}
+            @value={{fi.value}}
+            @update={{fi.update}}
+            @setDirty={{fi.setDirty}}
+            @inputId={{fi.inputId}}
+            @isValid={{fi.isValid}}
+            @isInvalid={{fi.isInvalid}}
           />
-        {{else}}
-          <f.input
-            @name="slug"
-            @required={{true}}
-            @disabled={{@slug}}
-            @label={{t "caluma.form-builder.question.slug"}}
-            @on-update={{this.updateSlug value="target.value"}}
-            as |fi|
-          >
-            <div class="cfb-prefixed">
-              <span class="cfb-prefixed-slug">{{this.prefix}}</span>
-              <f.input
-                @type="text"
-                @model={{fi.model}}
-                @name={{fi.name}}
-                @value={{fi.value}}
-                @update={{fi.update}}
-                @setDirty={{fi.setDirty}}
-                @inputId={{fi.inputId}}
-                @isValid={{fi.isValid}}
-                @isInvalid={{fi.isInvalid}}
-              />
-            </div>
-          </f.input>
-        {{/if}}
+        </div>
+      </f.input>
+    {{/if}}
 
-        <f.input
-          @name="description"
-          @type="textarea"
-          @label={{t "caluma.form-builder.form.description"}}
-          @rows="4"
-        />
+    <f.input
+      @name="description"
+      @type="textarea"
+      @label={{t "caluma.form-builder.form.description"}}
+      @rows="4"
+    />
 
-        <f.input
-          class="uk-flex uk-flex-between uk-flex-column"
-          @name="isArchived"
-          @label={{t "caluma.form-builder.form.isArchived"}}
-          @required={{true}}
-          @renderComponent={{component "cfb-toggle-switch" size="small"}}
-        />
+    <f.input
+      class="uk-flex uk-flex-between uk-flex-column"
+      @name="isArchived"
+      @label={{t "caluma.form-builder.form.isArchived"}}
+      @required={{true}}
+      @renderComponent={{component "cfb-toggle-switch" size="small"}}
+    />
 
-        <f.input
-          class="uk-flex uk-flex-between uk-flex-column"
-          @name="isPublished"
-          @label={{t "caluma.form-builder.form.isPublished"}}
-          @required={{true}}
-          @renderComponent={{component "cfb-toggle-switch" size="small"}}
-        />
+    <f.input
+      class="uk-flex uk-flex-between uk-flex-column"
+      @name="isPublished"
+      @label={{t "caluma.form-builder.form.isPublished"}}
+      @required={{true}}
+      @renderComponent={{component "cfb-toggle-switch" size="small"}}
+    />
 
-        <div class="uk-text-right">
-          <f.submit
-            @disabled={{or f.loading f.model.isInvalid}}
-            @label={{t "caluma.form-builder.global.save"}}
-          />
-        </div>
-      </ValidatedForm>
-    {{else}}
-      <div
-        class="uk-text-center uk-text-muted uk-padding uk-padding-remove-horizontal"
-      >
-        {{uk-icon "bolt" ratio=5}}
-        <p>{{t "caluma.form-builder.form.not-found" slug=@slug}}</p>
-      </div>
-    {{/with}}
-  {{/if}}
-</div>
+    <div class="uk-text-right">
+      <f.submit
+        @disabled={{or f.loading f.model.isInvalid}}
+        @label={{t "caluma.form-builder.global.save"}}
+      />
+    </div>
+  </ValidatedForm>
+{{else}}
+  <div
+    class="uk-text-center uk-text-muted uk-padding uk-padding-remove-horizontal"
+  >
+    <UkIcon @icon="bolt" @ratio={{5}} />
+    <p>{{t "caluma.form-builder.form.not-found" slug=@slug}}</p>
+  </div>
+{{/if}}

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

@@ -1,11 +1,10 @@
 import { getOwner } from "@ember/application";
-import { A } from "@ember/array";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
-import { optional } from "ember-composable-helpers/helpers/optional";
 import { timeout, restartableTask, dropTask } from "ember-concurrency";
+import { useTask } from "ember-resources";
 
 import FormValidations from "../../validations/form";
 
@@ -22,10 +21,16 @@ export default class CfbFormEditorGeneral extends Component {
 
   Validations = FormValidations;
 
+  get data() {
+    return this._data.value?.[0]?.node;
+  }
+
+  _data = useTask(this, this.fetchData, () => [this.args.slug]);
+
   @restartableTask
-  *data() {
+  *fetchData() {
     if (!this.args.slug) {
-      return A([
+      return [
         {
           node: {
             name: "",
@@ -34,7 +39,7 @@ export default class CfbFormEditorGeneral extends Component {
             isPublished: true,
           },
         },
-      ]);
+      ];
     }
 
     return yield this.apollo.watchQuery(
@@ -83,7 +88,7 @@ export default class CfbFormEditorGeneral extends Component {
         )
       );
 
-      optional([this.args["on-after-submit"]])(form);
+      this.args.onAfterSubmit?.(form);
     } catch (e) {
       this.notification.danger(
         this.intl.t(

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

@@ -92,18 +92,17 @@ export default class CfbFormEditorQuestionDefault extends Component {
           : null,
       }));
     }
-
-    const document = getOwner(this)
-      .factoryFor("caluma-model:document")
-      .create({
-        raw: {
-          id: btoa(`Document:dv-document-${this.args.model.slug}`),
-          rootForm,
-          forms: [rootForm],
-          answers: [answer],
-          __typename: "Document",
-        },
-      });
+    const owner = getOwner(this);
+    const document = new (owner.factoryFor("caluma-model:document").class)({
+      raw: {
+        id: btoa(`Document:dv-document-${this.args.model.slug}`),
+        rootForm,
+        forms: [rootForm],
+        answers: [answer],
+        __typename: "Document",
+      },
+      owner,
+    });
 
     return document.findField(this.question.slug);
   }

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

@@ -3,7 +3,7 @@
 
   <UkSortable
     @handle=".uk-sortable-handle"
-    @on-moved={{this._handleMoved}}
+    @onMoved={{this._handleMoved}}
     @tagName="ul"
     class="uk-list uk-list-divider uk-margin-remove-bottom uk-margin-small-top"
   >

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

@@ -6,6 +6,7 @@
     @placeholder={{this.placeholder}}
     @options={{this.validators}}
     @onChange={{this.updateValidators}}
+    @renderInPlace={{true}}
     as |item|
   >
     {{item.name}}

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

@@ -4,8 +4,8 @@
     @question.isArchived
     "cfb-form-editor__question-list__item__archived"
   }}
-  {{did-insert (fn (optional @on-register) this.elementId @question.slug)}}
-  {{will-destroy (fn (optional @on-unregister) this.elementId @question.slug)}}
+  {{did-insert (fn (optional @onRegister) this.elementId @question.slug)}}
+  {{will-destroy (fn (optional @onUnregister) this.elementId @question.slug)}}
   ...attributes
 >
   <div class="uk-flex uk-flex-middle">
@@ -24,7 +24,7 @@
           data-test-remove-item
           uk-icon="minus"
           class="cfb-pointer uk-text-danger"
-          {{on "click" (fn (optional @on-remove-question) @question)}}
+          {{on "click" (fn (optional @onRemoveQuestion) @question)}}
         >
         </i>
       {{else if (eq @mode "add")}}
@@ -33,7 +33,7 @@
           data-test-add-item
           uk-icon="plus"
           class="cfb-pointer uk-text-success"
-          {{on "click" (fn (optional @on-add-question) @question)}}
+          {{on "click" (fn (optional @onAddQuestion) @question)}}
         >
         </i>
       {{/if}}

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

@@ -51,12 +51,12 @@ export default class CfbFormEditorQuestionListItem extends Component {
   @action
   editQuestion(question, e) {
     e.preventDefault();
-    this.args["on-edit-question"]?.(question);
+    this.args.onEditQuestion?.(question);
   }
 
   @action
   clickForm(form, e) {
     e.preventDefault();
-    this.args["on-click-form"]?.(form);
+    this.args.onClickForm?.(form);
   }
 }

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

@@ -76,12 +76,12 @@
           data-test-question-list-item={{item.node.slug}}
           @mode={{this.mode}}
           @question={{item.node}}
-          @on-edit-question={{@on-edit-question}}
-          @on-remove-question={{perform this.removeQuestion}}
-          @on-add-question={{perform this.addQuestion}}
-          @on-click-form={{@on-click-form}}
-          @on-register={{this.registerChild}}
-          @on-unregister={{this.unregisterChild}}
+          @onEditQuestion={{@onEditQuestion}}
+          @onRemoveQuestion={{perform this.removeQuestion}}
+          @onAddQuestion={{perform this.addQuestion}}
+          @onClickForm={{@onClickForm}}
+          @onRegister={{this.registerChild}}
+          @onUnregister={{this.unregisterChild}}
         />
       {{else}}
         <li

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

@@ -4,13 +4,12 @@ import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
-import { optional } from "ember-composable-helpers/helpers/optional";
-import { timeout } from "ember-concurrency";
 import {
+  timeout,
   enqueueTask,
   lastValue,
   restartableTask,
-} from "ember-concurrency-decorators";
+} from "ember-concurrency";
 import UIkit from "uikit";
 
 import addFormQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/add-form-question.graphql";
@@ -148,7 +147,7 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
 
       this.questionTask.perform();
 
-      optional([this.args["on-after-add-question"]])(question);
+      this.args.onAfterAddQuestion?.(question);
     } catch (e) {
       this.notification.danger(
         this.intl.t("caluma.form-builder.notification.form.add-question.error")
@@ -176,7 +175,7 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
         )
       );
 
-      optional([this.args["on-after-remove-question"]])(question);
+      this.args.onAfterRemoveQuestion?.(question);
     } catch (e) {
       this.notification.danger(
         this.intl.t(
@@ -238,7 +237,7 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
   createNewQuestion(e) {
     e.preventDefault();
 
-    this.args["on-create-question"]?.();
+    this.args.onCreateQuestion?.();
     this.setMode("reorder");
   }
 }

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}} />
@@ -342,6 +341,7 @@
               @noMatchesMessage={{t
                 "caluma.form-builder.question.search-empty"
               }}
+              @renderInPlace={{true}}
               as |form|
             >
               <span
@@ -414,6 +414,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">
@@ -449,7 +450,7 @@
 
       <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}}

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

@@ -8,7 +8,6 @@ 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";
 
@@ -222,7 +221,9 @@ export default class CfbFormEditorQuestion extends Component {
       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"),
       });
@@ -406,7 +407,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);

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 (array "active" "archived" "all") as |category|}}
       <UkButton
-        data-test-new-form
-        @on-click={{optional @on-new-form}}
-        @label={{t "caluma.form-builder.form.new"}}
+        data-test-filter={{category}}
+        @onClick={{fn (perform this.setFilter) "category" category}}
+        @label={{t (concat "caluma.form-builder.form." category)}}
+        @class={{if (eq this.category category) "uk-button-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={{this.search}}
+    {{on "input" (fn (perform this.setFilter) "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}}