From a2a81ca339149dd3cea9915f560c901cdd4a8122 Mon Sep 17 00:00:00 2001
From: NishaSharma14 <sharmanis14@gmail.com>
Date: Thu, 21 Sep 2023 15:15:24 +0200
Subject: [PATCH] fix: update notification view

---
 .../Controllers/Admin/UsersController.php     |  15 +
 .../ProjectInviteNotification.php             |   2 +-
 app/Notifications/StudyInviteNotification.php |   2 +-
 .../TeamInvitationNotification.php            |   2 +-
 resources/js/Layouts/AppLayout.vue            |  87 +----
 resources/js/Shared/Notification.vue          | 323 ++++++++++++++----
 routes/web.php                                |   3 +
 7 files changed, 285 insertions(+), 149 deletions(-)

diff --git a/app/Http/Controllers/Admin/UsersController.php b/app/Http/Controllers/Admin/UsersController.php
index 45f5ce8e..a09e64c0 100644
--- a/app/Http/Controllers/Admin/UsersController.php
+++ b/app/Http/Controllers/Admin/UsersController.php
@@ -205,4 +205,19 @@ public function markNotificationAsRead(User $user, Request $request)
 
         return $request->wantsJson() ? new JsonResponse('', 200) : back()->with('status', 'notification-markedAsRead');
     }
+
+    /**
+     * Mark all notification as read.
+     *
+     * @param  User  $user
+     * @return \Illuminate\Http\RedirectResponse
+     */
+    public function markAllNotificationAsRead(Request $request)
+    {
+        $user = Auth::user();
+
+        $user->unreadNotifications()->update(['read_at' => now()]);
+
+        return $request->wantsJson() ? new JsonResponse('', 200) : back()->with('status', 'all-notification-markedAsRead');
+    }
 }
