@projectcaluma/ember-form-builder 11.1.4 → 11.2.0

package/addon/-private/application.js

@@ -0,0 +1,6 @@
+/**
+ * This module holds the application instance which is needed in the validations
+ * to allow context of the ember container in order to allow injections of
+ * services. The `instance` property will be set in an instance initializer.
+ */
+export default { instance: null };

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

@@ -16,40 +16,17 @@
       @on-update={{this.updateName}}
     />
 
-    {{#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"
-            @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}}
+    <f.input
+      @type="text"
+      @name="slug"
+      @label={{t "caluma.form-builder.form.slug"}}
+      @required={{true}}
+      @disabled={{not (is-empty @slug)}}
+      @renderComponent={{component
+        "cfb-slug-input"
+        onUnlink=(fn (mut this.slugUnlinked) true)
+      }}
+    />
 
     <f.input
       @name="description"
@@ -74,7 +51,7 @@
 
     <div class="uk-text-right">
       <f.submit
-        @disabled={{or f.loading f.model.isInvalid}}
+        @disabled={{f.loading}}
         @label={{t "caluma.form-builder.global.save"}}
       />
     </div>

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

@@ -1,16 +1,14 @@
 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 { timeout, restartableTask, dropTask } from "ember-concurrency";
+import { restartableTask, dropTask } from "ember-concurrency";
 import { trackedTask } from "ember-resources/util/ember-concurrency";
 
 import FormValidations from "../../validations/form";
 
 import slugify from "@projectcaluma/ember-core/utils/slugify";
 import saveFormMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-form.graphql";
