From 85ccf0def410343a49859ab3c316b1b5b2dbd391 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 28 Oct 2021 12:41:46 +0200
Subject: [PATCH] fix(ui): array attributes in documents

---
 app/views/console/database/document.phtml | 55 +++++++++++++++++++----
 1 file changed, 46 insertions(+), 9 deletions(-)

diff --git a/app/views/console/database/document.phtml b/app/views/console/database/document.phtml
index 64ad89eaa..a015aacaf 100644
--- a/app/views/console/database/document.phtml
+++ b/app/views/console/database/document.phtml
@@ -10,7 +10,7 @@ $logs = $this->getParam('logs', null);
     data-scope="sdk"
     data-event="load,database.updateDocument"
     data-name="project-collection">
-    
+
     <div
         data-service="database.getDocument"
         data-param-collection-id="{{router.params.collection}}"
@@ -33,7 +33,7 @@ $logs = $this->getParam('logs', null);
 
         <div data-ui-modal class="modal width-large box close" data-button-hide="on" data-open-event="open-json">
             <button type="button" class="close pull-end" data-ui-modal-close=""><i class="icon-cancel"></i></button>    
-            
+
             <h2>JSON View</h2>
 
             <div class="margin-bottom">
@@ -84,7 +84,7 @@ $logs = $this->getParam('logs', null);
                                             id="documentId" />
                                     <?php endif; ?>
 
-                                    <fieldset name="data" data-cast-to="object">                            
+                                    <fieldset name="data" data-cast-to="object">
                                         <ul data-ls-loop="project-collection.attributes" data-ls-as="attribute">
                                             <li data-ls-if="{{attribute.status}} === 'available'">
                                                 <label>
@@ -95,11 +95,24 @@ $logs = $this->getParam('logs', null);
 
                                                 <div data-ls-if="!{{attribute.array}}" data-ls-template="template-{{attribute.type}}" data-type="script"></div>
 
-                                                <div data-ls-if="{{attribute.array}}" class="margin-bottom">
-                                                    <div data-forms-clone="" data-label="Add Attribute" data-target="attributes-section" data-first="1">
-                                                        <div class="row responsive thin margin-bottom-tiny">
+                                                <div data-ls-if="{{attribute.array}}">
+                                                    <div data-ls-loop="project-document.{{attribute.key}}" data-ls-as="item" data-ls-attrs="id=attribute-{{attribute.key}}">
+                                                        <div class="row responsive thin margin-bottom-tiny" data-forms-remove>
                                                             <div class="col span-11 margin-bottom-small">
-                                                                <div data-ls-template="template-{{attribute.type}}" data-type="script"></div>
+                                                                <div data-ls-template="template-{{attribute.type}}-array" data-type="script"></div>
+                                                            </div>
+                                                            <div class="col span-1 margin-bottom-small">
+                                                                <button type="button" data-remove class="dark danger small round pull-end" style="margin-top: 10px;"><i class="icon-cancel"></i></button>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+
+                                                <div data-ls-if="{{attribute.array}}" class="margin-bottom">
+                                                    <div data-forms-clone="" data-label="Add Attribute" data-target="attributes-section-{{attribute.key}}" data-first="0">
+                                                        <div class="row responsive thin margin-bottom-tiny" data-forms-remove>
+                                                            <div class="col span-11 margin-bottom-small">
+                                                                <div data-ls-template="template-{{attribute.type}}-array" data-type="script"></div>
                                                             </div>
                                                             <div class="col span-1 margin-bottom-small">
                                                                 <button type="button" data-remove class="dark danger small round pull-end" style="margin-top: 10px;"><i class="icon-cancel"></i></button>
@@ -180,7 +193,7 @@ $logs = $this->getParam('logs', null);
                     <li data-state="/console/database/document/activity?id={{router.params.id}}&collection={{router.params.collection}}&project={{router.params.project}}">
                         <h2>Activity <span class="badge" data-ls-bind="{{logs.logs.length}}"></span></h2>
 
-                        <?php echo $logs->render(); ?>                
+                        <?php echo $logs->render(); ?>
                     </li>
                 <?php endif; ?>
             </ul>
@@ -193,29 +206,53 @@ $logs = $this->getParam('logs', null);
 </script>
 
 <script type="text/html" id="template-string-array">
-    <textarea data-forms-text-resize data-forms-text-direction data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}"></textarea>
+    <textarea data-forms-text-resize data-forms-text-direction data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-ls-bind="{{item}}"></textarea>
 </script>
 
 <script type="text/html" id="template-integer">
     <input type="number" step="1" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" data-cast-to="integer" />
 </script>
 
+<script type="text/html" id="template-integer-array">
+    <input type="number" step="1" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-ls-bind="{{item}}" data-cast-to="integer" />
+</script>
+
 <script type="text/html" id="template-double">
     <input type="number" step="0.01" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" data-cast-to="float" />
 </script>
 
+<script type="text/html" id="template-double-array">
+    <input type="number" step="0.01" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-ls-bind="{{item}}" data-cast-to="float" />
+</script>
+
 <script type="text/html" id="template-boolean">
     <input type="hidden" data-forms-switch data-ls-attrs="name={{attribute.key}}" data-ls-bind="{{project-document|documentAttribute}}" data-cast-to="boolean" class="margin-bottom-no" />
 </script>
 
+<script type="text/html" id="template-boolean-array">
+    <input type="hidden" data-forms-switch data-ls-attrs="name={{attribute.key}}" data-ls-bind="{{item}}" data-cast-to="boolean" class="margin-bottom-no" />
+</script>
+
 <script type="text/html" id="template-url">
     <input type="url" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" />
 </script>
 
+<script type="text/html" id="template-url-array">
+    <input type="url" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-ls-bind="{{item}}" />
+</script>
+
 <script type="text/html" id="template-email">
     <input type="email" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" />
 </script>
 
+<script type="text/html" id="template-email-array">
+    <input type="email" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-ls-bind="{{item}}" />
+</script>
+
 <script type="text/html" id="template-ip">
     <input type="text" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-forms-required="{{attribute.required}}" data-ls-bind="{{project-document|documentAttribute}}" pattern="((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))" title="Enter a valid IPV4 or IPV6 address" />
+</script>
+
+<script type="text/html" id="template-ip-array">
+    <input type="text" data-ls-attrs="placeholder={{attribute.default}},name={{attribute.key}}" data-ls-bind="{{item}}" pattern="((^\s*((([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]))\s*$)|(^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$))" title="Enter a valid IPV4 or IPV6 address" />
 </script>
\ No newline at end of file