From a77e29fa38dd90ac11faefa6be27cb6340ccd657 Mon Sep 17 00:00:00 2001
From: Sami Mokaddem <sami.mokaddem@circl.lu>
Date: Tue, 8 Feb 2022 17:58:30 +0100
Subject: [PATCH] new: [layout:sidebar] Notifications in the sidebar

---
 src/Controller/Component/ACLComponent.php     |  1 -
 .../Component/Navigation/sidemenu.php         |  6 +--
 src/Model/Table/InboxTable.php                |  1 +
 src/Utility/UI/Notification.php               |  2 +
 templates/element/layouts/sidebar.php         |  1 +
 templates/element/layouts/sidebar/entry.php   | 53 +++++++++++++++++--
 .../element/layouts/sidebar/sub-menu.php      |  3 +-
 webroot/css/layout.css                        |  2 +
 8 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/src/Controller/Component/ACLComponent.php b/src/Controller/Component/ACLComponent.php
index 57180c2..7ccce49 100644
--- a/src/Controller/Component/ACLComponent.php
+++ b/src/Controller/Component/ACLComponent.php
@@ -559,7 +559,6 @@ class ACLComponent extends Component
                             continue;
                         }
                     }
-                    $menu[$group][$subMenuElementName]['children'] = array_values($menu[$group][$subMenuElementName]['children']);
                     if (empty($menu[$group][$subMenuElementName]['children'])) {
                         unset($subMenu[$subMenuElementName]);
                     }
diff --git a/src/Controller/Component/Navigation/sidemenu.php b/src/Controller/Component/Navigation/sidemenu.php
index d4da3a6..e9b9281 100644
--- a/src/Controller/Component/Navigation/sidemenu.php
+++ b/src/Controller/Component/Navigation/sidemenu.php
@@ -78,13 +78,13 @@ class Sidemenu {
                     'icon' => $this->iconTable['Inbox'],
                     'url' => '/inbox/index',
                     'children' => [
-                        'index' => [
+                        'inbox' => [
                             'url' => '/inbox/index',
-                            'label' => __('Inbox')
+                            'label' => __('Inbox'),
                         ],
                         'outbox' => [
                             'url' => '/outbox/index',
-                            'label' => __('Outbox')
+                            'label' => __('Outbox'),
                         ],
                     ]
                 ],
diff --git a/src/Model/Table/InboxTable.php b/src/Model/Table/InboxTable.php
index 9a56b80..0617cea 100644
--- a/src/Model/Table/InboxTable.php
+++ b/src/Model/Table/InboxTable.php
@@ -111,6 +111,7 @@ class InboxTable extends AppTable
                 'datetime' => $notification->created,
                 'variant' => 'warning',
                 '_useModal' => true,
+                '_sidebarId' => 'inbox',
             ]))->get();
         }
         return $allNotifications;
diff --git a/src/Utility/UI/Notification.php b/src/Utility/UI/Notification.php
index f98a633..a6bf05b 100644
--- a/src/Utility/UI/Notification.php
+++ b/src/Utility/UI/Notification.php
@@ -14,6 +14,8 @@ class Notification
     public $icon = 'exclamation-circle';
     public $variant = 'primary';
     public $datetime = null;
+    public $_useModal = false;
+    public $_sidebarId = null;
 
 
     public function __construct(string $text, array $router, $options = [])
diff --git a/templates/element/layouts/sidebar.php b/templates/element/layouts/sidebar.php
index 3c9d849..16732ad 100644
--- a/templates/element/layouts/sidebar.php
+++ b/templates/element/layouts/sidebar.php
@@ -18,6 +18,7 @@
                         <?= $this->element('layouts/sidebar/category', ['label' => $category]) ?>
                         <?php foreach ($categorized as $parentName => $parent) : ?>
                             <?= $this->element('layouts/sidebar/entry', [
+                                'parentName' => $parentName,
                                 'parent' => $parent,
                             ])
                             ?>
diff --git a/templates/element/layouts/sidebar/entry.php b/templates/element/layouts/sidebar/entry.php
index 59da1ee..0d7c79c 100644
--- a/templates/element/layouts/sidebar/entry.php
+++ b/templates/element/layouts/sidebar/entry.php
@@ -26,23 +26,70 @@
             $hasActiveChild = true;
         }
     }
