monitor-dashboard/src/app/stats-profiles/stats-profiles.component.ts

import {ChangeDetectorRef, Component, OnDestroy, OnInit} from "@angular/core";
import {StatsProfilesService} from "./stats-profiles.service";
import {StatsProfile} from "../openaireLibrary/monitor/entities/stakeholder";
import {Subscription} from "rxjs";
import {FormBuilder, UntypedFormArray, Validators} from "@angular/forms";
import {NotificationHandler} from "../openaireLibrary/utils/notification-handler";

@Component({
  selector: 'stats-profiles',
  template: `
    <div page-content>
      <div header>
        <admin-tabs tab="stats-profiles" [portal]="'monitor'"></admin-tabs>
      </div>
      <div actions>
        <div class="uk-section-xsmall uk-container uk-container-xsmall">
          <div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle">
              <button class="uk-button uk-button-default uk-margin-small-right" (click)="resetForm()"
                      [disabled]="loading || statsProfilesForm.pristine" [class.uk-disabled]="loading">
                Reset
              </button>
            <button class="uk-button uk-button-primary" (click)="save()"
                    [disabled]="loading || statsProfilesForm.pristine || statsProfilesForm.invalid"
                    [class.uk-disabled]="loading || statsProfilesForm.pristine || statsProfilesForm.invalid">
              Save
            </button>
          </div>
        </div>
      </div>
      <div inner>
        <div class="uk-section uk-container uk-container-xsmall uk-position-relative" style="min-height: 60vh">
          <div *ngIf="loading" class="uk-position-center">
            <loading></loading>
          </div>
          <div *ngIf="!loading" class="uk-grid uk-child-width-1-1" uk-grid>
            <div [id]="'profile-' + i.toString()" *ngFor="let statsProfile of statsProfilesForm.controls; let i=index" class="uk-flex uk-flex-middle">
              <div input placeholder="Name" class="uk-width-expand" [formInput]="statsProfile.get('name')"></div>
              <button *ngIf="statsProfilesForm.controls.length > 1" class="uk-button uk-button-link uk-margin-small-left" (click)="remove(i)">
                <icon name="delete" [ratio]="1.2" [flex]="true"></icon>
              </button>
            </div>
            <div class="uk-flex uk-flex-center">
              <button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="add()">
                <icon name="add" [flex]="true"></icon>
                <span class="uk-margin-small-left uk-text-bold uk-text-uppercase">Add profile</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  `
})
export class StatsProfilesComponent implements OnInit, OnDestroy {
  public statsProfiles: StatsProfile[] = [];
  public statsProfilesForm: UntypedFormArray;
  public loading: boolean = true;
  private subscriptions: any[] = [];


  constructor(private statsProfilesService: StatsProfilesService,
              private cdr: ChangeDetectorRef,
              private fb: FormBuilder) {
  }


  ngOnInit() {
    this.subscriptions.push(this.statsProfilesService.getStatsProfile().subscribe(statsProfiles => {
      this.statsProfiles = statsProfiles;
      this.resetForm();
      this.loading = false;
    }));
  }

  resetForm() {
    this.statsProfilesForm =this.fb.array([]);
    this.statsProfiles.forEach(statsProfile => {
      this.statsProfilesForm.push(this.fb.group({
        _id: this.fb.control(statsProfile._id),
        name: this.fb.control(statsProfile.name, Validators.required)
      }));
    });
    if(this.statsProfilesForm.length === 0) {
      this.add();
    }
  }

  remove(index: number) {
    this.statsProfilesForm.removeAt(index);
    this.statsProfilesForm.markAsDirty();
    this.cdr.detectChanges();
  }

  add() {
    this.statsProfilesForm.push(this.fb.group({
      _id: this.fb.control(null),
      name: this.fb.control('', Validators.required)
    }));
    this.statsProfilesForm.markAsDirty();
    this.cdr.detectChanges();
    if(!this.loading) {
      document.getElementById('profile-' + (this.statsProfilesForm.length - 1).toString()).scrollIntoView({behavior: 'smooth'});
    }
  }

  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if(subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    });
  }

  save() {
    this.loading = true;
    this.subscriptions.push(this.statsProfilesService.saveStatsProfiles(this.statsProfilesForm.getRawValue()).subscribe(statsProfiles => {
      this.statsProfiles = statsProfiles;
      this.resetForm();
      this.loading = false;
    }, error => {
      NotificationHandler.rise('An error has occurred. Please try again later', 'danger');
      this.loading = false;
    }));
  }
}