Gestita pagina notifiche

salesbook.Shared/Components/SingleElements/Card/NotificationCard.razor

@@ -1,15 +1,86 @@
-@using salesbook.Shared.Core.Dto.Notification
+@using salesbook.Shared.Core.Entity
 
-<div class="row">
-    <div class="behind"><button class="trash-btn"><MudIcon Icon="@Icons.Material.Filled.Delete" /></button></div>
+<div class="row" id="@Notification.Id">
+    <div class="behind-left">
+        <button class="read-btn">
+            <MudIcon Icon="@Icons.Material.Rounded.Check" />
+        </button>
+    </div>
+    <div class="behind-right">
+        <button class="trash-btn">
+            <MudIcon Icon="@Icons.Material.Rounded.Delete" />
+        </button>
+    </div>
     <div class="notification-card">
-        <div>
-            <div class="title">@Notification.Title</div>
-            <div class="subtitle">@Notification.Message</div>
+        @if (Notification.NotificationData is { Type: not null })
+        {
+            @switch (Notification.NotificationData.Type)
+            {
+                case "memo":
+                    <div class="avatar"><MudIcon Icon="@Icons.Material.Rounded.ContentPaste" /></div>
+                    break;
+                case "newPlanned":
+                    <div class="avatar"><MudIcon Icon="@Icons.Material.Rounded.CalendarMonth" /></div>
+                    break;
+            }
+        }
+        <div class="notification-body">
+            <div class="title-row">
+                <div class="title">@Notification.Title</div>
+
+                <div class="section-time">
+                    <div class="notification-time">@GetTimeAgo(Notification.StartDate)</div>
+                    @if (Unread)
+                    {
+                        <span class="unread-dot"></span>
+                    }
+                </div>
+            </div>
+
+            @if (
+                Notification.StartDate < DateTime.Today && Notification.Body != null && Notification.Body.Contains("Oggi")
+            )
+            {
+                <MudText Typo="Typo.caption" Class="subtitle">@Notification.Body.Replace("Oggi", $"{Notification.StartDate:d}")</MudText>
+            }
+            else
+            {
+                <MudText Typo="Typo.caption" Class="subtitle">@Notification.Body</MudText>
+            }
         </div>
     </div>
 </div>
 
 @code {
-    [Parameter] public PushNotificationDTO Notification { get; set; } = new();
+    [Parameter] public bool Unread { get; set; }
+    [Parameter] public WtbNotification Notification { get; set; } = new();
+
+    private static string GetTimeAgo(DateTime? timestamp)
+    {
+        if (timestamp is null) return "";
+
+        var difference = DateTime.Now - timestamp.Value;
+
+        switch (difference.TotalMinutes)
+        {
+            case < 1:
+                return "Adesso";
+            case < 60:
+                return $"{(int)difference.TotalMinutes} minuti fa";
+            default:
+            {
+                switch (difference.TotalHours)
+                {
+                    case < 2:
+                        return $"{(int)difference.TotalHours} ora fa";
+                    case < 24:
+                        return $"{timestamp.Value:t}";
+                    default:
+                    {
+                        return difference.TotalDays < 7 ? $"{(int)difference.TotalDays}g fa" : timestamp.Value.ToString("dd/MM/yyyy");
+                    }
+                }
+            }
+        }
+    }
 }

salesbook.Shared/Components/SingleElements/Card/NotificationCard.razor.css

@@ -6,18 +6,27 @@
     width: 100%;
 }
 
-.behind {
+.behind-left, .behind-right {
     position: absolute;
     inset: 0;
     display: flex;
-    justify-content: flex-end;
     align-items: center;
-    padding-right: 14px;
-    background: var(--mud-palette-error);
     z-index: 0;
 }
 
-.trash-btn {
+.behind-right {
+    justify-content: flex-end;
+    padding-right: 14px;
+    background: var(--mud-palette-error);
+}
+
+.behind-left {
+    justify-content: flex-start;
+    padding-left: 14px;
+    background: var(--mud-palette-info);
+}
+
+.read-btn, .trash-btn {
     color: white;
     padding: 10px 15px;
     cursor: pointer;
@@ -29,6 +38,7 @@
     display: flex;
     align-items: center;
     padding: 12px;
+    gap: 12px;
     background: var(--mud-palette-background);
     transition: transform .2s ease;
     touch-action: pan-y;
@@ -37,15 +47,34 @@
 }
 
 .avatar {
-    width: 42px;
+    min-width: 42px;
     height: 42px;
     border-radius: 12px;
     display: grid;
     place-items: center;
-    background: #0b1220;
-    border: 1px solid #1f2937;
+    background: var(--mud-palette-background);
+    border: 1px solid var(--mud-palette-divider);
     font-weight: bold;
-    color: #22d3ee;
+    color: var(--mud-palette-primary);
+}
+
+.notification-body {
+    width: 100%
+}
+
+.title-row {
+    display: flex;
+    gap: 8px;
+    justify-items: center;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+.unread-dot {
+    width: 10px;
+    height: 10px;
+    background-color: var(--mud-palette-error);
+    border-radius: 50%;
 }
 
 .title {
@@ -53,12 +82,24 @@
     margin-bottom: unset !important;
 }
 
-.subtitle {
+.section-time {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+.notification-time {
     font-size: 13px;
     color: #94a3b8;
+    line-height: normal;
 }
 
 .collapsing {
     transition: height .22s ease, margin .22s ease, opacity .22s ease;
     overflow: hidden;
+}
+
+.subtitle {
+    font-size: 12px;
+    color: var(--mud-palette-drawer-text);
 }