File
Implements
Metadata
selector |
cd-rbd-trash-move-modal |
styleUrls |
./rbd-trash-move-modal.component.scss |
templateUrl |
./rbd-trash-move-modal.component.html |
bsConfig
|
Type : object
|
Default value : {
dateInputFormat: 'YYYY-MM-DD HH:mm:ss',
containerClass: 'theme-default'
}
|
|
executingTasks
|
Type : ExecutingTask[]
|
|
minDate
|
Default value : new Date()
|
|
Public
modalRef
|
Type : BsModalRef
|
|
import { Component, OnInit } from '@angular/core';
import * as moment from 'moment';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { RbdService } from '../../../shared/api/rbd.service';
import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { CdValidators } from '../../../shared/forms/cd-validators';
import { ExecutingTask } from '../../../shared/models/executing-task';
import { FinishedTask } from '../../../shared/models/finished-task';
import { TaskWrapperService } from '../../../shared/services/task-wrapper.service';
@Component({
selector: 'cd-rbd-trash-move-modal',
templateUrl: './rbd-trash-move-modal.component.html',
styleUrls: ['./rbd-trash-move-modal.component.scss']
})
export class RbdTrashMoveModalComponent implements OnInit {
metaType: string;
poolName: string;
imageName: string;
executingTasks: ExecutingTask[];
moveForm: CdFormGroup;
minDate = new Date();
bsConfig = {
dateInputFormat: 'YYYY-MM-DD HH:mm:ss',
containerClass: 'theme-default'
};
pattern: string;
constructor(
private rbdService: RbdService,
public modalRef: BsModalRef,
private fb: CdFormBuilder,
private taskWrapper: TaskWrapperService
) {
this.createForm();
}
createForm() {
this.moveForm = this.fb.group({
expiresAt: [
'',
[
CdValidators.custom('format', (expiresAt) => {
const result = expiresAt === '' || moment(expiresAt, 'YYYY-MM-DD HH:mm:ss').isValid();
return !result;
}),
CdValidators.custom('expired', (expiresAt) => {
const result = moment().isAfter(expiresAt);
return result;
})
]
]
});
}
ngOnInit() {
this.pattern = `${this.poolName}/${this.imageName}`;
}
moveImage() {
let delay = 0;
const expiresAt = this.moveForm.getValue('expiresAt');
if (expiresAt) {
delay = moment(expiresAt).diff(moment(), 'seconds', true);
}
if (delay < 0) {
delay = 0;
}
this.taskWrapper
.wrapTaskAroundCall({
task: new FinishedTask('rbd/trash/move', {
pool_name: this.poolName,
image_name: this.imageName
}),
call: this.rbdService.moveTrash(this.poolName, this.imageName, delay)
})
.subscribe(undefined, undefined, () => {
this.modalRef.hide();
});
}
}
<cd-modal>
<ng-container i18n
class="modal-title">Move an image to trash</ng-container>
<ng-container class="modal-content">
<form name="moveForm"
class="form"
#formDir="ngForm"
[formGroup]="moveForm"
novalidate>
<div class="modal-body">
<p i18n>To move <kbd>{{ poolName }}/{{ imageName }}</kbd> to trash,
click <kbd>Move Image</kbd>. Optionally, you can pick an expiration date.</p>
<div class="form-group"
[ngClass]="{'has-error': moveForm.showError('expiresAt', formDir)}">
<label for="expires"
i18n>Protection expires at</label>
<input type="text"
placeholder="NOT PROTECTED"
i18n-placeholder
class="form-control"
[minDate]="minDate"
[bsConfig]="bsConfig"
formControlName="expiresAt"
bsDatepicker>
<span class="help-block"
*ngIf="moveForm.showError('expiresAt', formDir, 'format')"
i18n>Wrong date format. Please use "YYYY-MM-DD HH:mm:ss".</span>
<span class="help-block"
*ngIf="moveForm.showError('expiresAt', formDir, 'expired')"
i18n>Protection has already expired. Please pick a future date or leave it empty.</span>
</div>
</div>
<div class="modal-footer">
<div class="button-group text-right">
<cd-submit-button i18n
[form]="moveForm"
(submitAction)="moveImage()">Move Image</cd-submit-button>
<cd-back-button [back]="modalRef.hide"
name="Cancel"
i18n-name>
</cd-back-button>
</div>
</div>
</form>
</ng-container>
</cd-modal>
// Temprary fix until ngx-bootstrap merges: https://github.com/valor-software/ngx-bootstrap/pull/4509
::ng-deep .bs-datepicker-head bs-datepicker-navigation-view {
display: flex;
justify-content: space-between;
}
Legend
Html element with directive