openaire-library/notifications/notifications-sidebar/notifications-sidebar.component.ts

import {ChangeDetectorRef, Component, Input, OnDestroy, OnInit, ViewChild, 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";

declare var UIkit;

@Component({
  selector: 'notification-sidebar',
  template: `
    <div id="notifications-switcher" uk-toggle href="#notifications" 
         class="offcanvas-switcher uk-flex uk-flex-center uk-flex-middle"
         [class.open]="notificationsOpen">
      <!--         [ngClass]="notificationsStatus">-->

      <icon name="mail" ratio="1.5" customClass="uk-text-primary-gradient" visuallyHidden="Notifications"></icon>
      <span [class.uk-hidden]="unreadCount === 0" id="notifications-count" class="offcanvas-count">
        {{unreadCount}}
      </span>
    </div>
    <div id="notifications" class="uk-offcanvas offcanvas" uk-offcanvas="flip: true; overlay: true;">
<!--              <div #test id="notifications-switcher-inner"  uk-toggle href="#notifications" -->
<!--                   class="open uk-flex uk-flex-center uk-flex-middle uk-animation-fade" [ngClass]="notificationsStatus">-->
<!--&lt;!&ndash;                    uk-animation-fade"&ndash;&gt;-->
<!--&lt;!&ndash;                   [class.uk-animation-fast]="!notificationsOpen" [class.uk-animation-reverse]="!notificationsOpen">&ndash;&gt;-->
<!--                <icon name="mail" ratio="1.5"></icon>-->
<!--      &lt;!&ndash;          <span [class.uk-hidden]="unreadCount === 0" id="notifications-count">&ndash;&gt;-->
<!--      &lt;!&ndash;            {{unreadCount}}&ndash;&gt;-->
<!--      &lt;!&ndash;          </span>&ndash;&gt;-->
<!--              </div>-->
      
      <div class="uk-offcanvas-bar">
<!--        <button class="uk-offcanvas-close offcanvas-close" type="button">-->
<!--          <icon name="close" ratio="1.5"></icon>-->
<!--        </button>-->
        <button class="uk-offcanvas-close offcanvas-close uk-close uk-icon" type="button">
          <icon name="close" ratio="1.5"></icon>
        </button>

        <ng-template [ngIf]="!notification">
          <div class="notification-list uk-position-relative">
            <h4>Notifications</h4>
            <div class="uk-flex uk-flex-right@m uk-flex-center uk-padding uk-padding-remove-vertical">
              <button [disabled]="unreadCount === 0" (click)="readAll()" class="uk-button uk-button-link">Mark As Read ({{unreadCount}})</button>
            </div>
            <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 uk-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>
            <h4 *ngIf="notification.title" class="uk-text-bold uk-margin-left">{{notification.title}}</h4>
          </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="uk-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[] = [];
  public notificationsOpen: boolean = false;
  // public notificationsStatus: string = "closed";

  constructor(private notificationService: NotificationService, private cdr: ChangeDetectorRef) {
  }
  
  ngOnInit() {
    this.subscriptions.push(this.notificationService.getNotifications(this.service).subscribe(notifications => {
      this.notifications = notifications;
    }, error => {
      this.notifications = [];
      UIkit.notification('An error has occurred. Please try again later', {
        status: 'danger',
        timeout: 6000,
        pos: 'bottom-right'
      });
    }));

    UIkit.util.on('#notifications', 'beforeshow', () => {
      // do something
      console.log("notifications beforeshow...");
      this.notificationsOpen = true;
      this.cdr.detectChanges();
      // self.notificationsStatus = "opening";

    });

    // UIkit.util.on('#notifications', 'shown', function () {
    //   // do something
    //   console.log("notifications open");
    //   self.notificationsStatus = "open";
    //
    // });

    UIkit.util.on('#notifications', 'beforehide', () => {
      // do something
      console.log("notifications beforehide...");
      this.notificationsOpen = false;
      this.cdr.detectChanges();

      // self.notificationsStatus = "closing";
    });
  }
  
  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    })
    // UIkit.util.$destroy();
  }
  
  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(() => {
      notification.read = true;
      this.notification = notification;
    }, error => {
      UIkit.notification('An error has occurred. Please try again later', {
        status: 'danger',
        timeout: 6000,
        pos: 'bottom-right'
      });
    });
  }
  
  back(event) {
    event.stopPropagation();
    this.notification = null;
  }
  
  readAll() {
    this.notificationService.markAllAsRead(this.service).subscribe(() => {
      this.notifications.forEach(notification => {
        notification.read = true;
      });
    }, error => {
      UIkit.notification('An error has occurred. Please try again later', {
        status: 'danger',
        timeout: 6000,
        pos: 'bottom-right'
      });
    });
  }
}