File
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
|
optionsGroups
|
Type : string[]
|
Outputs
|
onSave
|
Type : EventEmitter
|
Methods
|
afterLoad
|
afterLoad(options: object)
|
Parses incoming raw object before it is applied to FormGroup.
Parameters :
| Name |
Type |
Optional |
| options |
object
|
No
|
|
|
beforeSave
|
beforeSave(value)
|
Translates ui.email.protocolAndEncryption field into
separate email.protocol and email.connection.encrypted
|
|
getDirtyValues
|
getDirtyValues()
|
|
Returns : {}
|
|
parseConfiguration
|
parseConfiguration(options: object)
|
Parses provided object's property values
Parameters :
| Name |
Type |
Optional |
| options |
object
|
No
|
|
|
form
|
Default value : new FormGroup({})
|
|
lineBreakHint
|
Default value : this.formProviderService.lineBreakHint
|
|
optionsGroups
|
Type : []
|
Default value : []
|
Accessors
|
_optionsGroups
|
set_optionsGroups(groupIds: string[])
|
Parameters :
| Name |
Type |
Optional |
| groupIds |
string[]
|
No
|
|
|
readOnly
|
setreadOnly(disabled: boolean)
|
Parameters :
| Name |
Type |
Optional |
| disabled |
boolean
|
No
|
|
|
formValue
|
setformValue(value)
|
|
|
<form [formGroup]="form">
<div class="row">
<div class="col-lg-12 col-lg-max">
<div class="card card--fullpage">
<div class="card-header separator">
<div class="card-title">
{{ 'Configuration' | translate }}
</div>
</div>
<div class="inner-scroll">
<div class="card-block">
<div>
<fieldset
class="row schema-form-fieldset separator-bottom p-t-24"
*ngFor="let category of optionsGroups"
>
<div class="col-sm-3 col-md-2 p-l-24 p-l-xs-8 p-b-8">
<div
class="h4 text-normal text-right text-left-xs"
data-cy="fieldset--section-title"
>
{{ category.title | translate }}
</div>
</div>
<div class="col-sm-9 col-md-8">
<div
class="form-group"
*ngFor="let field of category.items"
>
<ng-container [ngSwitch]="field.type">
<ng-container *ngSwitchCase="'string'">
<ng-container
*ngTemplateOutlet="stringTemplate; context: { $implicit: field }"
></ng-container>
</ng-container>
<ng-container *ngSwitchCase="'number'">
<ng-container
*ngTemplateOutlet="numberTemplate; context: { $implicit: field }"
></ng-container>
</ng-container>
<ng-container *ngSwitchCase="'password'">
<ng-container
*ngTemplateOutlet="passwordTemplate; context: { $implicit: field }"
></ng-container>
</ng-container>
<ng-container *ngSwitchCase="'textarea'">
<ng-container
*ngTemplateOutlet="textareaTemplate; context: { $implicit: field }"
></ng-container>
</ng-container>
<ng-container *ngSwitchCase="'boolean'">
<ng-container
*ngTemplateOutlet="booleanTemplate; context: { $implicit: field }"
></ng-container>
</ng-container>
<ng-container *ngSwitchCase="'select'">
<ng-container
*ngTemplateOutlet="selectTemplate; context: { $implicit: field }"
></ng-container>
</ng-container>
</ng-container>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="card-footer separator">
<button
class="btn btn-primary"
[title]="'Save configuration' | translate"
type="submit"
(click)="emitForm()"
[disabled]="!form.dirty || form.invalid || form.disabled"
>
<span translate>Save</span>
</button>
</div>
</div>
</div>
</div>
<ng-template
#stringTemplate
let-field
>
<c8y-form-group>
<label
title="{{ field.title | translate }}"
[for]="field.formId"
>
{{ field.title | translate }}
</label>
<input
class="text-truncate form-control"
[title]="field.title | translate"
type="text"
[id]="field.formId"
[formControlName]="field.formId"
[placeholder]="field.placeholder || '' | translate : field.placeholderParams"
/>
<div
class="help-block"
*ngIf="field.description"
>
{{ field.description | translate : field.descriptionTranslateParams }}
</div>
</c8y-form-group>
</ng-template>
<ng-template
#passwordTemplate
let-field
>
<c8y-form-group>
<label
title="{{ field.title | translate }}"
[for]="field.formId"
>
{{ field.title | translate }}
</label>
<input
class="text-truncate form-control"
[title]="field.title | translate"
type="password"
autocomplete="new-password"
[id]="field.formId"
[formControlName]="field.formId"
[placeholder]="field.placeholder || '' | translate : field.placeholderParams"
/>
<div
class="help-block"
*ngIf="field.description"
>
{{ field.description | translate : field.descriptionTranslateParams }}
</div>
</c8y-form-group>
</ng-template>
<ng-template
#numberTemplate
let-field
>
<c8y-form-group>
<label
title="{{ field.title | translate }}"
[for]="field.formId"
>
{{ field.title | translate }}
</label>
<input
class="text-truncate form-control"
[title]="field.title | translate"
type="number"
[id]="field.formId"
[formControlName]="field.formId"
[placeholder]="field.placeholder || '' | translate : field.placeholderParams"
/>
<div
class="help-block"
*ngIf="field.description"
>
{{ field.description | translate : field.descriptionTranslateParams }}
</div>
</c8y-form-group>
</ng-template>
<ng-template
#textareaTemplate
let-field
>
<c8y-form-group>
<label
title="{{ field.title | translate }}"
[for]="field.formId"
>
{{ field.title | translate }}
</label>
<textarea
class="form-control"
[title]="field.title | translate"
[id]="field.formId"
[formControlName]="field.formId"
[placeholder]="field.placeholder || '' | translate : field.placeholderParams"
[rows]="10"
></textarea>
<div
class="help-block"
*ngIf="field.description || field.lineBreakHint"
>
<span *ngIf="field.description">
{{ field.description | translate : field.descriptionTranslateParams }}
</span>
<span *ngIf="field.description && field.lineBreakHint"><br /></span>
<span *ngIf="field.lineBreakHint">{{ lineBreakHint | translate }}</span>
</div>
</c8y-form-group>
</ng-template>
<ng-template
#booleanTemplate
let-field
>
<c8y-form-group>
<label
class="c8y-checkbox"
title="{{ field.title | translate }}"
>
<input
[title]="field.title | translate"
type="checkbox"
[formControlName]="field.formId"
/>
<span></span>
<span>{{ field.title | translate }}</span>
</label>
<div
class="help-block"
*ngIf="field.description"
>
{{ field.description | translate : field.descriptionTranslateParams }}
</div>
</c8y-form-group>
</ng-template>
<ng-template
#selectTemplate
let-field
>
<c8y-form-group>
<label
title="{{ field.title | translate }}"
[for]="field.formId"
>
<span>{{ field.title | translate }}</span>
</label>
<div class="c8y-select-wrapper">
<select
class="form-control"
[id]="field.formId"
[formControlName]="field.formId"
>
<option></option>
<option
*ngFor="let option of field.options"
[value]="option.value"
>
{{ option.name | translate }}
</option>
</select>
<span></span>
</div>
<div
class="help-block"
*ngIf="field.description"
>
{{ field.description | translate : field.descriptionTranslateParams }}
</div>
</c8y-form-group>
</ng-template>
</form>