+
+    $severity = [
+        'primary' => -1,
+        'info' => 0,
+        'warning' => 1,
+        'danger' => 2,
+    ];
+
+    $hasNotification = false;
+    $childHasNotification = false;
+    $maxSeverity = -1;
+    $childMaxSeverity = -1;
+    $notificationAmount = 0;
+    foreach ($children as $childName => $child) { // children notification
+        foreach ($notifications as $notification) {
+            if (!empty($notification['_sidebarId']) && $notification['_sidebarId'] == $childName) {
+                $childHasNotification = true;
+                $childMaxSeverity = max($childMaxSeverity, $severity[$notification['variant']] ?? 0);
+            }
+        }
+    }
+    foreach ($notifications as $notification) { // leaf notification
+        if (!empty($notification['_sidebarId']) && $notification['_sidebarId'] == $parentName) {
+            $hasNotification = true;
+            $maxSeverity = max($maxSeverity, $severity[$notification['variant']] ?? 0);
+            $notificationAmount += 1;
+        }
+    }
+    $notificationVariant = array_flip($severity)[$maxSeverity];
+    $childNotificationVariant = array_flip($severity)[$childMaxSeverity];
 ?>
 
 <li class="<?= !empty($children) ? 'parent collapsed' : '' ?>">
     <a
-        class="sidebar-link <?= !empty($children) ? 'collapsed' : '' ?> <?= $active ? 'active' : '' ?> <?= $hasActiveChild ? 'have-active-child' : '' ?>"
+        class="d-flex align-items-center sidebar-link <?= !empty($children) ? 'collapsed' : '' ?> <?= $active ? 'active' : '' ?> <?= $hasActiveChild ? 'have-active-child' : '' ?>"
         href="<?= h($url) ?>"
         <?= !empty($children) ? 'data-bs-toggle="collapse"' : '' ?>
         <?= $hasActiveChild ? 'aria-expanded="true"' : '' ?>
     >
-        <i class="sidebar-icon <?= $this->FontAwesome->getClass($icon) ?>"></i>
+        <i class="position-relative sidebar-icon <?= $this->FontAwesome->getClass($icon) ?>">
+            <?php
+            if ($childHasNotification || ($hasNotification && !empty($children))) {
+                echo $this->Bootstrap->notificationBubble([
+                    'variant' => $childHasNotification ? $childNotificationVariant : $notificationVariant,
+                ]);
+            }
+            ?>
+        </i>
         <span class="text"><?= h($label) ?></span>
+            <?php
+            if (empty($children) && $hasNotification) {
+                echo $this->Bootstrap->badge([
+                    'text' => $notificationAmount,
+                    'class' => 'ms-auto',
+                    'variant' => $notificationVariant,
+                ]);
+            }
+            ?>
     </a>
     <?php if (!empty($children)): ?>
         <?= $this->element('layouts/sidebar/sub-menu', [
                 'seed' => $seed,
                 'children' => $children,
-                'open' => $hasActiveChild
+                'open' => $hasActiveChild,
             ]);
         ?>
     <?php endif; ?>
diff --git a/templates/element/layouts/sidebar/sub-menu.php b/templates/element/layouts/sidebar/sub-menu.php
index 5e3031a..5b96b62 100644
--- a/templates/element/layouts/sidebar/sub-menu.php
+++ b/templates/element/layouts/sidebar/sub-menu.php
@@ -3,8 +3,9 @@
 ?>
 
 <ul id="<?= $seed ?>" class="sub-menu collapse <?= !empty($open) ? 'show' : '' ?>">
-    <?php foreach ($children as $child): ?>
+    <?php foreach ($children as $childName => $child): ?>
         <?= $this->element('layouts/sidebar/entry', [
+                'parentName' => $childName,
                 'parent' => $child,
             ])
         ?>
diff --git a/webroot/css/layout.css b/webroot/css/layout.css
index 84062b0..4df9f4b 100644
--- a/webroot/css/layout.css
+++ b/webroot/css/layout.css
@@ -354,6 +354,8 @@ ul.sidebar-elements li.parent > a.sidebar-link::before {
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     font-size: 1rem;
+    order: 6 !important;
+    margin-left: auto;
 }
 
 ul.sidebar-elements li.parent > a.sidebar-link:not(.collapsed)::before {