From 2a29cfd401303784b857ade7ad1296f57fbbc562 Mon Sep 17 00:00:00 2001
From: Falk <falk.neumann@adfinis.com>
Date: Tue, 19 Dec 2023 13:54:22 +0100
Subject: [PATCH] fix: incorporate review feedback

---
 .../copy-modal.hbs                            | 19 ++++++++++---------
 .../copy-modal.js                             | 14 +++-----------
 .../components/cfb-form-editor/general.hbs    |  9 +++++++++
 .../cfb-form-editor/question-list.hbs         |  2 +-
 .../addon/components/cfb-form-list/item.hbs   | 11 -----------
 .../addon/components/cfb-slug-input.hbs       |  1 +
 .../addon/components/cfb-slug-input.js        | 11 +++++++++++
 .../tests/acceptance/form-copy-test.js        |  9 ++++++---
 packages/form-builder/translations/de.yaml    |  3 ++-
 packages/form-builder/translations/en.yaml    |  2 +-
 packages/form-builder/translations/fr.yaml    | 10 ++++++++++
 11 files changed, 54 insertions(+), 37 deletions(-)
 rename packages/form-builder/addon/components/{cfb-form-list => cfb-form-editor}/copy-modal.hbs (83%)
 rename packages/form-builder/addon/components/{cfb-form-list => cfb-form-editor}/copy-modal.js (79%)

diff --git a/packages/form-builder/addon/components/cfb-form-list/copy-modal.hbs b/packages/form-builder/addon/components/cfb-form-editor/copy-modal.hbs
similarity index 83%
rename from packages/form-builder/addon/components/cfb-form-list/copy-modal.hbs
rename to packages/form-builder/addon/components/cfb-form-editor/copy-modal.hbs
index db06148b4d..9e4da8abbc 100644
--- a/packages/form-builder/addon/components/cfb-form-list/copy-modal.hbs
+++ b/packages/form-builder/addon/components/cfb-form-editor/copy-modal.hbs
@@ -1,10 +1,10 @@
-{{#if this.visible}}
-  <UkModal
-    @visible={{this.visible}}
-    @onHide={{fn (mut this.visible) false}}
-    data-test-copy-form-modal
-    as |modal|
-  >
+<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}}
@@ -26,6 +26,7 @@
           @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>
@@ -43,7 +44,7 @@
         </f.submit>
       </modal.footer>
     </ValidatedForm>
-  </UkModal>
-{{/if}}
+  {{/if}}
+</UkModal>
 
 {{yield (hash toggle=this.toggle)}}
\ No newline at end of file
diff --git a/packages/form-builder/addon/components/cfb-form-list/copy-modal.js b/packages/form-builder/addon/components/cfb-form-editor/copy-modal.js
similarity index 79%
rename from packages/form-builder/addon/components/cfb-form-list/copy-modal.js
rename to packages/form-builder/addon/components/cfb-form-editor/copy-modal.js
index 7bdffd676f..8c21bcb0fd 100644
--- a/packages/form-builder/addon/components/cfb-form-list/copy-modal.js
+++ b/packages/form-builder/addon/components/cfb-form-editor/copy-modal.js
@@ -10,7 +10,7 @@ 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 componentsCfbFormItemListCopyModal extends Component {
+export default class CfbFormEditorCopyModal extends Component {
   @queryManager apollo;
   @service notification;
   @service router;
@@ -49,21 +49,13 @@ export default class componentsCfbFormItemListCopyModal extends Component {
       );
 
       this.notification.success(
-        this.intl.t(
-          `caluma.form-builder.notification.form.${
-            this.args.slug ? "save" : "create"
-          }.success`,
-        ),
+        this.intl.t("caluma.form-builder.notification.form.create.success"),
       );
 
       this.router.transitionTo("edit", form.slug);
     } catch (e) {
       this.notification.danger(
-        this.intl.t(
-          `caluma.form-builder.notification.form.${
-            this.args.slug ? "save" : "create"
-          }.error`,
-        ),
+        this.intl.t("caluma.form-builder.notification.form.create.error"),
       );
     }
   }
diff --git a/packages/form-builder/addon/components/cfb-form-editor/general.hbs b/packages/form-builder/addon/components/cfb-form-editor/general.hbs
index c684760b52..69cf2da255 100644
--- a/packages/form-builder/addon/components/cfb-form-editor/general.hbs
+++ b/packages/form-builder/addon/components/cfb-form-editor/general.hbs
@@ -50,6 +50,15 @@
     />
 
     <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"}}
