@projectcaluma/ember-form-builder 11.1.5 → 11.2.1

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" },
       ],
     });
   },