core/data-grid/configure-custom-column/configure-custom-column.component.ts
| selector | c8y-configure-custom-column |
| templateUrl | ./configure-custom-column.component.html |
Properties |
|
Methods |
Outputs |
constructor(fb: FormBuilder, modalRef: BsModalRef)
|
|||||||||
|
Parameters :
|
| onAddCustomColumn |
Type : EventEmitter<CustomColumnConfig>
|
| addColumn |
addColumn()
|
|
Returns :
void
|
| comparator | ||||||
comparator(val1, val2)
|
||||||
|
Parameters :
Returns :
boolean
|
| columns |
Type : Column[]
|
Default value : []
|
| Public fb |
Type : FormBuilder
|
| form |
Type : NgForm
|
Decorators :
@ViewChild('columnConfigForm', {static: false})
|
| formGroup |
Type : FormGroup
|
Default value : this.fb.group({
header: [''],
path: ['', [Validators.required, simpleJsonPathValidator]],
addAnother: [false]
})
|
| Public modalRef |
Type : BsModalRef
|
| Readonly SIMPLE_JSON_PATH_REGEX |
Default value : /^[^.\s]+(\.\S+)*$/
|
| uniqueHeaderMsg |
Default value : gettext("The column header name is too similar to '{{ value }}'.")
|
<div class="viewport-modal">
<div class="modal-header separator-bottom">
<h3 translate>Configure custom column</h3>
</div>
<form class="d-contents" #columnConfigForm="ngForm" [formGroup]="formGroup">
<div class="modal-inner-scroll">
<div class="modal-body">
<c8y-form-group>
<label for="header" translate>Header</label>
<input
id="header"
formControlName="header"
class="form-control"
autocomplete="off"
[placeholder]="'e.g. Agent name' | translate"
[required]="true"
uniqueByPath
[collection]="columns"
path="header"
[comparator]="comparator"
/>
<c8y-messages>
<c8y-message
name="uniqueByPath"
[text]="uniqueHeaderMsg"
></c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group>
<label for="fragmentPath" translate>Fragment path</label>
<input
id="fragmentPath"
formControlName="path"
class="form-control"
autocomplete="off"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Agent.name' }"
/>
</c8y-form-group>
<label class="c8y-switch" [title]="'Add another column after saving this one' | translate">
<input type="checkbox" formControlName="addAnother" class="form-control" />
<span></span>
<span translate>Add another column after saving this one</span>
</label>
</div>
</div>
<div class="modal-footer">
<button title="{{ 'Cancel' | translate }}" class="btn btn-default" (click)="modalRef.hide()">
{{ 'Cancel' | translate }}
</button>
<button
title="{{ 'Save' | translate }}"
class="btn btn-primary"
[disabled]="columnConfigForm.form.pristine || !columnConfigForm.form.valid"
(click)="addColumn()"
>
{{ 'Save' | translate }}
</button>
</div>
</form>
</div>