Teso Business 2.0 angular source code
https://bacwaredev.barhendev.com/teso
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
166 lines
8.8 KiB
166 lines
8.8 KiB
<!-- Notifications toggle -->
|
|
<button mat-icon-button (click)="openPanel()" #notificationsOrigin>
|
|
<ng-container *ngIf="unreadCount > 0">
|
|
<span class="absolute top-0 right-0 left-0 flex items-center justify-center h-3">
|
|
<span
|
|
class="flex items-center justify-center flex-shrink-0 min-w-4 h-4 px-1 ml-4 mt-2.5 rounded-full bg-teal-600 text-indigo-50 text-xs font-medium">
|
|
{{unreadCount}}
|
|
</span>
|
|
</span>
|
|
</ng-container>
|
|
<mat-icon [svgIcon]="'heroicons_outline:bell'"></mat-icon>
|
|
</button>
|
|
|
|
<!-- Notifications panel -->
|
|
<ng-template #notificationsPanel>
|
|
|
|
<div
|
|
class="fixed inset-0 sm:static sm:inset-auto flex flex-col sm:min-w-90 sm:w-90 sm:rounded-2xl overflow-hidden shadow-lg">
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-shrink-0 items-center py-4 pr-4 pl-6 bg-primary text-on-primary"
|
|
style="background-color: #0f172a !important;">
|
|
<div class="sm:hidden -ml-1 mr-3">
|
|
<button mat-icon-button (click)="closePanel()">
|
|
<mat-icon class="icon-size-5 text-current" [svgIcon]="'heroicons_solid:x'"></mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="text-lg font-medium leading-10">Notifications</div>
|
|
<div class="ml-auto">
|
|
<button mat-icon-button [matTooltip]="'Mark all as read'" [disabled]="unreadCount === 0"
|
|
(click)="markAllAsRead()">
|
|
<mat-icon class="icon-size-5 text-current" [svgIcon]="'heroicons_solid:mail-open'"></mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="relative flex flex-col flex-auto sm:max-h-120 divide-y overflow-y-auto bg-card">
|
|
<!-- Notifications -->
|
|
<ng-container *ngFor="let notification of notifications; trackBy: trackByFn">
|
|
<div class="flex group hover:bg-gray-50 dark:hover:bg-black dark:hover:bg-opacity-5"
|
|
[ngClass]="{'unread': !notification.read}">
|
|
|
|
|
|
<!-- Notification without a link -->
|
|
<ng-container *ngIf="notification.notificationType === 'subscription'">
|
|
<div class="flex flex-auto py-5 pl-6">
|
|
<ng-container *ngTemplateOutlet="notificationSubscription"></ng-container>
|
|
</div>
|
|
</ng-container>
|
|
<!-- Notification without a link -->
|
|
<ng-container *ngIf="notification.notificationType === 'couponRedemption'">
|
|
<div class="flex flex-auto py-5 pl-6">
|
|
<ng-container *ngTemplateOutlet="notificationRedemption"></ng-container>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<!-- Notification without a link -->
|
|
<ng-container *ngIf="notification.notificationType === 'couponAcquisition'">
|
|
<div class="flex flex-auto py-5 pl-6">
|
|
<ng-container *ngTemplateOutlet="couponAcquisition"></ng-container>
|
|
</div>
|
|
</ng-container>
|
|
|
|
<!-- Actions -->
|
|
<div class="relative flex flex-col my-5 mr-6 ml-2">
|
|
<!-- Indicator -->
|
|
<button class="w-6 h-6 min-h-6" mat-icon-button (click)="toggleRead(notification)"
|
|
[matTooltip]="notification.read ? 'Mark as unread' : 'Mark as read'">
|
|
<span class="w-2 h-2 rounded-full" [ngClass]="{'bg-gray-400 dark:bg-gray-500 sm:opacity-0 sm:group-hover:opacity-100': notification.read,
|
|
'bg-primary': !notification.read}"></span>
|
|
</button>
|
|
<button class="w-6 h-6 min-h-6 sm:opacity-0 sm:group-hover:opacity-100" mat-icon-button
|
|
(click)="delete(notification)" [matTooltip]="'Remove'" >
|
|
<mat-icon class="icon-size-4" [svgIcon]="'heroicons_solid:x'"></mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- Notification content template -->
|
|
<ng-template #notificationRedemption>
|
|
<!-- Icon -->
|
|
<ng-container>
|
|
<div
|
|
class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
|
|
<mat-icon class="icon-size-5" [svgIcon]="'heroicons_outline:credit-card'">
|
|
</mat-icon>
|
|
</div>
|
|
</ng-container>
|
|
<!-- Title, description & time -->
|
|
<div class="flex flex-col flex-auto">
|
|
<ng-container>
|
|
<div class="font-semibold line-clamp-1">Coupon Redeemed</div>
|
|
</ng-container>
|
|
<ng-container *ngIf="notification.message">
|
|
<div class="line-clamp-2" [innerHTML]="notification.message"></div>
|
|
</ng-container>
|
|
<div class="mt-2 text-sm leading-none text-secondary">
|
|
{{notification.timestamp | date:'MMM dd, h:mm a'}}
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<!-- Notification content template -->
|
|
<ng-template #couponAcquisition>
|
|
<!-- Icon -->
|
|
<ng-container>
|
|
<div
|
|
class="flex flex-shrink-0 items-center justify-center w-8 h-8 mr-4 rounded-full bg-gray-100 dark:bg-gray-700">
|
|
<mat-icon class="icon-size-5" [svgIcon]="'heroicons_outline:credit-card'">
|
|
</mat-icon>
|
|
</div>
|
|
</ng-container>
|
|
<!-- Title, description & time -->
|
|
<div class="flex flex-col flex-auto">
|
|
<ng-container>
|
|
<div class="font-semibold line-clamp-1">Coupon Claimed</div>
|
|
</ng-container>
|
|
<ng-container *ngIf="notification.message">
|
|
<div class="line-clamp-2" [innerHTML]="notification.message"></div>
|
|
</ng-container>
|
|
<div class="mt-2 text-sm leading-none text-secondary">
|
|
{{notification.timestamp | date:'MMM dd, h:mm a'}}
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
<!-- Notification subscription template -->
|
|
<ng-template #notificationSubscription>
|
|
<!-- Image -->
|
|
<ng-container *ngIf="notification.initiatorThumbnail">
|
|
<img class="flex-shrink-0 w-8 h-8 mr-4 rounded-full overflow-hidden object-cover object-center"
|
|
[src]="imageLoader(notification.initiatorThumbnail)" [alt]="'Notification image'">
|
|
</ng-container>
|
|
<!-- Title, description & time -->
|
|
<div class="flex flex-col flex-auto">
|
|
<ng-container *ngIf="notification.title">
|
|
<div class="font-semibold line-clamp-1">New Subscriber</div>
|
|
</ng-container>
|
|
<ng-container>
|
|
<div class="line-clamp-2">{{notification.initiatorFirstname}}
|
|
{{notification.initiatorSurname}} started following you</div>
|
|
</ng-container>
|
|
<div class="mt-2 text-sm leading-none text-secondary">
|
|
{{notification.timestamp | date:'MMM dd, h:mm a'}}
|
|
</div>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container>
|
|
|
|
<!-- No notifications -->
|
|
<ng-container *ngIf="!notifications || !notifications.length">
|
|
<div class="flex flex-col flex-auto items-center justify-center sm:justify-start py-12 px-8">
|
|
<div class="flex flex-0 items-center justify-center w-14 h-14 rounded-full bg-primary-100">
|
|
<mat-icon class="text-primary-500-700" [svgIcon]="'heroicons_outline:bell'"></mat-icon>
|
|
</div>
|
|
<div class="mt-5 text-2xl font-semibold tracking-tight">No notifications</div>
|
|
<div class="w-full max-w-60 mt-1 text-md text-center text-secondary">When you have notifications,
|
|
they will appear here.</div>
|
|
</div>
|
|
</ng-container>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ng-template>
|