TermInput: Support read only terms

Co-authored-by: Johannes Meyer <[email protected]>
Icinga · May 3, 2024 · f12f188 · f12f188
1 parent 24b5f17
commit f12f188
Showing 1 changed file with 22 additions and 0 deletions.
diff --git a/asset/js/widget/TermInput.js b/asset/js/widget/TermInput.js
@@ -7,12 +7,17 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
             super(input);
 
             this.separator = this.input.dataset.termSeparator || ' ';
+            this.readOnly = 'readOnlyTerms' in this.input.dataset;
             this.ignoreSpaceUntil = null;
         }
 
         bind() {
             super.bind();
 
+            if (this.readOnly) {
+                $(this.termContainer).on('click', '[data-index] > input', this.onTermClick, this);
+            }
+
             // TODO: Compatibility only. Remove as soon as possible once Web 2.12 (?) is out.
             //       Or upon any other update which lets Web trigger a real submit upon auto submit.
             $(this.input.form).on('change', 'select.autosubmit', this.onSubmit, this);
@@ -90,10 +95,27 @@ define(["../notjQuery", "BaseInput"], function ($, BaseInput) {
             super.complete(input, data);
         }
 
+        renderTerm(termData, termIndex) {
+            const label = super.renderTerm(termData, termIndex);
+
+            if (this.readOnly) {
+                label.firstChild.type = 'button';
+                label.appendChild($.render('<i class="fa fa-trash trash-icon"></i>'));
+            }
+
+            return label;
+        }
+
         /**
          * Event listeners
          */
 
+        onTermClick(event) {
+            let termIndex = Number(event.target.parentNode.dataset.index);
+            this.removeTerm(event.target.parentNode);
+            this.moveFocusForward(termIndex - 1);
+        }
+
         onSubmit(event) {
             super.onSubmit(event);