From 084d0550db9463e463586a2fa34552f314c315a8 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Fri, 31 Dec 2021 14:02:19 +0100
Subject: [PATCH] feat: add ui for attribute details

---
 app/realtime.php                            |  2 +-
 app/views/console/database/collection.phtml | 57 ++++++++++++++++++++-
 app/views/console/database/document.phtml   |  2 +-
 3 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/app/realtime.php b/app/realtime.php
index a671e149a3..b17fb68b7b 100644
--- a/app/realtime.php
+++ b/app/realtime.php
@@ -473,7 +473,7 @@ $server->onMessage(function (int $connection, string $message) use ($server, $re
         }
 
         switch ($message['type']) {
-                /**
+            /**
              * This type is used to authenticate.
              */
             case 'authentication':
diff --git a/app/views/console/database/collection.phtml b/app/views/console/database/collection.phtml
index 34dc84e913..ac38f1c6d1 100644
--- a/app/views/console/database/collection.phtml
+++ b/app/views/console/database/collection.phtml
@@ -177,7 +177,62 @@ $logs = $this->getParam('logs', null);
                                 </td>
 
                                 <td data-title="Attribute ID: ">
-                                    <span class="text-size-small" data-ls-bind="{{attribute.key}}"></span>
+                                    <div data-ui-modal class="box modal sticky-footer width-large close" data-button-text="{{attribute.key}}" data-button-class="text-size-small link" data-button-element="span">
+                                        <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>
+
+                                        <h1>
+                                            <i data-ls-if="!{{attribute.format}}" data-ls-attrs="class=icon-{{attribute.type}}"></i>
+                                            <i data-ls-if="{{attribute.format}}" data-ls-attrs="class=icon-{{attribute.format}}"></i>
+                                            <span data-ls-bind="{{attribute.key}}"></span>
+                                        </h1>
+
+                                        <hr />
+
+                                        <div class="row responsive modalize">
+                                            <form>
+                                                <div class="col span-12">
+                                                    <label>Key</label>
+                                                    <div class="input-copy">
+                                                        <input type="text" data-ls-bind="{{attribute.key}}" data-forms-copy disabled />
+                                                    </div>
+                                                    <label>Type</label>
+                                                    <input type="text" data-ls-bind="{{attribute.type}}" disabled />
+                                                    <div data-ls-if="{{attribute.format}}">
+                                                        <label>Format</label>
+                                                        <input type="text" data-ls-bind="{{attribute.format}}" class="full-width" disabled />
+                                                    </div>
+                                                    <div data-ls-if="{{attribute.default}}">
+                                                        <label>Default Value</label>
+                                                        <input type="text" data-ls-bind="{{attribute.default}}" class="full-width" disabled />
+                                                    </div>
+                                                    <div data-ls-if="{{attribute.size}}">
+                                                        <label for="size">Length</label>
+                                                        <input type="text" data-ls-bind="{{attribute.size}}" class="full-width" disabled />
+                                                    </div>
+
+                                                    <div data-ls-if="{{attribute.format}} == 'enum'">
+                                                        <label>Elements</label>
+                                                        <span data-ls-loop="attribute.elements" data-ls-as="element">
+                                                            <input type="text" data-ls-bind="{{element}}" class="full-width" disabled />
+                                                        </span>
+                                                    </div>
+
+                                                    <div data-ls-if="{{attribute.min}}">
+                                                        <label>Min</label>
+                                                        <input type="text" name="min" data-ls-bind="{{attribute.min}}" class="full-width" disabled />
+                                                    </div>
+                                                    <div data-ls-if="{{attribute.max}}">
+                                                        <label>Max</label>
+                                                        <input type="text" name="max" data-ls-bind="{{attribute.max}}" class="full-width" disabled />
+                                                    </div>
+                                                </div>
+                                            </form>
+                                        </div>
+
+                                        <footer>
+                                <button data-ui-modal-close="" type="button" class="reverse">Cancel</button>
+                                        </footer>
+                                    </div>
                                 </td>
 
                                 <td data-title="Type:">
diff --git a/app/views/console/database/document.phtml b/app/views/console/database/document.phtml
index 9bb9d707d7..f312f008fd 100644
--- a/app/views/console/database/document.phtml
+++ b/app/views/console/database/document.phtml
@@ -88,7 +88,7 @@ $logs = $this->getParam('logs', null);
 
                                     <fieldset name="data" data-cast-to="object" data-ls-attrs="x-init=doc = {{project-document}}" x-data="{doc: {}}">
                                         <ul data-ls-attrs="x-init=attributes = {{project-collection.attributes}}" x-data="{attributes: []}">
-                                            <template x-for="attr in attributes">
+                                            <template x-for="attr in attributes.filter(a => a.status === 'available')">
                                                 <li>
                                                     <label>
                                                         <div x-text="attr.key" class="margin-bottom-tiny"></div>