D-Net

import {Component, Input, OnDestroy, OnInit, ViewEncapsulation} from "@angular/core";

import {Notification} from "../notifications";

import {NotificationService} from "../notification.service";

import {Subscription} from "rxjs";

import {User} from "../../login/utils/helper.class";

import {Dates} from "../../utils/string-utils.class";

import {Option} from "../../sharedComponents/input/input.component";

@Component({

  selector: 'notification-sidebar',

  template: `

    <div id="notifications-switcher" uk-toggle href="#notifications">

      <icon name="mail"></icon>

      <span [class.uk-hidden]="unreadCount === 0" id="notifications-count">

        {{unreadCount}}

      </span>

    </div>

    <div id="notifications" uk-offcanvas="flip: true; bg-close: false;">

      <div class="uk-offcanvas-bar">

        <button class="uk-offcanvas-close notification-close" type="button">

          <icon name="close"></icon>

        </button>

        <ng-template [ngIf]="!notification">

          <div class="notification-list uk-position-relative">

            <h5 class="uk-text-bold">Notifications</h5>

            <h6 *ngIf="notifications.length == 0" class="uk-position-center uk-margin-remove">No notifications</h6>

            <ul *ngIf="notifications.length > 0" class="uk-list">

              <li *ngFor="let notification of notifications; let i=index" class="clickable" (click)="select(notification)">

                <div class="uk-grid uk-grid-small" uk-grid>

                  <notification-user [name]="notification.name" [surname]="notification.surname" [outline]="true"

                                     colorClass="uk-text-secondary"></notification-user>

                  <div class="uk-width-expand">

                    <div class="uk-width-1-1 uk-flex uk-flex-middle">

                      <div class="uk-width-expand multi-line-ellipsis lines-2">

                        <p class="uk-margin-remove">

                          {{notification.preview}}

                        </p>

                      </div>

                      <div class="uk-margin-left uk-flex uk-flex-center uk-text-secondary">

                        <icon *ngIf="!notification.read" name="bullet" ratio="0.6"></icon>

                      </div>

                    </div>

                    <span class="uk-text-secondary text-small">{{getDate(notification.date)}}</span>

                  </div>

                </div>

              </li>

            </ul>

          </div>

          <div *ngIf="availableGroups.length > 0" [availableGroups]="availableGroups" [service]="service" notify-form class="notify"></div>

        </ng-template>

        <div *ngIf="notification" class="notification">

          <div class="uk-flex uk-flex-middle uk-margin-medium-bottom">

            <span class="uk-text-secondary clickable" (click)="back($event)">

              <icon ratio="1.5" name="arrow_left"></icon>

            </span>

            <h5 *ngIf="notification.title" class="uk-text-bold uk-margin-left">{{notification.title}}</h5>

          </div>

          <div class="uk-flex uk-flex-middle uk-margin-medium-bottom">

            <notification-user [name]="notification.name" [surname]="notification.surname" colorClass="uk-text-secondary" [outline]="true"></notification-user>

            <div class="uk-margin-left">

              {{notification.name + ' ' + notification.surname}}<br>

              <span style="opacity: 0.8;" class="text-small uk-margin-small-top">

                {{notification.date | date:'medium'}} ({{getDate(notification.date)}})

              </span>

            </div>

          </div>

          <div [innerHTML]="notification.message | safeHtml">

          </div>

        </div>

      </div>

    </div>

  `,

  styleUrls: ['notification-sidebar.component.css'],

  encapsulation: ViewEncapsulation.None

})

export class NotificationsSidebarComponent implements OnInit, OnDestroy {

  @Input()

  public user: User;

  public notifications: Notification[] = [];

  @Input()

  public availableGroups: Option[] = [];

  @Input()

  public service: string;

  public notification: Notification;

  private subscriptions: any[] = [];

  constructor(private notificationService: NotificationService) {

  }

  ngOnInit() {

    this.subscriptions.push(this.notificationService.getNotifications(this.service).subscribe(notifications => {

      this.notifications = notifications;

    }));

  }

  ngOnDestroy() {

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscription) {

        subscription.unsubscribe();

      }

    })

  }

  get unreadCount(): number {

    return this.notifications.filter(notification => !notification.read).length;

  }

  getDate(date: Date): string {

    return Dates.timeSince(date);

  }

  select(notification: Notification) {

    this.notificationService.readNotification(notification._id).subscribe(user => {

      notification.read = true;

      this.notification = notification;

    });

  }

  back(event) {

    event.stopPropagation();

    this.notification = null;

  }

}