oggui/ogWebconsole/src/app/components/software-profile/create-software-profile/create-software-profile.component.ts

import { inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Component, Inject, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
import { DataService as SoftwareService } from '../../software/data.service';
import { DataService } from '../data.service';
import { Observable, startWith } from 'rxjs';
import { debounceTime, switchMap, map } from 'rxjs/operators';
import { ConfigService } from '@services/config.service';

@Component({
  selector: 'app-create-software-profile',
  templateUrl: './create-software-profile.component.html',
  styleUrls: ['./create-software-profile.component.css']
})
export class CreateSoftwareProfileComponent implements OnInit {
  public translate = inject(TranslateService);
  baseUrl: string;
  private apiUrl: string;
  formGroup: FormGroup;
  operativeSystems: any[] = [];
  softwareProfileId: string | null = null;
  selectedSoftwares: any[] = [];
  softwareControl = new FormControl();
  filteredSoftware!: Observable<any[]>;

  constructor(
    private fb: FormBuilder,
    private http: HttpClient,
    public dialogRef: MatDialogRef<CreateSoftwareProfileComponent>,
    private toastService: ToastrService,
    private softwareDataService: SoftwareService,
    private dataService: DataService,
    private configService: ConfigService,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {
    this.baseUrl = this.configService.apiUrl;
    this.apiUrl = `${this.baseUrl}/software-profiles`;
    this.formGroup = this.fb.group({
      description: [''],
      comments: [''],
      operativeSystem: [null]
    });
  }

  ngOnInit(): void {
    if (this.data) {
      this.softwareProfileId = this.data['@id'];
      this.patchFormData();
      this.loadSoftware();
    }

    this.loadOperativeSystems();

    this.filteredSoftware = this.softwareControl.valueChanges.pipe(
      startWith(''),
      debounceTime(300),
      switchMap(value => this._filterSoftware(value))
    );
  }

  patchFormData(): void {
    this.formGroup.patchValue({
      description: this.data.description || '',
      comments: this.data.comments || '',
      operativeSystem: this.data.operativeSystem ? this.data.operativeSystem['@id'] : null,
    });
  }

  loadSoftware() {
    this.http.get<any>(`${this.baseUrl}/software?softwareProfileId=${this.data.id}&page=1&itemsPerPage=1000`).subscribe(
      response => {
        this.selectedSoftwares = response['hydra:member'];
      },
      error => {
        console.error(this.translate.instant('softwareFetchingError'), error);
      }
    );
  }

  loadOperativeSystems() {
    this.http.get<any>(`${this.baseUrl}/operative-systems?page=1&itemsPerPage=10000`).subscribe(
      response => {
        this.operativeSystems = response['hydra:member'];
      },
      error => {
        console.error(this.translate.instant('errorFetchingOperatingSystems'), error);
      }
    );
  }

  private _filterSoftware(value: string): Observable<any[]> {
    const filters = { name: value || '', itemsPerPage: '15' };

    return this.softwareDataService.getSoftwareCollection(filters).pipe(
      map(response => (response || []).filter(software => !this.isSelected(software)))
    );
  }

  isSelected(software: any): boolean {
    return this.selectedSoftwares.some(s => s.id === software.id);
  }

  displayFnClient(client: any): string {
    return client && client.name ? client.name : '';
  }

  onOptionClientSelected(software: any) {
    if (!this.isSelected(software)) {
      this.selectedSoftwares.push(software);
    }
    this.softwareControl.setValue('');
  }

  removeSoftware(software: any) {
    this.selectedSoftwares = this.selectedSoftwares.filter(s => s.id !== software.id);
  }

  clearSelectedSoftwares(): void {
    this.selectedSoftwares = [];
  }

  onCancel(event: Event): void {
    event.preventDefault();
    this.dialogRef.close();
  }

  onSubmit(): void {
    if (this.formGroup.valid) {
      const payload = {
        description: this.formGroup.value.description,
        comments: this.formGroup.value.comments,
        softwareCollection: this.selectedSoftwares.map(s => s['@id']),
        operativeSystem: this.formGroup.value.operativeSystem
      };

      if (this.softwareProfileId) {
        this.http.put(`${this.baseUrl}${this.softwareProfileId}`, payload).subscribe(
          () => {
            this.toastService.success(this.translate.instant('successfullyEditedSoftware'));
            this.dialogRef.close();
          },
          (error) => {
            this.toastService.error(error.error['hydra:description']);
            console.error(this.translate.instant('errorWhenEditingTheSoftware'), error);
          }
        );
      } else {
        this.http.post(`${this.apiUrl}`, payload).subscribe(
          () => {
            this.toastService.success(this.translate.instant('softwareAddedSuccessfully'));
            this.dialogRef.close();
          },
          (error) => {
            this.toastService.error(error.error['hydra:description']);
            console.error(this.translate.instant('errorAddingSoftware'), error);
          }
        );
      }
    }
  }
}