component.ts

import { NotificationService } from '../../../services/notification/notification.service';
import { SalonsService } from '../../../services/salons/salons.service';
import { User, Salon, Notification } from '../../../../stub';
import { UserService } from '../../../services/user/user.service';
import { Component, OnInit, Output, EventEmitter, Input, ElementRef, NgZone } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { BookingService } from '../../../services/booking/booking.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-user-menu',
  templateUrl: './user-menu.component.html',
  styleUrls: ['./user-menu.component.styl']
})
export class UserMenuComponent implements OnInit {
  @Output() logout = new EventEmitter();
  @Output() toggleUserMenu = new EventEmitter();
  @Input() isActive = false;
  @Input() user: any;
  
  public subUserSalons: Subscription;
  public subUserBookings: Subscription;
  public subSalonBookings: Subscription;
  public subUserSalonsRoles: Subscription;
  public subUserNotifications: Subscription;
  public subSalonNotifications: Subscription;
  public listenerClick: any;

  public salonsGroup: FormGroup;
  public currentSalon: Salon;
  public salons: Salon[];
  public salonsConfig: {};
  public hasSalons = false;
  public counter = { 
    userBookings: 0,
    userNotifications: 0,
    salonBookings: 0,
    salonNotifications: 0
  };

  constructor(
    public zone: NgZone,
    public elementRef: ElementRef,
    public userService: UserService,
    public salonsService: SalonsService,
    public bookingService: BookingService,
    public notificationsService: NotificationService,
  ) {
    this.salonsGroup = new FormGroup({ salon: new FormControl() });
    this.salonsConfig = {
      labelField: 'name',
      valueField: 'id',
      searchField: ['name', 'id'],
      onChange: (item) => {
        this.bookingService.getSalonBookings({ salon: [+item], status: ['new', 'approved'] });
        this.notificationsService.getSalonNotifications({ salon: [+item], unread: true });
        this.salonsService.get({ id: [+item] }, true).then((res) => {
          this.currentSalon = res[0];
          console.log('this.currentSalon', this.currentSalon)
        });
      }
    }
  }

  ngOnInit() {
    this.subUserBookings = this.bookingService.userBookings.subscribe((res) => {
      if (res.items) this.counter.userBookings = res.items.length;
    })

    this.subSalonBookings = this.bookingService.salonBookings.subscribe((res) => {
      if (res.items) this.counter.salonBookings = res.items.length;
    })

    this.subUserNotifications = this.notificationsService.userNotifications.subscribe((res) => {
      if (res.items) this.counter.userNotifications = res.items.length;
    })

    this.subSalonNotifications = this.notificationsService.salonNotifications.subscribe((res) => {
      if (res.items) this.counter.salonNotifications = res.items.length;
    })

    this.subUserSalons = this.salonsService.userSalons.subscribe((res) => {
      if (res.items) {
        this.salons = res.items;
        this.currentSalon = this.salons[0];
        this.salonsGroup.patchValue({
          salon: `${+this.currentSalon.id}`
        })
        this.bookingService.getSalonBookings({ salon: [+this.currentSalon.id], status: ['new', 'approved'] });
        this.notificationsService.getSalonNotifications({ salon: [+this.currentSalon.id], unread: true });
      }
    })

    this.salonsService.getSalonRoles();
    this.bookingService.getUserBookings({ status: ['new', 'approved'] });
    this.notificationsService.getUserNotifications({ unread: true });

    this.subUserSalonsRoles = this.salonsService.userSalonsRoles.subscribe((res) => {
      const salonsId = res.map(item => item = item.id);
      this.hasSalons = !!salonsId.length;
      if (this.hasSalons) {
        this.salonsService.getUserSalons(salonsId);
      }
    })
    this.listenerClick = this.clickOutComponent.bind(this);
    this.user.level = 7;
  }

  ngOnDestroy() {
    if (this.subUserSalons) this.subUserSalons.unsubscribe();
    if (this.subUserBookings) this.subUserBookings.unsubscribe();
    if (this.subSalonBookings) this.subSalonBookings.unsubscribe();
    if (this.subUserSalonsRoles) this.subUserSalonsRoles.unsubscribe();
    if (this.subUserNotifications) this.subUserNotifications.unsubscribe();
    if (this.subSalonNotifications) this.subSalonNotifications.unsubscribe();
  }

  toggleMenu() {
    this.zone.runOutsideAngular(() => {
      document.addEventListener('click', this.listenerClick)
    })
    this.isActive = !this.isActive;
    this.toggleUserMenu.emit(this.isActive);
  }

  goout() {
    this.userService.logout().then(() => {
      this.isActive = false;
      this.toggleUserMenu.emit(this.isActive);
      document.removeEventListener('click', this.listenerClick)
    });
    this.logout.emit(false);
  }

  clickOutComponent(event) {
    if (!this.elementRef.nativeElement.contains(event.target) || this.elementRef.nativeElement === event.target) {
      this.isActive = false;
      this.toggleUserMenu.emit(this.isActive);
      document.removeEventListener('click', this.listenerClick)
    }
  }
}