diff --git a/packages/form-builder/addon/components/cfb-form-editor/question-list.hbs b/packages/form-builder/addon/components/cfb-form-editor/question-list.hbs
index 98264e0ddc..2543c2e2d5 100644
--- a/packages/form-builder/addon/components/cfb-form-editor/question-list.hbs
+++ b/packages/form-builder/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>
diff --git a/packages/form-builder/addon/components/cfb-form-list/item.hbs b/packages/form-builder/addon/components/cfb-form-list/item.hbs
index 38dfa1d8d7..2e97db05a9 100644
--- a/packages/form-builder/addon/components/cfb-form-list/item.hbs
+++ b/packages/form-builder/addon/components/cfb-form-list/item.hbs
@@ -7,17 +7,6 @@
   </span>
   <span class="uk-label {{this.labelClass}}">{{this.labelName}}</span>
   <span class="uk-width-auto uk-margin-small-left">
-    <CfbFormList::CopyModal @item={{@item}} as |modal|>
-      <button
-        type="button"
-        uk-icon="copy"
-        class="uk-icon-button"
-        data-test-copy-form-button={{@item.slug}}
-        {{on "click" modal.toggle}}
-      >
-      </button>
-    </CfbFormList::CopyModal>
-
     <button
       data-test-edit-form
       type="button"
diff --git a/packages/form-builder/addon/components/cfb-slug-input.hbs b/packages/form-builder/addon/components/cfb-slug-input.hbs
index f65fccd8ac..36bd9854a0 100644
--- a/packages/form-builder/addon/components/cfb-slug-input.hbs
+++ b/packages/form-builder/addon/components/cfb-slug-input.hbs
@@ -14,6 +14,7 @@
         </span>
       {{/if}}
       <input
+        ...attributes
         id={{@inputId}}
         name={{or @inputName @name}}
         type="text"
diff --git a/packages/form-builder/addon/components/cfb-slug-input.js b/packages/form-builder/addon/components/cfb-slug-input.js
index 4d5b971a0a..fa7866dc4c 100644
--- a/packages/form-builder/addon/components/cfb-slug-input.js
+++ b/packages/form-builder/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,16 @@ 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,
+      this._calculatePadding.bind(this, element),
+    );
+  }
+
+  _calculatePadding(element) {
     const prefixWidth = element.clientWidth;
     const prefixMargin = window.getComputedStyle(element).marginLeft;
 
diff --git a/packages/form-builder/tests/acceptance/form-copy-test.js b/packages/form-builder/tests/acceptance/form-copy-test.js
index 609d02a23b..18daac2175 100644
--- a/packages/form-builder/tests/acceptance/form-copy-test.js
+++ b/packages/form-builder/tests/acceptance/form-copy-test.js
@@ -17,12 +17,15 @@ module("Acceptance | form copy", function (hooks) {
 
     await visit("/");
 
-    assert.dom("[data-test-copy-form-modal]").isNotVisible();
+    await click(
+      `[data-test-form-list-item=${form.slug}] [data-test-edit-form]`,
+    );
 
-    await click(`[data-test-copy-form-button=${form.slug}]`);
+    assert.dom("[data-test-copy-form-modal] form").isNotVisible();
 
-    assert.dom("[data-test-copy-form-modal]").isVisible();
+    await click(`[data-test-copy-form-button=${form.slug}]`);
 
+    assert.dom("[data-test-copy-form-modal] form").isVisible();
     assert.dom("[data-test-copy-modal-input-name]").hasValue(form.name);
     assert.dom("[data-test-copy-modal-input-slug]").hasValue(form.slug);
 
diff --git a/packages/form-builder/translations/de.yaml b/packages/form-builder/translations/de.yaml
index 7023a1380d..2923bd37ee 100644
--- a/packages/form-builder/translations/de.yaml
+++ b/packages/form-builder/translations/de.yaml
@@ -183,7 +183,8 @@ caluma:
       slug:
         label: "Slug"
         hint: "Original: {slug}"
-      submit: "Formular kopieren"
+      submit: "Kopieren"
+
     validations:
       form:
         slug: "Ein Formular mit diesem Slug existiert bereits"
diff --git a/packages/form-builder/translations/en.yaml b/packages/form-builder/translations/en.yaml
index 5068a25ab6..f332bbc64b 100644
--- a/packages/form-builder/translations/en.yaml
+++ b/packages/form-builder/translations/en.yaml
@@ -183,7 +183,7 @@ caluma:
       slug:
         label: "Slug"
         hint: "Original: {slug}"
-      submit: "Copy form"
+      submit: "Copy"
 
     validations:
       form:
diff --git a/packages/form-builder/translations/fr.yaml b/packages/form-builder/translations/fr.yaml
index 4376e4288b..84744958c6 100644
--- a/packages/form-builder/translations/fr.yaml
+++ b/packages/form-builder/translations/fr.yaml
@@ -175,6 +175,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à"