From bc70f62e56d986728bfcbd3b14a3d7d2f33e889e Mon Sep 17 00:00:00 2001
From: Emmanuel Drouet <emmanuel.drouet@gmail.com>
Date: Sun, 7 Jan 2018 16:12:04 +0100
Subject: [PATCH] finalize export table view TODO : * csv file export

---
 .../EdgarEzUIAuditExtension.php               |  8 ++++-
 .../Resources/public/js/edgarezuiaudit.js     | 29 +++++++++++++++++++
 .../Resources/views/audit/export.html.twig    | 10 ++++++-
 .../views/audit/export/table_row.html.twig    | 21 +++++++++++++-
 4 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 src/bundle/Resources/public/js/edgarezuiaudit.js

diff --git a/src/bundle/DependencyInjection/EdgarEzUIAuditExtension.php b/src/bundle/DependencyInjection/EdgarEzUIAuditExtension.php
index 1788a05..5f019ab 100644
--- a/src/bundle/DependencyInjection/EdgarEzUIAuditExtension.php
+++ b/src/bundle/DependencyInjection/EdgarEzUIAuditExtension.php
@@ -4,11 +4,12 @@
 
 use Edgar\EzUIAudit\Audit\AuditInterface;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\DependencyInjection\Extension\PrependExtensionInterface;
 use Symfony\Component\DependencyInjection\Loader\YamlFileLoader;
 use Symfony\Component\Config\FileLocator;
 use Symfony\Component\HttpKernel\DependencyInjection\Extension;
 
-class EdgarEzUIAuditExtension extends Extension
+class EdgarEzUIAuditExtension extends Extension implements PrependExtensionInterface
 {
     public function load(array $configs, ContainerBuilder $container)
     {
@@ -23,4 +24,9 @@ public function load(array $configs, ContainerBuilder $container)
 
         $loader->load('services.yml');
     }
+
+    public function prepend(ContainerBuilder $container)
+    {
+        $container->prependExtensionConfig('assetic', array('bundles' => array('EdgarEzUIAuditBundle')));
+    }
 }
diff --git a/src/bundle/Resources/public/js/edgarezuiaudit.js b/src/bundle/Resources/public/js/edgarezuiaudit.js
new file mode 100644
index 0000000..aec895a
--- /dev/null
+++ b/src/bundle/Resources/public/js/edgarezuiaudit.js
@@ -0,0 +1,29 @@
+(function () {
+    const iconsAuditExportUp = document.querySelectorAll('a.audit-export-up');
+    const iconAuditExportDown = document.querySelectorAll('a.audit-export-down');
+
+    const exportUp = (event) => {
+        event.preventDefault();
+        const svgUp = event.currentTarget.querySelector('.ez-icon-caret-up');
+        const svgDown = event.currentTarget.querySelector('.ez-icon-caret-down');
+        svgDown.style.display = "none";
+        svgUp.style.display = "block";
+        event.currentTarget.parentNode.parentNode.nextElementSibling.style.display = "table-row";
+        event.currentTarget.removeEventListener('click', exportUp);
+        event.currentTarget.addEventListener('click', exportDown, false)
+    };
+
+    const exportDown = (event) => {
+        event.preventDefault();
+        const svgUp = event.currentTarget.querySelector('.ez-icon-caret-up');
+        const svgDown = event.currentTarget.querySelector('.ez-icon-caret-down');
+        svgDown.style.display = "block";
+        svgUp.style.display = "none";
+        event.currentTarget.parentNode.parentNode.nextElementSibling.style.display = "none";
+        event.currentTarget.removeEventListener('click', exportDown);
+        event.currentTarget.addEventListener('click', exportUp, false)
+    };
+
+    iconsAuditExportUp.forEach(icon => icon.addEventListener('click', exportUp, false));
+    iconAuditExportDown.forEach(icon => icon.addEventListener('click', exportDown, false));
+})();
diff --git a/src/bundle/Resources/views/audit/export.html.twig b/src/bundle/Resources/views/audit/export.html.twig
index b02ee23..bb48c96 100644
--- a/src/bundle/Resources/views/audit/export.html.twig
+++ b/src/bundle/Resources/views/audit/export.html.twig
@@ -39,12 +39,12 @@
                 <tr>
                     <th>{{ 'export.user_id'|trans|desc('User ID') }}</th>
                     <th>{{ 'export.user_name'|trans|desc('User name') }}</th>
-                    <th>{{ 'export.audits'|trans|desc('Audits') }}</th>
                     <th>{{ 'export.date_start'|trans|desc('Date start') }}</th>
                     <th>{{ 'export.date_end'|trans|desc('Date end') }}</th>
                     <th>{{ 'export.date'|trans|desc('Date') }}</th>
                     <th>{{ 'export.status'|trans|desc('Status') }}</th>
                     <th>{{ 'export.file'|trans|desc('File') }}</th>
+                    <th></th>
                 </tr>
                 </thead>
                 <tbody>
@@ -64,3 +64,11 @@
         {% endif %}
     </section>
 {% endblock %}
+
+{% block javascripts %}
+    {%  javascripts
+        '@EdgarEzUIAuditBundle/Resources/public/js/edgarezuiaudit.js'
+    %}
+        <script type="text/javascript" src="{{ asset_url }}"></script>
+    {% endjavascripts %}
+{% endblock %}
diff --git a/src/bundle/Resources/views/audit/export/table_row.html.twig b/src/bundle/Resources/views/audit/export/table_row.html.twig
index a3b3c2c..fa35bdf 100644
--- a/src/bundle/Resources/views/audit/export/table_row.html.twig
+++ b/src/bundle/Resources/views/audit/export/table_row.html.twig
@@ -1,10 +1,29 @@
 <tr>
     <td>{{ row.user_id }}</td>
     <td>{{ row.user_name }}</td>
-    <td></td>
     <td>{{ row.date_start|date('M d, Y') }}</td>
     <td>{{ row.date_end|date('M d, Y') }}</td>
     <td>{{ row.date|date('M d, Y') }}</td>
     <td>{{ row.status }}</td>
     <td>{{ row.file }}</td>
+    <td>
+        <a href="#" class="audit-export audit-export-up">
+            <svg class="ez-icon ez-icon-caret-down">
+                <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#caret-down"></use>
+            </svg>
+            <svg class="ez-icon ez-icon-caret-up" style="display:none;">
+                <use xlink:href="{{ asset('bundles/ezplatformadminui/img/ez-icons.svg') }}#caret-up"></use>
+            </svg>
+        </a>
+    </td>
+</tr>
+<tr style="display:none;">
+    <th>{{ 'export.audits'|trans|desc('Audits') }}</th>
+    <td colspan="7">
+        <ul>
+            {% for audit in row.audits %}
+                <li>{{ audit }}</li>
+            {% endfor %}
+        </ul>
+    </td>
 </tr>