git-server-git.apps.pok.os.sepia.ceph.com Git - ceph-ci.git/blob

   1 import { Component, Inject, OnInit, Optional, TemplateRef, ViewChild } from '@angular/core';
   2 import { UntypedFormControl, AbstractControl, ValidationErrors, Validators } from '@angular/forms';
   3 import { Observable, of } from 'rxjs';
   4 import { map, startWith } from 'rxjs/operators';
   5
   6 import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
   7 import { SubmitButtonComponent } from '../submit-button/submit-button.component';
   8 import { BaseModal } from 'carbon-components-angular';
   9 import { CdValidators } from '../../forms/cd-validators';
  10 import { DeletionImpact } from '../../enum/delete-confirmation-modal-impact.enum';
  11 import { DeleteConfirmationBodyContext } from '../../models/delete-confirmation.model';
  12
  13 @Component({
  14   selector: 'cd-deletion-modal',
  15   templateUrl: './delete-confirmation-modal.component.html',
  16   styleUrls: ['./delete-confirmation-modal.component.scss'],
  17   standalone: false
  18 })
  19 export class DeleteConfirmationModalComponent extends BaseModal implements OnInit {
  20   @ViewChild(SubmitButtonComponent, { static: true })
  21   submitButton: SubmitButtonComponent;
  22   deletionForm: CdFormGroup;
  23   impactEnum = DeletionImpact;
  24   childFormGroup: CdFormGroup;
  25   childFormGroupTemplate: TemplateRef<any>;
  26   submitDisabled$: Observable<boolean> = of(false);
  27   constructor(
  28     @Optional() @Inject('impact') public impact: DeletionImpact,
  29     @Optional() @Inject('itemDescription') public itemDescription: 'entry',
  30     @Optional() @Inject('itemNames') public itemNames: string[],
  31     @Optional() @Inject('actionDescription') public actionDescription = 'delete',
  32     @Optional() @Inject('submitAction') public submitAction?: Function,
  33     @Optional() @Inject('backAction') public backAction?: Function,
  34     @Optional() @Inject('bodyTemplate') public bodyTemplate?: TemplateRef<any>,
  35     @Optional() @Inject('subHeading') public subHeading?: string,
  36     @Optional()
  37     @Inject('bodyContext')
  38     public bodyContext?: DeleteConfirmationBodyContext,
  39     @Optional() @Inject('infoMessage') public infoMessage?: string,
  40     @Optional()
  41     @Inject('submitActionObservable')
  42     public submitActionObservable?: () => Observable<any>,
  43     @Optional()
  44     @Inject('callBackAtionObservable')
  45     public callBackAtionObservable?: () => Observable<any>
  46   ) {
  47     super();
  48     this.actionDescription = actionDescription || 'delete';
  49     this.impact = this.impact || DeletionImpact.medium;
  50   }
  51
  52   ngOnInit() {
  53     const controls = {
  54       impact: new UntypedFormControl(this.impact),
  55       confirmation: new UntypedFormControl(false, {
  56         validators: [
  57           CdValidators.composeIf(
  58             {
  59               impact: DeletionImpact.medium
  60             },
  61             [Validators.requiredTrue]
  62           )
  63         ]
  64       }),
  65       confirmInput: new UntypedFormControl('', {
  66         validators: [
  67           CdValidators.composeIf({ impact: this.impactEnum.high }, [
  68             this.matchResourceName.bind(this),
  69             Validators.required
  70           ])
  71         ]
  72       })
  73     };
  74
  75     if (this.childFormGroup) {
  76       controls['child'] = this.childFormGroup;
  77     }
  78     this.deletionForm = new CdFormGroup(controls);
  79     if (!(this.submitAction || this.submitActionObservable)) {
  80       throw new Error('No submit action defined');
  81     }
  82     if (this.bodyContext?.disableForm) {
  83       this.toggleFormControls(this.bodyContext?.disableForm);
  84       return;
  85     }
  86
  87     if (this.impact === this.impactEnum.high && this.itemNames?.[0]) {
  88       const target = String(this.itemNames[0]);
  89       const confirmControl = this.deletionForm.controls.confirmInput;
  90
  91       this.submitDisabled$ = confirmControl.valueChanges.pipe(
  92         startWith(confirmControl.value),
  93         map((value: string) => value !== target)
  94       );
  95     }
  96   }
  97
  98   matchResourceName(control: AbstractControl): ValidationErrors | null {
  99     if (!control.value) {
 100       return null;
 101     }
 102
 103     if (this.itemNames && control.value !== String(this.itemNames?.[0])) {
 104       return { matchResource: true };
 105     }
 106     return null;
 107   }
 108
 109   callSubmitAction() {
 110     if (this.submitActionObservable) {
 111       this.submitActionObservable().subscribe({
 112         error: this.stopLoadingSpinner.bind(this),
 113         complete: this.hideModal.bind(this)
 114       });
 115     } else {
 116       this.submitAction();
 117     }
 118   }
 119
 120   callBackAction() {
 121     if (this.callBackAtionObservable) {
 122       this.callBackAtionObservable().subscribe({
 123         error: this.stopLoadingSpinner.bind(this),
 124         complete: this.hideModal.bind(this)
 125       });
 126     } else {
 127       this.backAction();
 128     }
 129   }
 130
 131   hideModal() {
 132     this.closeModal();
 133   }
 134
 135   stopLoadingSpinner() {
 136     this.deletionForm.setErrors({ cdSubmitButton: true });
 137   }
 138
 139   toggleFormControls(disableForm = false) {
 140     if (disableForm) {
 141       this.deletionForm.disable();
 142       this.deletionForm.setErrors({ disabledByContext: true });
 143       this.submitDisabled$ = of(true);
 144     } else {
 145       this.deletionForm.enable();
 146       this.deletionForm.setErrors(null);
 147     }
 148   }
 149 }