From 8d76845dbf87221c27efb1a6c5313251b7e7e6fb Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Sun, 31 May 2020 18:03:29 +0200
Subject: [PATCH] make tables tabable

---
 .../Components/InlinePreview/BaseView.php     | 49 +++++++++++++-
 .../InlinePreview/inline-preview.tpl.php      | 66 +++++++++++++------
 Theme/Backend/media-list.tpl.php              |  2 +-
 3 files changed, 94 insertions(+), 23 deletions(-)

diff --git a/Theme/Backend/Components/InlinePreview/BaseView.php b/Theme/Backend/Components/InlinePreview/BaseView.php
index 8a880fc..27751b0 100644
--- a/Theme/Backend/Components/InlinePreview/BaseView.php
+++ b/Theme/Backend/Components/InlinePreview/BaseView.php
@@ -36,7 +36,7 @@ class BaseView extends View
      * @var string
      * @since 1.0.0
      */
-    protected string $form = '';
+    protected string $id = '';
 
     /**
      * Virtual path of the media file
@@ -54,6 +54,14 @@ class BaseView extends View
      */
     protected string $name = '';
 
+    /**
+     * Is required?
+     *
+     * @var bool
+     * @since 1.0.0
+     */
+    private bool $isRequired = false;
+
     /**
      * {@inheritdoc}
      */
@@ -68,9 +76,46 @@ class BaseView extends View
      */
     public function render(...$data) : string
     {
-        $this->form        = $data[0];
+        $this->id          = $data[0];
         $this->name        = $data[1];
         $this->virtualPath = $data[2] ?? '/';
+        $this->isRequired  = $data[3] ?? false;
         return parent::render();
     }
+
+    /**
+     * Get selector id
+     *
+     * @return string
+     *
+     * @since 1.0.0
+     */
+    public function getId() : string
+    {
+        return $this->id;
+    }
+
+    /**
+     * Get name
+     *
+     * @return string
+     *
+     * @since 1.0.0
+     */
+    public function getName() : string
+    {
+        return $this->name;
+    }
+
+    /**
+     * Is required?
+     *
+     * @return bool
+     *
+     * @since 1.0.0
+     */
+    public function isRequired() : bool
+    {
+        return $this->isRequired;
+    }
 }
diff --git a/Theme/Backend/Components/InlinePreview/inline-preview.tpl.php b/Theme/Backend/Components/InlinePreview/inline-preview.tpl.php
index 040c7f6..05f3efe 100644
--- a/Theme/Backend/Components/InlinePreview/inline-preview.tpl.php
+++ b/Theme/Backend/Components/InlinePreview/inline-preview.tpl.php
@@ -1,29 +1,55 @@
 <div class="ipt-wrap">
     <div class="ipt-first">