-import checkFormSlugQuery from "@projectcaluma/ember-form-builder/gql/queries/check-form-slug.graphql";
 import formEditorGeneralQuery from "@projectcaluma/ember-form-builder/gql/queries/form-editor-general.graphql";
 
 export default class CfbFormEditorGeneral extends Component {
@@ -61,16 +59,13 @@ export default class CfbFormEditorGeneral extends Component {
   @dropTask
   *submit(changeset) {
     try {
-      const slug =
-        ((!this.args.slug && this.prefix) || "") + changeset.get("slug");
-
       const form = yield this.apollo.mutate(
         {
           mutation: saveFormMutation,
           variables: {
             input: {
               name: changeset.get("name"),
-              slug,
+              slug: changeset.get("slug"),
               description: changeset.get("description"),
               isArchived: changeset.get("isArchived"),
               isPublished: changeset.get("isPublished"),
@@ -100,47 +95,15 @@ export default class CfbFormEditorGeneral extends Component {
     }
   }
 
-  @restartableTask
-  *validateSlug(slug, changeset) {
-    /* istanbul ignore next */
-    if (macroCondition(isTesting())) {
-      // no timeout
-    } else {
-      yield timeout(500);
-    }
-
-    const res = yield this.apollo.query(
-      {
-        query: checkFormSlugQuery,
-        variables: { slug },
-      },
-      "allForms.edges"
-    );
-
-    if (res && res.length) {
-      changeset.pushErrors(
-        "slug",
-        this.intl.t("caluma.form-builder.validations.form.slug")
-      );
-    }
-  }
-
   @action
   updateName(value, changeset) {
     changeset.set("name", value);
 
-    if (!this.args.slug) {
-      const slug = slugify(value, { locale: this.intl.primaryLocale });
-      changeset.set("slug", slug);
+    if (!this.args.slug && !this.slugUnlinked) {
+      const slugifiedName = slugify(value, { locale: this.intl.primaryLocale });
+      const slug = slugifiedName ? this.prefix + slugifiedName : "";
 
-      this.validateSlug.perform(this.prefix + slug, changeset);
+      changeset.set("slug", slug);
     }
   }
-
-  @action
-  updateSlug(value, changeset) {
-    changeset.set("slug", value);
-
-    this.validateSlug.perform(this.prefix + value, changeset);
-  }
 }

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

@@ -5,26 +5,26 @@
     @handle=".uk-sortable-handle"
     @onMoved={{this._handleMoved}}
     @tagName="ul"
-    class="uk-list uk-list-divider uk-margin-remove-bottom uk-margin-small-top"
+    class="uk-list uk-list-divider uk-form-controls uk-margin-small-top"
   >
-    {{#each this.optionRows as |row i|}}
-      <li data-test-row={{concat "option-" (add i 1)}}>
+    {{#each @value as |row i|}}
+      <li class="cfb-option-row" 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"
+            class="uk-grid-small uk-flex uk-flex-top"
             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))}}
+            <div class="uk-width-auto uk-flex uk-flex-middle">
+              {{#if this.canReorder}}
+                <span
+                  data-test-sort-handle
+                  uk-icon="menu"
+                  class="uk-sortable-handle uk-margin-small-right"
+                  role="button"
+                ></span>
+              {{/if}}
+              {{#if (is-empty row.id)}}
                 <button
                   data-test-delete-row
                   type="button"
@@ -34,21 +34,25 @@
                   {{on "click" (fn this.deleteRow row)}}
                 >
                 </button>
+              {{else}}
+                <button
+                  data-test-archive-row
+                  type="button"
+                  class="uk-icon-button"
+                  uk-icon={{if row.isArchived "refresh" "close"}}
+                  title={{t
+                    (concat
+                      "caluma.form-builder.options."
+                      (if row.isArchived "restore" "archive")
+                    )
+                  }}
+                  {{on
+                    "click"
+                    (fn (changeset-set row "isArchived") (not row.isArchived))
+                  }}
+                >
+                </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")
-                  )
-                }}
-                {{on "click" (fn this.toggleRowArchived row)}}
-              >
-              </button>
             </div>
             <div class="uk-width-expand">
               <f.input
@@ -56,6 +60,7 @@
                 @inputName={{concat "option-" (add i 1) "-label"}}
                 @required={{true}}
                 @disabled={{row.isArchived}}
+                @submitted={{@submitted}}
                 @on-update={{this.updateLabel}}
               />
             </div>
@@ -64,8 +69,14 @@
                 @name="slug"
                 @inputName={{concat "option-" (add i 1) "-slug"}}
                 @required={{true}}
-                @disabled={{not row.isNew}}
-                @on-update={{this.updateSlug}}
+                @disabled={{not (is-empty row.id)}}
+                @submitted={{@submitted}}
+                @renderComponent={{component
+                  "cfb-slug-input"
+                  hidePrefix=true
+                  prefix=@model.slug
+                  onUnlink=(fn (mut row.slugUnlinked) true)
+                }}
               />
             </div>
           </div>

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

@@ -1,11 +1,10 @@
 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 lookupValidator from "ember-changeset-validations";
-import { task } from "ember-concurrency";
+import { dropTask } from "ember-concurrency";
 
 import slugify from "@projectcaluma/ember-core/utils/slugify";
 import saveChoiceQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-choice-question.graphql";
@@ -17,90 +16,24 @@ const TYPES = {
   ChoiceQuestion: saveChoiceQuestionMutation,
 };
 
-const removeQuestionPrefix = (slug, questionSlug) => {
-  return slug.replace(new RegExp(`^${questionSlug}-`), "");
-};
-
-const addQuestionPrefix = (slug, questionSlug) => {
-  return `${questionSlug}-${slug}`;
-};
-
 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: 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.args.update({
-      edges: this.optionRows
-        .filter((row) => !row.isNew || row.isDirty)
-        .map((row) => {
-          const { label, slug, isArchived } = Object.assign(
-            {},
-            row.get("data"),
-            row.get("change")
-          );
-
-          return {
-            node: {
-              label,
-              slug: addQuestionPrefix(
-                removeQuestionPrefix(slug, this.questionSlug),
-                this.questionSlug
-              ),
-              isArchived: Boolean(isArchived),
-            },
-          };
-        }),
-    });
+  @queryManager apollo;
 
-    this.args.setDirty();
+  get canReorder() {
+    return this.args.value.every((row) => row.get("id") !== undefined);
   }
 
-  @task
+  @dropTask
   *reorderOptions(slugs) {
     try {
       yield this.apollo.mutate({
         mutation: TYPES[this.args.model.__typename],
         variables: {
           input: {
-            slug: this.questionSlug,
+            slug: this.args.model.slug,
             label: this.args.model.label,
             options: slugs,
           },
@@ -123,55 +56,45 @@ export default class CfbFormEditorQuestionOptions extends Component {
 
   @action
   addRow() {
-    this._optionRows = [
-      ...this.optionRows,
+    this.args.update([
+      ...this.args.value,
       new Changeset(
-        { slug: "", label: "", isNew: true, linkSlug: true },
+        {
+          id: undefined,
+          slug: "",
+          label: "",
+          isArchived: false,
+          slugUnlinked: false,
+          question: this.args.model.slug,
+        },
         lookupValidator(OptionValidations),
         OptionValidations
       ),
-    ];
+    ]);
 
-    this._update();
+    this.args.setDirty();
   }
 
   @action
   deleteRow(row) {
-    this._optionRows = this.optionRows.filter((r) => r !== row);
-
-    this._update();
-  }
-
-  @action
-  toggleRowArchived(row) {
-    row.set("isArchived", !row.get("isArchived"));
-
-    this._update();
+    this.args.update(this.args.value.filter((r) => r !== row));
+    this.args.setDirty();
   }
 
   @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();
-  }
-
-  @action
-  updateSlug(value, changeset) {
-    changeset.set("slug", value);
-    changeset.set("linkSlug", false);
-    this._update();
-  }
+    if (!changeset.get("id") && !changeset.get("slugUnlinked")) {
+      const slugifiedLabel = slugify(value, {
+        locale: this.intl.primaryLocale,
+      });
+      const slug = slugifiedLabel
+        ? `${this.args.model.slug}-${slugifiedLabel}`
+        : "";
 
-  @action
-  update() {
-    this._update();
+      changeset.set("slug", slug);
+    }
   }
 
   @action
@@ -180,12 +103,7 @@ export default class CfbFormEditorQuestionOptions extends Component {
     const options = [...sortable.$el.children].slice(0, -1);
 
     this.reorderOptions.perform(
-      options.map((option) =>
-        addQuestionPrefix(
-          option.firstElementChild.firstElementChild.id,
-          this.questionSlug
-        )
-      )
+      options.map((option) => option.firstElementChild.firstElementChild.id)
     );
   }
 }

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

@@ -34,7 +34,7 @@
         @hint={{t "caluma.form-builder.question.type-disabled"}}
         @name="__typename"
         @required={{true}}
-        @disabled={{@slug}}
+        @disabled={{not (is-empty @slug)}}
         @on-update={{changeset-set f.model "__typename"}}
       />
 
@@ -47,39 +47,16 @@
 
       <div uk-grid class="uk-grid-small uk-margin">
         <div class="uk-width-expand">
-          {{#if (or @slug (not this.prefix))}}
-            <f.input
-              @name="slug"
-              @label={{t "caluma.form-builder.question.slug"}}
-              @required={{true}}
-              @disabled={{@slug}}
-              @on-update={{this.updateSlug}}
-            />
-          {{else}}
-            <f.input
-              @name="slug"
-              @label={{t "caluma.form-builder.question.slug"}}
-              @required={{true}}
-              @disabled={{@slug}}
-              @on-update={{this.updateSlug value="target.value"}}
-              as |fi|
-            >
-              <div class="cfb-prefixed">
-                <span class="cfb-prefixed-slug">{{this.prefix}}</span>
-
-                <f.input
-                  @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}}
+          <f.input
+            @name="slug"
+            @label={{t "caluma.form-builder.question.slug"}}
+            @required={{true}}
+            @disabled={{not (is-empty @slug)}}
+            @renderComponent={{component
+              "cfb-slug-input"
+              onUnlink=(fn (mut this.slugUnlinked) true)
+            }}
+          />
         </div>
 
         {{#if
@@ -459,7 +436,7 @@
 
       <div class="uk-text-right">
         <f.submit
-          @disabled={{or f.loading f.model.isInvalid}}
+          @disabled={{f.loading}}
           @label={{t "caluma.form-builder.global.save"}}
         />
       </div>

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

@@ -2,13 +2,12 @@ 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 { dropTask, restartableTask, task, timeout } from "ember-concurrency";
+import { dropTask, restartableTask, task } from "ember-concurrency";
 
 import { hasQuestionType } from "@projectcaluma/ember-core/helpers/has-question-type";
 import slugify from "@projectcaluma/ember-core/utils/slugify";
@@ -37,9 +36,9 @@ import saveTableQuestionMutation from "@projectcaluma/ember-form-builder/gql/mut
 import saveTextQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-text-question.graphql";
 import saveTextareaQuestionMutation from "@projectcaluma/ember-form-builder/gql/mutations/save-textarea-question.graphql";
 import allDataSourcesQuery from "@projectcaluma/ember-form-builder/gql/queries/all-data-sources.graphql";
-import checkQuestionSlugQuery from "@projectcaluma/ember-form-builder/gql/queries/check-question-slug.graphql";
 import formEditorQuestionQuery from "@projectcaluma/ember-form-builder/gql/queries/form-editor-question.graphql";
 import formListQuery from "@projectcaluma/ember-form-builder/gql/queries/form-list.graphql";
+import optionValidations from "@projectcaluma/ember-form-builder/validations/option";
 import validations from "@projectcaluma/ember-form-builder/validations/question";
 
 export const TYPES = {
@@ -77,9 +76,9 @@ export default class CfbFormEditorQuestion extends Component {
   @service notification;
   @service intl;
   @service calumaOptions;
+
   @queryManager apollo;
 
-  @tracked linkSlug = true;
   @tracked changeset;
 
   @restartableTask
@@ -209,13 +208,10 @@ export default class CfbFormEditorQuestion extends Component {
   }
 
   getInput(changeset) {
-    const slug =
-      ((!this.args.slug && this.prefix) || "") + changeset.get("slug");
-
     const rawMeta = changeset.get("meta");
 
     const input = {
-      slug,
+      slug: changeset.get("slug"),
       label: changeset.get("label"),
       isHidden: changeset.get("isHidden"),
       infoText: changeset.get("infoText"),
@@ -289,14 +285,14 @@ export default class CfbFormEditorQuestion extends Component {
 
   _getMultipleChoiceQuestionInput(changeset) {
     return {
-      options: changeset.get("options.edges").map(({ node: { slug } }) => slug),
+      options: changeset.get("options").map(({ slug }) => slug),
       hintText: changeset.get("hintText"),
     };
   }
 
   _getChoiceQuestionInput(changeset) {
     return {
-      options: changeset.get("options.edges").map(({ node: { slug } }) => slug),
+      options: changeset.get("options").map(({ slug }) => slug),
       hintText: changeset.get("hintText"),
     };
   }
@@ -358,14 +354,16 @@ export default class CfbFormEditorQuestion extends Component {
   @task
   *saveOptions(changeset) {
     yield Promise.all(
-      (changeset.get("options.edges") || []).map(async ({ node: option }) => {
-        const { label, slug, isArchived } = option;
-
-        await this.apollo.mutate({
-          mutation: saveOptionMutation,
-          variables: { input: { label, slug, isArchived } },
-        });
-      })
+      (changeset.get("options") || [])
+        .filter((option) => option.get("isDirty"))
+        .map(async (option) => {
+          const { label, slug, isArchived } = option;
+
+          await this.apollo.mutate({
+            mutation: saveOptionMutation,
+            variables: { input: { label, slug, isArchived } },
+          });
+        })
     );
   }
 
@@ -447,39 +445,36 @@ export default class CfbFormEditorQuestion extends Component {
     }
   }
 
-  @restartableTask
-  *validateSlug(slug, changeset) {
-    /* istanbul ignore next */
-    if (macroCondition(isTesting())) {
-      // no timeout
-    } else {
-      yield timeout(500);
-    }
-
-    const res = yield this.apollo.query(
-      {
-        query: checkQuestionSlugQuery,
-        variables: { slug },
-      },
-      "allQuestions.edges"
-    );
-
-    if (res && res.length) {
-      changeset.pushErrors(
-        "slug",
-        this.intl.t("caluma.form-builder.validations.question.slug")
-      );
-    }
-  }
-
   @action
   async fetchData() {
     await this.data.perform();
     await this.availableForms.perform();
     await this.availableDataSources.perform();
     if (this.model) {
+      const options = this.model.options?.edges?.map(
+        (edge) =>
+          new Changeset(
+            { ...edge.node, slugUnlinked: false, question: this.model.slug },
+            lookupValidator(optionValidations),
+            optionValidations
+          )
+      ) ?? [
+        new Changeset(
+          {
+            id: undefined,
+            label: "",
+            slug: "",
+            isArchived: false,
+            slugUnlinked: false,
+            question: this.model.slug,
+          },
+          lookupValidator(optionValidations),
+          optionValidations
+        ),
+      ];
+
       this.changeset = new Changeset(
-        this.model,
+        { ...this.model, options },
         lookupValidator(validations),
         validations
       );
@@ -490,23 +485,16 @@ export default class CfbFormEditorQuestion extends Component {
   updateLabel(value, changeset) {
     changeset.set("label", value);
 
-    if (!this.args.slug && this.linkSlug) {
-      const slug = slugify(value, { locale: this.intl.primaryLocale });
+    if (!this.args.slug && !this.slugUnlinked) {
+      const slugifiedLabel = slugify(value, {
+        locale: this.intl.primaryLocale,
+      });
+      const slug = slugifiedLabel ? this.prefix + slugifiedLabel : "";
 
       changeset.set("slug", slug);
-
-      this.validateSlug.perform(this.prefix + slug, changeset);
     }
   }
 
-  @action
-  updateSlug(value, changeset) {
-    changeset.set("slug", value);
-    this.linkSlug = false;
-
-    this.validateSlug.perform(this.prefix + value, changeset);
-  }
-
   @action
   updateSubForm(value, changeset) {
     changeset.set("subForm.slug", value.slug);

package/addon/components/cfb-slug-input.hbs

@@ -0,0 +1,33 @@
+<div class="uk-margin">
+  <@labelComponent />
+
+  <div class="uk-form-controls">
+    <div class="cfb-slug-input">
+      {{#if (and (not (or @disabled @hidePrefix)) this.prefix)}}
+        <span
+          class="cfb-slug-input__prefix
+            {{if @isValid 'uk-text-success'}}
+            {{if @isInvalid 'uk-text-danger'}}"
+          {{did-insert this.calculatePadding}}
+        >
+          {{this.prefix}}
+        </span>
+      {{/if}}
+      <input
+        id={{@inputId}}
+        name={{or @inputName @name}}
+        type="text"
+        class="uk-input cfb-slug-input__input
+          {{if @isValid 'uk-form-success'}}
+          {{if @isInvalid 'uk-form-danger'}}"
+        value={{this.displayValue}}
+        disabled={{@disabled}}
+        style={{this.inputStyle}}
+        {{on "input" this.update}}
+      />
+    </div>
+  </div>
+
+  <@hintComponent />
+  <@errorComponent />
+</div>

package/addon/components/cfb-slug-input.js

@@ -0,0 +1,45 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+export default class CfbSlugInputComponent extends Component {
+  @service calumaOptions;
+  @service intl;
+
+  @tracked padding = null;
+
+  get prefix() {
+    const prefix = this.args.prefix ?? this.calumaOptions.namespace ?? null;
+
+    return prefix ? `${prefix}-` : "";
+  }
+
+  get inputStyle() {
+    return this.padding ? htmlSafe(`padding-left: ${this.padding};`) : "";
+  }
+
+  get displayValue() {
+    if (this.args.disabled && !this.args.hidePrefix) {
+      return this.args.value;
+    }
+
+    return this.args.value?.replace(new RegExp(`^${this.prefix}`), "") ?? "";
+  }
+
+  @action
+  calculatePadding(element) {
+    const prefixWidth = element.clientWidth;
+    const prefixMargin = window.getComputedStyle(element).marginLeft;
+
+    this.padding = `calc(${prefixWidth}px + ${prefixMargin})`;
+  }
+
+  @action
+  update({ target: { value } }) {
+    this.args.update(value ? this.prefix + value : "");
+    this.args.setDirty();
+    this.args.onUnlink?.();
+  }
+}

package/addon/gql/queries/check-form-slug.graphql

@@ -1,10 +1,5 @@
 query CheckFormSlug($slug: String!) {
   allForms(filter: [{ slugs: [$slug] }]) {
-    edges {
-      node {
-        id
-        slug
-      }
-    }
+    totalCount
   }
 }

package/addon/gql/queries/check-option-slug.graphql

@@ -0,0 +1,19 @@
+query CheckOptionSlug($slug: String!, $question: String!) {
+  allQuestions(filter: [{ slugs: [$question] }]) {
+    edges {
+      node {
+        id
+        ... on ChoiceQuestion {
+          options(filter: [{ slug: $slug }]) {
+            totalCount
+          }
+        }
+        ... on MultipleChoiceQuestion {
+          options(filter: [{ slug: $slug }]) {
+            totalCount
+          }
+        }
+      }
+    }
+  }
+}

package/addon/gql/queries/check-question-slug.graphql

@@ -1,10 +1,5 @@
 query CheckQuestionSlug($slug: String!) {
   allQuestions(filter: [{ slugs: [$slug] }]) {
-    edges {
-      node {
-        id
-        slug
-      }
-    }
+    totalCount
   }
 }

package/addon/instance-initializers/application.js

@@ -0,0 +1,9 @@
+import application from "@projectcaluma/ember-form-builder/-private/application";
+
+export function initialize(appInstance) {
+  application.instance = appInstance;
+}
+
+export default {
+  initialize,
+};

package/addon/validations/form.js

@@ -1,14 +1,11 @@
 import {
   validatePresence,
   validateLength,
-  validateFormat,
 } from "ember-changeset-validations/validators";
 
+import slugValidation from "@projectcaluma/ember-form-builder/validators/slug";
+
 export default {
   name: [validatePresence(true), validateLength({ max: 255 })],
-  slug: [
-    validatePresence(true),
-    validateLength({ max: 50 }),
-    validateFormat({ regex: /^[a-z0-9-]+$/ }),
-  ],
+  slug: slugValidation({ type: "form", maxLength: 50 }),
 };

package/addon/validations/option.js

@@ -3,10 +3,9 @@ import {
   validateLength,
 } from "ember-changeset-validations/validators";
 
-import and from "@projectcaluma/ember-form-builder/utils/and";
-import validateSlug from "@projectcaluma/ember-form-builder/validators/slug";
+import slugValidation from "@projectcaluma/ember-form-builder/validators/slug";
 
 export default {
-  label: and(validatePresence(true), validateLength({ max: 1024 })),
-  slug: validateSlug(),
+  label: [validatePresence(true), validateLength({ max: 1024 })],
+  slug: slugValidation({ type: "option" }),
 };

package/addon/validations/question.js

@@ -11,12 +11,12 @@ import and from "@projectcaluma/ember-form-builder/utils/and";
 import or from "@projectcaluma/ember-form-builder/utils/or";
 import validateJexl from "@projectcaluma/ember-form-builder/validators/jexl";
 import validateMeta from "@projectcaluma/ember-form-builder/validators/meta";
-import validateSlug from "@projectcaluma/ember-form-builder/validators/slug";
+import slugValidation from "@projectcaluma/ember-form-builder/validators/slug";
 import validateType from "@projectcaluma/ember-form-builder/validators/type";
 
 export default {
   label: and(validatePresence(true), validateLength({ max: 1024 })),
-  slug: validateSlug(),
+  slug: slugValidation({ type: "question" }),
 
   hintText: or(
     validateType("FormQuestion", true),

package/addon/validators/options.js

@@ -1,25 +1,7 @@
-import Changeset from "ember-changeset";
-import lookupValidator from "ember-changeset-validations";
-import { Promise, all } from "rsvp";
-
-import OptionValidations from "../validations/option";
-
 export default function validateOptions() {
-  return (_, value) => {
-    return new Promise((resolve) => {
-      all(
-        value.edges.map(async ({ node: option }) => {
-          const cs = new Changeset(
-            option,
-            lookupValidator(OptionValidations),
-            OptionValidations
-          );
-
-          await cs.validate();
-
-          return cs.get("isValid");
-        })
-      ).then((res) => resolve(res.every(Boolean) || "Invalid options"));
-    });
+  return (_, newValue) => {
+    return (
+      newValue.every((option) => option.get("isValid")) || "Invalid options"
+    );
   };
 }

package/addon/validators/slug.js

@@ -1,16 +1,118 @@
+import { setOwner } from "@ember/application";
+import { inject as service } from "@ember/service";
+import { macroCondition, isTesting, importSync } from "@embroider/macros";
+import { queryManager } from "ember-apollo-client";
 import {
   validatePresence,
   validateLength,
   validateFormat,
 } from "ember-changeset-validations/validators";
+import { timeout, restartableTask, didCancel } from "ember-concurrency";
 
-import and from "@projectcaluma/ember-form-builder/utils/and";
+import checkFormSlugQuery from "@projectcaluma/ember-form-builder/gql/queries/check-form-slug.graphql";
+import checkOptionSlugQuery from "@projectcaluma/ember-form-builder/gql/queries/check-option-slug.graphql";
+import checkQuestionSlugQuery from "@projectcaluma/ember-form-builder/gql/queries/check-question-slug.graphql";
 
-const validateSlug = () =>
-  and(
-    validatePresence(true),
-    validateLength({ max: 127 }),
-    validateFormat({ regex: /^[a-z0-9-]+$/ })
-  );
+export class SlugUniquenessValidator {
+  @service intl;
+
+  @queryManager apollo;
+
+  queries = {
+    form: checkFormSlugQuery,
+    question: checkQuestionSlugQuery,
+    option: checkOptionSlugQuery,
+  };
+
+  cache = {
+    form: {},
+    question: {},
+    option: {},
+  };
+
+  constructor(type) {
+    this.type = type;
+  }
+
+  async validate(key, newValue, oldValue, changes, context) {
+    const application = importSync(
+      "@projectcaluma/ember-form-builder/-private/application"
+    ).default;
+
+    setOwner(this, application.instance);
+
+    // If the object already exists or the slug is empty we don't need to check
+    // for uniqueness
+    if (context.id || !newValue) {
+      return true;
+    }
+
+    let isUnique = this.cache[this.type][newValue];
+
+    if (isUnique === undefined) {
+      try {
+        // Uniqueness of the slug was not cached, we need to check with the API
+        isUnique = await this._validate.perform(newValue, context);
+      } catch (error) {
+        // Validation task was canceled because we debounce it so we don't cause
+        // too many requests on input. This cancelation means that there is
+        // another validation ongoing which will then return the needed value.
+        // For now, we can just mark it as valid.
+        isUnique = didCancel(error);
+      }
+    }
 
-export default validateSlug;
+    return (
+      isUnique ||
+      this.intl.t(`caluma.form-builder.validations.${this.type}.slug`)
+    );
+  }
+
+  @restartableTask
+  *_validate(slug, context) {
+    /* istanbul ignore next */
+    if (macroCondition(isTesting())) {
+      // no timeout
+    } else {
+      yield timeout(500);
+    }
+
+    let count = Infinity;
+
+    try {
+      const response = yield this.apollo.query({
+        query: this.queries[this.type],
+        variables:
+          this.type === "option"
+            ? { slug, question: context.question }
+            : { slug },
+      });
+
+      if (this.type === "form") {
+        count = response.allForms.totalCount;
+      } else if (this.type === "question") {
+        count = response.allQuestions.totalCount;
+      } else if (this.type === "option") {
+        count = response.allQuestions.edges[0].node.options.totalCount;
+      }
+    } catch (error) {
+      // do nothing, which will result in count being Infinity which will return
+      // a validation error
+    }
+
+    const isUnique = count === 0;
+
+    this.cache[this.type][slug] = isUnique;
+
+    return isUnique;
+  }
+}
+
+export default function slugValidation({ type, maxLength = 127 }) {
+  return [
+    validatePresence(true),
+    validateLength({ max: maxLength }),
+    validateFormat({ regex: /^[a-z0-9-]+$/ }),
+    new SlugUniquenessValidator(type),
+  ];
+}

package/app/components/cfb-slug-input.js

@@ -0,0 +1 @@
+export { default } from "@projectcaluma/ember-form-builder/components/cfb-slug-input";

package/app/instance-initializers/application.js

@@ -0,0 +1,4 @@
+export {
+  default,
+  initialize,
+} from "@projectcaluma/ember-form-builder/instance-initializers/application";

package/app/styles/@projectcaluma/ember-form-builder.scss

@@ -3,22 +3,13 @@
 @import "../cfb-form-editor/question-list/item";
 @import "../cfb-form-editor/question";
 @import "../cfb-navigation";
+@import "../cfb-slug-input";
 @import "../cfb-uikit-powerselect";
 
 .cfb-pointer {
   cursor: pointer;
 }
 
-.cfb-prefixed {
-  display: flex;
-
-  &-slug {
-    line-height: 40px;
-    padding-right: 10px;
-    white-space: nowrap;
-  }
-}
-
 .cfb-code-editor {
   font-family: $base-code-font-family;
   letter-spacing: normal;

package/app/styles/cfb-slug-input.scss

@@ -0,0 +1,12 @@
+.cfb-slug-input {
+  position: relative;
+
+  &__prefix {
+    position: absolute;
+    margin-left: $form-padding-horizontal;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    color: $global-muted-color;
+  }
+}

package/blueprints/@projectcaluma/ember-form-builder/index.js

@@ -4,14 +4,24 @@ module.exports = {
   normalizeEntityName() {},
 
   afterInstall() {
+    /**
+     * Automatically install all ember addons that expose helpers / components
+     * used in templates of the addon itself. Other dependencies that are only
+     * used in JS code don't need to be installed in the host app and therefore
+     * don't have to be included here.
+     */
     return this.addAddonsToProject({
       packages: [
+        { name: "@ember/legacy-built-in-components" },
         { name: "@projectcaluma/ember-core" },
         { name: "@projectcaluma/ember-form" },
+        { name: "ember-changeset" },
+        { name: "ember-composable-helpers" },
         { name: "ember-engines" },
-        { name: "ember-math-helpers" },
         { name: "ember-flatpickr" },
+        { name: "ember-math-helpers" },
         { name: "ember-power-select" },
+        { name: "ember-validated-form" },
       ],
     });
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form-builder",
-  "version": "11.1.4",
+  "version": "11.2.0",
   "description": "Ember engine for building Caluma forms.",
   "keywords": [
     "ember-addon",
@@ -13,10 +13,6 @@
     "test:ember": "ember test",
     "test:ember-compatibility": "ember try:each"
   },
-  "peerDependencies": {
-    "ember-engines": ">= 0.8",
-    "ember-source": "^3.28.0 || ^4.0.0"
-  },
   "dependencies": {
     "@ember/legacy-built-in-components": "^0.4.2",
     "@ember/render-modifiers": "^2.0.5",
@@ -24,11 +20,11 @@
     "@embroider/macros": "^1.10.0",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "@projectcaluma/ember-core": "^11.1.3",
-    "@projectcaluma/ember-form": "^11.1.3",
+    "@projectcaluma/ember-core": "^11.2.0",
+    "@projectcaluma/ember-form": "^11.2.0",
     "codejar": "^3.7.0",
     "ember-apollo-client": "~4.0.2",
-    "ember-auto-import": "^2.6.1",
+    "ember-auto-import": "^2.6.3",
     "ember-changeset": "^4.1.2",
     "ember-changeset-validations": "^4.1.1",
     "ember-cli-babel": "^7.26.11",
@@ -43,14 +39,14 @@
     "ember-power-select": "^7.0.0",
     "ember-resources": "^5.6.4",
     "ember-test-selectors": "^6.0.0",
-    "ember-uikit": "^7.0.1",
+    "ember-uikit": "^7.0.3",
     "ember-validated-form": "^6.2.0",
     "graphql": "^15.8.0",
     "graphql-tag": "^2.12.6",
     "highlight.js": "^11.7.0",
     "highlightjs-jexl": "^0.0.5",
     "jexl": "^2.3.0",
-    "uikit": "^3.16.13"
+    "uikit": "^3.16.15"
   },
   "//": [
     "TODO: remove obsolete dependency to `ember-data` which is only necessary",
@@ -63,9 +59,9 @@
     "@ember/test-helpers": "2.9.3",
     "@embroider/test-setup": "2.1.1",
     "@faker-js/faker": "7.6.0",
-    "@projectcaluma/ember-testing": "11.1.4",
+    "@projectcaluma/ember-testing": "11.2.0",
     "broccoli-asset-rev": "3.0.0",
-    "ember-autoresize-modifier": "^0.7.0",
+    "ember-autoresize-modifier": "0.7.0",
     "ember-cli": "4.11.0",
     "ember-cli-code-coverage": "2.0.0",
     "ember-cli-dependency-checker": "3.3.1",
@@ -73,8 +69,8 @@
     "ember-cli-mirage": "3.0.0-alpha.3",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
-    "ember-data": "4.7.3",
-    "ember-engines": "0.8.23",
+    "ember-data": "4.12.0",
+    "ember-engines": "0.9.0",
     "ember-load-initializers": "2.1.2",
     "ember-qunit": "6.2.0",
     "ember-resolver": "10.0.0",
@@ -85,7 +81,11 @@
     "miragejs": "0.1.47",
     "qunit": "2.19.4",
     "qunit-dom": "2.0.0",
-    "webpack": "5.77.0"
+    "webpack": "5.80.0"
+  },
+  "peerDependencies": {
+    "ember-engines": "^0.9.0",
+    "ember-source": "^3.28.0 || ^4.0.0"
   },
   "engines": {
     "node": "14.* || 16.* || >= 18"

package/translations/de.yaml

@@ -175,3 +175,6 @@ caluma:
 
       question:
         slug: "Eine Frage mit diesem Slug existiert bereits"
+
+      option:
+        slug: "Eine Option mit diesem Slug existiert bereits"

package/translations/en.yaml

@@ -175,3 +175,6 @@ caluma:
 
       question:
         slug: "A question with this slug already exists"
+
+      option:
+        slug: "An option with this slug already exists"

package/translations/fr.yaml

@@ -51,6 +51,7 @@ caluma:
       isRequired: "Champ obligatoire"
       staticContent: "Contenu statique"
       infoText: "Texte d'information"
+      hintText: "Texte indicatif"
       confirmationText: "Texte de confirmation"
       placeholder: "Caractère générique"
       isHidden: "Caché (JEXL)"
@@ -174,3 +175,6 @@ caluma:
 
       question:
         slug: "Une question avec ce slug existe déjà"
+
+      option:
+        slug: "Une option avec ce slug existe déjà"