File
Implements
Metadata
selector |
cd-rbd-snapshot-form |
styleUrls |
./rbd-snapshot-form.component.scss |
templateUrl |
./rbd-snapshot-form.component.html |
Methods
createAction
|
createAction()
|
|
|
setEditing
|
setEditing(editing: boolean)
|
|
Set the 'editing' flag. If set to TRUE, the modal dialog is in
'Edit' mode, otherwise in 'Create' mode.
Parameters :
Name |
Type |
Optional |
Default value |
editing |
boolean
|
No
|
true
|
|
setSnapName
|
setSnapName(snapName)
|
|
Parameters :
Name |
Optional |
snapName |
No
|
|
editing
|
Default value : false
|
|
Public
modalRef
|
Type : BsModalRef
|
|
Public
onSubmit
|
Type : Subject<string>
|
|
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { Subject } from 'rxjs';
import { RbdService } from '../../../shared/api/rbd.service';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { FinishedTask } from '../../../shared/models/finished-task';
import { NotificationService } from '../../../shared/services/notification.service';
import { TaskManagerService } from '../../../shared/services/task-manager.service';
@Component({
selector: 'cd-rbd-snapshot-form',
templateUrl: './rbd-snapshot-form.component.html',
styleUrls: ['./rbd-snapshot-form.component.scss']
})
export class RbdSnapshotFormComponent implements OnInit {
poolName: string;
imageName: string;
snapName: string;
snapshotForm: CdFormGroup;
editing = false;
public onSubmit: Subject<string>;
constructor(
public modalRef: BsModalRef,
private rbdService: RbdService,
private taskManagerService: TaskManagerService,
private notificationService: NotificationService
) {
this.createForm();
}
createForm() {
this.snapshotForm = new CdFormGroup({
snapshotName: new FormControl('', {
validators: [Validators.required]
})
});
}
ngOnInit() {
this.onSubmit = new Subject();
}
setSnapName(snapName) {
this.snapName = snapName;
this.snapshotForm.get('snapshotName').setValue(snapName);
}
/**
* Set the 'editing' flag. If set to TRUE, the modal dialog is in
* 'Edit' mode, otherwise in 'Create' mode.
* @param {boolean} editing
*/
setEditing(editing: boolean = true) {
this.editing = editing;
}
editAction() {
const snapshotName = this.snapshotForm.getValue('snapshotName');
const finishedTask = new FinishedTask();
finishedTask.name = 'rbd/snap/edit';
finishedTask.metadata = {
pool_name: this.poolName,
image_name: this.imageName,
snapshot_name: snapshotName
};
this.rbdService
.renameSnapshot(this.poolName, this.imageName, this.snapName, snapshotName)
.toPromise()
.then(() => {
this.taskManagerService.subscribe(
finishedTask.name,
finishedTask.metadata,
(asyncFinishedTask: FinishedTask) => {
this.notificationService.notifyTask(asyncFinishedTask);
}
);
this.modalRef.hide();
this.onSubmit.next(this.snapName);
})
.catch(() => {
this.snapshotForm.setErrors({ cdSubmitButton: true });
});
}
createAction() {
const snapshotName = this.snapshotForm.getValue('snapshotName');
const finishedTask = new FinishedTask();
finishedTask.name = 'rbd/snap/create';
finishedTask.metadata = {
pool_name: this.poolName,
image_name: this.imageName,
snapshot_name: snapshotName
};
this.rbdService
.createSnapshot(this.poolName, this.imageName, snapshotName)
.toPromise()
.then(() => {
this.taskManagerService.subscribe(
finishedTask.name,
finishedTask.metadata,
(asyncFinishedTask: FinishedTask) => {
this.notificationService.notifyTask(asyncFinishedTask);
}
);
this.modalRef.hide();
this.onSubmit.next(snapshotName);
})
.catch(() => {
this.snapshotForm.setErrors({ cdSubmitButton: true });
});
}
submit() {
if (this.editing) {
this.editAction();
} else {
this.createAction();
}
}
}
<div class="modal-header">
<h4 class="modal-title pull-left"
i18n>{ editing, select, true {Rename} other {Create}} RBD Snapshot</h4>
<button type="button"
class="close pull-right"
aria-label="Close"
(click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<form name="snapshotForm"
class="form-horizontal"
#formDir="ngForm"
[formGroup]="snapshotForm"
novalidate>
<div class="modal-body">
<!-- Name -->
<div class="form-group"
[ngClass]="{'has-error': snapshotForm.showError('snapshotName', formDir)}">
<label class="control-label col-sm-3"
for="snapshotName">
<ng-container i18n>Name</ng-container>
<span class="required"></span>
</label>
<div class="col-sm-9">
<input class="form-control"
type="text"
placeholder="Snapshot name..."
id="snapshotName"
name="snapshotName"
formControlName="snapshotName"
autofocus>
<span class="help-block"
*ngIf="snapshotForm.showError('snapshotName', formDir, 'required')"
i18n>This field is required.</span>
</div>
</div>
</div>
<div class="modal-footer">
<div class="button-group text-right">
<cd-submit-button [form]="snapshotForm"
(submitAction)="submit()"
i18n>{ editing, select, true {Rename} other {Create}} Snapshot</cd-submit-button>
<cd-back-button [back]="modalRef.hide"
name="Close"
i18n-name>
</cd-back-button>
</div>
</div>
</form>
Legend
Html element with directive