First small component implemented

Theme/Backend/Components/AccountGroupSelector/BaseView.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * Orange Management
+ *
+ * PHP Version 7.1
+ *
+ * @category   TBD
+ * @package    TBD
+ * @author     OMS Development Team <dev@oms.com>
+ * @author     Dennis Eichhorn <d.eichhorn@oms.com>
+ * @copyright  Dennis Eichhorn
+ * @license    OMS License 1.0
+ * @version    1.0.0
+ * @link       http://orange-management.com
+ */
+declare(strict_types=1);
+
+namespace Modules\Profile\Theme\Backend\Components\AccountGroupSelector;
+
+use phpOMS\Views\View;
+use phpOMS\ApplicationAbstract;
+use phpOMS\Message\RequestAbstract;
+use phpOMS\Message\ResponseAbstract;
+
+class BaseView extends View
+{
+    private $id = '';
+
+    public function __construct(ApplicationAbstract $app, RequestAbstract $request, ResponseAbstract $response)
+    {
+        parent::__construct($app, $request, $response);
+        $this->setTemplate('/Modules/Profile/Theme/Backend/Components/AccountGroupSelector/base');
+
+        $view = new View($app, $request, $response);
+        $view->setTemplate('/Modules/Profile/Theme/Backend/Components/AccountGroupSelector/popup');
+
+        $this->addData('popup', $view);
+    }
+
+    public function getId() : string
+    {
+        return $this->id;
+    }
+
+    public function render(...$data) : string
+    {
+        $this->id = $data[0];
+        return parent::render(null);
+    }
+}

Theme/Backend/Components/AccountGroupSelector/base.tpl.php

@@ -0,0 +1,22 @@
+<span class="input">
+<button type="button" data-action='[
+    {
+        "listener": "click", "action": [
+            {"type": "dom.popup", "tpl": "acc-grp-tpl", "aniIn": "fadeIn"},
+            {"type": "message.request", "uri": "<?= \phpOMS\Uri\UriFactory::build('{/base}/{/lang}/api/admin/account?filter=some&limit=10'); ?>", "method": "GET", "request_type": "json"},
+            {"type": "dom.table.append", "id": "acc-grp-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1}
+        ]
+    }
+]' formaction=""><i class="fa fa-book"></i></button>
+<input type="text" list="<?= $this->getId(); ?>-datalist" id="<?= $this->getId(); ?>" name="receiver" placeholder="&#xf007; Guest" data-action='[
+    {
+        "listener": "keyup", "action": [
+            {"type": "utils.timer", "id": "<?= $this->getId(); ?>", "delay": 500, "resets": true},
+            {"type": "dom.datalist.clear", "id": "<?= $this->getId(); ?>-datalist"},
+            {"type": "message.request", "uri": "{/base}/{/lang}/api/admin/find/account?search={#<?= $this->getId(); ?>}", "method": "GET", "request_type": "json"},
+            {"type": "dom.datalist.append", "id": "<?= $this->getId(); ?>-datalist", "value": "id", "text": "name"}
+        ]
+    }
+]' required>
+<datalist id="<?= $this->getId(); ?>-datalist"></datalist>
+<input type="hidden" id="<?= $this->getId(); ?>-list"></span>

Theme/Backend/Components/AccountGroupSelector/popup.tpl.php

@@ -6,13 +6,13 @@
             <form id="fAccGrp"  method="GET" action="<?= \phpOMS\Uri\UriFactory::build('/{/lang}/api/admin/accgrp'); ?>">
                 <table class="layout wf-100">
                     <tbody>
-                    <tr><td colspan="2"><label for="iReceiverSearch">Search</label>
+                    <tr><td colspan="2"><label for="iSearch">Search</label>
-                    <tr><td><input type="text" id="iReceiverSearch" name="receiver-search" data-action='[
+                    <tr><td><input type="text" id="iSearch" name="receiver-search" data-action='[
                         {
                             "listener": "keyup", "action": [
-                                {"type": "utils.timer", "id": "iReceiverSearch", "delay": 500, "resets": true},
+                                {"type": "utils.timer", "id": "iSearch", "delay": 500, "resets": true},
                                 {"type": "dom.table.clear", "id": "acc-grp-table"},
-                                {"type": "message.request", "uri": "{/base}/{/lang}/api/admin/find/account?search={#iReceiverSearch}", "method": "GET", "request_type": "json"},
+                                {"type": "message.request", "uri": "{/base}/{/lang}/api/admin/find/account?search={#iSearch}", "method": "GET", "request_type": "json"},
                                 {"type": "dom.table.append", "id": "acc-grp-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1}
                             ]
                         }