File
Metadata
| selector |
cd-rgw-user-capability-modal |
| styleUrls |
./rgw-user-capability-modal.component.scss |
| templateUrl |
./rgw-user-capability-modal.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Outputs
|
|
|
Outputs
|
submitAction
|
Type : EventEmitter
|
|
|
The event that is triggered when the 'Add' or 'Update' button
has been pressed.
|
Methods
|
setCapabilities
|
setCapabilities(capabilities: RgwUserCapability[])
|
|
|
Set the current capabilities of the user.
|
|
setEditing
|
setEditing(editing: boolean)
|
|
|
Set the 'editing' flag. If set to TRUE, the modal dialog is in 'Edit' mode,
otherwise in 'Add' mode. According to the mode the dialog and its controls
behave different.
Parameters :
| Name |
Type |
Optional |
Default value |
| editing |
boolean
|
No
|
true
|
|
|
setValues
|
setValues(type: string, perm: string)
|
|
|
Set the values displayed in the dialog.
|
|
Public
bsModalRef
|
Type : BsModalRef
|
|
|
|
editing
|
Default value : true
|
|
|
|
types
|
Type : string[]
|
Default value : []
|
|
|
import { Component, EventEmitter, Output } from '@angular/core';
import { Validators } from '@angular/forms';
import * as _ from 'lodash';
import { BsModalRef } from 'ngx-bootstrap/modal';
import { I18n } from '@ngx-translate/i18n-polyfill';
import { ActionLabelsI18n } from '../../../shared/constants/app.constants';
import { CdFormBuilder } from '../../../shared/forms/cd-form-builder';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
import { RgwUserCapability } from '../models/rgw-user-capability';
@Component({
selector: 'cd-rgw-user-capability-modal',
templateUrl: './rgw-user-capability-modal.component.html',
styleUrls: ['./rgw-user-capability-modal.component.scss']
})
export class RgwUserCapabilityModalComponent {
/**
* The event that is triggered when the 'Add' or 'Update' button
* has been pressed.
*/
@Output()
submitAction = new EventEmitter();
formGroup: CdFormGroup;
editing = true;
types: string[] = [];
resource: string;
action: string;
constructor(
private formBuilder: CdFormBuilder,
public bsModalRef: BsModalRef,
private i18n: I18n,
public actionLabels: ActionLabelsI18n
) {
this.resource = this.i18n('capability');
this.createForm();
}
createForm() {
this.formGroup = this.formBuilder.group({
type: [null, [Validators.required]],
perm: [null, [Validators.required]]
});
}
/**
* Set the 'editing' flag. If set to TRUE, the modal dialog is in 'Edit' mode,
* otherwise in 'Add' mode. According to the mode the dialog and its controls
* behave different.
* @param {boolean} viewing
*/
setEditing(editing: boolean = true) {
this.editing = editing;
this.action = this.editing ? this.actionLabels.EDIT : this.actionLabels.ADD;
}
/**
* Set the values displayed in the dialog.
*/
setValues(type: string, perm: string) {
this.formGroup.setValue({
type: type,
perm: perm
});
}
/**
* Set the current capabilities of the user.
*/
setCapabilities(capabilities: RgwUserCapability[]) {
// Parse the configured capabilities to get a list of types that
// should be displayed.
const usedTypes = [];
capabilities.forEach((capability) => {
usedTypes.push(capability.type);
});
this.types = [];
['users', 'buckets', 'metadata', 'usage', 'zone'].forEach((type) => {
if (_.indexOf(usedTypes, type) === -1) {
this.types.push(type);
}
});
}
onSubmit() {
const capability: RgwUserCapability = this.formGroup.value;
this.submitAction.emit(capability);
this.bsModalRef.hide();
}
}
<div class="modal-header">
<h4 i18n="form title|Example: Create Pool@@formTitle"
class="modal-title pull-left">{{ action | titlecase }} {{ resource | upperFirst }}</h4>
<button type="button"
class="close pull-right"
aria-label="Close"
(click)="bsModalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<form class="form-horizontal"
#frm="ngForm"
[formGroup]="formGroup"
novalidate>
<div class="modal-body">
<!-- Type -->
<div class="form-group"
[ngClass]="{'has-error': formGroup.showError('type', frm)}">
<label class="control-label col-sm-3"
for="type">
<ng-container i18n>Type</ng-container>
<span class="required"
*ngIf="!editing">
</span>
</label>
<div class="col-sm-9">
<input id="type"
class="form-control"
type="text"
*ngIf="editing"
[readonly]="true"
formControlName="type">
<select id="type"
class="form-control"
formControlName="type"
*ngIf="!editing"
autofocus>
<option i18n
*ngIf="types !== null"
[ngValue]="null">-- Select a type --</option>
<option *ngFor="let type of types"
[value]="type">{{ type }}</option>
</select>
<span class="help-block"
*ngIf="formGroup.showError('type', frm, 'required')"
i18n>This field is required.</span>
</div>
</div>
<!-- Permission -->
<div class="form-group"
[ngClass]="{'has-error': formGroup.showError('perm', frm)}">
<label class="control-label col-sm-3"
for="perm">
<ng-container i18n>Permission</ng-container>
<span class="required"></span>
</label>
<div class="col-sm-9">
<select id="perm"
class="form-control"
formControlName="perm">
<option i18n
[ngValue]="null">-- Select a permission --</option>
<option *ngFor="let perm of ['read', 'write', '*']"
[value]="perm">
{{ perm }}
</option>
</select>
<span class="help-block"
*ngIf="formGroup.showError('perm', frm, 'required')"
i18n>This field is required.</span>
</div>
</div>
</div>
<div class="modal-footer">
<cd-submit-button
(submitAction)="onSubmit()"
i18n="form action button|Example: Create Pool@@formActionButton"
[form]="formGroup">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
<cd-back-button [back]="bsModalRef.hide"></cd-back-button>
</div>
</form>
Legend
Html element with directive