File
Metadata
| selector |
cd-nfs-form-client |
| styleUrls |
./nfs-form-client.component.scss |
| templateUrl |
./nfs-form-client.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Constructor
constructor(nfsService: NfsService, i18n: I18n)
|
|
|
Parameters :
| Name |
Type |
Optional |
| nfsService |
NfsService
|
No
|
| i18n |
I18n
|
No
|
|
Methods
|
getAccessTypeHelp
|
getAccessTypeHelp(index)
|
|
|
|
|
|
getNoAccessTypeDescr
|
getNoAccessTypeDescr()
|
|
|
|
|
|
getNoSquashDescr
|
getNoSquashDescr()
|
|
|
|
|
|
getValue
|
getValue(index, control)
|
|
|
Parameters :
| Name |
Optional |
| index |
No
|
| control |
No
|
|
|
removeClient
|
removeClient(index)
|
|
|
|
|
|
resolveModel
|
resolveModel(clients: any[])
|
|
|
Parameters :
| Name |
Type |
Optional |
| clients |
any[]
|
No
|
|
|
showError
|
showError(index, control, formDir, x)
|
|
|
Parameters :
| Name |
Optional |
| index |
No
|
| control |
No
|
| formDir |
No
|
| x |
No
|
|
|
trackByFn
|
trackByFn(index)
|
|
|
|
|
|
nfsAccessType
|
Type : any[]
|
Default value : this.nfsService.nfsAccessType
|
|
|
|
nfsSquash
|
Type : any[]
|
Default value : this.nfsService.nfsSquash
|
|
|
import { Component, Input } from '@angular/core';
import { FormArray, FormControl, Validators } from '@angular/forms';
import { I18n } from '@ngx-translate/i18n-polyfill';
import * as _ from 'lodash';
import { NfsService } from '../../../shared/api/nfs.service';
import { CdFormGroup } from '../../../shared/forms/cd-form-group';
@Component({
selector: 'cd-nfs-form-client',
templateUrl: './nfs-form-client.component.html',
styleUrls: ['./nfs-form-client.component.scss']
})
export class NfsFormClientComponent {
@Input()
form: CdFormGroup;
nfsSquash: any[] = this.nfsService.nfsSquash;
nfsAccessType: any[] = this.nfsService.nfsAccessType;
constructor(private nfsService: NfsService, private i18n: I18n) {}
getNoAccessTypeDescr() {
if (this.form.getValue('access_type')) {
return `${this.form.getValue('access_type')} ${this.i18n('(inherited from global config)')}`;
}
return this.i18n('-- Select the access type --');
}
getAccessTypeHelp(index) {
const accessTypeItem = this.nfsAccessType.find((currentAccessTypeItem) => {
return this.getValue(index, 'access_type') === currentAccessTypeItem.value;
});
return _.isObjectLike(accessTypeItem) ? accessTypeItem.help : '';
}
getNoSquashDescr() {
if (this.form.getValue('squash')) {
return `${this.form.getValue('squash')} (${this.i18n('inherited from global config')})`;
}
return this.i18n('-- Select what kind of user id squashing is performed --');
}
addClient() {
const clients = this.form.get('clients') as FormArray;
const REGEX_IP = `(([0-9]{1,3})\\.([0-9]{1,3})\\.([0-9]{1,3})\.([0-9]{1,3})([/](\\d|[1-2]\\d|3[0-2]))?)`;
const REGEX_LIST_IP = `${REGEX_IP}([ ,]{1,2}${REGEX_IP})*`;
const fg = new CdFormGroup({
addresses: new FormControl('', {
validators: [Validators.required, Validators.pattern(REGEX_LIST_IP)]
}),
access_type: new FormControl(this.form.getValue('access_type')),
squash: new FormControl(this.form.getValue('squash'))
});
clients.push(fg);
return fg;
}
removeClient(index) {
const clients = this.form.get('clients') as FormArray;
clients.removeAt(index);
}
showError(index, control, formDir, x) {
return (<any>this.form.controls.clients).controls[index].showError(control, formDir, x);
}
getValue(index, control) {
const clients = this.form.get('clients') as FormArray;
const client = clients.at(index) as CdFormGroup;
return client.getValue(control);
}
resolveModel(clients: any[]) {
_.forEach(clients, (client) => {
const fg = this.addClient();
fg.patchValue(client);
});
}
trackByFn(index) {
return index;
}
}
<div class="form-group">
<label class="col-sm-3 control-label"
i18n>Clients</label>
<div class="col-sm-9"
[formGroup]="form"
#formDir="ngForm">
<span *ngIf="form.get('clients').value.length === 0"
class="form-control no-border text-muted">
<span class="text-muted"
i18n>Any client can access</span>
</span>
<ng-container formArrayName="clients">
<div *ngFor="let item of form.get('clients').value; let index = index; trackBy: trackByFn">
<div class="panel panel-default"
[formGroupName]="index">
<div class="panel-heading">
<h3 class="panel-title">{{ (index + 1) | ordinal }}
<span class="pull-right clickable"
(click)="removeClient(index)"
tooltip="Remove">×</span>
</h3>
</div>
<div class="panel-body">
<!-- Addresses -->
<div class="form-group"
[ngClass]="{ 'has-error': showError(index, 'addresses', formDir) }">
<label i18n
class="col-sm-3 control-label"
for="addresses">Addresses</label>
<div class="col-sm-9">
<input type="text"
class="form-control"
name="addresses"
id="addresses"
formControlName="addresses"
placeholder="192.168.0.10, 192.168.1.0/8">
<span class="help-block">
<span *ngIf="showError(index, 'addresses', formDir, 'required')"
i18n>Required field</span>
<span *ngIf="showError(index, 'addresses', formDir, 'pattern')">
<ng-container i18n>Must contain one or more comma-separated values</ng-container>
<br>
<ng-container i18n>For example:</ng-container> 192.168.0.10, 192.168.1.0/8
</span>
</span>
</div>
</div>
<!-- Access Type-->
<div class="form-group">
<label i18n
class="col-sm-3 control-label"
for="access_type">Access Type</label>
<div class="col-sm-9">
<select class="form-control"
name="access_type"
id="access_type"
formControlName="access_type">
<option [value]="form.getValue('access_type')">{{ getNoAccessTypeDescr() }}</option>
<option *ngFor="let item of nfsAccessType"
[value]="item.value">{{ item.value }}</option>
</select>
<span class="help-block"
*ngIf="getValue(index, 'access_type')">
{{ getAccessTypeHelp(index) }}
</span>
</div>
</div>
<!-- Squash -->
<div class="form-group">
<label i18n
class="col-sm-3 control-label"
for="squash">Squash</label>
<div class="col-sm-9">
<select class="form-control"
name="squash"
id="squash"
formControlName="squash">
<option [value]="form.getValue('squash')">{{ getNoSquashDescr() }}</option>
<option *ngFor="let squash of nfsSquash"
[value]="squash">{{ squash }}</option>
</select>
</div>
</div>
</div>
</div>
</div>
</ng-container>
<span class="form-control no-border">
<button class="btn btn-default btn-label pull-right"
(click)="addClient()">
<i class="fa fa-fw fa-plus"></i>
<ng-container i18n>Add clients</ng-container>
</button>
</span>
<hr>
</div>
</div>
Legend
Html element with directive