@projectcaluma/ember-form-builder 9.0.5 → 10.0.0

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

@@ -1,91 +1,89 @@
-{{component labelComponent}}
+<div class="uk-margin">
+  {{component @labelComponent}}
 
-<UkSortable
-  @handle=".uk-sortable-handle"
-  @on-moved={{action "_handleMoved"}}
-  @tagName="ul"
-  class="uk-list uk-list-divider uk-margin-remove-bottom uk-margin-small-top"
->
-  {{#each this.optionRows as |row i|}}
-    <li data-test-row={{concat "option-" (add i 1)}}>
-      <ValidatedForm @model={{row}} as |f|>
-        <div
-          uk-grid
-          class="uk-grid-small uk-flex uk-flex-middle"
-          id={{row.slug}}
-        >
-          {{#if (not (and row.isNew (gt this.optionRows.length 1)))}}
-            <span
-              data-test-sort-handle
-              uk-icon="menu"
-              class="uk-sortable-handle"
-              role="button"
-            ></span>
-          {{/if}}
-          <div class="uk-width-auto">
-            {{#if (and row.isNew (gt this.optionRows.length 1))}}
+  <UkSortable
+    @handle=".uk-sortable-handle"
+    @on-moved={{this._handleMoved}}
+    @tagName="ul"
+    class="uk-list uk-list-divider uk-margin-remove-bottom uk-margin-small-top"
+  >
+    {{#each this.optionRows as |row i|}}
+      <li data-test-row={{concat "option-" (add i 1)}}>
+        <ValidatedForm @model={{row}} as |f|>
+          <div
+            uk-grid
+            class="uk-grid-small uk-flex uk-flex-middle"
+            id={{row.slug}}
+          >
+            {{#if (not (and row.isNew (gt this.optionRows.length 1)))}}
+              <span
+                data-test-sort-handle
+                uk-icon="menu"
+                class="uk-sortable-handle"
+                role="button"
+              ></span>
+            {{/if}}
+            <div class="uk-width-auto">
+              {{#if (and row.isNew (gt this.optionRows.length 1))}}
+                <button
+                  data-test-delete-row
+                  type="button"
+                  class="uk-icon-button"
+                  uk-icon="trash"
+                  title={{t "caluma.form-builder.options.delete"}}
+                  {{on "click" (fn this.deleteRow row)}}
+                >
+                </button>
+              {{/if}}
               <button
-                data-test-delete-row
+                data-test-archive-row
                 type="button"
                 class="uk-icon-button"
-                uk-icon="trash"
-                title={{t "caluma.form-builder.options.delete"}}
-                {{action "deleteRow" row}}
+                uk-icon={{if row.isArchived "plus" "close"}}
+                title={{t
+                  (concat
+                    "caluma.form-builder.options."
+                    (if row.isArchived "restore" "archive")
+                  )
+                }}
+                {{on "click" (fn this.toggleRowArchived row)}}
               >
               </button>
-            {{/if}}
-            <button
-              data-test-archive-row
-              type="button"
-              class="uk-icon-button"
-              uk-icon={{if row.isArchived "plus" "close"}}
-              title={{t
-                (concat
-                  "caluma.form-builder.options."
-                  (if row.isArchived "restore" "archive")
-                )
-              }}
-              {{action "toggleRowArchived" row}}
-            >
-            </button>
-          </div>
-          <div class="uk-width-expand">
-            <f.input
-              @name="label"
-              @inputName={{concat "option-" (add i 1) "-label"}}
-              @required={{true}}
-              @disabled={{row.isArchived}}
-              @on-update={{action
-                (queue (action "updateLabel") (action "update"))
-              }}
-            />
-          </div>
-          <div class="uk-width-1-4">
-            <f.input
-              @name="slug"
-              @inputName={{concat "option-" (add i 1) "-slug"}}
-              @required={{true}}
-              @disabled={{not row.isNew}}
-              @on-update={{action
-                (queue (action "updateSlug") (action "update"))
-              }}
-            />
+            </div>
+            <div class="uk-width-expand">
+              <f.input
+                @name="label"
+                @inputName={{concat "option-" (add i 1) "-label"}}
+                @required={{true}}
+                @disabled={{row.isArchived}}
+                @on-update={{this.updateLabel}}
+              />
+            </div>
+            <div class="uk-width-1-4">
+              <f.input
+                @name="slug"
+                @inputName={{concat "option-" (add i 1) "-slug"}}
+                @required={{true}}
+                @disabled={{not row.isNew}}
+                @on-update={{this.updateSlug}}
+              />
+            </div>
           </div>
-        </div>
-      </ValidatedForm>
+        </ValidatedForm>
+      </li>
+    {{/each}}
+    <li class="uk-text-center">
+      <button
+        data-test-add-row
+        type="button"
+        class="uk-icon-button"
+        uk-icon="plus"
+        {{on "click" this.addRow}}
+      >
+      </button>
     </li>
-  {{/each}}
-  <li class="uk-text-center">
-    <button
-      data-test-add-row
-      type="button"
-      class="uk-icon-button"
-      uk-icon="plus"
-      {{action "addRow"}}
-    >
-    </button>
-  </li>
-</UkSortable>
+  </UkSortable>
 
-{{component hintComponent}}
-{{component errorComponent}}
+  {{component @hintComponent}}
+  {{component @errorComponent}}
+</div>

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

@@ -1,11 +1,11 @@
-import { get } from "@ember/object";
-import { reads } from "@ember/object/computed";
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { queryManager } from "ember-apollo-client";
-import Changeset from "ember-changeset";
+import { Changeset } from "ember-changeset";
 import lookupValidator from "ember-changeset-validations";
 import { task } from "ember-concurrency";
-import RenderComponent from "ember-validated-form/components/validated-input/-themes/uikit/render";
 
 import slugify from "@projectcaluma/ember-core/utils/slugify";
 import saveChoiceQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-choice-question.graphql";
@@ -25,46 +25,49 @@ const addQuestionPrefix = (slug, questionSlug) => {
   return `${questionSlug}-${slug}`;
 };
 
-export default RenderComponent.extend({
-  intl: service(),
-  notification: service(),
-  apollo: queryManager(),
-
-  questionSlug: reads("model.slug"),
-
-  init(...args) {
-    this._super(...args);
-
-    const value = this.value;
-
-    this.set(
-      "optionRows",
-      get(value, "edges.length")
-        ? value.edges.map(
-            (edge) =>
-              new Changeset(
-                {
-                  slug: removeQuestionPrefix(edge.node.slug, this.questionSlug),
-                  label: edge.node.label,
-                  isArchived: edge.node.isArchived,
-                  isNew: false,
-                },
-                lookupValidator(OptionValidations),
-                OptionValidations
-              )
-          )
-        : [
+export default class CfbFormEditorQuestionOptions extends Component {
+  @tracked _optionRows;
+
+  @service intl;
+  @service notification;
+  @queryManager apollo;
+
+  constructor(...args) {
+    super(...args);
+
+    this._optionRows = this.args.value?.edges?.length
+      ? this.args.value.edges.map(
+          (edge) =>
             new Changeset(
-              { slug: "", label: "", isNew: true, linkSlug: true },
+              {
+                slug: removeQuestionPrefix(edge.node.slug, this.questionSlug),
+                label: edge.node.label,
+                isArchived: edge.node.isArchived,
+                isNew: false,
+              },
               lookupValidator(OptionValidations),
               OptionValidations
-            ),
-          ]
-    );
-  },
+            )
+        )
+      : [
+          new Changeset(
+            { slug: "", label: "", isNew: true, linkSlug: true },
+            lookupValidator(OptionValidations),
+            OptionValidations
+          ),
+        ];
+  }
+
+  get questionSlug() {
+    return this.args.model.slug;
+  }
+
+  get optionRows() {
+    return this._optionRows;
+  }
 
   _update() {
-    this.update({
+    this.args.update({
       edges: this.optionRows
         .filter((row) => !row.isNew || row.isDirty)
         .map((row) => {
@@ -87,17 +90,18 @@ export default RenderComponent.extend({
         }),
     });
 
-    this.setDirty();
-  },
+    this.args.setDirty();
+  }
 
-  reorderOptions: task(function* (slugs) {
+  @task
+  *reorderOptions(slugs) {
     try {
       yield this.apollo.mutate({
-        mutation: TYPES[this.model.__typename],
+        mutation: TYPES[this.args.model.__typename],
         variables: {
           input: {
             slug: this.questionSlug,
-            label: this.model.label,
+            label: this.args.model.label,
             options: slugs,
           },
         },
@@ -115,66 +119,73 @@ export default RenderComponent.extend({
         )
       );
     }
-  }),
-
-  actions: {
-    addRow() {
-      this.set("optionRows", [
-        ...this.optionRows,
-        new Changeset(
-          { slug: "", label: "", isNew: true, linkSlug: true },
-          lookupValidator(OptionValidations),
-          OptionValidations
-        ),
-      ]);
-
-      this._update();
-    },
-
-    deleteRow(row) {
-      this.set(
-        "optionRows",
-        this.optionRows.filter((r) => r !== row)
+  }
+
+  @action
+  addRow() {
+    this._optionRows = [
+      ...this.optionRows,
+      new Changeset(
+        { slug: "", label: "", isNew: true, linkSlug: true },
+        lookupValidator(OptionValidations),
+        OptionValidations
+      ),
+    ];
+
+    this._update();
+  }
+
+  @action
+  deleteRow(row) {
+    this._optionRows = this.optionRows.filter((r) => r !== row);
+
+    this._update();
+  }
+
+  @action
+  toggleRowArchived(row) {
+    row.set("isArchived", !row.get("isArchived"));
+
+    this._update();
+  }
+
+  @action
+  updateLabel(value, changeset) {
+    changeset.set("label", value);
+
+    if (changeset.get("isNew") && changeset.get("linkSlug")) {
+      changeset.set(
+        "slug",
+        slugify(value, { locale: this.intl.primaryLocale })
       );
-
-      this._update();
-    },
-
-    toggleRowArchived(row) {
-      row.set("isArchived", !row.get("isArchived"));
-
-      this._update();
-    },
-
-    updateLabel(value, changeset) {
-      changeset.set("label", value);
-
-      if (changeset.get("isNew") && changeset.get("linkSlug")) {
-        changeset.set(
-          "slug",
-          slugify(value, { locale: this.intl.primaryLocale })
-        );
-      }
-    },
-
-    updateSlug(value, changeset) {
-      changeset.set("slug", value);
-      changeset.set("linkSlug", false);
-    },
-
-    update() {
-      this._update();
-    },
-
-    _handleMoved({ detail: [sortable] }) {
-      // Remove last element as it is the add row button
-      const options = [...sortable.$el.children].slice(0, -1);
-
-      this.reorderOptions.perform(
-        options.map((option) =>
-          addQuestionPrefix(option.firstElementChild.id, this.questionSlug)
+    }
+    this._update();
+  }
+
+  @action
+  updateSlug(value, changeset) {
+    changeset.set("slug", value);
+    changeset.set("linkSlug", false);
+    this._update();
+  }
+
+  @action
+  update() {
+    this._update();
+  }
+
+  @action
+  _handleMoved({ detail: [sortable] }) {
+    // Remove last element as it is the add row button
+    const options = [...sortable.$el.children].slice(0, -1);
+
+    this.reorderOptions.perform(
+      options.map((option) =>
+        addQuestionPrefix(
+          option.firstElementChild.firstElementChild.id,
+          this.questionSlug
         )
-      );
-    },
-  },
-});
+      )
+    );
+  }
+}

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

@@ -1,14 +1,16 @@
-{{component labelComponent}}
+<div class="uk-margin" {{did-insert (perform this.availableFormatValidators)}}>
+  {{component @labelComponent}}
 
-<PowerSelectMultiple
-  @selected={{selected}}
-  @placeholder={{placeholder}}
-  @options={{validators}}
-  @onChange={{action "updateValidators"}}
-  as |item|
->
-  {{item.name}}
-</PowerSelectMultiple>
+  <PowerSelectMultiple
+    @selected={{this.selected}}
+    @placeholder={{this.placeholder}}
+    @options={{this.validators}}
+    @onChange={{this.updateValidators}}
+    as |item|
+  >
+    {{item.name}}
+  </PowerSelectMultiple>
 
-{{component hintComponent}}
-{{component errorComponent}}
+  {{component @hintComponent}}
+  {{component @errorComponent}}
+</div>

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

@@ -1,44 +1,35 @@
-import Component from "@ember/component";
-import { computed } from "@ember/object";
+import { action } from "@ember/object";
+import Component from "@glimmer/component";
 import { queryManager } from "ember-apollo-client";
-import { task } from "ember-concurrency";
+import { dropTask } from "ember-concurrency";
 
-import allFormatValidatorsQuery from "@projectcaluma/ember-form-builder/gql/queries/all-format-validators.graphql";
+import allFormatValidatorsQuery from "@projectcaluma/ember-core/gql/queries/all-format-validators.graphql";
 
-export default Component.extend({
-  apollo: queryManager(),
+export default class CfbFormEditorQuestionValidation extends Component {
+  @queryManager apollo;
 
-  init(...args) {
-    this._super(...args);
-
-    this.availableFormatValidators.perform();
-  },
-
-  availableFormatValidators: task(function* () {
+  @dropTask
+  *availableFormatValidators() {
     const formatValidators = yield this.apollo.watchQuery(
       { query: allFormatValidatorsQuery, fetchPolicy: "cache-and-network" },
       "allFormatValidators.edges"
     );
     return formatValidators.map((edge) => edge.node);
-  }).drop(),
+  }
 
-  validators: computed(
-    "availableFormatValidators.lastSuccessful.value.[]",
-    function () {
-      return this.get("availableFormatValidators.lastSuccessful.value") || [];
-    }
-  ),
+  get validators() {
+    return this.availableFormatValidators?.lastSuccessful?.value || [];
+  }
 
-  selected: computed("value.[]", "validators.@each.slug", function () {
+  get selected() {
     return this.validators.filter((validator) =>
-      (this.value || []).includes(validator.slug)
+      (this.args.value || []).includes(validator.slug)
     );
-  }),
-
-  actions: {
-    updateValidators(value) {
-      this.update(value.map((validator) => validator.slug));
-      this.setDirty();
-    },
-  },
-});
+  }
+
+  @action
+  updateValidators(value) {
+    this.args.update(value.map((validator) => validator.slug));
+    this.args.setDirty();
+  }
+}

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

@@ -6,10 +6,8 @@ import jexl from "jexl";
 import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-type";
 
 export default class CfbFormEditorQuestionListItem extends Component {
-  constructor(...args) {
-    super(...args);
-
-    this.elementId = guidFor(this);
+  get elementId() {
+    return guidFor(this);
   }
 
   get required() {