feat: copy forms

packages/form-builder/addon/components/cfb-form-list/copy-modal.hbs

@@ -0,0 +1,49 @@
+{{#if this.visible}}
+  <UkModal
+    @visible={{this.visible}}
+    @onHide={{fn (mut this.visible) false}}
+    data-test-copy-form-modal
+    as |modal|
+  >
+    <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}}
+          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>
+  </UkModal>
+{{/if}}
+
+{{yield (hash toggle=this.toggle)}}

packages/form-builder/addon/components/cfb-form-list/copy-modal.js

@@ -0,0 +1,70 @@
+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 componentsCfbFormItemListCopyModal 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,
+      lookupValidator(validations),
+      validations,
+    );
+  }
+
+  @action
+  toggle() {
+    this.visible = !this.visible;
+  }
+
+  @dropTask
+  *submit(changeset) {
+    try {
+      const form = 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.${
+            this.args.slug ? "save" : "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`,
+        ),
+      );
+    }
+  }
+}

packages/form-builder/addon/components/cfb-form-list/item.hbs

@@ -7,6 +7,17 @@
   </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"

packages/form-builder/addon/gql/mutations/copy-form.graphql

@@ -0,0 +1,11 @@
+#import FormInfo from '../fragments/form-info.graphql'
+
+mutation CopyForm($input: CopyFormInput!) {
+  copyForm(input: $input) {
+    form {
+      id
+      ...FormInfo
+    }
+    clientMutationId
+  }
+}

packages/form-builder/app/components/cfb-form-list/copy-modal.js

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

packages/form-builder/tests/acceptance/form-copy-test.js

@@ -0,0 +1,36 @@
+import { visit, click, fillIn, currentURL } from "@ember/test-helpers";
+import { setupMirage } from "ember-cli-mirage/test-support";
+import { setupIntl } from "ember-intl/test-support";
+import { module, test } from "qunit";
+
+import { setupApplicationTest } from "dummy/tests/helpers";
+
+module("Acceptance | form copy", function (hooks) {
+  setupApplicationTest(hooks);
+  setupMirage(hooks);
+  setupIntl(hooks);
+
+  test("can copy a form", async function (assert) {
+    assert.expect(5);
+
+    const form = this.server.create("form");
+
+    await visit("/");
+
+    assert.dom("[data-test-copy-form-modal]").isNotVisible();
+
+    await click(`[data-test-copy-form-button=${form.slug}]`);
+
+    assert.dom("[data-test-copy-form-modal]").isVisible();
+
+    assert.dom("[data-test-copy-modal-input-name]").hasValue(form.name);
+    assert.dom("[data-test-copy-modal-input-slug]").hasValue(form.slug);
+
+    await fillIn("[data-test-copy-modal-input-name]", `${form.name} copy`);
+    await fillIn("[data-test-copy-modal-input-slug]", `${form.slug}-copy`);
+
+    await click("[data-test-copy-form-submit]");
+
+    assert.strictEqual(currentURL(), `/${form.slug}-copy`);
+  });
+});

packages/form-builder/translations/de.yaml

@@ -175,6 +175,15 @@ 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: "Formular kopieren"
     validations:
       form:
         slug: "Ein Formular mit diesem Slug existiert bereits"

packages/form-builder/translations/en.yaml

@@ -175,6 +175,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 form"
+
     validations:
       form:
         slug: "A form with this slug already exists"

packages/testing/addon/mirage-graphql/mocks/form.js

@@ -37,4 +37,13 @@ export default class FormMock extends BaseMock {
       },
     });
   }
+
+  @register("CopyFormPayload")
+  handleCopyForm(_, { input }) {
+    return this.handleSavePayload.fn.call(this, _, {
+      input: {
+        slug: input.slug,
+      },
+    });
+  }
 }