ChangeCalendar/frontend/src/app/state-dialog/state-dialog.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { DataService } from '../data.service';
import { MatSnackBar, MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition} from '@angular/material/snack-bar';
import { LanguageService } from '../language.service';

@Component({
  selector: 'app-state-dialog',
  templateUrl: './state-dialog.component.html',
  styleUrls: ['./state-dialog.component.css']
})

/**
* The StateDialogComponent enables the user to select an execute a status transition
*/
export class StateDialogComponent implements OnInit {

  public possibleStates: any[] = [
     {value: '-1', viewValue: 'default'}
  ];
  public selectedValue : any = this.possibleStates[0].value;
  public progress : number = 0;
  public diasbled : boolean = false;
  public bdiasbled : boolean = false;
  public horizontalPosition: MatSnackBarHorizontalPosition = 'end';
  public verticalPosition: MatSnackBarVerticalPosition = 'bottom';
  public labels: string[] = [];
  private states : any[];

  /**
   * The constructor injects required Dependencies and sets default values for logic and ui
   * @param dialogRef MatDialog Reference from Angular
   * @param data contains an array of Changes which should be sent to the backend for a status transition
   * @param dataService injects the dataService for data management and backend communication
   */
  constructor(public languageService: LanguageService, public dialogRef: MatDialogRef<StateDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any,private dataService: DataService, private _snackBar: MatSnackBar) {
    //dialogRef.beforeClosed().subscribe(() => dialogRef.close(this.dataToReturn));
    this.progress = 0;
    this.bdiasbled = true;
    this.diasbled = false;
    this.selectedValue = -1;
    this.possibleStates = [];
  }

 /**
 * The function ngOnInit checks in which actual State the selected changes are, then it provides a list that contains which statuses can be switched to in the current state
 */
  ngOnInit(): void {
    this.states = this.dataService.getStates();
    console.log(this.data.changes[0].currentState);
    this.possibleStates = [];
    let cState;
    for (const state of this.states) {
      if(state.actualState == this.data.changes[0].currentState){
        cState = state;
      }
    }
    for (const state of this.states) {
      for (const iterator of cState.possibleStates) {
        if(state.actualState == iterator){
          if(this.languageService.language == 'DE'){
            this.possibleStates.push({value: state.actualState, viewValue: state.stateNameDE});
          }else{
            this.possibleStates.push({value: state.actualState, viewValue: state.stateNameEN})
          }
        }
      }
    }
    if(this.possibleStates.length == 0){
      this.dialogRef.close();
    }
  }

  /**
  * The function enableButton is triggered by the selction event of a possible state by the user it anebles the execution button
  */
  enableButton():void{
    this.bdiasbled = false;
  }

  /**
  * The function updateState uses the dataService to execute a status transition on the backend. It sends the Changes to the backend one-by-one and calculates the percent-progress value for the progress bar.
  */
  updateState(): void{
    let counter : number = 0;
    if(this.selectedValue != -1){
      console.log(this.selectedValue);
      for (let change of this.data.changes) {
        change.nextState = this.selectedValue;
        let modifiedChange = {resourceId: change.resourceId, changeNr: change.changeNr, currentState: change.currentState, nextState: this.selectedValue}
        this.dataService.updateStatePerChange(modifiedChange).then((res: any)=>{
          this.diasbled = true;
          this.bdiasbled = true;
          if(res.status == 200){
            counter++;
            this.progress = (counter/this.data.changes.length)*100;
          }
          if(res.status == 500){
            this._snackBar.open(this.languageService.lMap.get('stateDialogSnackBarMessageFailiure') + ': ' + res.error.message, this.languageService.lMap.get('stateDialogSnackBarActionFailiure'),  {
              horizontalPosition: this.horizontalPosition,
              verticalPosition: this.verticalPosition,
              panelClass: ['red-snackbar'],
            });
            this.dialogRef.close("Failiure");
            // console.log(change + "----"+this.data.changes.get(this.data.changes.length);
            // if(change == this.data.changes[this.data.changes.length]){
            //   this.dialogRef.close("Failiure");
            // }
          }

          if(this.progress == 100){
            this.diasbled = false;
            this.bdiasbled = true;
            this._snackBar.open(this.languageService.lMap.get('stateDialogSnackBarMsg1Success') + ': ' + this.findStateName(change.currentState) +' -> '+this.findStateName(change.nextState) + this.languageService.lMap.get('stateDialogSnackBarMsg2Success') ,
            this.languageService.lMap.get('stateDialogSnackBarActionSuccess'),
            {
              horizontalPosition: this.horizontalPosition,
              verticalPosition: this.verticalPosition,
              duration: 5000,
              panelClass: ['green-snackbar']
            });
            this.dialogRef.close("Success");
          }
        });
      }
    }
  }

  /**
  * The function findStateName returns a state name by the state number (uid), depending on the selected language
  * @param stateNr uid of the state
  */
  findStateName(stateNr): String {
    for (let state of this.states) {
       if(stateNr == state.actualState){
        if(this.languageService.language == 'DE'){
          return state.stateNameDE;
        }else{
          return state.stateNameEN;
        }
       }
    }
    return "";
  }
}