git-server-git.apps.pok.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 <!-- Reusable notification item template -->
   2 <ng-template #notificationItemTemplate
   3              let-notification="notification"
   4              let-last="last">
   5   <div class="notification-wrapper">
   6     <div class="notification-item">
   7       <div class="notification-icon">
   8         <cd-icon [type]="notificationIconMap[notification.type] || 'info'">
   9         </cd-icon>
  10       </div>
  11       <div class="notification-content">
  12         <div class="notification-timestamp">{{ notification.timestamp | relativeDate }}</div>
  13         <div class="notification-title">{{ notification.title }}</div>
  14         <div class="notification-message"
  15              [innerHTML]="notification.message | sanitizeHtml"></div>
  16       </div>
  17       <button cdsButton="ghost"
  18               size="sm"
  19               class="notification-close"
  20               (click)="removeNotification(notification, $event)">
  21         <cd-icon type="destroy"></cd-icon>
  22       </button>
  23     </div>
  24   @if (!last) {
  25     <div class="notification-divider"></div>
  26   }
  27   </div>
  28 </ng-template>
  29
  30 @if (todayNotifications.length > 0) {
  31   <div class="notification-section-heading"
  32        i18n>Today</div>
  33   @for (notification of todayNotifications; track notification.timestamp; let last = $last) {
  34     <ng-container *ngTemplateOutlet="notificationItemTemplate; context: { notification: notification, last: last }"></ng-container>
  35   }
  36 }
  37
  38 @if (previousNotifications.length > 0) {
  39   <div class="notification-section-heading"
  40        i18n>Previous</div>
  41   @for (notification of previousNotifications; track notification.timestamp; let last = $last) {
  42     <ng-container *ngTemplateOutlet="notificationItemTemplate; context: { notification: notification, last: last }"></ng-container>
  43   }
  44 }
  45
  46 @if (todayNotifications.length === 0 && previousNotifications.length === 0) {
  47   <div class="notification-empty">
  48     <div i18n>No notifications</div>
  49   </div>
  50 }