@projectcaluma/ember-form-builder 12.8.0 → 12.10.0

package/addon/components/cfb-form-editor/cfb-advanced-settings.hbs

@@ -0,0 +1,16 @@
+<UkButton
+  @color="link"
+  @onClick={{toggle-action "showAdvanced" this}}
+  class="uk-flex uk-flex-middle uk-margin"
+>
+  {{#if this.showAdvanced}}
+    <UkIcon @icon="triangle-down" />
+  {{else}}
+    <UkIcon @icon="triangle-right" />
+  {{/if}}
+  {{t "caluma.form-builder.question.advancedSettings"}}
+</UkButton>
+
+{{#if this.showAdvanced}}
+  {{yield}}
+{{/if}}

package/addon/components/cfb-form-editor/cfb-advanced-settings.js

@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+
+export default class CfbFormEditorCfbAdvancedSettings extends Component {
+  @tracked showAdvanced = false;
+}

package/addon/components/cfb-form-editor/copy-modal.hbs

@@ -0,0 +1,50 @@
+<UkModal
+  @visible={{this.visible}}
+  @onHide={{fn (mut this.visible) false}}
+  data-test-copy-form-modal
+  as |modal|
+>
+  {{#if this.visible}}
+    <ValidatedForm
+      @model={{this.changeset}}
+      @on-submit={{perform this.submit}}
+      as |f|
+    >
+      <modal.header>
+        <h2 class="uk-modal-title">
+          {{t "caluma.form-builder.copy-modal.title" form=@item.name}}
+        </h2>
+      </modal.header>
+      <modal.body>
+        <f.input
+          @name="name"
+          @label={{t "caluma.form-builder.copy-modal.name.label"}}
+          @hint={{t "caluma.form-builder.copy-modal.name.hint" name=@item.name}}
+          data-test-copy-modal-input-name
+        />
+        <f.input
+          @name="slug"
+          @label={{t "caluma.form-builder.copy-modal.slug.label"}}
+          @hint={{t "caluma.form-builder.copy-modal.slug.hint" slug=@item.slug}}
+          @renderComponent={{component "cfb-slug-input" hidePrefix=false}}
+          data-test-copy-modal-input-slug
+        />
+      </modal.body>
+      <modal.footer class="uk-text-right">
+        <f.submit
+          @loading={{this.submit.isRunning}}
+          @disabled={{or
+            this.submit.isRunning
+            (not this.changeset.isValid)
+            (eq @item.slug this.changeset.slug)
+          }}
+          data-test-copy-form-submit
+        >
+          {{t "caluma.form-builder.copy-modal.submit"}}
+        </f.submit>
+      </modal.footer>
+    </ValidatedForm>
+  {{/if}}
+</UkModal>
+
+{{yield (hash toggle=this.toggle)}}

package/addon/components/cfb-form-editor/copy-modal.js

@@ -0,0 +1,63 @@
+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 { dropTask } from "ember-concurrency";
+
+import copyFormMutation from "@projectcaluma/ember-form-builder/gql/mutations/copy-form.graphql";
+import validations from "@projectcaluma/ember-form-builder/validations/form";
+
+export default class CfbFormEditorCopyModal extends Component {
+  @queryManager apollo;
+  @service notification;
+  @service router;
+  @service intl;
+  @tracked visible = false;
+
+  constructor(owner, args) {
+    super(owner, args);
+
+    this.changeset = Changeset(
+      { ...this.args.item, id: undefined },
+      lookupValidator(validations),
+      validations,
+    );
+  }
+
+  @action
+  toggle() {
+    this.visible = !this.visible;
+  }
+
+  @dropTask
+  *submit(changeset) {
+    try {
+      yield this.apollo.mutate(
+        {
+          mutation: copyFormMutation,
+          variables: {
+            input: {
+              source: this.args.item.slug,
+              name: changeset.name,
+              slug: changeset.slug,
+            },
+          },
+        },
+        "copyForm.form",
+      );
+
+      this.notification.success(
+        this.intl.t("caluma.form-builder.notification.form.create.success"),
+      );
+
+      this.router.transitionTo("edit", changeset.slug);
+    } catch (e) {
+      this.notification.danger(
+        this.intl.t("caluma.form-builder.notification.form.create.error"),
+      );
+    }
+  }
+}

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

@@ -49,7 +49,24 @@
       @renderComponent={{component "cfb-toggle-switch" size="small"}}
     />
 
+    <CfbFormEditor::CfbAdvancedSettings>
+      <f.input
+        @label={{t "caluma.form-builder.question.meta"}}
+        @name="meta"
+        @renderComponent={{component "cfb-code-editor" language="json"}}
+      />
+    </CfbFormEditor::CfbAdvancedSettings>
+
     <div class="uk-text-right">
+      <CfbFormEditor::CopyModal @item={{this.data}} as |modal|>
+        <f.button
+          @disabled={{f.loading}}
+          @label={{t "caluma.form-builder.copy-modal.submit"}}
+          {{on "click" modal.toggle}}
+          data-test-copy-form-button={{@slug}}
+        />
+      </CfbFormEditor::CopyModal>
+
       <f.submit
         @disabled={{f.loading}}
         @label={{t "caluma.form-builder.global.save"}}

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

@@ -58,6 +58,8 @@ export default class CfbFormEditorGeneral extends Component {
 
   @dropTask
   *submit(changeset) {
+    const rawMeta = changeset.get("meta");
+
     try {
       const form = yield this.apollo.mutate(
         {
@@ -69,6 +71,7 @@ export default class CfbFormEditorGeneral extends Component {
               description: changeset.get("description"),
               isArchived: changeset.get("isArchived"),
               isPublished: changeset.get("isPublished"),
+              meta: JSON.stringify(rawMeta?.unwrap?.() ?? rawMeta),
             },
           },
         },

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

@@ -10,7 +10,7 @@
         type="button"
         class="uk-icon-button uk-animation-slide-top"
         uk-icon="close"
-        title={{t "caluma.form-builder.global.ca    ncel"}}
+        title={{t "caluma.form-builder.global.cancel"}}
         {{on "click" (fn this.setMode "reorder")}}
       >
       </button>

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

@@ -11,6 +11,7 @@ export default class CfbFormEditorQuestionUsage extends Component {
   @queryManager apollo;
 
   @tracked modalVisible = false;
+  @tracked _forms = null;
 
   get title() {
     return this.intl.t("caluma.form-builder.question.usage.title", {
@@ -25,18 +26,29 @@ export default class CfbFormEditorQuestionUsage extends Component {
   }
 
   forms = trackedFunction(this, async () => {
+    if (!this.args.slug) {
+      // The shown question hasn't completely loaded yet
+      return [];
+    }
+    if (this._forms) {
+      // we have already fetched the forms previously
+      return this._forms;
+    }
+
     try {
       const forms = await this.apollo.query(
         {
           query: allFormsForQuestionQuery,
           variables: {
-            slug: this.args.model.slug,
+            slug: this.args.slug,
           },
           fetchPolicy: "no-cache",
         },
         "allForms.edges",
       );
 
+      this._forms = forms; // cache the result
+
       return forms;
     } catch (error) {
       console.error(error);

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

@@ -384,20 +384,7 @@
         @renderComponent={{component "cfb-toggle-switch" size="small"}}
       />
 
-      <UkButton
-        @color="link"
-        @onClick={{toggle-action "showAdvanced" this}}
-        class="uk-flex uk-flex-middle uk-margin"
-      >
-        {{#if this.showAdvanced}}
-          <UkIcon @icon="triangle-down" />
-        {{else}}
-          <UkIcon @icon="triangle-right" />
-        {{/if}}
-        {{t "caluma.form-builder.question.advancedSettings"}}
-      </UkButton>
-
-      {{#if this.showAdvanced}}
+      <CfbFormEditor::CfbAdvancedSettings>
         {{#if (has-question-type f.model "action-button")}}
           <f.input
             @name="validateOnEnter"
@@ -438,10 +425,13 @@
           @name="meta"
           @renderComponent={{component "cfb-code-editor" language="json"}}
         />
-      {{/if}}
+      </CfbFormEditor::CfbAdvancedSettings>
 
       <div class="uk-flex uk-flex-between uk-flex-middle uk-flex-row-reverse">
-        <CfbFormEditor::QuestionUsage @model={{f.model}} class="uk-flex-last" />
+        <CfbFormEditor::QuestionUsage
+          @slug={{changeset-get f.model "slug"}}
+          class="uk-flex-last"
+        />
 
         <f.submit
           @disabled={{f.loading}}

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

@@ -14,6 +14,7 @@
         </span>
       {{/if}}
       <input
+        ...attributes
         id={{@inputId}}
         name={{or @inputName @name}}
         type="text"

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

@@ -1,4 +1,5 @@
 import { action } from "@ember/object";
+import { scheduleOnce } from "@ember/runloop";
 import { inject as service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import Component from "@glimmer/component";
@@ -30,6 +31,12 @@ export default class CfbSlugInputComponent extends Component {
 
   @action
   calculatePadding(element) {
+    // Ensures that the element is already visible in combined use
+    // with modal dialogs.
+    scheduleOnce("afterRender", this, "_calculatePadding", element);
+  }
+
+  _calculatePadding(element) {
     const prefixWidth = element.clientWidth;
     const prefixMargin = window.getComputedStyle(element).marginLeft;
 

package/addon/gql/fragments/form-info.graphql

@@ -5,4 +5,5 @@ fragment FormInfo on Form {
   description
   isArchived
   isPublished
+  meta
 }

package/addon/gql/mutations/copy-form.graphql

@@ -0,0 +1,8 @@
+mutation CopyForm($input: CopyFormInput!) {
+  copyForm(input: $input) {
+    form {
+      id
+    }
+    clientMutationId
+  }
+}

package/app/components/cfb-form-editor/cfb-advanced-settings.js

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

package/app/components/cfb-form-editor/copy-modal.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form-builder",
-  "version": "12.8.0",
+  "version": "12.10.0",
   "description": "Ember engine for building Caluma forms.",
   "keywords": [
     "ember-addon",
@@ -10,7 +10,7 @@
   "homepage": "https://docs.caluma.io/ember-caluma",
   "repository": "github:projectcaluma/ember-caluma",
   "dependencies": {
-    "@babel/core": "^7.23.6",
+    "@babel/core": "^7.23.9",
     "@ember/legacy-built-in-components": "^0.5.0",
     "@ember/render-modifiers": "^2.1.0",
     "@ember/string": "^3.1.1",
@@ -19,7 +19,7 @@
     "@glimmer/tracking": "^1.1.2",
     "codejar": "^4.2.0",
     "ember-apollo-client": "~4.0.2",
-    "ember-auto-import": "^2.7.1",
+    "ember-auto-import": "^2.7.2",
     "ember-changeset": "^4.1.2",
     "ember-changeset-validations": "^4.1.1",
     "ember-cli-babel": "^8.2.0",
@@ -28,7 +28,7 @@
     "ember-concurrency": "^3.1.1",
     "ember-engines-router-service": "^0.5.0",
     "ember-fetch": "^8.1.2",
-    "ember-flatpickr": "^4.0.0",
+    "ember-flatpickr": "^6.0.0",
     "ember-intl": "^6.4.0",
     "ember-math-helpers": "^4.0.0",
     "ember-power-select": "^7.2.0",
@@ -36,6 +36,7 @@
     "ember-test-selectors": "^6.0.0",
     "ember-uikit": "^9.0.0",
     "ember-validated-form": "^7.0.0",
+    "flatpickr": "^4.6.13",
     "graphql": "^15.8.0",
     "graphql-tag": "^2.12.6",
     "highlight.js": "^11.9.0",
@@ -43,8 +44,8 @@
     "jexl": "^2.3.0",
     "lodash.isequal": "^4.5.0",
     "uikit": "^3.17.11",
-    "@projectcaluma/ember-form": "^12.8.0",
-    "@projectcaluma/ember-core": "^12.8.0"
+    "@projectcaluma/ember-core": "^12.10.0",
+    "@projectcaluma/ember-form": "^12.10.0"
   },
   "//": [
     "TODO: remove obsolete dependency to `ember-data` which is only necessary",
@@ -53,10 +54,10 @@
     "docs app) but not as direct dependency of the package."
   ],
   "devDependencies": {
-    "@ember/optional-features": "2.0.0",
+    "@ember/optional-features": "2.1.0",
     "@ember/test-helpers": "3.2.1",
     "@embroider/test-setup": "3.0.3",
-    "@faker-js/faker": "8.3.1",
+    "@faker-js/faker": "8.4.1",
     "broccoli-asset-rev": "3.0.0",
     "ember-autoresize-modifier": "0.7.0",
     "ember-cli": "5.5.0",
@@ -72,15 +73,15 @@
     "ember-load-initializers": "2.1.2",
     "ember-qunit": "8.0.2",
     "ember-resolver": "11.0.1",
-    "ember-source": "5.5.0",
+    "ember-source": "5.6.0",
     "ember-source-channel-url": "3.0.0",
     "ember-try": "3.0.0",
     "loader.js": "4.7.0",
     "miragejs": "0.1.48",
     "qunit": "2.20.0",
     "qunit-dom": "3.0.0",
-    "webpack": "5.89.0",
-    "@projectcaluma/ember-testing": "12.8.0"
+    "webpack": "5.90.0",
+    "@projectcaluma/ember-testing": "12.10.0"
   },
   "peerDependencies": {
     "ember-engines": "^0.9.0",

package/translations/de.yaml

@@ -129,6 +129,7 @@ caluma:
       widgetOverrides:
         powerselect: "Power Select"
         hidden: "Versteckt"
+        number-separator: "Zahlentrennzeichen"
 
       not-found: "Keine Frage mit dem Slug '{slug}' gefunden"
 
@@ -175,6 +176,16 @@ caluma:
           success: "Ihre Frage wurde erfolgreich gespeichert!"
           error: "Hoppla, beim Speichern der Frage ist etwas schief gelaufen..."
 
+    copy-modal:
+      title: '"{form}" kopieren'
+      name:
+        label: "Name"
+        hint: "Original: {name}"
+      slug:
+        label: "Slug"
+        hint: "Original: {slug}"
+      submit: "Kopieren"
+
     validations:
       form:
         slug: "Ein Formular mit diesem Slug existiert bereits"

package/translations/en.yaml

@@ -129,6 +129,7 @@ caluma:
       widgetOverrides:
         powerselect: "Power Select"
         hidden: "Hidden"
+        number-separator: "Number separator"
 
       not-found: "No question with slug '{slug}' found"
 
@@ -175,6 +176,16 @@ caluma:
           success: "Your question was successfully saved!"
           error: "Ooops, something went wrong while saving the question..."
 
+    copy-modal:
+      title: 'Copy "{form}"'
+      name:
+        label: "Name"
+        hint: "Original: {name}"
+      slug:
+        label: "Slug"
+        hint: "Original: {slug}"
+      submit: "Copy"
+
     validations:
       form:
         slug: "A form with this slug already exists"

package/translations/fr.yaml

@@ -129,6 +129,7 @@ caluma:
       widgetOverrides:
         powerselect: "Power Select"
         hidden: "Caché"
+        number-separator: "Séparateur de chiffres"
 
       not-found: "Aucune question trouvée avec le slug '{slug}'"
 
@@ -175,6 +176,16 @@ caluma:
           success: "Votre question a été enregistrée avec succès !"
           error: "Oups, quelque chose s'est mal passé lors de l'enregistrement de la question..."
 
+    copy-modal:
+      title: 'Copier "{form}"'
+      name:
+        label: "Nom"
+        hint: "Original : {name}"
+      slug:
+        label: "Slug"
+        hint: "Original : {slug}"
+      submit: "Copier"
+
     validations:
       form:
         slug: "Un formulaire avec ce slug existe déjà"