From ebf757fd8df9aad27c0a7748bb69c34255ab3c01 Mon Sep 17 00:00:00 2001 From: Stephan Hug Date: Mon, 24 Jul 2023 21:30:01 +0200 Subject: [PATCH 1/4] feat: modal which shows in which form the question is used --- .../cfb-form-editor/question-usage.hbs | 56 +++++++++++++++++++ .../cfb-form-editor/question-usage.js | 29 ++++++++++ .../components/cfb-form-editor/question.hbs | 4 +- .../queries/all-forms-for-question.graphql | 13 +++++ .../cfb-form-editor/question-usage.js | 1 + .../tests/acceptance/question-usage-test.js | 46 +++++++++++++++ packages/form-builder/translations/de.yaml | 6 ++ packages/form-builder/translations/en.yaml | 6 ++ packages/form-builder/translations/fr.yaml | 6 ++ 9 files changed, 166 insertions(+), 1 deletion(-) create mode 100644 packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs create mode 100644 packages/form-builder/addon/components/cfb-form-editor/question-usage.js create mode 100644 packages/form-builder/addon/gql/queries/all-forms-for-question.graphql create mode 100644 packages/form-builder/app/components/cfb-form-editor/question-usage.js create mode 100644 packages/form-builder/tests/acceptance/question-usage-test.js diff --git a/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs b/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs new file mode 100644 index 000000000..157a27ccb --- /dev/null +++ b/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs @@ -0,0 +1,56 @@ + + {{t "caluma.form-builder.question.usage.button"}} + + + + + {{t "caluma.form-builder.question.usage.title"}} + + + {{#if this.forms.isLoading}} +
+ +
+ {{else}} +
    + {{#each this.forms.value as |form|}} +
  • +
    + + + {{form.node.name}} + + + + {{#if form.node.isArchived}} + + {{t "caluma.form-builder.form.isArchived"}} + + {{/if}} + + {{#unless form.node.isPublished}} + + {{t "caluma.form-builder.question.usage.not-published"}} + + {{/unless}} +
    +
    {{form.node.slug}}
    +
    • + {{else}} +
  • + {{t "caluma.form-builder.question.usage.no-forms-found"}} +
    • + {{/each}} +
+ {{/if}} + + \ No newline at end of file diff --git a/packages/form-builder/addon/components/cfb-form-editor/question-usage.js b/packages/form-builder/addon/components/cfb-form-editor/question-usage.js new file mode 100644 index 000000000..ee2226bbe --- /dev/null +++ b/packages/form-builder/addon/components/cfb-form-editor/question-usage.js @@ -0,0 +1,29 @@ +import Component from "@glimmer/component"; +import { tracked } from "@glimmer/tracking"; +import { queryManager } from "ember-apollo-client"; +import { trackedFunction } from "ember-resources/util/function"; + +import allFormsForQuestionQuery from "@projectcaluma/ember-form-builder/gql/queries/all-forms-for-question.graphql"; + +export default class CfbFormEditorQuestionUsage extends Component { + @tracked modalVisible = false; + @queryManager apollo; + + forms = trackedFunction(this, async () => { + if (!this.modalVisible) { + return null; + } + + const forms = await this.apollo.query( + { + query: allFormsForQuestionQuery, + variables: { + slug: this.args.model.slug, + }, + }, + "allForms.edges", + ); + + return forms; + }); +} diff --git a/packages/form-builder/addon/components/cfb-form-editor/question.hbs b/packages/form-builder/addon/components/cfb-form-editor/question.hbs index 5821f4437..1868e4c2b 100644 --- a/packages/form-builder/addon/components/cfb-form-editor/question.hbs +++ b/packages/form-builder/addon/components/cfb-form-editor/question.hbs @@ -434,7 +434,9 @@ /> {{/if}} -
+
+ + Date: Mon, 18 Dec 2023 17:23:45 +0100 Subject: [PATCH 2/4] fix: incorporate review feedback --- .../cfb-form-editor/question-usage.hbs | 58 +++++++++---------- .../cfb-form-editor/question-usage.js | 45 +++++++++----- .../components/cfb-form-editor/question.hbs | 4 +- packages/form-builder/translations/de.yaml | 5 +- packages/form-builder/translations/en.yaml | 5 +- packages/form-builder/translations/fr.yaml | 5 +- 6 files changed, 66 insertions(+), 56 deletions(-) diff --git a/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs b/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs index 157a27ccb..a8f8641ad 100644 --- a/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs +++ b/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs @@ -1,28 +1,28 @@ - - {{t "caluma.form-builder.question.usage.button"}} - +{{#let this.forms.value as |forms|}} + {{#if this.otherForms}} + + {{this.title}} + + {{/if}} - - - {{t "caluma.form-builder.question.usage.title"}} - - - {{#if this.forms.isLoading}} -
- -
- {{else}} -
    - {{#each this.forms.value as |form|}} + + + {{t "caluma.form-builder.question.usage.references-heading"}} + + +
      + {{#each forms as |form|}}
    • @@ -45,12 +45,8 @@
      {{form.node.slug}}
      • - {{else}} -
    • - {{t "caluma.form-builder.question.usage.no-forms-found"}} -
      • {{/each}}
    - {{/if}} -     -     \ No newline at end of file + + +{{/let}} \ No newline at end of file diff --git a/packages/form-builder/addon/components/cfb-form-editor/question-usage.js b/packages/form-builder/addon/components/cfb-form-editor/question-usage.js index ee2226bbe..55491978e 100644 --- a/packages/form-builder/addon/components/cfb-form-editor/question-usage.js +++ b/packages/form-builder/addon/components/cfb-form-editor/question-usage.js @@ -1,3 +1,4 @@ +import { inject as service } from "@ember/service"; import Component from "@glimmer/component"; import { tracked } from "@glimmer/tracking"; import { queryManager } from "ember-apollo-client"; @@ -6,24 +7,40 @@ import { trackedFunction } from "ember-resources/util/function"; import allFormsForQuestionQuery from "@projectcaluma/ember-form-builder/gql/queries/all-forms-for-question.graphql"; export default class CfbFormEditorQuestionUsage extends Component { - @tracked modalVisible = false; + @service intl; @queryManager apollo; - forms = trackedFunction(this, async () => { - if (!this.modalVisible) { - return null; - } + @tracked modalVisible = false; - const forms = await this.apollo.query( - { - query: allFormsForQuestionQuery, - variables: { - slug: this.args.model.slug, + get title() { + return this.intl.t("caluma.form-builder.question.usage.title", { + n: this.otherForms, + // for highlighting the number we use the tag + htmlSafe: true, + }); + } + + get otherForms() { + return this.forms.value?.length - 1 ?? 0; + } + + forms = trackedFunction(this, async () => { + try { + const forms = await this.apollo.query( + { + query: allFormsForQuestionQuery, + variables: { + slug: this.args.model.slug, + }, + fetchPolicy: "no-cache", }, - }, - "allForms.edges", - ); + "allForms.edges", + ); - return forms; + return forms; + } catch (error) { + console.error(error); + return { value: [] }; + } }); } diff --git a/packages/form-builder/addon/components/cfb-form-editor/question.hbs b/packages/form-builder/addon/components/cfb-form-editor/question.hbs index 1868e4c2b..0990c043a 100644 --- a/packages/form-builder/addon/components/cfb-form-editor/question.hbs +++ b/packages/form-builder/addon/components/cfb-form-editor/question.hbs @@ -434,8 +434,8 @@ /> {{/if}} -
    - +
    + einem Formular} other {# Formularen}} verwendet." + references-heading: "Alle Verweise auf diese Frage" not-published: "nicht publiziert" options: diff --git a/packages/form-builder/translations/en.yaml b/packages/form-builder/translations/en.yaml index 3b382e780..d817fcd70 100644 --- a/packages/form-builder/translations/en.yaml +++ b/packages/form-builder/translations/en.yaml @@ -134,9 +134,8 @@ caluma: hideLabel: "Hide label" usage: - button: "Forms with this question" - title: "Forms with this question" - no-forms-found: "No form was found that uses this question" + title: "This question is used in {n,plural, =1 {another form} other {# other forms}}" + references-heading: "All references of this question" not-published: "not published" options: diff --git a/packages/form-builder/translations/fr.yaml b/packages/form-builder/translations/fr.yaml index d897bcc2d..9add3c216 100644 --- a/packages/form-builder/translations/fr.yaml +++ b/packages/form-builder/translations/fr.yaml @@ -134,9 +134,8 @@ caluma: hideLabel: "Cacher l'étiquette" usage: - button: "Formulaires avec cette question" - title: "Formulaires avec cette question" - no-forms-found: "Aucun formulaire n'a été trouvé qui utilise cette question" + title: "Cette question est {n,plural, =1 {utilisé sous une forme} other {utilisé sous # formes}}." + references-heading: "Toutes les références à cette question" not-published: "non publié" options: From 63ab69c0635d6146e9437f57383e19b28d1e0821 Mon Sep 17 00:00:00 2001 From: Falk Date: Mon, 18 Dec 2023 20:19:51 +0100 Subject: [PATCH 3/4] test(question-usage): add basic tests --- .../cfb-form-editor/question-usage.hbs | 2 +- .../tests/acceptance/question-usage-test.js | 2 +- .../cfb-form-editor/question-usage-test.js | 58 +++++++++++++++++++ 3 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 packages/form-builder/tests/integration/components/cfb-form-editor/question-usage-test.js diff --git a/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs b/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs index a8f8641ad..a72503fd6 100644 --- a/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs +++ b/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs @@ -4,7 +4,7 @@ ...attributes href="#" {{on "click" (fn (mut this.modalVisible) true)}} - data-test-show-question-usage-modal-btn + data-test-show-question-usage-modal-link > {{this.title}} diff --git a/packages/form-builder/tests/acceptance/question-usage-test.js b/packages/form-builder/tests/acceptance/question-usage-test.js index c6dd84d6d..704c8a138 100644 --- a/packages/form-builder/tests/acceptance/question-usage-test.js +++ b/packages/form-builder/tests/acceptance/question-usage-test.js @@ -29,7 +29,7 @@ module("Acceptance | question usage", function (hooks) { await visit("/test-form/questions/test-question"); - await click("[data-test-show-question-usage-modal-btn]"); + await click("[data-test-show-question-usage-modal-link]"); assert.dom("[data-test-question-usage-modal]").isVisible(); diff --git a/packages/form-builder/tests/integration/components/cfb-form-editor/question-usage-test.js b/packages/form-builder/tests/integration/components/cfb-form-editor/question-usage-test.js new file mode 100644 index 000000000..2dcf05132 --- /dev/null +++ b/packages/form-builder/tests/integration/components/cfb-form-editor/question-usage-test.js @@ -0,0 +1,58 @@ +import { render, click, waitFor } from "@ember/test-helpers"; +import { hbs } from "ember-cli-htmlbars"; +import { setupMirage } from "ember-cli-mirage/test-support"; +import { setupIntl } from "ember-intl/test-support"; +import { module, test } from "qunit"; + +import { setupRenderingTest } from "dummy/tests/helpers"; + +module( + "Integration | Component | cfb-form-editor/question-usage", + function (hooks) { + setupRenderingTest(hooks); + setupMirage(hooks); + setupIntl(hooks); + + test("it renders", async function (assert) { + this.set( + "question", + this.server.create("question", { + label: "Test Label", + slug: "test-slug", + type: "TEXT", + }), + ); + + this.server.createList("form", 3, { questions: [this.question] }); + + await render( + hbs``, + ); + + await waitFor("[data-test-show-question-usage-modal-link]"); + await click("[data-test-show-question-usage-modal-link]"); + + assert.dom("[data-test-question-usage-modal]").isVisible(); + assert.dom("[data-test-question-form-item]").exists({ count: 3 }); + }); + + test("it is hidden when no other reference to this question exists", async function (assert) { + this.set( + "question", + this.server.create("question", { + label: "Test Label", + slug: "test-slug", + type: "TEXT", + }), + ); + + this.server.create("form", { questions: [this.question] }); + + await render( + hbs``, + ); + + assert.dom("[data-test-show-question-usage-modal-link]").isNotVisible(); + }); + }, +); From cce8b612762be5a4c9eb4e12be20aa0a60b1f33a Mon Sep 17 00:00:00 2001 From: Falk Date: Tue, 19 Dec 2023 13:41:13 +0100 Subject: [PATCH 4/4] fix(question-usage): use basic reference for forms --- .../cfb-form-editor/question-usage.hbs | 96 +++++++++---------- 1 file changed, 47 insertions(+), 49 deletions(-) diff --git a/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs b/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs index a72503fd6..f28cf3281 100644 --- a/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs +++ b/packages/form-builder/addon/components/cfb-form-editor/question-usage.hbs @@ -1,52 +1,50 @@ -{{#let this.forms.value as |forms|}} - {{#if this.otherForms}} - - {{this.title}} - - {{/if}} - - - - {{t "caluma.form-builder.question.usage.references-heading"}} - - -
      - {{#each forms as |form|}} -
    • -
      - - - {{form.node.name}} - - + {{this.title}} + +{{/if}} + + + + {{t "caluma.form-builder.question.usage.references-heading"}} + + +
        + {{#each this.forms.value as |form|}} +
      • +
        + + + {{form.node.name}} + + - {{#if form.node.isArchived}} - - {{t "caluma.form-builder.form.isArchived"}} - - {{/if}} + {{#if form.node.isArchived}} + + {{t "caluma.form-builder.form.isArchived"}} + + {{/if}} - {{#unless form.node.isPublished}} - - {{t "caluma.form-builder.question.usage.not-published"}} - - {{/unless}} -
        -
        {{form.node.slug}}
        -
        • - {{/each}} -
      -       -       -{{/let}} \ No newline at end of file + {{#unless form.node.isPublished}} + + {{t "caluma.form-builder.question.usage.not-published"}} + + {{/unless}} +
      +
      {{form.node.slug}}
      +
      • + {{/each}} +
    +     +     \ No newline at end of file