diff --git a/app/Notifications/ProjectInviteNotification.php b/app/Notifications/ProjectInviteNotification.php
index 6bcc168f..6c49b7df 100644
--- a/app/Notifications/ProjectInviteNotification.php
+++ b/app/Notifications/ProjectInviteNotification.php
@@ -42,7 +42,7 @@ public function via($notifiable)
      */
     public function toArray($notifiable)
     {
-        $title = 'Invitation from project - '.$this->invitation->project->name;
+        $title = 'Invitation from project - <b>'.$this->invitation->project->name.'</b>';
         $message = 'You have been invited to join the project - '.$this->invitation->project->name.' (role: '.$this->invitation['role'].') by '.$this->invitation['invited_by'].'. Please check your mail to accept or decline the invitation.';
 
         return [
diff --git a/app/Notifications/StudyInviteNotification.php b/app/Notifications/StudyInviteNotification.php
index d0db437b..03b0deb9 100644
--- a/app/Notifications/StudyInviteNotification.php
+++ b/app/Notifications/StudyInviteNotification.php
@@ -41,7 +41,7 @@ public function via($notifiable)
      */
     public function toArray($notifiable)
     {
-        $title = 'Invitation from study - '.$this->invitation->study->name;
+        $title = 'Invitation from study - <b>'.$this->invitation->study->name.'</b>';
         $message = 'You have been invited to join the study - '.$this->invitation->study->name.' (role: '.$this->invitation['role'].') by '.$this->invitation['invited_by'].'. Please check your mail to accept or decline the invitation.';
 
         return [
diff --git a/app/Notifications/TeamInvitationNotification.php b/app/Notifications/TeamInvitationNotification.php
index f6556ba2..b037d287 100644
--- a/app/Notifications/TeamInvitationNotification.php
+++ b/app/Notifications/TeamInvitationNotification.php
@@ -42,7 +42,7 @@ public function via($notifiable)
      */
     public function toArray($notifiable)
     {
-        $title = 'Invitation from team - '.$this->invitation->team->name;
+        $title = 'Invitation recieved to join <b>'.$this->invitation->team->name.'</b> team';
         $message = 'You have been invited to join the '.$this->invitation->team->name.' team (role: '.$this->invitation['role'].') by '.$this->invitation['invited_by'].'. Please check your mail to accept or decline the invitation.';
 
         return [
diff --git a/resources/js/Layouts/AppLayout.vue b/resources/js/Layouts/AppLayout.vue
index 28b6e37b..2eb4bbd0 100644
--- a/resources/js/Layouts/AppLayout.vue
+++ b/resources/js/Layouts/AppLayout.vue
@@ -294,78 +294,23 @@
                         :notification="$page.props.user.notifications"
                     />
                     <div class="ml-4 flex items-center md:ml-6">
-                        <Menu as="div" class="ml-3 relative">
-                            <div>
-                                <span>
-                                    <MenuButton
-                                        type="button"
-                                        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 bg-white hover:text-gray-700 focus:outline-none transition"
-                                    >
-                                        <BellIcon
-                                            class="w-6 h-6 fill-current text-gray-600"
-                                        />
-                                        <span
-                                            v-if="hasUnreadNotification()"
-                                            class="inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full"
-                                        >
-                                            {{ countNotification() }}</span
-                                        >
-                                    </MenuButton>
-                                </span>
-                            </div>
-                            <transition
-                                enter-active-class="transition ease-out duration-100"
-                                enter-from-class="transform opacity-0 scale-95"
-                                enter-to-class="transform opacity-100 scale-100"
-                                leave-active-class="transition ease-in duration-75"
-                                leave-from-class="transform opacity-100 scale-100"
-                                leave-to-class="transform opacity-0 scale-95"
+                        <div>
+                            <button
+                                @click="openShowNotificationDialog"
+                                type="button"
+                                class="m-3"
                             >
-                                <MenuItems
-                                    class="origin-top-right absolute right-0 mt-2 w-72 text-sm leading-5 text-gray-700 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none"
-                                >
-                                    <span v-if="hasUnreadNotification() > 0">
-                                        <div
-                                            class="block px-4 p-2 text-xs text-gray-400"
-                                        >
-                                            Unread Notifications
-                                        </div>
-                                        <template
-                                            v-for="notification in $page.props
-                                                .user.notifications"
-                                            :key="notification"
-                                        >
-                                            <MenuItem
-                                                v-on:click="
-                                                    openShowNotificationDialog(
-                                                        notification
-                                                    )
-                                                "
-                                                class="border-t border-gray-100"
-                                            >
-                                                <a
-                                                    href="#"
-                                                    class="block px-4 py-2 hover:bg-gray-100"
-                                                >
-                                                    {{
-                                                        notification.data[
-                                                            "title"
-                                                        ]
-                                                    }}
-                                                </a>
-                                            </MenuItem>
-                                        </template>
-                                    </span>
-                                    <span v-else>
-                                        <div
-                                            class="block px-4 py-2 text-m text-gray-600"
-                                        >
-                                            No unread notifications
-                                        </div>
-                                    </span>
-                                </MenuItems>
-                            </transition>
-                        </Menu>
+                                <BellIcon
+                                    class="w-6 h-6 fill-current text-gray-600"
+                                />
+                            </button>
+                        </div>
+                        <span
+                            v-if="hasUnreadNotification()"
+                            class="inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full"
+                        >
+                            {{ countNotification() }}</span
+                        >
                         <div class="tooltip">
                             <a
                                 id="tour-step-documentation"
diff --git a/resources/js/Shared/Notification.vue b/resources/js/Shared/Notification.vue
index 9baaae02..b84cc3e5 100644
--- a/resources/js/Shared/Notification.vue
+++ b/resources/js/Shared/Notification.vue
@@ -1,111 +1,284 @@
 <template>
-    <!--  Appear when clicked on any particular notification -->
-    <div
-        v-if="show && selectedNotificationForm"
-        aria-live="assertive"
-        class="fixed inset-0 z-10 flex items-end py-0 pointer-events-none sm:p-6 sm:items-start"
-    >
-        <div class="w-full flex flex-col items-center space-y-4 sm:items-end">
-            <!-- Notification panel, dynamically insert this into the live region when it needs to be displayed -->
-            <transition
-                enter-active-class="transform ease-out duration-300 transition"
-                enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-                enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
-                leave-active-class="transition ease-in duration-100"
-                leave-from-class="opacity-100"
-                leave-to-class="opacity-0"
+    <TransitionRoot as="template" :show="open">
+        <Dialog as="div" class="fixed inset-0 z-50" @close="open = false">
+            <TransitionChild
+                as="template"
+                enter="ease-in-out duration-500"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in-out duration-500"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
             >
                 <div
-                    class="max-w-sm w-full bg-yellow-100 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
-                >
-                    <div class="p-4">
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0">
-                                <EnvelopeIcon
-                                    class="h-6 w-6 text-teal-600"
-                                    aria-hidden="true"
-                                />
-                            </div>
-                            <div class="ml-3 w-0 flex-1 pt-0.5">
-                                <p class="text-sm font-medium text-gray-900">
-                                    {{ selectedNotificationForm.title }}
-                                </p>
-                                <p class="mt-1 text-sm text-gray-500">
-                                    {{ selectedNotificationForm.message }}
-                                </p>
-                                <div class="mt-3 flex space-x-7">
-                                    <button
-                                        type="button"
-                                        @click="markNotificationAsRead()"
-                                        class="bg-yellow-100 rounded-md text-sm font-medium text-teal-600 hover:text-teal-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
+                    class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+                />
+            </TransitionChild>
+
+            <div class="fixed inset-0 overflow-hidden">
+                <div class="absolute inset-0 overflow-hidden">
+                    <div
+                        class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10"
+                    >
+                        <TransitionChild
+                            as="template"
+                            enter="transform transition ease-in-out duration-500 sm:duration-700"
+                            enter-from="translate-x-full"
+                            enter-to="translate-x-0"
+                            leave="transform transition ease-in-out duration-500 sm:duration-700"
+                            leave-from="translate-x-0"
+                            leave-to="translate-x-full"
+                        >
+                            <DialogPanel
+                                class="pointer-events-auto relative w-screen max-w-md"
+                            >
+                                <TransitionChild
+                                    as="template"
+                                    enter="ease-in-out duration-500"
+                                    enter-from="opacity-0"
+                                    enter-to="opacity-100"
+                                    leave="ease-in-out duration-500"
+                                    leave-from="opacity-100"
+                                    leave-to="opacity-0"
+                                >
+                                    <div
+                                        class="absolute left-0 top-0 -ml-8 flex pr-2 pt-4 sm:-ml-10 sm:pr-4"
                                     >
-                                        Mark As Read
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="ml-4 flex-shrink-0 flex">
-                                <button
-                                    @click="show = false"
-                                    class="bg-yellow-100 rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
+                                        <button
+                                            type="button"
+                                            class="rounded-md text-gray-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
+                                            @click="open = false"
+                                        >
+                                            <span class="sr-only"
+                                                >Close panel</span
+                                            >
+                                            <XMarkIcon
+                                                class="h-6 w-6"
+                                                aria-hidden="true"
+                                            />
+                                        </button>
+                                    </div>
+                                </TransitionChild>
+                                <div
+                                    class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl"
                                 >
-                                    <span class="sr-only">Close</span>
-                                    <XCircleIcon
-                                        class="h-5 w-5"
-                                        aria-hidden="true"
+                                    <h2
+                                        class="text-2xl font-bold dark:text-white text-center"
+                                    >
+                                        Notifications
+                                    </h2>
+                                    <div
+                                        class="inline-flex items-center justify-center w-full"
+                                    >
+                                        <hr
+                                            class="w-64 h-1 my-8 bg-gray-200 border-0 rounded dark:bg-gray-700"
+                                        />
+                                        <div
+                                            class="absolute px-4 -translate-x-1/2 bg-white left-1/2 dark:bg-gray-900"
+                                        >
+                                            <svg
+                                                class="w-4 h-4 text-primary-dark dark:text-primary-dark"
+                                                aria-hidden="true"
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                fill="currentColor"
+                                                viewBox="0 0 18 14"
+                                            >
+                                                <path
+                                                    d="M6 0H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3H2a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Zm10 0h-4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h4v1a3 3 0 0 1-3 3h-1a1 1 0 0 0 0 2h1a5.006 5.006 0 0 0 5-5V2a2 2 0 0 0-2-2Z"
+                                                />
+                                            </svg>
+                                        </div>
+                                    </div>
+                                    <div class="flex-1 overflow-y-auto m-2">
+                                        <div
+                                            v-if="notifications.length == 0"
+                                            class="text-m font-semi-bold text-center text-gray-500 italic"
+                                        >
+                                            No unread notifications.
+                                        </div>
+                                        <div
+                                            v-for="notification in notifications"
+                                            :key="notification.title"
+                                        >
+                                            <div
+                                                class="relative rounded-lg border border-gray-300 bg-gray-50 px-6 py-5 shadow-sm items-top m-1 shadow-md transition-all"
+                                            >
+                                                <div
+                                                    class="text-m font-semi-bold text-gray-900"
+                                                    v-html="
+                                                        notification.data.title
+                                                    "
+                                                ></div>
+                                                <div
+                                                    class="text-sm text-gray-500"
+                                                    v-html="
+                                                        notification.data
+                                                            .message
+                                                    "
+                                                ></div>
+                                                <div
+                                                    class="flex justify-between mt-2"
+                                                >
+                                                    <button
+                                                        type="button"
+                                                        @click="
+                                                            markNotificationAsRead(
+                                                                notification
+                                                            )
+                                                        "
+                                                        class="rounded-md text-sm font-medium text-teal-600 hover:text-teal-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
+                                                    >
+                                                        Mark As Read
+                                                    </button>
+                                                    <div
+                                                        class="text-sm text-gray-400 justify-end italic"
+                                                    >
+                                                        {{
+                                                            calculateDaysDifference(
+                                                                notification.created_at
+                                                            )
+                                                        }}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <hr
+                                        class="h-px my-1 bg-gray-200 border-0 dark:bg-gray-700"
                                     />
-                                </button>
-                            </div>
-                        </div>
+                                    <div class="flex justify-end m-2">
+                                        <jet-secondary-button
+                                            type="button"
+                                            @click="open = false"
+                                        >
+                                            Close
+                                        </jet-secondary-button>
+                                        <jet-button
+                                            type="button"
+                                            class="ml-4"
+                                            :disabled="
+                                                this.notifications.length == 0
+                                            "
+                                            @click="markAllNotificationAsRead()"
+                                        >
+                                            Mark All As Read
+                                        </jet-button>
+                                    </div>
+                                </div>
+                            </DialogPanel>
+                        </TransitionChild>
                     </div>
                 </div>
-            </transition>
-        </div>
-    </div>
+            </div>
+        </Dialog>
+    </TransitionRoot>
 </template>
 
 <script>
-import { EnvelopeIcon, XCircleIcon } from "@heroicons/vue/24/outline";
+import {
+    Dialog,
+    DialogPanel,
+    DialogTitle,
+    TransitionChild,
+    TransitionRoot,
+    Menu,
+    MenuButton,
+    MenuItem,
+    MenuItems,
+} from "@headlessui/vue";
+import { XMarkIcon } from "@heroicons/vue/24/outline";
+import JetButton from "@/Jetstream/Button.vue";
+import JetSecondaryButton from "@/Jetstream/SecondaryButton.vue";
+import { EllipsisVerticalIcon } from "@heroicons/vue/20/solid";
 export default {
     components: {
-        EnvelopeIcon,
-        XCircleIcon,
-    },
-    props: {
-        notification: Object,
+        Dialog,
+        DialogPanel,
+        DialogTitle,
+        TransitionChild,
+        TransitionRoot,
+        XMarkIcon,
+        JetButton,
+        JetSecondaryButton,
+        Menu,
+        MenuButton,
+        MenuItem,
+        MenuItems,
+        EllipsisVerticalIcon,
     },
+    props: [],
     data() {
         return {
-            show: false,
-            selectedNotificationForm: this.$inertia.form({
+            open: false,
+            info: {},
+            notifications: this.$page.props.user.notifications,
+            notificationForm: this.$inertia.form({
                 _method: "POST",
                 id: "",
                 title: "",
                 message: "",
                 user_id: "",
             }),
+            markAllAsReadForm: this.$inertia.form({
+                _method: "POST",
+            }),
         };
     },
     methods: {
-        markNotificationAsRead() {
-            this.selectedNotificationForm.post(
-                route("users.markNotificationAsRead", this.$page.props.user),
+        toggleShowNotificationDialog(notifications) {
+            this.info.title = "";
+            this.info.body = "";
+            this.open = !this.open;
+        },
+        markNotificationAsRead(notification) {
+            this.notificationForm.user_id = notification.notifiable_id;
+            this.notificationForm.id = notification.id;
+            this.notificationForm.title = notification.data["title"];
+            this.notificationForm.message = notification.data["message"];
+            this.notificationForm.post(
+                route(
+                    "users.markNotificationAsRead",
+                    notification.notifiable_id
+                ),
                 {
                     preserveScroll: true,
                     onSuccess: () => {
-                        this.show = !this.show;
-                        this.selectedNotificationForm.reset();
+                        this.notificationForm.reset();
+                        this.notifications =
+                            this.$page.props.user.notifications;
                     },
                     onError: (err) => console.error(err),
                 }
             );
         },
-        toggleShowNotificationDialog(notification) {
-            this.selectedNotificationForm.user_id = notification.notifiable_id;
-            this.selectedNotificationForm.id = notification.id;
-            this.selectedNotificationForm.title = notification.data["title"];
-            this.selectedNotificationForm.message =
-                notification.data["message"];
-            this.show = true;
+        markAllNotificationAsRead() {
+            this.markAllAsReadForm.post(
+                route("users.markAllNotificationAsRead"),
+                {
+                    preserveScroll: true,
+                    onSuccess: () => {
+                        this.markAllAsReadForm.reset();
+                        this.notifications =
+                            this.$page.props.user.notifications;
+                    },
+                    onError: (err) => console.error(err),
+                }
+            );
+        },
+        calculateDaysDifference(createdDate) {
+            var createdDateObj = new Date(createdDate);
+            var currentDate = new Date();
+            var differenceInMs = currentDate - createdDateObj;
+            var differenceInDays = Math.floor(
+                differenceInMs / (1000 * 60 * 60 * 24)
+            );
+            if (differenceInDays === 0) {
+                return "today";
+            } else if (differenceInDays === 1) {
+                return "yesterday";
+            } else {
+                return `${differenceInDays} days ago`;
+            }
         },
     },
 };
diff --git a/routes/web.php b/routes/web.php
index 5a06fda3..50c8fbed 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -102,6 +102,9 @@
     Route::post('users/notification/{user}/markAsRead', [UsersController::class, 'markNotificationAsRead'])
         ->name('users.markNotificationAsRead');
 
+    Route::post('users/notification/markAllAsRead', [UsersController::class, 'markAllNotificationAsRead'])
+        ->name('users.markAllNotificationAsRead');
+
     Route::get('dashboard', [DashboardController::class, 'dashboard'])->name('dashboard');
 
     Route::group([