TermInput: Allow to enable read-only terms and style them

Icinga · May 6, 2024 · bb1f502 · bb1f502
1 parent f12f188
commit bb1f502
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/asset/css/compat.less b/asset/css/compat.less
@@ -80,9 +80,13 @@ form.icinga-form .control-group {
       width: 0;
     }
 
-    input[type="text"] {
+    input {
       flex: unset;
       width: 100%;
+
+      &[type="button"] {
+         background-color: @default-input-bg;
+      }
     }
   }
 }
diff --git a/asset/css/search-base.less b/asset/css/search-base.less
@@ -209,6 +209,28 @@
     outline-width: 3px;
     outline-offset: ~"calc(-@{labelPad} + 3px)";
   }
+
+  &.read-only {
+    label {
+      position: relative;
+
+      input[type="button"] {
+        padding-left: 1.5em;
+
+        + i {
+          position: absolute;
+          display: none;
+          top: .5em;
+          left: .5em;
+        }
+      }
+
+      input[type="button"]:hover + i,
+      input[type="button"]:focus + i {
+        display: revert;
+      }
+    }
+  }
 }
 
 .search-suggestions {

diff --git a/src/FormElement/TermInput.php b/src/FormElement/TermInput.php
@@ -40,6 +40,9 @@ class TermInput extends FieldsetElement
     /** @var bool Whether term direction is vertical */
     protected $verticalTermDirection = false;
 
+    /** @var bool Whether registered terms are read-only */
+    protected $readOnly = false;
+
     /** @var array Changes to transmit to the client */
     protected $changes = [];
 
@@ -103,6 +106,30 @@ public function getTermDirection(): ?string
         return $this->verticalTermDirection ? 'vertical' : null;
     }
 
+    /**
+     * Set whether registered terms are read-only
+     *
+     * @param bool $state
+     *
+     * @return $this
+     */
+    public function setReadOnly(bool $state = true): self
+    {
+        $this->readOnly = $state;
+
+        return $this;
+    }
+
+    /**
+     * Get whether registered terms are read-only
+     *
+     * @return bool
+     */
+    public function getReadOnly(): bool
+    {
+        return $this->readOnly;
+    }
+
     /**
      * Set terms
      *
@@ -415,6 +442,7 @@ public function getValueAttribute()
             'data-with-multi-completion' => true,
             'data-no-auto-submit-on-remove' => true,
             'data-term-direction' => $this->getTermDirection(),
+            'data-read-only-terms' => $this->getReadOnly(),
             'data-data-input' => '#' . $dataInputId,
             'data-term-input' => '#' . $termInputId,
             'data-term-container' => '#' . $termContainer->getAttribute('id')->getValue(),
@@ -436,7 +464,11 @@ public function getValueAttribute()
 
         $mainInput->prependWrapper((new HtmlElement(
             'div',
-            Attributes::create(['class' => ['term-input-area', $this->getTermDirection()]]),
+            Attributes::create(['class' => [
+                'term-input-area',
+                $this->getTermDirection(),
+                $this->getReadOnly() ? 'read-only' : null
+            ]]),
             $termContainer,
             new HtmlElement('label', null, $mainInput)
         )));