Untitled

import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import {
  FormArray,
  FormBuilder,
  FormControl,
  FormGroup,
  Validators,
} from '@angular/forms';
import { RiskIdentificationService } from '@features/risk-and-prevention/service/risk-identification.service';
import { RiskIdeintificationModalComponent } from '../dialogs/risk-ideintification-modal/risk-ideintification-modal.component';
import { MatDialogRef } from '@angular/material/dialog';
import { Subject, takeUntil } from 'rxjs';

@Component({
  selector: 'app-risk-ideintification-grid',
  templateUrl: './risk-ideintification-grid.component.html',
  styleUrls: ['./risk-ideintification-grid.component.scss'],
})
export class RiskIdeintificationGridComponent implements OnInit, OnDestroy {
  private readonly _unsubscribe$: Subject<any> = new Subject<any>();

  dataItems: any;

  disableInputs: boolean = true;

  dataSubcategories: any = [];
  dataIncidents: any = [];
  dataSeverities: any = [];

  inputForm: FormGroup;

  inputControl: any = new FormGroup({
    subcategory: new FormControl('', Validators.required),
    incident: new FormControl('', Validators.required),
    severity: new FormControl('', Validators.required),
    ticketCount: new FormControl('', Validators.required),
    probability: new FormControl('', Validators.required),
  });

  originalFormData: any = [];

  constructor(
    private fb: FormBuilder,
    private _riskIdentificationService: RiskIdentificationService,
    private readonly dialogRef: MatDialogRef<RiskIdeintificationModalComponent>
  ) {
    this.inputForm = this.fb.group({
      events: this.fb.array([]),
    });
  }

  get events() {
    return this.inputForm.get('events') as FormArray;
  }

  ngOnInit(): void {
    this._riskIdentificationService.dataSend$
      .pipe(takeUntil(this._unsubscribe$))
      .subscribe((data) => {
        if (data) {
          this.dataItems = data;
          this.updateFormArray(this.dataItems.events);
        }
      });
  }

  updateFormArray(data: any): void {
    if (data) {
      data.forEach((element: any) => {
        const formGroup = this.fb.group({
          subcategory: new FormControl(
            { value: element.subcategory.name, disabled: true },
            Validators.required
          ),
          incident: new FormControl(
            { value: element.incident.name, disabled: true },
            Validators.required
          ),
          severity: new FormControl(
            { value: element.severity.name, disabled: true },
            Validators.required
          ),
          ticketCount: new FormControl(
            { value: element.ticketCount, disabled: true },
            Validators.required
          ),
          probability: new FormControl(
            { value: element.probability, disabled: element.probability !== 0 },
            Validators.required
          ),
        });

        this.events.push(formGroup);
        this.originalFormData.push({ ...formGroup.value });
      });
      console.error('original', this.originalFormData);
    }
  }

  saveForm() {
    const eventDataArray: any[] = [];

    this.events.controls.forEach((formGroup: any) => {
      const eventData = {
        subcategory: formGroup.get('subcategory').value,
        incident: formGroup.get('incident').value,
        severity: formGroup.get('severity').value,
        ticketCount: formGroup.get('ticketCount').value,
        probability: formGroup.get('probability').value,
      };

      eventDataArray.push(eventData);
    });
    const dataFinnally = {
      events: eventDataArray,
      startDate: this.dataItems.dataPrimary.startDate,
      endDate: this.dataItems.dataPrimary.endDate,
      description: this.dataItems.dataPrimary.description,
      totalTickets: this.dataItems.totalTickets,
    };
    this.sendForm(dataFinnally);
  }

  sendForm(form: any) {
    this._riskIdentificationService.saveRiskIdentification(form).subscribe({
      next: (resp) => {
        if (resp) {
        }
        this.closeModal();
      },
      error: (error) => {
        this.closeModal();
      },
    });
  }

  closeModal() {
    this.dialogRef.close();
  }

  ngOnDestroy(): void {
    //@ts-ignore
    this._unsubscribe$.next();
    this._unsubscribe$.complete();
  }
}