Spaces:
Sleeping
Sleeping
File size: 7,575 Bytes
ccc2569 4433399 ccc2569 4433399 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 | @page "/notifications"
@using LibraryManagement.Shared.Models
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using BlazorFrontend.Services
@inject LibraryApiClient ApiClient
@inject IJSRuntime JSRuntime
<PageTitle>Notifications</PageTitle>
<AuthorizeView>
<Authorized>
<div class="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
<div class="mb-8 animate-in fade-in slide-in-from-top-4 duration-500 flex items-center justify-between">
<div>
<h1 class="text-3xl font-extrabold tracking-tight text-mystic-900">Notifications</h1>
<p class="text-mystic-500 font-medium mt-1">Stay updated with your library account activity.</p>
</div>
@if (_notifications != null && _notifications.Any(n => !n.IsRead))
{
<button @onclick="MarkAllAsRead" class="text-sm font-medium text-mystic-600 hover:text-mystic-900 bg-mystic-100 hover:bg-mystic-200 px-4 py-2 rounded-full transition-colors">
Mark all as read
</button>
}
</div>
<div class="space-y-4 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-100">
@if (_isLoading)
{
<div class="flex justify-center py-12">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-mystic-900"></div>
</div>
}
else if (_notifications == null || !_notifications.Any())
{
<div class="bg-white rounded-2xl p-12 text-center border border-mystic-200 shadow-sm">
<div class="w-16 h-16 bg-mystic-50 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-mystic-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</div>
<h3 class="text-lg font-bold text-mystic-900 mb-1">No notifications yet</h3>
<p class="text-mystic-500 text-sm">When you get updates about your books or subscription, they'll show up here.</p>
</div>
}
else
{
@foreach (var notif in _notifications)
{
<div class="bg-white rounded-2xl p-5 border border-mystic-200 shadow-sm hover:shadow-md transition-shadow relative overflow-hidden group @(!notif.IsRead ? "bg-mystic-50/50" : "")">
@if (!notif.IsRead)
{
<div class="absolute left-0 top-0 bottom-0 w-1 bg-mystic-900"></div>
}
<div class="flex gap-4">
<div class="flex-shrink-0 mt-1">
@if (notif.Type == "Warning")
{
<div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center">
<svg class="w-5 h-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
</div>
}
else if (notif.Type == "Info")
{
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center">
<svg class="w-5 h-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
</div>
}
else
{
<div class="w-10 h-10 rounded-full bg-mystic-100 flex items-center justify-center">
<svg class="w-5 h-5 text-mystic-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
</div>
}
</div>
<div class="flex-1">
<div class="flex items-start justify-between gap-4">
<div>
<h4 class="text-sm font-bold text-mystic-900 @(!notif.IsRead ? "font-extrabold" : "")">@notif.Title</h4>
<p class="text-sm text-mystic-600 mt-1 leading-relaxed">@notif.Message</p>
</div>
<span class="text-xs font-medium text-mystic-400 whitespace-nowrap">@notif.CreatedAt.ToString("MMM dd, HH:mm")</span>
</div>
@if (!string.IsNullOrEmpty(notif.ActionLink))
{
<div class="mt-3">
<a href="@notif.ActionLink" class="text-sm font-semibold text-mystic-900 hover:text-mystic-600 underline underline-offset-2">
@notif.ActionText
</a>
</div>
}
</div>
</div>
</div>
}
}
</div>
</div>
</Authorized>
<NotAuthorized>
<div class="max-w-4xl mx-auto py-12 px-4 text-center">
<h2 class="text-2xl font-bold text-mystic-900 mb-4">Please sign in to view notifications</h2>
<a href="/login" class="btn-primary">Sign In</a>
</div>
</NotAuthorized>
</AuthorizeView>
@code {
private List<NotificationDto> _notifications = new();
private bool _isLoading = true;
protected override async Task OnInitializedAsync()
{
await LoadNotifications();
}
private async Task LoadNotifications()
{
try
{
_isLoading = true;
StateHasChanged();
var results = await ApiClient.GetNotificationsAsync();
_notifications = results.ToList();
}
catch (Exception ex)
{
Console.WriteLine($"Error loading notifications: {ex.Message}");
_notifications = new List<NotificationDto>();
}
finally
{
_isLoading = false;
StateHasChanged();
}
}
private async Task MarkAllAsRead()
{
try
{
var success = await ApiClient.MarkNotificationsReadAsync();
if (success)
{
await LoadNotifications();
}
}
catch (Exception ex)
{
Console.WriteLine($"Error marking notifications as read: {ex.Message}");
}
}
}
|