@projectcaluma/ember-form-builder 12.6.0 → 12.8.0

package/addon/components/cfb-code-editor.hbs

@@ -4,11 +4,14 @@
   <div class="uk-form-controls">
     <div
       name={{@name}}
-      class="uk-textarea cfb-code-editor {{concat 'language-' @language}}"
+      class="uk-textarea cfb-code-editor
+        {{concat 'language-' @language}}
+        {{if @isValid 'uk-form-success'}}
+        {{if @isInvalid 'uk-form-danger'}}"
       {{did-insert this.didInsertNode}}
       {{will-destroy this.willDestroyNode}}
       {{autoresize mode="height"}}
-      {{on "blur" @setDirty}}
+      {{on "blur" this.onBlur}}
     ></div>
   </div>
 

package/addon/components/cfb-code-editor.js

@@ -6,6 +6,8 @@ import hljs from "highlight.js/lib/core";
 import json from "highlight.js/lib/languages/json";
 import markdown from "highlight.js/lib/languages/markdown";
 import jexl from "highlightjs-jexl/src/languages/jexl";
+import isEqual from "lodash.isequal";
+import "highlight.js/styles/github.css";
 
 hljs.configure({ ignoreUnescapedHTML: true });
 
@@ -15,14 +17,15 @@ hljs.registerLanguage("jexl", jexl);
 
 export default class CfbCodeEditorComponent extends Component {
   _editor = null;
-  _cursor = null;
-  _lastValue = null;
-
-  get value() {
-    const value = this.args.value;
-
-    if (this.args.language === "json" && typeof value === "object") {
-      return JSON.stringify(value?.unwrap?.() ?? value, null, 2);
+  _lastValue = this.args.value;
+
+  get stringValue() {
+    if (this.args.language === "json" && typeof this.args.value === "object") {
+      return JSON.stringify(
+        this.args.value?.unwrap?.() ?? this.args.value,
+        null,
+        2,
+      );
     }
 
     return this.args.value;
@@ -30,10 +33,6 @@ export default class CfbCodeEditorComponent extends Component {
 
   @action
   onUpdate(value) {
-    if (this._lastValue === value) return;
-
-    this._cursor = this._editor.save();
-
     if (this.args.language === "json") {
       try {
         value = JSON.parse(value);
@@ -42,26 +41,37 @@ export default class CfbCodeEditorComponent extends Component {
       }
     }
 
+    if (isEqual(this._lastValue, value)) return;
+
     this._lastValue = value;
     this.args.update(value);
   }
 
   @action
   updateCode() {
-    this._editor.updateCode(this.value);
+    if (isEqual(this._lastValue, this.args.value)) return;
 
-    if (this._cursor) {
-      this._editor.restore(this._cursor);
-      this._cursor = null;
-    }
+    this._editor.updateCode(this.stringValue, false);
+  }
+
+  @action
+  onBlur() {
+    this._editor.updateCode(this.stringValue);
+    this.args.setDirty();
   }
 
   @action
   didInsertNode(element) {
-    this._editor = CodeJar(element, (editor) => hljs.highlightElement(editor));
-    this._editor.onUpdate(this.onUpdate);
+    this._editor = CodeJar(element, (editor) => {
+      editor.removeAttribute("data-highlighted");
+      hljs.highlightElement(editor);
+    });
+
+    // set initial value
+    this._editor.updateCode(this.stringValue);
 
-    this.updateCode();
+    // register update method
+    this._editor.onUpdate(this.onUpdate);
 
     // eslint-disable-next-line ember/no-observers
     addObserver(this.args, "value", this, "updateCode");

package/addon/components/cfb-form-editor/question-list/item.js

@@ -23,8 +23,8 @@ export default class CfbFormEditorQuestionListItem extends Component {
     return required === true
       ? "required"
       : required
-      ? "conditional"
-      : "not-required";
+        ? "conditional"
+        : "not-required";
   }
 
   get hidden() {

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

@@ -0,0 +1,50 @@
+{{#if this.otherForms}}
+  <a
+    ...attributes
+    href="#"
+    {{on "click" (fn (mut this.modalVisible) true)}}
+    data-test-show-question-usage-modal-link
+  >
+    {{this.title}}
+  </a>
+{{/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.references-heading"}}
+  </modal.header>
+  <modal.body>
+    <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}}
+
+            {{#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>
+      {{/each}}
+    </ul>
+  </modal.body>
+</UkModal>

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

@@ -0,0 +1,46 @@
+import { inject as service } from "@ember/service";
+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 {
+  @service intl;
+  @queryManager apollo;
+
+  @tracked modalVisible = false;
+
+  get title() {
+    return this.intl.t("caluma.form-builder.question.usage.title", {
+      n: this.otherForms,
+      // for highlighting the number we use the <b> 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",
+      );
+
+      return forms;
+    } catch (error) {
+      console.error(error);
+      return { value: [] };
+    }
+  });
+}

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

@@ -440,7 +440,9 @@
         />
       {{/if}}
 
-      <div class="uk-text-right">
+      <div class="uk-flex uk-flex-between uk-flex-middle uk-flex-row-reverse">
+        <CfbFormEditor::QuestionUsage @model={{f.model}} class="uk-flex-last" />
+
         <f.submit
           @disabled={{f.loading}}
           @label={{t "caluma.form-builder.global.save"}}

package/addon/components/cfb-form-list.js

@@ -42,8 +42,8 @@ export default class ComponentsCfbFormListComponent extends Component {
       this.args.category === "active"
         ? { isArchived: false }
         : this.args.category === "archived"
-        ? { isArchived: true }
-        : null;
+          ? { isArchived: true }
+          : null;
 
     const search = this.args.search ? { search: this.args.search } : null;
 
@@ -51,8 +51,8 @@ export default class ComponentsCfbFormListComponent extends Component {
       this.args.category === "unpublished"
         ? { isPublished: false }
         : this.args.category === "published"
-        ? { isPublished: true }
-        : null;
+          ? { isPublished: true }
+          : null;
 
     return [isArchived, isPublished, search].filter(Boolean) || null;
   }

package/addon/gql/queries/all-forms-for-question.graphql

@@ -0,0 +1,13 @@
+query AllFormsForQuestion($slug: String!) {
+  allForms(filter: [{ questions: [$slug] }]) {
+    edges {
+      node {
+        id
+        slug
+        name
+        isArchived
+        isPublished
+      }
+    }
+  }
+}

package/addon/routes/application.js

@@ -1,6 +1,5 @@
 import Route from "@ember/routing/route";
 import { inject as service } from "@ember/service";
-import { t } from "ember-intl";
 
 import { navigationTitle } from "@projectcaluma/ember-form-builder/decorators";
 
@@ -8,6 +7,7 @@ export default class ApplicationRoute extends Route {
   @service intl;
 
   @navigationTitle
-  @t("caluma.form-builder.form.allForms")
-  title;
+  get title() {
+    return this.intl.t("caluma.form-builder.form.allForms");
+  }
 }

package/addon/routes/edit/questions/new.js

@@ -1,6 +1,5 @@
 import Route from "@ember/routing/route";
 import { inject as service } from "@ember/service";
-import { t } from "ember-intl";
 
 import { navigationTitle } from "@projectcaluma/ember-form-builder/decorators";
 
@@ -8,8 +7,9 @@ export default class EditQuestionsNewRoute extends Route {
   @service intl;
 
   @navigationTitle
-  @t("caluma.form-builder.question.new")
-  title;
+  get title() {
+    return this.intl.t("caluma.form-builder.question.new");
+  }
 
   model() {
     return this.modelFor("edit");

package/addon/routes/new.js

@@ -1,6 +1,5 @@
 import Route from "@ember/routing/route";
 import { inject as service } from "@ember/service";
-import { t } from "ember-intl";
 
 import { navigationTitle } from "@projectcaluma/ember-form-builder/decorators";
 
@@ -8,6 +7,7 @@ export default class NewRoute extends Route {
   @service intl;
 
   @navigationTitle
-  @t("caluma.form-builder.form.new")
-  title;
+  get title() {
+    return this.intl.t("caluma.form-builder.form.new");
+  }
 }

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form-builder",
-  "version": "12.6.0",
+  "version": "12.8.0",
   "description": "Ember engine for building Caluma forms.",
   "keywords": [
     "ember-addon",
@@ -10,39 +10,41 @@
   "homepage": "https://docs.caluma.io/ember-caluma",
   "repository": "github:projectcaluma/ember-caluma",
   "dependencies": {
-    "@ember/legacy-built-in-components": "^0.4.2",
+    "@babel/core": "^7.23.6",
+    "@ember/legacy-built-in-components": "^0.5.0",
     "@ember/render-modifiers": "^2.1.0",
     "@ember/string": "^3.1.1",
-    "@embroider/macros": "^1.13.0",
+    "@embroider/macros": "^1.13.4",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
-    "codejar": "^3.7.0",
+    "codejar": "^4.2.0",
     "ember-apollo-client": "~4.0.2",
-    "ember-auto-import": "^2.6.3",
+    "ember-auto-import": "^2.7.1",
     "ember-changeset": "^4.1.2",
     "ember-changeset-validations": "^4.1.1",
-    "ember-cli-babel": "^7.26.11",
-    "ember-cli-htmlbars": "^6.2.0",
+    "ember-cli-babel": "^8.2.0",
+    "ember-cli-htmlbars": "^6.3.0",
     "ember-composable-helpers": "^5.0.0",
-    "ember-concurrency": "^3.0.0",
-    "ember-engines-router-service": "^0.3.0",
+    "ember-concurrency": "^3.1.1",
+    "ember-engines-router-service": "^0.5.0",
     "ember-fetch": "^8.1.2",
     "ember-flatpickr": "^4.0.0",
-    "ember-intl": "^5.7.2",
-    "ember-math-helpers": "^3.0.0",
-    "ember-power-select": "^7.1.0",
-    "ember-resources": "^6.4.0",
+    "ember-intl": "^6.4.0",
+    "ember-math-helpers": "^4.0.0",
+    "ember-power-select": "^7.2.0",
+    "ember-resources": "^6.4.2",
     "ember-test-selectors": "^6.0.0",
-    "ember-uikit": "^8.0.0",
-    "ember-validated-form": "^6.2.0",
+    "ember-uikit": "^9.0.0",
+    "ember-validated-form": "^7.0.0",
     "graphql": "^15.8.0",
     "graphql-tag": "^2.12.6",
-    "highlight.js": "^11.8.0",
+    "highlight.js": "^11.9.0",
     "highlightjs-jexl": "^0.0.5",
     "jexl": "^2.3.0",
-    "uikit": "^3.16.26",
-    "@projectcaluma/ember-core": "^12.6.0",
-    "@projectcaluma/ember-form": "^12.6.0"
+    "lodash.isequal": "^4.5.0",
+    "uikit": "^3.17.11",
+    "@projectcaluma/ember-form": "^12.8.0",
+    "@projectcaluma/ember-core": "^12.8.0"
   },
   "//": [
     "TODO: remove obsolete dependency to `ember-data` which is only necessary",
@@ -52,39 +54,51 @@
   ],
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
-    "@ember/test-helpers": "3.2.0",
-    "@embroider/test-setup": "3.0.1",
-    "@faker-js/faker": "8.0.2",
+    "@ember/test-helpers": "3.2.1",
+    "@embroider/test-setup": "3.0.3",
+    "@faker-js/faker": "8.3.1",
     "broccoli-asset-rev": "3.0.0",
     "ember-autoresize-modifier": "0.7.0",
-    "ember-cli": "4.12.2",
-    "ember-cli-code-coverage": "2.0.0",
+    "ember-cli": "5.5.0",
+    "ember-cli-clean-css": "3.0.0",
+    "ember-cli-code-coverage": "2.0.3",
     "ember-cli-dependency-checker": "3.3.2",
     "ember-cli-inject-live-reload": "2.1.0",
-    "ember-cli-mirage": "3.0.0-alpha.3",
+    "ember-cli-mirage": "3.0.2",
     "ember-cli-sri": "2.1.1",
     "ember-cli-terser": "4.0.2",
-    "ember-data": "4.12.3",
+    "ember-data": "5.3.0",
     "ember-engines": "0.9.0",
     "ember-load-initializers": "2.1.2",
-    "ember-qunit": "7.0.0",
-    "ember-resolver": "11.0.0",
-    "ember-source": "4.12.3",
+    "ember-qunit": "8.0.2",
+    "ember-resolver": "11.0.1",
+    "ember-source": "5.5.0",
     "ember-source-channel-url": "3.0.0",
-    "ember-try": "2.0.0",
+    "ember-try": "3.0.0",
     "loader.js": "4.7.0",
-    "miragejs": "0.1.47",
-    "qunit": "2.19.4",
-    "qunit-dom": "2.0.0",
+    "miragejs": "0.1.48",
+    "qunit": "2.20.0",
+    "qunit-dom": "3.0.0",
     "webpack": "5.89.0",
-    "@projectcaluma/ember-testing": "12.6.0"
+    "@projectcaluma/ember-testing": "12.8.0"
   },
   "peerDependencies": {
     "ember-engines": "^0.9.0",
     "ember-source": "^4.0.0"
   },
+  "dependenciesMeta": {
+    "@projectcaluma/ember-core": {
+      "injected": true
+    },
+    "@projectcaluma/ember-form": {
+      "injected": true
+    },
+    "@projectcaluma/ember-testing": {
+      "injected": true
+    }
+  },
   "engines": {
-    "node": "14.* || 16.* || >= 18"
+    "node": ">= 18"
   },
   "ember": {
     "edition": "octane"

package/translations/de.yaml

@@ -134,6 +134,11 @@ caluma:
 
       hideLabel: "Label verstecken"
 
+      usage:
+        title: "Diese Frage wird in {n,plural, =1 {<b>einem</b> Formular} other {<b>#</b> Formularen}} verwendet."
+        references-heading: "Alle Verweise auf diese Frage"
+        not-published: "nicht publiziert"
+
     options:
       delete: "Option löschen"
       archive: "Option archivieren (verstecken)"

package/translations/en.yaml

@@ -134,6 +134,11 @@ caluma:
 
       hideLabel: "Hide label"
 
+      usage:
+        title: "This question is used in {n,plural, =1 {<b>another</b> form} other {<b>#</b> other forms}}"
+        references-heading: "All references of this question"
+        not-published: "not published"
+
     options:
       delete: "Delete option"
       archive: "Archive (hide) option"

package/translations/fr.yaml

@@ -134,6 +134,11 @@ caluma:
 
       hideLabel: "Cacher l'étiquette"
 
+      usage:
+        title: "Cette question est {n,plural, =1 {utilisé sous <b>une</b> forme} other {utilisé sous <b>#</b> formes}}."
+        references-heading: "Toutes les références à cette question"
+        not-published: "non publié"
+
     options:
       delete: "Supprimer l'option"
       archive: "Archiver (masquer) l'option"

package/tsconfig.declarations.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declarationDir": "declarations",
+    "emitDeclarationOnly": true,
+    "noEmit": false,
+    "rootDir": "."
+  },
+  "include": ["addon", "addon-test-support"]
+}