fix: incorporate review feedback

projectcaluma · Dec 18, 2023 · e6a8b24 · e6a8b24
1 parent ebf757f
commit e6a8b24
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 66 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
@@ -1,56 +1,63 @@
-<UkButton
-  {{on "click" (fn (mut this.modalVisible) true)}}
-  data-test-show-question-usage-modal-btn
->
-  {{t "caluma.form-builder.question.usage.button"}}
-</UkButton>
+{{#let this.forms.value as |forms|}}
+  {{#if forms.length}}
+    <a
+      href="#"
+      {{on "click" (fn (mut this.modalVisible) true)}}
+      data-test-show-question-usage-modal-btn
+    >
+      {{this.title}}
+    </a>
+  {{else}}
+    <span class="uk-text-muted">{{this.title}}</span>
+  {{/if}}
 
-<UkModal
-  @visible={{this.modalVisible}}
-  @stack={{true}}
-  @onHide={{fn (mut this.modalVisible) false}}
-  data-test-question-usage-modal
-  as |modal|
->
-  <modal.header>
-    {{t "caluma.form-builder.question.usage.title"}}
-  </modal.header>
-  <modal.body>
-    {{#if this.forms.isLoading}}
-      <div class="uk-text-center">
-        <UkSpinner @ratio={{1}} />
-      </div>
-    {{else}}
-      <ul class="uk-list uk-list-divider" id="question-list">
-        {{#each this.forms.value as |form|}}
-          <li data-test-question-form-item={{form.node.slug}}>
-            <div class="uk-flex uk-flex-middle">
-              <span class="uk-width-expand">
-                <LinkTo @route="edit" @model={{form.node.slug}}>
-                  {{form.node.name}}
-                </LinkTo>
-              </span>
+  <UkModal
+    @visible={{this.modalVisible}}
+    @stack={{true}}
+    @onHide={{fn (mut this.modalVisible) false}}
+    data-test-question-usage-modal
+    as |modal|
+  >
+    <modal.header>
+      {{this.title}}
+    </modal.header>
+    <modal.body>
+      {{#if this.forms.isLoading}}
+        <div class="uk-text-center">
+          <UkSpinner />
+        </div>
+      {{else}}
+        <ul class="uk-list uk-list-divider">
+          {{#each this.forms.value as |form|}}
+            <li data-test-question-form-item={{form.node.slug}}>
+              <div class="uk-flex uk-flex-middle">
+                <span class="uk-width-expand">
+                  <LinkTo @route="edit" @model={{form.node.slug}}>
+                    {{form.node.name}}
+                  </LinkTo>
+                </span>
 
-              {{#if form.node.isArchived}}
-                <UkBadge>
-                  {{t "caluma.form-builder.form.isArchived"}}
-                </UkBadge>
-              {{/if}}
+                {{#if form.node.isArchived}}
+                  <UkBadge>
+                    {{t "caluma.form-builder.form.isArchived"}}
+                  </UkBadge>
+                {{/if}}
 
-              {{#unless form.node.isPublished}}
-                <UkBadge class="uk-margin-small-left">
-                  {{t "caluma.form-builder.question.usage.not-published"}}
-                </UkBadge>
-              {{/unless}}
-            </div>
-            <div class="uk-text-muted uk-text-small">{{form.node.slug}}</div>
-          </li>
-        {{else}}
-          <li class="uk-text-muted">
-            {{t "caluma.form-builder.question.usage.no-forms-found"}}
-          </li>
-        {{/each}}
-      </ul>
-    {{/if}}
-  </modal.body>
-</UkModal>
+                {{#unless form.node.isPublished}}
+                  <UkBadge class="uk-margin-small-left">
+                    {{t "caluma.form-builder.question.usage.not-published"}}
+                  </UkBadge>
+                {{/unless}}
+              </div>
+              <div class="uk-text-muted uk-text-small">{{form.node.slug}}</div>
+            </li>
+          {{else}}
+            <li class="uk-text-muted">
+              {{t "caluma.form-builder.question.usage.no-forms-found"}}
+            </li>
+          {{/each}}
+        </ul>
+      {{/if}}
+    </modal.body>
+  </UkModal>
+{{/let}}
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
@@ -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,20 +7,27 @@ 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;
 
+  get title() {
+    return this.intl.t("caluma.form-builder.question.usage.title", {
+      n: this.forms.value?.length ?? 0,
+      // for highlighting the number we use the <b> tag
+      htmlSafe: true,
+    });
+  }
+
+  forms = trackedFunction(this, async () => {
     const forms = await this.apollo.query(
       {
         query: allFormsForQuestionQuery,
         variables: {
           slug: this.args.model.slug,
         },
+        fetchPolicy: "no-cache",
       },
       "allForms.edges",
     );

diff --git 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,7 @@
         />
       {{/if}}
 
-      <div class="uk-flex uk-flex-between">
+      <div class="uk-flex uk-flex-between uk-flex-middle">
         <CfbFormEditor::QuestionUsage @model={{f.model}} />
 
         <f.submit

diff --git a/packages/form-builder/translations/de.yaml b/packages/form-builder/translations/de.yaml
@@ -134,9 +134,8 @@ caluma:
       hideLabel: "Label verstecken"
 
       usage:
-        button: "Formulare mit dieser Frage"
-        title: "Formulare mit dieser Frage"
-        no-forms-found: "Es wurde keine Formular gefunden welche diese Frage verwenden"
+        title: "Diese Frage wird in {n,plural, =0 {keinem Formular} =1 {<b>einem</b> Formular} other {<b>#</b> Formularen}} verwendet."
+        no-forms-found: "Es wurde kein Formular gefunden, welches diese Frage verwendet."
         not-published: "nicht publiziert"
 
     options:

diff --git a/packages/form-builder/translations/en.yaml b/packages/form-builder/translations/en.yaml
@@ -134,8 +134,7 @@ caluma:
       hideLabel: "Hide label"
 
       usage:
-        button: "Forms with this question"
-        title: "Forms with this question"
+        title: "This question is {n,plural, =0 {not used in any form} =1 {used in <b>one</b> form} other {used in <b>#</b> forms}}."
         no-forms-found: "No form was found that uses this question"
         not-published: "not published"
 

diff --git a/packages/form-builder/translations/fr.yaml b/packages/form-builder/translations/fr.yaml
@@ -134,8 +134,7 @@ caluma:
       hideLabel: "Cacher l'étiquette"
 
       usage:
-        button: "Formulaires avec cette question"
-        title: "Formulaires avec cette question"
+        title: "Cette question est {n,plural, =0 {n'est utilisé sous aucune forme} =1 {utilisé sous <b>une</b> forme} autre {utilisé sous <b>#</b> formes}}."
         no-forms-found: "Aucun formulaire n'a été trouvé qui utilise cette question"
         not-published: "non publié"