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

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

@@ -2,9 +2,10 @@
 
 <div
   name={{@name}}
-  class={{concat "uk-textarea cfb-code-editor language-" @language}}
+  class="uk-textarea cfb-code-editor {{concat 'language-' @language}}"
   {{did-insert this.didInsertNode}}
   {{will-destroy this.willDestroyNode}}
+  {{autoresize mode="height"}}
 ></div>
 
 {{component @hintComponent}}

package/addon/components/cfb-code-editor.js

@@ -1,25 +1,70 @@
 import { action } from "@ember/object";
+import { addObserver } from "@ember/object/observers";
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
 import { CodeJar } from "codejar";
 import Prism from "prismjs";
+
+import "prismjs/components/prism-json.js";
 import "prismjs/components/prism-jexl.js";
 import "prismjs/components/prism-markdown.js";
 
 export default class CfbCodeEditorComponent extends Component {
-  editor;
-  @tracked show = false;
+  _editor = null;
+  _cursor = null;
+  _lastValue = null;
+
+  get value() {
+    const value = this.args.value;
+
+    if (this.args.language === "json" && typeof value === "object") {
+      return JSON.stringify(value?.unwrap?.() ?? value, null, 2);
+    }
+
+    return this.args.value;
+  }
+
+  @action
+  onUpdate(value) {
+    if (this._lastValue === value) return;
+
+    this._cursor = this._editor.save();
+
+    if (this.args.language === "json") {
+      try {
+        value = JSON.parse(value);
+      } catch {
+        // update value directly
+      }
+    }
+
+    this._lastValue = value;
+    this.args.update(value);
+    this.args.setDirty();
+  }
+
+  @action
+  updateCode() {
+    this._editor.updateCode(this.value);
+
+    if (this._cursor) {
+      this._editor.restore(this._cursor);
+      this._cursor = null;
+    }
+  }
 
   @action
   didInsertNode(element) {
-    const highlight = (editor) => Prism.highlightElement(editor);
-    this.editor = CodeJar(element, highlight);
-    this.editor.updateCode(this.args.value);
-    this.editor.onUpdate(this.args.update);
+    this._editor = CodeJar(element, (editor) => Prism.highlightElement(editor));
+    this._editor.onUpdate(this.onUpdate);
+
+    this.updateCode();
+
+    // eslint-disable-next-line ember/no-observers
+    addObserver(this.args, "value", this, "updateCode");
   }
 
   @action
   willDestroyNode() {
-    this.editor.destroy();
+    this._editor.destroy();
   }
 }

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

@@ -1,98 +1,89 @@
-<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"}}
+      {{autoresize mode="height"}}
+    />
 
-        <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
+      @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
+      @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 { macroCondition, isTesting } from "@embroider/macros";
 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(
@@ -98,10 +103,9 @@ export default class CfbFormEditorGeneral 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/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

@@ -1,11 +1,12 @@
-<div class="uk-margin" {{did-insert (perform this.availableFormatValidators)}}>
+<div class="uk-margin">
   {{component @labelComponent}}
 
   <PowerSelectMultiple
     @selected={{this.selected}}
-    @placeholder={{this.placeholder}}
+    @placeholder={{@placeholder}}
     @options={{this.validators}}
     @onChange={{this.updateValidators}}
+    @renderInPlace={{true}}
     as |item|
   >
     {{item.name}}

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

@@ -2,34 +2,38 @@ import { action } from "@ember/object";
 import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
 import { dropTask } from "ember-concurrency";
+import { useTask } from "ember-resources";
 
-import allFormatValidatorsQuery from "@projectcaluma/ember-core/gql/queries/all-format-validators.graphql";
+import allFormatValidatorsQuery from "@projectcaluma/ember-form-builder/gql/queries/all-format-validators.graphql";
 
 export default class CfbFormEditorQuestionValidation extends Component {
   @queryManager apollo;
 
-  @dropTask
-  *availableFormatValidators() {
-    const formatValidators = yield this.apollo.watchQuery(
-      { query: allFormatValidatorsQuery, fetchPolicy: "cache-and-network" },
-      "allFormatValidators.edges"
-    );
-    return formatValidators.map((edge) => edge.node);
-  }
-
   get validators() {
-    return this.availableFormatValidators?.lastSuccessful?.value || [];
+    return this._validators.value?.map((edge) => edge.node) ?? [];
   }
 
   get selected() {
     return this.validators.filter((validator) =>
-      (this.args.value || []).includes(validator.slug)
+      (this.args.value?.edges.map((edge) => edge.node.slug) || []).includes(
+        validator.slug
+      )
+    );
+  }
+
+  _validators = useTask(this, this.fetchFormatValidators, () => []);
+
+  @dropTask
+  *fetchFormatValidators() {
+    return yield this.apollo.watchQuery(
+      { query: allFormatValidatorsQuery, fetchPolicy: "cache-and-network" },
+      "allFormatValidators.edges"
     );
   }
 
   @action
   updateValidators(value) {
-    this.args.update(value.map((validator) => validator.slug));
+    this.args.update({ edges: value.map(({ slug }) => ({ node: { slug } })) });
     this.args.setDirty();
   }
 }

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

@@ -1,16 +1,16 @@
 import { action } from "@ember/object";
 import { run } from "@ember/runloop";
 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 { 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";
@@ -56,8 +56,13 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
     const mode = this.mode;
     const search = mode !== "reorder" ? this.search : "";
 
-    if (search) {
-      yield timeout(500);
+    /* istanbul ignore next */
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      if (search) {
+        yield timeout(500);
+      }
     }
 
     if (mode === "add" && this.hasNextPage) {
@@ -148,7 +153,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 +181,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 +243,7 @@ export default class ComponentsCfbFormEditorQuestionList extends Component {
   createNewQuestion(e) {
     e.preventDefault();
 
-    this.args["on-create-question"]?.();
+    this.args.onCreateQuestion?.();
     this.setMode("reorder");
   }
 }