@projectcaluma/ember-form-builder 10.0.1 → 11.0.0-beta.2

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"
+  >
+    {{uk-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,11 @@
 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 +22,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 +40,7 @@ export default class CfbFormEditorGeneral extends Component {
             isPublished: true,
           },
         },
-      ]);
+      ];
     }
 
     return yield this.apollo.watchQuery(

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/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

@@ -58,7 +58,7 @@
     {{/if}}
 
     <span
-      class="{{if this.showFormLink "uk-width-auto" "uk-width-expand"}}
+      class="{{if this.showFormLink 'uk-width-auto' 'uk-width-expand'}}
         uk-margin-small-right uk-text-small uk-text-muted uk-text-truncate"
     >
       {{@question.label}}
@@ -83,13 +83,13 @@
         uk-tooltip="title: {{if
           this.hidden
           (t
-            (concat "caluma.form-builder.question-list.hidden." this.hiddenType)
+            (concat 'caluma.form-builder.question-list.hidden.' this.hiddenType)
           )
         }}; pos: left"
         class="cfb-form-editor__question-list__item__type
           {{if
             this.hidden
-            "cfb-form-editor__question-list__item__type--hidden"
+            'cfb-form-editor__question-list__item__type--hidden'
           }}"
         @label={{t
           (concat "caluma.form-builder.question.types." @question.__typename)
@@ -105,7 +105,7 @@
         <span
           uk-tooltip="title: {{t
             (concat
-              "caluma.form-builder.question-list.required." this.requiredType
+              'caluma.form-builder.question-list.required.' this.requiredType
             )
           }}; pos: top-left"
           title={{t

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

@@ -42,8 +42,8 @@
       <input
         class="uk-search-input"
         type="search"
-        placeholder="{{t "caluma.form-builder.global.search"}}..."
-        aria-label="{{t "caluma.form-builder.global.search"}}"
+        placeholder="{{t 'caluma.form-builder.global.search'}}..."
+        aria-label="{{t 'caluma.form-builder.global.search'}}"
         value={{this.search}}
         {{on "input" (fn (mut this.search))}}
       />

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

@@ -5,12 +5,12 @@ 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";

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">

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}}
+        @on-click={{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
+      @on-click={{optional @on-new-form}}
+      @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}}
+        @on-edit-form={{@on-edit-form}}
+      />
+    {{/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,17 +1,16 @@
-import { action } from "@ember/object";
 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;
-
-  @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 = "";
@@ -29,33 +28,11 @@ export default class ComponentsCfbFormListComponent extends Component {
     return [isArchived, search].filter(Boolean) || 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();
-
-    this.formsQuery.fetchMore();
-  }
-
   @restartableTask
-  *fetchForms() {
+  *setFilter(name, eventOrValue) {
     yield timeout(500);
 
-    yield this.formsQuery.fetch({
-      filter: this.filter,
-      order: [{ attribute: "NAME", direction: "ASC" }],
-    });
+    this[name] =
+      eventOrValue instanceof Event ? eventOrValue.target.value : eventOrValue;
   }
 }

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>

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: {
+  dependencies = {
     services: ["apollo", "notification", "intl", "caluma-options", "validator"],
-  },
-});
+  };
+}
 
-loadInitializers(Eng, modulePrefix);
-
-export default Eng;
+loadInitializers(FormBuilderEngine, modulePrefix);