<div class="employee-department">
  <label class="label">Abteilungsliste</label>
  <section class="toolbar">
    <div class="toolbar-button-row">
      <div class="toolbar-flex-container">
        <button mat-icon-button title="Hinzufügen" (click)=addItem()
          [disabled]="!employeeDetails.inNotViewMode || !employeeDepartmentList.focusedEntityShadowed.enabledNewButton()">
          <mat-icon>add</mat-icon>
        </button>
        <button mat-icon-button title="Bearbeiten" (click)=editItem()
          [disabled]="!employeeDetails.inNotViewMode || !employeeDepartmentList.focusedItem || !employeeDepartmentList.focusedEntityShadowed.enabledEditButton()">
          <mat-icon>edit</mat-icon>
        </button>
        <button mat-icon-button title="Löschen" class="toolbar-button-last" (click)=deleteDepartment();
          [disabled]="!employeeDetails.inNotViewMode
                      || !employeeDepartmentList.focusedItem
                      || !employeeDepartmentList.focusedEntityShadowed.enabledDeleteButton()">
          <mat-icon>delete</mat-icon>
        </button>
      </div>
    </div>
  </section>
  <dx-data-grid
    name="departmentGrid"
    [class]="'grid'+(columnConfigList.withExport ? ' withexport' : '')"
    [dataSource]="employeeDepartmentList.items"
    keyExpr="entityId"
    [(focusedRowIndex)]=employeeDepartmentList.focusedItemGridIndex
    [focusedRowEnabled]="true"
    [autoNavigateToFocusedRow]="true"
    [(focusedRowKey)]="employeeDepartmentList.focusedItemId"
    [(selectedRowKeys)]="employeeDepartmentList.selectedItemIds"
    [showBorders]="true"
    [allowColumnResizing]="true"
    columnResizingMode="widget"
    noDataText="Keine Daten sind vorhanden"
    [renderAsync]="true"
    (onRowDblClick)="dblClick($event)"
    (onKeyDown)="$event.handled = $event.event.key==='Escape'"
    (onExporting)="globals.doExcelExportSimple($event, employeeDepartmentList.getExportFilename4List())">

    <dxo-export [enabled]="columnConfigList.withExport" [texts]="{exportAll: 'Excel Export'}"></dxo-export>
    <dxo-header-filter [visible]="true"></dxo-header-filter> -->
    <dxo-filter-row [visible]="false" [applyFilter]="true"></dxo-filter-row>
    <dxo-paging [enabled]="false"></dxo-paging>
    <dxo-scrolling mode="virtual"></dxo-scrolling>
    <dxo-load-panel [enabled]="true"></dxo-load-panel>
    <dxo-sorting mode="multiple"></dxo-sorting>
    <dxo-selection mode="none"></dxo-selection>

    <ng-container *ngFor="let column of columnConfigList.columns">
      <ng-container *ngIf="column.visible">
        <dxi-column
          [allowHeaderFiltering]=column.allowHeaderFiltering
          [dataField]=column.dataField
          [dataType]=column.dataType
          [caption]=column.caption
          [width]=column.width
          [sortIndex]=column.sortIndex
          [sortOrder]=column.sortOrder
          [visibleIndex]=column.visibleIndex
          [visible]=column.visible
          [fixed]=column.fixed
          [headerCellTemplate]=column.headerCellTemplate
          [cellTemplate]=column.cellTemplate
          [allowSorting]=column.allowSorting
          [calculateCellValue]=column.calculateCellValue
          [calculateDisplayValue]=column.calculateDisplayValue
          [calculateGroupValue]=column.calculateGroupValue
          [calculateSortValue]=column.calculateSortValue
          [alignment]=column.alignment>
          <dxo-format *ngIf="column.dataType == 'date'" [type]=localeService.dateFormat></dxo-format>
          <dxo-format *ngIf="column.dataType == 'datetime'" [type]=localeService.dateTimeFormat></dxo-format>
          <dxo-lookup *ngIf="column.dataField === 'departmentId'" [dataSource]="appDataService.departmentList?.items" valueExpr="entityId" displayExpr="departmentName"></dxo-lookup>
          <dxo-lookup *ngIf="column.dataField === 'employeeStatusId'" [dataSource]="appDataService.employeeStatusList?.items" valueExpr="entityId" displayExpr="employeeStatusName"></dxo-lookup>
          <dxo-lookup *ngIf="column.dataField === 'rangId'" [dataSource]="appDataService.rangList?.items" valueExpr="entityId" displayExpr="rangShortname"></dxo-lookup>
        </dxi-column>
      </ng-container>
    </ng-container>

    <div *dxTemplate="let cell of 'numberTemplate_0'">
      {{cell.value | number:'1.0-0':culture}}
    </div>
    <div *dxTemplate="let cell of 'numberTemplate_1'">
      {{cell.value | number:'1.1-1':culture}}
    </div>
    <div *dxTemplate="let cell of 'numberTemplate_2'">
      {{cell.value | number:'1.2-2':culture}}
    </div>
    <div *dxTemplate="let cell of 'numberTemplate_3'">
      {{cell.value | number:'1.3-3':culture}}
    </div>
  </dx-data-grid>
</div>
