File

core/data-grid/configure-custom-column/configure-custom-column.component.ts

Metadata

Index

Properties
Methods
Outputs

Constructor

constructor(fb: FormBuilder, modalRef: BsModalRef)
Parameters :
Name Type Optional
fb FormBuilder No
modalRef BsModalRef No

Outputs

onAddCustomColumn
Type : EventEmitter<CustomColumnConfig>

Methods

addColumn
addColumn()
Returns : void
comparator
comparator(val1, val2)
Parameters :
Name Optional
val1 No
val2 No
Returns : boolean

Properties

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 id="modal-title" translate>Configure custom column</h3>
  </div>

  <form class="d-contents" #columnConfigForm="ngForm" [formGroup]="formGroup">
    <div class="modal-inner-scroll" id="modal-body">
      <div class="modal-body">
        <c8y-form-group>
          <label for="header" translate>Header</label>
          <input
            id="header"
            data-cy="configure-custom-column--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"
            data-cy="configure-custom-column--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>

results matching ""

    No results matching ""