@projectcaluma/ember-form-builder 11.1.5 → 11.2.1

package/LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

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)
     );
   }
 }