Add suport for a new navbar notification menu item. (#888)

* [MenuItems/NotificationLink]: Add suport for a new navbar notification link item.

* [Components/Layout]: Fix code style.

* [NavbarNotificationLink]: Add improvements to use update-cfg attribute and setup update url with route.

* Fix code style

* [NavbarNotificationLink]: Be more strict when parsing the url for notification updates.

* [NavbarNotificationLink]: Fix code style.

* [NavbarNotification]: Change component name and add support to dropdown mode.

* [NavbarNotification]: Rename the menu item type and add some minor fixes.

* [NavbarNotification]: Fix comment.

resources/views/components/layout/navbar-notification.blade.php

@@ -0,0 +1,154 @@
+{{-- Navbar notification --}}
+
+<li class="{{ $makeListItemClass() }}" id="{{ $id }}">
+
+    {{-- Link --}}
+    <a @if($enableDropdownMode) href="" @endif {{ $attributes->merge($makeAnchorDefaultAttrs()) }}>
+
+        {{-- Icon --}}
+        <i class="{{ $makeIconClass() }}"></i>
+
+        {{-- Badge --}}
+        <span class="{{ $makeBadgeClass() }}">{{ $badgeLabel }}</span>
+
+    </a>
+
+    {{-- Dropdown Menu --}}
+    @if($enableDropdownMode)
+
+        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
+
+            {{-- Custom dropdown content provided by external source --}}
+            <div class="adminlte-dropdown-content"></div>
+
+            {{-- Dropdown divider --}}
+            <div class="dropdown-divider"></div>
+
+            {{-- Dropdown footer with link --}}
+            <a href="{{ $attributes->get('href') }}" class="dropdown-item dropdown-footer">
+                @isset($dropdownFooterLabel)
+                    {{ $dropdownFooterLabel }}
+                @else
+                    <i class="fas fa-lg fa-search-plus"></i>
+                @endisset
+            </a>
+
+        </div>
+
+    @endif
+
+</li>
+
+{{-- If required, update the notification periodically --}}
+
+@if (! is_null($makeUpdateUrl()) && $makeUpdatePeriod() > 0)
+@push('js')
+<script>
+
+    $(() => {
+
+        // Method to get new notification data from the configured url.
+
+        let updateNotification = (nLink) =>
+        {
+            // Make an ajax call to the configured url. The response should be
+            // an object with the new data. The supported properties are:
+            // 'label', 'label_color', 'icon_color' and 'dropdown'.
+
+            $.ajax({
+                url: "{{ $makeUpdateUrl() }}"
+            })
+            .done((data) => {
+                nLink.update(data);
+            })
+            .fail(function(jqXHR, textStatus, errorThrown) {
+                console.log(jqXHR, textStatus, errorThrown);
+            });
+        };
+
+        // First load of the notification data.
+
+        let nLink = new _AdminLTE_NavbarNotification("{{ $id }}");
+        updateNotification(nLink);
+
+        // Periodically update the notification.
+
+        setInterval(updateNotification, {{ $makeUpdatePeriod() }}, nLink);
+    })
+
+</script>
+@endpush
+@endif
+
+{{-- Register Javascript utility class for this component --}}
+
+@once
+@push('js')
+<script>
+
+    class _AdminLTE_NavbarNotification {
+
+        /**
+         * Constructor.
+         *
+         * target: The id of the target notification link.
+         */
+        constructor(target)
+        {
+            this.target = target;
+        }
+
+        /**
+         * Update the notification link.
+         *
+         * data: An object with the new data.
+         */
+        update(data)
+        {
+            // Check if target and data exists.
+
+            let t = $(`li#${this.target}`);
+
+            if (t.length <= 0 || ! data) {
+                return;
+            }
+
+            let badge = t.find(".navbar-badge");
+            let icon = t.find(".nav-link > i");
+            let dropdown = t.find(".adminlte-dropdown-content");
+
+            // Update the badge label.
+
+            if (data.label && data.label > 0) {
+                badge.html(data.label);
+            } else {
+                badge.empty();
+            }
+
+            // Update the badge color.
+
+            if (data.label_color) {
+                badge.removeClass((idx, classes) => {
+                    return (classes.match(/(^|\s)badge-\S+/g) || []).join(' ');
+                }).addClass(`badge-${data.label_color} badge-pill`);
+            }
+
+            // Update the icon color.
+
+            if (data.icon_color) {
+                icon.removeClass((idx, classes) => {
+                    return (classes.match(/(^|\s)text-\S+/g) || []).join(' ');
+                }).addClass(`text-${data.icon_color}`);
+            }
+
+            // Update the dropdown content.
+
+            if (data.dropdown && dropdown.length > 0) {
+                dropdown.html(data.dropdown);
+            }
+        }
+    }
+
+</script>
+@endpush
+@endonce

resources/views/partials/navbar/menu-item.blade.php

@@ -5,6 +5,21 @@
     {{-- Search form --}}
     @include('adminlte::partials.navbar.menu-item-search-form')
 
+@elseif ($menuItemHelper->isNavbarNotification($item))
+
+    {{-- Notification link (using blade component) --}}
+    <x-adminlte-navbar-notification
+        :id="$item['id']"
+        :href="$item['href']"
+        :icon="$item['icon']"
+        :icon-color="$item['icon_color'] ?? null"
+        :badge-label="$item['label'] ?? null"
+        :badge-color="$item['label_color'] ?? null"
+        :update-cfg="$item['update_cfg'] ?? null"
+        :enable-dropdown-mode="$item['dropdown_mode'] ?? null"
+        :dropdown-footer-label="$item['dropdown_flabel'] ?? null"
+    />
+
 @elseif ($menuItemHelper->isFullscreen($item))
 
     {{-- Fullscreen toggle widget --}}

src/AdminLteServiceProvider.php

@@ -16,6 +16,15 @@
 
 class AdminLteServiceProvider extends BaseServiceProvider
 {
+    /**
+     * Array with the available layout components.
+     *
+     * @var array
+     */
+    protected $layoutComponents = [
+        Components\Layout\NavbarNotification::class,
+    ];
+
     /**
      * Array with the available form components.
      *
@@ -210,6 +219,7 @@ private function loadComponents()
         // Load all the blade-x components.
 
         $components = array_merge(
+            $this->layoutComponents,
             $this->formComponents,
             $this->toolComponents,
             $this->widgetComponents