From a0d96e6631cd56605d87e2ffae0c09a018eb2fad Mon Sep 17 00:00:00 2001
From: Drew Ansbacher <drew.ansbacher@spiredigital.com>
Date: Sun, 5 Dec 2021 21:40:04 -0700
Subject: [PATCH] view full message

---
 .../notifications/notifications.page.html      |  5 +++++
 .../notifications/notifications.page.scss      |  6 ++++++
 .../pages/notifications/notifications.page.ts  | 18 ++++++++++++++++++
 ui/src/global.scss                             |  4 ++++
 4 files changed, 33 insertions(+)

diff --git a/ui/src/app/pages/notifications/notifications.page.html b/ui/src/app/pages/notifications/notifications.page.html
index 55a801465..99ac9f979 100644
--- a/ui/src/app/pages/notifications/notifications.page.html
+++ b/ui/src/app/pages/notifications/notifications.page.html
@@ -68,6 +68,11 @@
             <h2 class="notification-message">
               {{ not.message | truncateTail: 1000 }}
             </h2>
+            <p class="view-message-tag">
+              <a class="view-message-tag" *ngIf="not.message.length > 1000" color="dark" (click)="viewFullMessage(not.title, not.message)">
+                View Full Message
+              </a>
+            </p>
             <p>
               {{ not['created-at'] | date: 'short' }}
             </p>
diff --git a/ui/src/app/pages/notifications/notifications.page.scss b/ui/src/app/pages/notifications/notifications.page.scss
index c9219c817..9bba81dd0 100644
--- a/ui/src/app/pages/notifications/notifications.page.scss
+++ b/ui/src/app/pages/notifications/notifications.page.scss
@@ -1,3 +1,9 @@
 .notification-message {
   margin: 6px 0 8px 0;
+}
+
+.view-message-tag {
+  margin-bottom: 8px;
+  font-size: 16px;
+  cursor: pointer;
 }
\ No newline at end of file
diff --git a/ui/src/app/pages/notifications/notifications.page.ts b/ui/src/app/pages/notifications/notifications.page.ts
index 7a89a2343..5f5a11b6d 100644
--- a/ui/src/app/pages/notifications/notifications.page.ts
+++ b/ui/src/app/pages/notifications/notifications.page.ts
@@ -105,6 +105,24 @@ export class NotificationsPage {
     await modal.present()
   }
 
+  async viewFullMessage (title: string, message: string) {
+    const alert = await this.alertCtrl.create({
+      header: title,
+      message: message,
+      cssClass: 'wider-alert',
+      buttons: [
+        {
+          text: `OK`,
+          handler: () => {
+            alert.dismiss()
+          },
+          cssClass: 'enter-click',
+        },
+      ],
+    })
+    await alert.present()
+  }
+
   private async deleteAll (): Promise<void> {
     const loader = await this.loadingCtrl.create({
       spinner: 'lines',
diff --git a/ui/src/global.scss b/ui/src/global.scss
index 77798c7aa..113785f3f 100644
--- a/ui/src/global.scss
+++ b/ui/src/global.scss
@@ -248,6 +248,10 @@ ion-button {
   }
 }
 
+.wider-alert .alert-wrapper {
+  min-width: 60% !important;
+}
+
 ion-slides {
   .slider-wrapper {
     height: 100%;