-        <div class="advancedInput wf-100" id="iMediaInput">
-            <input autocomplete="off" class="input" id="mediaInput" name="<?= $this->name; ?>-search" type="text" data-emptyAfter="true" data-autocomplete="false" data-src="api/media/find?search={#mediaInput}">
-            <div id="iMediaInput-dropdown" class="dropdown" data-active="true">
-                <table id="iMediaInput-table" class="default">
-                    <thead>
-                        <tr>
-                            <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
-                            <td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
-                            <td>Extension<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
-                    <tbody>
-                        <template id="iMediaInput-rowElement" class="rowTemplate">
-                            <tr tabindex="-1">
-                                <td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
-                                <td data-tpl-text="/name" data-tpl-value="/name" data-value=""></td>
-                                <td data-tpl-text="/extension"></td>
-                            </tr>
-                        </template>
-                    </tbody>
-                </table>
+        <span class="input">
+            <button type="button" id="<?= $this->printHtml($this->getId()); ?>-book-button" data-action='[
+                {
+                    "key": 1, "listener": "click", "action": [
+                        {"key": 1, "type": "dom.popup", "selector": "#acc-grp-tpl", "aniIn": "fadeIn", "id": "<?= $this->printHtml($this->getId()); ?>"},
+                        {"key": 2, "type": "message.request", "uri": "<?= \phpOMS\Uri\UriFactory::build('{/prefix}admin/account?filter=some&limit=10'); ?>", "method": "GET", "request_type": "json"},
+                        {"key": 3, "type": "dom.table.append", "id": "acc-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1},
+                        {"key": 4, "type": "message.request", "uri": "<?= \phpOMS\Uri\UriFactory::build('{/prefix}admin/account?filter=some&limit=10'); ?>", "method": "GET", "request_type": "json"},
+                        {"key": 5, "type": "dom.table.append", "id": "grp-table", "aniIn": "fadeIn", "data": [], "bindings": {"id": "id", "name": "name/0"}, "position": -1}
+                    ]
+                }
+            ]' formaction=""><i class="fa fa-book"></i></button>
+            <div class="advancedInput wf-100" id="<?= $this->printHtml($this->getId()); ?>">
+                <input autocomplete="off" class="input" type="text" id="i<?= $this->printHtml($this->getId()); ?>"
+                    data-emptyAfter="true"
+                    data-autocomplete="false"
+                    data-src="api/media/find?search={#mediaInput}">
+                <div id="<?= $this->printHtml($this->getId()); ?>-dropdown" class="dropdown" data-active="true">
+                    <table class="default">
+                        <thead>
+                            <tr>
+                                <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                <td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                <td>Extension<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                        <tbody>
+                            <template id="<?= $this->printHtml($this->getId()); ?>-rowElement" class="rowTemplate">
+                                <tr tabindex="-1">
+                                    <td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
+                                    <td data-tpl-text="/name" data-tpl-value="/name" data-value=""></td>
+                                    <td data-tpl-text="/extension"></td>
+                                </tr>
+                            </template>
+                        </tbody>
+                    </table>
+                </div>
             </div>
-        </div>
+        </span>
     </div>
     <div class="ipt-second"><button><?= $this->getHtml('Select', 'Media') ?></button></div>
 </div>
+<div class="box" id="<?= $this->printHtml($this->getId()); ?>-tags" data-limit="0" data-active="true">
+    <template id="<?= $this->printHtml($this->getId()); ?>-tagTemplate">
+        <span class="tag red" data-tpl-value="/id" data-value="" data-uuid="" data-name="<?= $this->printHtml($this->getName()); ?>">
+            <i class="fa fa-times"></i>
+            <span style="display: none;" data-name="type_prefix" data-tpl-value="/type_prefix" data-value=""></span>
+            <span data-tpl-text="/id" data-name="id" data-tpl-value="/id" data-value=""></span>
+            <span data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></span>
+        </span>
+    </template>
+</div>
 <tr><td>
         <input type="hidden" name="<?= $this->name; ?>-path" form="<?= $this->form; ?>" value="<?= $this->virtualPath; ?>">
         <input type="file" id="i<?= $this->form; ?>-upload" class="preview" name="<?= $this->name; ?>" form="<?= $this->form; ?>" multiple>
diff --git a/Theme/Backend/media-list.tpl.php b/Theme/Backend/media-list.tpl.php
index d900297..e938325 100644
--- a/Theme/Backend/media-list.tpl.php
+++ b/Theme/Backend/media-list.tpl.php
@@ -88,7 +88,7 @@ $media = $this->getData('media');
 
                             $icon = $fileIconFunction(\phpOMS\System\File\FileUtils::getExtensionType($value->getExtension()));
                         ?>
-                    <tr data-href="<?= $url; ?>">
+                    <tr tabindex="0" data-href="<?= $url; ?>">
                         <td data-label="<?= $this->getHtml('Type') ?>"><a href="<?= $url; ?>"><i class="fa fa-<?= $this->printHtml($icon); ?>"></i></a>
                         <td data-label="<?= $this->getHtml('Name') ?>"><a href="<?= $url; ?>"><?= $this->printHtml(
                             $value->getExtension() !== 'collection' ? $value->getName() . '.' . $value->getExtension() : $value->getName()); ?></a>