notifications wip

public/build/assets/app-5031f347.js

@@ -0,0 +1 @@
+import{a as f}from"./app-804b1f95.js";export{f as default};

public/build/assets/dropdown-2dea5874.js

@@ -0,0 +1 @@
+import"./app-804b1f95.js";

public/build/assets/editor-2dea5874.js

@@ -0,0 +1 @@
+import"./app-804b1f95.js";

public/build/assets/media-manager-2dea5874.js

@@ -0,0 +1 @@
+import"./app-804b1f95.js";

public/build/assets/notifications-2dea5874.js

@@ -0,0 +1 @@
+import"./app-804b1f95.js";

public/build/assets/repeater-2dea5874.js

@@ -0,0 +1 @@
+import"./app-804b1f95.js";

public/build/manifest.json

@@ -1,58 +1,58 @@
 {
   "resources/js/app.css": {
-    "file": "assets/app-79a10dd5.css",
+    "file": "assets/app-e4ef55d2.css",
     "src": "resources/js/app.css"
   },
   "resources/js/app.js": {
     "css": [
-      "assets/app-79a10dd5.css"
+      "assets/app-e4ef55d2.css"
     ],
-    "file": "assets/app-2f3cd3c1.js",
+    "file": "assets/app-804b1f95.js",
     "isEntry": true,
     "src": "resources/js/app.js"
   },
   "resources/js/dropdown.js": {
-    "file": "assets/dropdown-e9dd64c4.js",
+    "file": "assets/dropdown-2dea5874.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/dropdown.js"
   },
   "resources/js/editor.js": {
-    "file": "assets/editor-e9dd64c4.js",
+    "file": "assets/editor-2dea5874.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/editor.js"
   },
   "resources/js/media-manager.js": {
-    "file": "assets/media-manager-e9dd64c4.js",
+    "file": "assets/media-manager-2dea5874.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/media-manager.js"
   },
   "resources/js/notifications.js": {
-    "file": "assets/notifications-e9dd64c4.js",
+    "file": "assets/notifications-2dea5874.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/notifications.js"
   },
   "resources/js/repeater.js": {
-    "file": "assets/repeater-e9dd64c4.js",
+    "file": "assets/repeater-2dea5874.js",
     "imports": [
       "resources/js/app.js"
     ],
     "isEntry": true,
     "src": "resources/js/repeater.js"
   },
   "resources/sass/app.scss": {
-    "file": "assets/app-6d0770f8.js",
+    "file": "assets/app-5031f347.js",
     "imports": [
       "resources/js/app.js"
     ],

resources/js/notifications.js

@@ -14,14 +14,29 @@ document.addEventListener('alpine:init', () => {
 
                 window.$http.get(this.nextPageUrl).then((response) => {
                     this.unread = response.data.total_unread;
+                    this.notifications.push(...response.data.data);
+                    this.nextPageUrl = response.data.next_page_url;
                 }).catch((error) => {
                     //
                 }).finally(() => {
                     this.processing = false;
                 });
             },
-            patch() {
-                //
+            markAsRead(notification) {
+                if (notification.is_read) {
+                    return;
+                }
+
+                this.processing = true;
+
+                window.$http.patch(notification.url).then((response) => {
+                    this.unread--;
+                    notification.is_read = true;
+                }).catch((error) => {
+                    //
+                }).finally(() => {
+                    this.processing = false;
+                });
             },
         };
     });

resources/sass/component/_block-navigation.scss

@@ -31,11 +31,11 @@
   }
 
   &__menu {
-    &[data-state='closed'] {
+    &:not(.is-open) {
       display: none;
     }
 
-    &[data-state='open'] {
+    &.is-open {
       display: block;
     }
 

resources/sass/component/_context-menu.scss

@@ -25,7 +25,7 @@
     inset: var(--inset-block-start) 0 auto auto;
   }
 
-  &[data-state='open'] {
+  &.is-open {
     opacity: 1;
     scale: 1;
     visibility: visible;

resources/views/components/layout/header.blade.php

@@ -57,7 +57,7 @@ class="btn btn--outline-dark btn--sm btn--icon theme-switcher__dark-mode"
                 <button type="button" class="user-menu__toggle" x-bind:aria-expanded="open" x-on:click="open = ! open">
                     <x-root::icon name="chevron-down" class="open-search__icon" />
                 </button>
-                <ul class="context-menu" x-bind:data-state="open ? 'open' : 'closed'">
+                <ul class="context-menu" x-bind:class="{ 'is-open': open }">
                     <li>
                         <button type="submit" form="logout-form">
                             {{ __('Logout') }}

resources/views/components/layout/sidebar-group.blade.php

@@ -11,7 +11,7 @@ class="btn btn--light btn--sm btn--icon block-navigation__toggle"
             <x-root::icon name="chevron-down" class="btn__icon" />
         </button>
     </h3>
-    <nav class="block-navigation__menu block-navigation__menu--breakout" x-bind:data-state="open ? 'open' : 'closed'">
+    <nav class="block-navigation__menu block-navigation__menu--breakout" x-bind:class="{ 'is-open': open }">
         <ul>
             @foreach($items as $item)
                 <li>

resources/views/components/layout/sidebar.blade.php

@@ -29,7 +29,7 @@ class="btn btn--outline-dark btn--sm btn--icon display--none:md"
         </div>
         <div class="app-sidebar__body">
             <div class="block-navigation">
-                <nav class="block-navigation__menu block-navigation__menu--breakout" data-state="open">
+                <nav class="block-navigation__menu block-navigation__menu--breakout is-open">
                     <ul>
                         <li>
                             <a

resources/views/components/notifications.blade.php

@@ -1,35 +1,55 @@
 <div class="app-notification" x-data="notifications('{{ $url }}')" x-on:click.outside="open = false">
-    <button class="btn btn--light btn--icon btn--counter app-notification__toggle" x-bind:aria-expanded="open" x-on:click="open = ! open" aria-label="{{ __('Notifications') }}">
+    <button
+        class="btn btn--light btn--icon btn--counter app-notification__toggle"
+        aria-label="{{ __('Notifications') }}"
+        x-bind:aria-expanded="open"
+        x-on:click="open = ! open"
+    >
         <x-root::icon name="notifications" class="btn__icon" />
-        <span class="btn__counter" x-text="unread"></span>
+        <template x-if="unread > 0">
+            <span class="btn__counter" x-text="unread"></span>
+        </template>
     </button>
-    <div class="context-menu">
+    <div class="context-menu" x-bind:class="{ 'is-open': open }">
         <div class="app-notification__header">
             <h2 class="app-notification__title">{{ __('Notifications') }}</h2>
-            <button type="button" class="btn btn--sm btn--icon btn--light" aria-label="{{ __('Close') }}" x-on:click="open = false">
+            <button
+                type="button"
+                class="btn btn--sm btn--icon btn--light"
+                aria-label="{{ __('Close') }}"
+                x-on:click="open = false"
+            >
                 <x-root::icon name="close" class="btn__icon" />
             </button>
         </div>
         <div class="app-notification__list">
-            <div class="notification-card notification-card--unread">
-                <div class="notification-card__icon notification-card__icon--info">
-                    <svg aria-hidden='true' fill='none' focusable='false' height='24' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke='currentColor' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg' class='icon'>
-                        <circle cx='9' cy='21' r='1'></circle>
-                        <circle cx='20' cy='21' r='1'></circle>
-                        <path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'></path>
-                    </svg>
+            <template x-for="notification in notifications" x-bind:key="notification.id">
+                <div
+                    class="notification-card"
+                    x-bind:class="{
+                        'notification-card--unread': ! notification.is_read,
+                        'notification-card--read': notification.is_read,
+                    }"
+                >
+                    <div class="notification-card__caption">
+                        <h3 class="notification-card__title">
+                            <a
+                                href="#"
+                                class="notification-card__link"
+                                x-text="notification.subject"
+                                x-on:click.prevet="markAsRead(notification)"
+                            ></a>
+                        </h3>
+                        <p x-text="notification.formatted_created_at"></p>
+                    </div>
                 </div>
-                <div class="notification-card__caption">
-                    <h3 class="notification-card__title">
-                        <a href="#" class="notification-card__link">
-                            Important Weekly Team Meeting
-                        </a>
-                    </h3>
-                    <p>August 9, 2023 12:00</p>
-                </div>
-            </div>
+            </template>
         </div>
-        {{-- <a href="#" class="btn btn--primary btn--block">View all notifications</a> --}}
+        <template x-if="unread > 0">
+            <button type="button" class="btn btn--primary btn--block">
+                {{ __('Mark all as read') }}
+            </button>
+        </template>
     </div>
 </div>
 

resources/views/table/filters/form.blade.php

@@ -15,7 +15,7 @@ class="btn btn--light btn--icon btn--counter data-table-filter__toggle"
                     <span class="btn__counter">{{ $attrs->get('data-active') }}</span>
                 @endif
             </button>
-            <div class="context-menu context-menu--inline-end" x-bind:data-state="open ? 'open' : 'closed'">
+            <div class="context-menu context-menu--inline-end" x-bind:class="{ 'is-open': open }">
                 <div class="form-group-stack form-group-stack--bordered form-group-container">
                     @foreach($fields as $field)
                         {!! $field !!}

src/Models/Notification.php

@@ -2,20 +2,33 @@
 
 namespace Cone\Root\Models;
 
-use Attribute;
 use Cone\Root\Database\Factories\NotificationFactory;
 use Cone\Root\Interfaces\Models\Notification as Contract;
 use Cone\Root\Traits\InteractsWithProxy;
+use Illuminate\Database\Eloquent\Casts\Attribute;
 use Illuminate\Database\Eloquent\Concerns\HasUuids;
 use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Notifications\DatabaseNotification;
+use Illuminate\Support\Facades\URL;
 
 class Notification extends DatabaseNotification implements Contract
 {
     use HasFactory;
     use HasUuids;
     use InteractsWithProxy;
 
+    /**
+     * The accessors to append to the model's array form.
+     *
+     * @var array
+     */
+    protected $appends = [
+        'formatted_created_at',
+        'is_read',
+        'subject',
+        'url',
+    ];
+
     /**
      * The table associated with the model.
      *
@@ -38,4 +51,44 @@ public static function getProxiedInterface(): string
     {
         return Contract::class;
     }
+
+    /**
+     * Get the subject attribute.
+     */
+    protected function subject(): Attribute
+    {
+        return new Attribute(
+            get: fn (): ?string => $this->data['subject'] ?? $this->getKey()
+        );
+    }
+
+    /**
+     * Get the formatted created at attribute.
+     */
+    protected function formattedCreatedAt(): Attribute
+    {
+        return new Attribute(
+            get: fn (): ?string => $this->created_at?->format('Y-m-d H:i'),
+        );
+    }
+
+    /**
+     * Get the formatted created at attribute.
+     */
+    protected function isRead(): Attribute
+    {
+        return new Attribute(
+            get: fn (): bool => ! is_null($this->read_at),
+        );
+    }
+
+    /**
+     * Get the URL attribute.
+     */
+    protected function url(): Attribute
+    {
+        return new Attribute(
+            get: fn (): ?string => $this->exists ? URL::route('root.api.notifications.update', $this) : null,
+        );
+    }
 }