MarcoE/TaskHybrid
1
0
Fork 0
generated from Integry/Template_NetMauiBlazorHybrid
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

24
salesbook.Maui/Core/System/Notification/Push/PushNotificationDelegate.cs
View File

@@ -1,8 +1,15 @@
using Shiny.Push;
using CommunityToolkit.Mvvm.Messaging;
using salesbook.Shared.Core.Dto.Notification;
using salesbook.Shared.Core.Interface.IntegryApi;
using salesbook.Shared.Core.Messages.Notification;
using Shiny.Push;
namespace salesbook.Maui.Core.System.Notification.Push;
public class PushNotificationDelegate : IPushDelegate
public class PushNotificationDelegate(
IIntegryNotificationRestClient integryNotificationRestClient,
IMessenger messenger
) : IPushDelegate
{
public Task OnEntry(PushNotification notification)
{
@@ -12,14 +19,21 @@ public class PushNotificationDelegate : IPushDelegate
public Task OnReceived(PushNotification notification)
{
// fires when a push notification is received (silient or notification)
//notification.Data["content-available"] = "1";
if (notification.Notification is null) return Task.CompletedTask;
var pushNotification = new PushNotificationDTO
{
Title = notification.Notification.Title,
Message = notification.Notification.Message
};
messenger.Send(new NewPushNotificationMessage(pushNotification));
return Task.CompletedTask;
}
public Task OnNewToken(string token)
{
// fires when a push notification change is set by the operating system or provider
integryNotificationRestClient.Register(token);
return Task.CompletedTask;
}

13
salesbook.Maui/MauiProgram.cs
View File

@@ -22,6 +22,7 @@ using salesbook.Shared.Core.Messages.Activity.Copy;
using salesbook.Shared.Core.Messages.Activity.New;
using salesbook.Shared.Core.Messages.Back;
using salesbook.Shared.Core.Messages.Contact;
using salesbook.Shared.Core.Messages.Notification;
using salesbook.Shared.Core.Services;
using Shiny;
@@ -71,14 +72,16 @@ namespace salesbook.Maui
builder.Services.AddSingleton<JobSteps>();
builder.Services.AddSingleton<UserPageState>();
builder.Services.AddSingleton<UserListState>();
builder.Services.AddSingleton<NotificationState>();
builder.Services.AddSingleton<FilterUserDTO>();
//Message
builder.Services.AddScoped<IMessenger, WeakReferenceMessenger>();
builder.Services.AddScoped<NewActivityService>();
builder.Services.AddScoped<BackNavigationService>();
builder.Services.AddScoped<CopyActivityService>();
builder.Services.AddScoped<NewContactService>();
builder.Services.AddSingleton<IMessenger, WeakReferenceMessenger>();
builder.Services.AddSingleton<NewActivityService>();
builder.Services.AddSingleton<BackNavigationService>();
builder.Services.AddSingleton<CopyActivityService>();
builder.Services.AddSingleton<NewContactService>();
builder.Services.AddSingleton<NewPushNotificationService>();
//Notification
builder.Services.AddNotifications();

1
salesbook.Maui/wwwroot/index.html
View File

@@ -53,6 +53,7 @@
<script src="_content/salesbook.Shared/js/main.js"></script>
<script src="_content/salesbook.Shared/js/calendar.js"></script>
<script src="_content/salesbook.Shared/js/alphaScroll.js"></script>
<script src="_content/salesbook.Shared/js/notifications.js"></script>
</body>

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;
}

9
salesbook.Shared/Core/Dto/Notification/PushNotificationDTO.cs Normal file
View File

@@ -0,0 +1,9 @@
namespace salesbook.Shared.Core.Dto.Notification;
public class PushNotificationDTO
{
public string? Title { get; set; }
public string? Message { get; set; }
public DateTime Hours => DateTime.Now;
}

8
salesbook.Shared/Core/Dto/PageState/NotificationState.cs Normal file
View File

@@ -0,0 +1,8 @@
using salesbook.Shared.Core.Dto.Notification;
namespace salesbook.Shared.Core.Dto.PageState;
public class NotificationState
{
public List<PushNotificationDTO> UnreadNotifications { get; set; } = [];
}

6
salesbook.Shared/Core/Messages/Notification/NewPushNotificationMessage.cs Normal file
View File

@@ -0,0 +1,6 @@
using CommunityToolkit.Mvvm.Messaging.Messages;
using salesbook.Shared.Core.Dto.Notification;
namespace salesbook.Shared.Core.Messages.Notification;
public class NewPushNotificationMessage(PushNotificationDTO value) : ValueChangedMessage<PushNotificationDTO>(value);

14
salesbook.Shared/Core/Messages/Notification/NewPushNotificationService.cs Normal file
View File

@@ -0,0 +1,14 @@
using CommunityToolkit.Mvvm.Messaging;
using salesbook.Shared.Core.Dto.Notification;
namespace salesbook.Shared.Core.Messages.Notification;
public class NewPushNotificationService
{
public event Action<PushNotificationDTO>? OnNotificationReceived;
public NewPushNotificationService(IMessenger messenger)
{
messenger.Register<NewPushNotificationMessage>(this, (_, o) => { OnNotificationReceived?.Invoke(o.Value); });
}
}

85
salesbook.Shared/wwwroot/js/notifications.js Normal file
View File

@@ -0,0 +1,85 @@
const FIRST_THRESHOLD = 80; // rivela pulsante
const SECOND_THRESHOLD = 160; // elimina diretta
const CLOSE_THRESHOLD = 40; // swipe a destra per richiudere
const MAX_SWIPE = 200;
window.initNotifications = () => {
document.querySelectorAll('.row').forEach(initRow);
};
function initRow(row) {
const card = row.querySelector('.notification-card');
const btn = row.querySelector('.trash-btn');
let startX = 0, currentX = 0, dragging = false;
let open = false;
card.addEventListener('pointerdown', (e) => {
if (e.pointerType === 'mouse' && e.button !== 0) return;
dragging = true;
startX = e.clientX;
card.setPointerCapture(e.pointerId);
card.style.transition = 'none';
});
card.addEventListener('pointermove', (e) => {
if (!dragging) return;
const dx = e.clientX - startX;
let translate = dx;
if (!open) {
// swiping left to open/delete
translate = Math.max(-MAX_SWIPE, Math.min(0, dx));
} else {
// if already open, allow swipe right to close
translate = Math.min(0, -FIRST_THRESHOLD + dx);
}
currentX = translate;
card.style.transform = `translateX(${translate}px)`;
});
function endDrag() {
if (!dragging) return;
dragging = false;
card.style.transition = 'transform .2s ease';
if (!open) {
if (currentX < -SECOND_THRESHOLD) {
card.style.transform = `translateX(-${MAX_SWIPE}px)`;
setTimeout(() => removeRow(row), 200);
} else if (currentX < -FIRST_THRESHOLD) {
card.style.transform = `translateX(-${FIRST_THRESHOLD}px)`;
open = true;
} else {
card.style.transform = 'translateX(0)';
open = false;
}
} else {
// se è già aperto e vado a destra abbastanza → chiudo
if (currentX > -FIRST_THRESHOLD + CLOSE_THRESHOLD) {
card.style.transform = 'translateX(0)';
open = false;
} else {
card.style.transform = `translateX(-${FIRST_THRESHOLD}px)`;
open = true;
}
}
}
card.addEventListener('pointerup', endDrag);
card.addEventListener('pointercancel', endDrag);
btn.addEventListener('click', () => removeRow(row));
}
function removeRow(row) {
const h = row.getBoundingClientRect().height;
row.style.height = h + 'px';
row.classList.add('collapsing');
requestAnimationFrame(() => {
row.style.opacity = '0';
row.style.marginTop = '0';
row.style.marginBottom = '0';
row.style.height = '0';
});
setTimeout(() => row.remove(), 220);
}