File

src/app/ceph/block/rbd-trash-move-modal/rbd-trash-move-modal.component.ts

Implements

OnInit

Metadata

selector cd-rbd-trash-move-modal
styleUrls ./rbd-trash-move-modal.component.scss
templateUrl ./rbd-trash-move-modal.component.html

Index

Properties
Methods

Constructor

constructor(rbdService: RbdService, modalRef: BsModalRef, fb: CdFormBuilder, taskWrapper: TaskWrapperService)
Parameters :
Name Type Optional
rbdService RbdService No
modalRef BsModalRef No
fb CdFormBuilder No
taskWrapper TaskWrapperService No

Methods

createForm
createForm()
Returns : void
moveImage
moveImage()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

bsConfig
Type : object
Default value : { dateInputFormat: 'YYYY-MM-DD HH:mm:ss', containerClass: 'theme-default' }
executingTasks
Type : ExecutingTask[]
imageName
Type : string
metaType
Type : string
minDate
Default value : new Date()
Public modalRef
Type : BsModalRef
moveForm
Type : CdFormGroup
pattern
Type : string
poolName
Type : string
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>

./rbd-trash-move-modal.component.scss

// 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
Component
Html element with directive

result-matching ""

    No results matching ""