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

Author: nilmerg

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;
+      }
     }
   }
 }

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 {

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)
         )));

src/FormElement/TermInput/TermContainer.php

@@ -6,6 +6,7 @@
 use ipl\Html\BaseHtmlElement;
 use ipl\Html\HtmlElement;
 use ipl\Web\FormElement\TermInput;
+use ipl\Web\Widget\Icon;
 
 class TermContainer extends BaseHtmlElement
 {
@@ -28,27 +29,33 @@ public function __construct(TermInput $input)
 
     protected function assemble()
     {
+        $inputType = $this->input->getReadOnly() ? 'button' : 'text';
         foreach ($this->input->getTerms() as $i => $term) {
-            $label = $term->getLabel() ?: $term->getSearchValue();
+            $value = $term->getLabel() ?: $term->getSearchValue();
 
-            $this->addHtml(new HtmlElement(
+            $label = new HtmlElement(
                 'label',
                 Attributes::create([
                     'class' => $term->getClass(),
                     'data-search' => $term->getSearchValue(),
-                    'data-label' => $label,
+                    'data-label' => $value,
                     'data-index' => $i
                 ]),
                 new HtmlElement(
                     'input',
                     Attributes::create([
-                        'type' => 'text',
-                        'value' => $label,
+                        'type' => $inputType,
+                        'value' => $value,
                         'pattern' => $term->getPattern(),
                         'data-invalid-msg' => $term->getMessage()
                     ])
                 )
-            ));
+            );
+            if ($inputType === 'button') {
+                $label->addHtml(new Icon('trash'));
+            }
+
+            $this->addHtml($label);
         }
     }
 }