MarcoE/TaskHybrid
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Creata card notifiche

Browse Source
This commit is contained in:
Marco Elefante
2025-09-09 16:30:51 +02:00
parent dfb86e3cd7
commit 7319378e75
13 changed files with 289 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
salesbook.Shared/Components/Layout/NavMenu.razor
View File

@@ -1,13 +1,18 @@
@using CommunityToolkit.Mvvm.Messaging
@using salesbook.Shared.Core.Dto
@using salesbook.Shared.Core.Dto.Activity
@using salesbook.Shared.Core.Dto.Notification
@using salesbook.Shared.Core.Dto.PageState
@using salesbook.Shared.Core.Entity
@using salesbook.Shared.Core.Messages.Activity.Copy
@using salesbook.Shared.Core.Messages.Activity.New
@using salesbook.Shared.Core.Messages.Contact
@using salesbook.Shared.Core.Messages.Notification
@inject IDialogService Dialog
@inject IMessenger Messenger
@inject CopyActivityService CopyActivityService
@inject NewPushNotificationService NewPushNotificationService
@inject NotificationState Notification
<div class="container animated-navbar @(IsVisible ? "show-nav" : "hide-nav") @(IsVisible ? PlusVisible ? "with-plus" : "without-plus" : "with-plus")">
<nav class="navbar @(IsVisible ? PlusVisible ? "with-plus" : "without-plus" : "with-plus")">
@@ -30,12 +35,14 @@
</NavLink>
</li>
<li class="nav-item">
<NavLink class="nav-link" href="Notifications" Match="NavLinkMatch.All">
<div class="d-flex flex-column">
<i class="ri-notification-4-line"></i>
<span>Notifiche</span>
</div>
</NavLink>
<MudBadge Content="Notification.UnreadNotifications.Count" Visible="!Notification.UnreadNotifications.IsNullOrEmpty()" Color="Color.Error" Overlap="true">
<NavLink class="nav-link" href="Notifications" Match="NavLinkMatch.All">
<div class="d-flex flex-column">
<i class="ri-notification-4-line"></i>
<span>Notifiche</span>
</div>
</NavLink>
</MudBadge>
</li>
</ul>
</div>
@@ -63,8 +70,9 @@
protected override Task OnInitializedAsync()
{
CopyActivityService.OnCopyActivity += async dto => await CreateActivity(dto);
NewPushNotificationService.OnNotificationReceived += NewNotificationReceived;
NavigationManager.LocationChanged += (_, args) =>
NavigationManager.LocationChanged += (_, args) =>
{
var location = args.Location.Remove(0, NavigationManager.BaseUri.Length);
@@ -104,4 +112,10 @@
Messenger.Send(new NewContactMessage((CRMCreateContactResponseDTO)result.Data));
}
}
private void NewNotificationReceived(PushNotificationDTO notification)
{
Notification.UnreadNotifications.Add(notification);
InvokeAsync(StateHasChanged);
}
}

34
salesbook.Shared/Components/Pages/Notifications.razor
View File

@@ -2,13 +2,45 @@
@attribute [Authorize]
@using salesbook.Shared.Components.Layout
@using salesbook.Shared.Components.SingleElements
@using salesbook.Shared.Core.Dto.Notification
@using salesbook.Shared.Core.Dto.PageState
@using salesbook.Shared.Core.Messages.Notification
@inject NotificationState Notification
@inject NewPushNotificationService NewPushNotificationService
@inject IJSRuntime JS
<HeaderLayout Title="Notifiche" />
<div class="container">
<NoDataAvailable Text="Nessuna notifica meno recente" />
@if (Notification.UnreadNotifications.IsNullOrEmpty())
{
<NoDataAvailable Text="Nessuna notifica meno recente" />
}
else
{
<div class="list" id="list">
@foreach(var notification in Notification.UnreadNotifications)
{
<NotificationCard Notification="notification" />
}
</div>
}
</div>
@code {
protected override Task OnInitializedAsync()
{
NewPushNotificationService.OnNotificationReceived += NewNotificationReceived;
return Task.CompletedTask;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await JS.InvokeVoidAsync("initNotifications");
}
private void NewNotificationReceived(PushNotificationDTO notification)
{
InvokeAsync(StateHasChanged);
}
}

6
salesbook.Shared/Components/Pages/Notifications.razor.css
View File

@@ -0,0 +1,6 @@
.list {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}

15
salesbook.Shared/Components/SingleElements/Card/NotificationCard.razor Normal file
View File

@@ -0,0 +1,15 @@
@using salesbook.Shared.Core.Dto.Notification
<div class="row">
<div class="behind"><button class="trash-btn"><MudIcon Icon="@Icons.Material.Filled.Delete" /></button></div>
<div class="notification-card">
<div>
<div class="title">@Notification.Title</div>
<div class="subtitle">@Notification.Message</div>
</div>
</div>
</div>
@code {
[Parameter] public PushNotificationDTO Notification { get; set; } = new();
}

64
salesbook.Shared/Components/SingleElements/Card/NotificationCard.razor.css Normal file
View File

@@ -0,0 +1,64 @@
.row {
position: relative;
overflow: hidden;
border-radius: var(--mud-default-borderradius);
box-shadow: var(--custom-box-shadow);
width: 100%;
}
.behind {
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 {
color: white;
padding: 10px 15px;
cursor: pointer;
}
.notification-card {
position: relative;
z-index: 1;
display: flex;
align-items: center;
padding: 12px;
background: var(--mud-palette-background);
transition: transform .2s ease;
touch-action: pan-y;
will-change: transform;
transform: translateX(0);
}
.avatar {
width: 42px;
height: 42px;
border-radius: 12px;
display: grid;
place-items: center;
background: #0b1220;
border: 1px solid #1f2937;
font-weight: bold;
color: #22d3ee;
}
.title {
font-weight: 700;
margin-bottom: unset !important;
}
.subtitle {
font-size: 13px;
color: #94a3b8;
}
.collapsing {
transition: height .22s ease, margin .22s ease, opacity .22s ease;
overflow: hidden;
}