D-Net

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

import {FormArray, FormBuilder, FormGroup, Validators} from "@angular/forms";

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

import {UserManagementService} from "../../services/user-management.service";

import {of, Subscription} from "rxjs";

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

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

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

import {properties} from "../../../../environments/environment";

declare var UIkit;

@Component({

  selector: '[notify-form]',

  template: `

    <form *ngIf="user && form" [formGroup]="form">

      <ng-template [ngIf]="form.get('notify')">

        <mat-checkbox formControlName="notify" class="uk-text-small">{{label}}</mat-checkbox>

        <div [class.uk-hidden]="!form.get('notify').value" class="uk-grid uk-grid-small uk-margin-top" uk-grid>

          <div style="margin-left: -5px;">

            <notification-user [name]="user.firstname" [surname]="user.lastname"></notification-user>

          </div>

          <div dashboard-input [formInput]="form.get('message')"

               rows="3" placeholder="Send a notification"

               type="textarea" class="uk-width-expand"></div>

        </div>

      </ng-template>

      <ng-template [ngIf]="form.get('groups') && availableGroups">

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

          <span style="opacity: 0.5;" class="uk-text-bold uk-margin-small-top">Send to: </span>

          <div [class.uk-hidden]="focused" class="uk-width-expand uk-margin-small" (click)="focus($event)">

            <span *ngIf="groups.length === 0" class="placeholder">Add a recipient</span>

            <span *ngIf="groups.length > 0" [attr.uk-tooltip]="(groups.length > 2)?groups.join(', '):null">

              {{groups.slice(0, 2).join(', ')}}

              <span *ngIf="groups.length > 2" style="opacity: 0.5; margin-left: 4px">+ {{groups.length - 2}}  more</span>

            </span>

          </div>

          <div #recipients dashboard-input type="chips" [options]="availableGroups" [class.uk-hidden]="!focused"

               panelClass="uk-text-small" [showOptionsOnEmpty]="false"

               inputClass="input-borderless" class="uk-width-expand" (focusEmitter)="onFocus($event)" [panelWidth]="400"

               [smallChip]="true" [gridSmall]="true" [formInput]="form.get('groups')">

          </div>

        </div>

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

          <div>

            <notification-user [name]="user.firstname" [surname]="user.lastname"></notification-user>

          </div>

          <div dashboard-input [formInput]="form.get('message')"

               [rows]="4" placeholder="Send a notification"

               type="textarea" class="uk-width-expand">

            <div options class="uk-margin-top uk-width-1-1 uk-flex uk-flex-right">

              <button *ngIf="!sending && message" (click)="sendNotification()"

                      class="uk-button uk-button-small uk-button-secondary">Send</button>

              <button *ngIf="sending || !message" (click)="sendNotification()"

                      class="uk-button uk-button-small uk-button-secondary" disabled>Send</button>

            </div>

          </div>

        </div>

      </ng-template>

    </form>

  `

})

export class NotifyFormComponent implements OnInit, OnDestroy {

  @Input()

  public label: string = 'Notify Managers';

  public form: FormGroup;

  @Input()

  public availableGroups: Option[] = null;

  @Input() service: string;

  public user: User;

  public focused: boolean = false;

  public groups: string[] = [];

  @ViewChild('recipients', { static: false }) recipients: InputComponent;

  private notification: Notification;

  private subscriptions: any[] = [];

  public sending: boolean = false;

  constructor(private fb: FormBuilder,

              private cdr: ChangeDetectorRef,

              private userManagementService: UserManagementService,

              private notificationService: NotificationService) {

  }

  ngOnInit() {

    this.reset();

    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {

      this.user = user;

    }));

  }

  ngOnDestroy() {

    this.subscriptions.forEach(subscription => {

      if (subscription instanceof Subscription) {

        subscription.unsubscribe();

      }

    })

  }

  reset(message: string = null) {

    if (!this.availableGroups) {

      this.form = this.fb.group({

        notify: this.fb.control(properties.environment !== 'production'),

        message: this.fb.control(message)

      });

      this.subscriptions.push(this.form.get('notify').valueChanges.subscribe(value => {

        if (value) {

          this.form.get('message').markAsUntouched();

        }

      }));

    } else {

      this.form = this.fb.group({

        groups: this.fb.array([]),

        message: this.fb.control(message)

      });

      this.groups = [];

      this.subscriptions.push(this.form.get('groups').valueChanges.subscribe(value => {

        this.groups = [];

        value.forEach(group => {

          this.groups.push(this.availableGroups.find(available => available.value === group).label);

        });

        this.cdr.detectChanges();

      }));

    }

  }

  sendNotification(notification: Notification = null) {

    if (this.message) {

      if(notification === null) {

        notification = new Notification('CUSTOM', [this.service], null, null);

        notification.groups = this.groupsAsFromArray.value;

        this.sending = true;

      }

      this.notification = notification;

      this.notification.message = this.form.value.message;

      // TODO remove

      this.notification.name = this.user.firstname;

      this.notification.surname = this.user.lastname;

      this.subscriptions.push(this.notificationService.sendNotification(this.notification).subscribe(notification => {

        this.sending = false;

        UIkit.notification('A notification has been <b>sent</b> successfully', {

          status: 'success',

          timeout: 6000,

          pos: 'bottom-right'

        });

        this.reset();

      }, error => {

        this.sending = false;

        UIkit.notification('An error has occurred. Please try again later', {

          status: 'danger',

          timeout: 6000,

          pos: 'bottom-right'

        });

        this.reset();

      }));

    }

  }

  get groupsAsFromArray(): FormArray {

    return this.form.get('groups')?(<FormArray>this.form.get('groups')):null;

  }

  get message(): string {

    if ((this.form.get('notify') && !this.form.get('notify').value) || (this.groupsAsFromArray && this.groupsAsFromArray.length === 0)) {

      return null;

    }

    return this.form.get('message').value;

  }

  onFocus(event: boolean) {

    this.focused = event;

  }

  focus(event) {

    this.focused = true;

    event.stopPropagation();

    this.cdr.detectChanges();

    setTimeout(() => {

      this.recipients.searchInput.nativeElement.focus();

    }, 0);

  }

}