-<cd-modal [modalRef]="activeModal">
- <ng-container i18n="form title"
- class="modal-title">Delete Zonegroup</ng-container>
+<cds-modal size="sm"
+ [open]="open"
+ (overlaySelected)="closeModal()">
+ <cds-modal-header (closeSelect)="closeModal()">
+ <h3 cdsModalHeaderHeading
+ i18n>Delete zonegroup</h3>
+ </cds-modal-header>
- <ng-container class="modal-content">
- <form name="zonegroupForm"
- [formGroup]="zonegroupForm"
- novalidate>
- <div class="modal-body ms-4">
- <label i18n>
- This will delete your <strong>{{zonegroup?.name}}</strong> Zonegroup.
+ <ng-container>
+ <section cdsModalContent>
+ <form name="zonegroupForm"
+ [formGroup]="zonegroupForm"
+ novalidate>
+ <label class="cds--label-description"
+ i18n>
+ This will delete your <strong>{{ zonegroup?.name }}</strong> Zonegroup.
</label>
- <ng-container *ngIf="zonesList.length > 0">
- <label class="mt-3"
+
+ @if (zonesList.length > 0) {
+ <ng-container>
+ <label class="cds--label-description"
i18n>
- Do you want to delete the associated zones and pools with the <strong>{{zonegroup?.name}}</strong> Zonegroup?</label>
- <ng-container *ngIf="includedPools.size > 0">
- <label i18n>
- This will delete the following:</label>
- </ng-container>
- <strong class="mt-3 mb-2 h5 block">Zones:</strong>
- <div id="scroll">
- <strong *ngFor="let zone of zonesList"
- class="block">{{zone}}</strong>
+ Do you want to delete the associated zones and pools with the <strong>{{zonegroup?.name}}</strong> Zonegroup?
+ </label>
+
+ @if (includedPools.size > 0) {
+ <ng-container>
+ <label class="cds--label-description"
+ i18n>
+ This will delete the following:
+ </label>
+ </ng-container>
+ }
+
+ <div><strong>Zones:</strong></div>
+ <div class="scroll-list">
+ @for (zone of zonesList; track zone) {
+ <div><strong>{{zone}}</strong></div>
+ }
</div>
- <ng-container *ngIf="includedPools.size > 0">
- <strong class="mt-3 mb-2 h5 block">Pools:</strong>
- <div id="scroll"
- class="mb-2">
- <strong *ngFor="let pool of includedPools"
- class="block">{{ pool }}</strong>
- </div>
- </ng-container>
+ @if (includedPools.size > 0) {
+ <ng-container>
+ <div><strong>Pools:</strong></div>
+ <div class="scroll-list">
+ @for (pool of includedPools; track pool) {
+ <div><strong>{{ pool }}</strong></div>
+ }
+ </div>
+ </ng-container>
+ }
- <div class="form-group">
- <div class="custom-control custom-checkbox mt-2">
- <input type="checkbox"
- class="custom-control-input"
- name="deletePools"
- id="deletePools"
- formControlName="deletePools"
- (change)="showDangerText()">
- <ng-container *ngIf="includedPools.size > 0 else noPoolsConfirmation">
- <label class="custom-control-label"
- for="deletePools"
- i18n>Yes, I want to delete the zones and their pools.</label>
- </ng-container>
- </div>
- <div *ngIf="displayText"
- class="me-4">
- <cd-alert-panel type="danger"
- i18n>
- This will delete all the data in the pools!
- </cd-alert-panel>
- </div>
+ <div class="form-item">
+ <cds-checkbox id="deletePools"
+ formControlName="deletePools"
+ (checkedChange)="showDangerText()">
+ @if (includedPools.size > 0) {
+ <span i18n>Yes, I want to delete the zones and their pools.</span>
+ } @else {
+ <span i18n>Yes, I want to delete the zones.</span>
+ }
+ </cds-checkbox>
</div>
- </ng-container>
- </div>
- <div class="modal-footer">
- <cd-form-button-panel (submitActionEvent)="submit()"
- [form]="zonegroupForm"
- [submitText]="actionLabels.DELETE ">
- </cd-form-button-panel>
- </div>
- </form>
+ @if (displayText) {
+ <cd-alert-panel type="danger"
+ i18n>
+ This will delete all the data in the pools!
+ </cd-alert-panel>
+ }
+ </ng-container>
+ }
+ </form>
+ </section>
</ng-container>
-</cd-modal>
-
-<ng-template #noPoolsConfirmation>
- <label class="custom-control-label"
- for="deletePools"
- i18n>Yes, I want to delete the zones.</label>
-</ng-template>
+ <cd-form-button-panel
+ (submitActionEvent)="submit()"
+ [form]="zonegroupForm"
+ [submitText]="actionLabels.DELETE"
+ [modalForm]="true"
+ >
+ </cd-form-button-panel>
+</cds-modal>
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, Inject, OnInit, Optional } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { PoolService } from '~/app/shared/api/pool.service';
+
+import { RgwZonegroupMeta } from '~/app/ceph/rgw/models/rgw-multisite';
import { RgwZoneService } from '~/app/shared/api/rgw-zone.service';
import { RgwZonegroupService } from '~/app/shared/api/rgw-zonegroup.service';
import { ActionLabelsI18n } from '~/app/shared/constants/app.constants';
import { NotificationType } from '~/app/shared/enum/notification-type.enum';
import { CdFormGroup } from '~/app/shared/forms/cd-form-group';
+import { CdForm } from '~/app/shared/forms/cd-form';
import { NotificationService } from '~/app/shared/services/notification.service';
@Component({
styleUrls: ['./rgw-multisite-zonegroup-deletion-form.component.scss'],
standalone: false
})
-export class RgwMultisiteZonegroupDeletionFormComponent implements OnInit, AfterViewInit {
+export class RgwMultisiteZonegroupDeletionFormComponent
+ extends CdForm
+ implements OnInit, AfterViewInit {
zonegroupData$: any;
poolList$: any;
zonesPools: Array<any> = [];
- zonegroup: any;
+ zonegroup: RgwZonegroupMeta;
zonesList: Array<any> = [];
zonegroupForm: CdFormGroup;
displayText: boolean = false;
includedPools: Set<string> = new Set<string>();
constructor(
- public activeModal: NgbActiveModal,
+ @Optional() @Inject('zonegroup') public zonegroupInput: RgwZonegroupMeta,
public actionLabels: ActionLabelsI18n,
public notificationService: NotificationService,
private rgwZonegroupService: RgwZonegroupService,
private poolService: PoolService,
private rgwZoneService: RgwZoneService
) {
+ super();
+ this.zonegroup = zonegroupInput;
this.createForm();
}
NotificationType.success,
$localize`Zonegroup: '${this.zonegroup.name}' deleted successfully`
);
- this.activeModal.close();
+ this.closeModal();
});
}
projects / ceph.git / commitdiff