File

core/data-grid/data-grid.component.ts

Implements

DataGrid OnChanges AfterViewInit

<div
  #scroll
  class="table-data-grid-scroll"
  [ngClass]="{ 'table-data-grid__overlay': (dataSource.loading$ | async) && !loadMoreComponent }"
>
  <div
    class="table-data-grid__loading--wrapper"
    *ngIf="(dataSource.loading$ | async) && !loadMoreComponent"
  >
    <div class="table-data-grid__loading--loader">
      <c8y-progress-bar [message]="loadingItemsLabel"></c8y-progress-bar>
    </div>
  </div>

  <div *ngIf="displayOptions.gridHeader" class="table-data-grid-header separator large-padding">
    <h4 [ngClass]="{ 'm-r-16': !!title }">{{ title | translate }}</h4>

    <ng-container *ngIf="displayOptions.filter">
      <span *ngIf="!filteringApplied">
        <span class="label label-default m-r-4" translate>No filters</span>
        <small
          *ngIf="!!filteringLabelsParams.allItemsCount"
          class="m-r-4"
          ngNonBindable
          translate
          [translateParams]="filteringLabelsParams"
        >
          {{ filteredItemsCount }} of {{ allItemsCount }} items
        </small>
      </span>
      <span *ngIf="filteringApplied">
        <ng-container *ngIf="!!filteringLabelsParams.allItemsCount">
          <span class="badge badge-info m-r-4">
            {{ (dataSource.stats$ | async).filteredSize }}
          </span>
          <small ngNonBindable translate [translateParams]="filteringLabelsParams">
            of {{ allItemsCount }} items
          </small>
        </ng-container>
        <button
          title=" {{ 'Clear filters' | translate }}"
          class="m-l-8 btn btn-xs btn-default m-r-4"
          (click)="clearFilters()"
        >
          {{ 'Clear filters' | translate }}
        </button>
      </span>

      <span class="hidden-xs hidden-sm">
        <button
          class="btn-clean text-primary"
          popover="{{ 'Click the column headers to apply filters.' | translate }}"
          placement="right"
          triggers="focus"
          c8yProductExperience
          [actionName]="'dataGrid:ApplyFilterInfo'"
        >
          <i c8yIcon="question-circle-o"></i>
        </button>
      </span>

      <span class="hidden-xs hidden-sm" *ngIf="showCounterWarning">
        <button
          class="btn-clean text-primary"
          popover="{{
            'The counter for the total number of items might be inaccurate.' | translate
          }}"
          placement="right"
          triggers="focus"
        >
          <i c8yIcon="warning"></i>
        </button>
      </span>
    </ng-container>

    <div class="flex-item-right">
      <div class="btnbar flex-row">
        <ng-container *ngFor="let headerActionControl of headerActionControls">
          <ng-container *ngIf="headerActionControl | isControlVisible">
            <ng-container *ngIf="!headerActionControl.template; else customTemplate">
              <button
                title="{{ headerActionControl.text | translate }}"
                class="btnbar-btn btn-link"
                (click)="headerActionControl.callback()"
                c8yProductExperience
                [actionName]="'dataGrid:' + headerActionControl.text"
                [actionData]="{ type: headerActionControl.type }"
              >
                <i c8yIcon="headerActionControl.icon" class="m-r-4"></i>
                <span>{{ headerActionControl.text | translate }}</span>
              </button>
            </ng-container>
            <ng-template #customTemplate>
              <ng-container
                *ngTemplateOutlet="
                  headerActionControl.template;
                  context: { headerActionControl: headerActionControl }
                "
              ></ng-container>
            </ng-template>
          </ng-container>
        </ng-container>

        <div
          *ngIf="configureColumnsEnabled"
          class="dropdown"
          dropdown
          #ddConfigureColumns="bs-dropdown"
          [insideClick]="true"
          container="body"
          placement="bottom left"
        >
          <button
            title="{{ 'Configure columns' | translate }}"
            class="btnbar-btn c8y-dropdown"
            dropdownToggle
            c8yProductExperience
            [actionName]="'dataGrid:ConfigureColumns'"
          >
            <i c8yIcon="columns" class="m-r-4"></i>
            <span>{{ 'Configure columns' | translate }}</span>
          </button>

          <ul *dropdownMenu class="dropdown-menu" (click)="$event.stopPropagation()">
            <li class="bg-white">
              <div cdkDropList (cdkDropListDropped)="onColumnDrop($event)" class="list-group m-0">
                <div *ngFor="let column of columns" cdkDrag cdkDragLockAxis="y">
                  <ng-container *ngIf="!column.positionFixed">
                    <div class="list-group-item draggable-after p-0 a-i-center">
                      <label
                        title="{{ (column.header | translate) || column.name }}"
                        class="c8y-checkbox p-l-16"
                      >
                        <input
                          type="checkbox"
                          [(ngModel)]="column.visible"
                          (change)="updateGridColumnsSize(); emitConfigChange()"
                          c8yProductExperience
                          [actionName]="
                            'dataGrid:ConfigureColumns:' + (column.header || column.name)
                          "
                        />
                        <span></span>
                        <span>{{ (column.header | translate) || column.name }}</span>
                      </label>
                      <button
                        *ngIf="column.custom"
                        class="btn btn-dot showOnHover max-width-fit a-i-center"
                        tooltip="{{ 'Remove`column,verb`' | translate }}"
                        placement="left"
                        container="body"
                        (click)="removeCustomColumn(poConfirm, column, ddConfigureColumns)"
                      >
                        <c8y-popover-confirm
                          [placement]="'left'"
                          [title]="'Confirm removal' | translate"
                          [outsideClick]="true"
                          #poConfirm
                        ></c8y-popover-confirm>
                        <i c8yIcon="minus-circle" class="text-danger"></i>
                      </button>
                    </div>
                  </ng-container>
                </div>
              </div>
            </li>
            <li *ngIf="onAddCustomColumn?.observers?.length">
              <button
                title="{{ 'Add custom column' | translate }}"
                class="btn btn-add-block m-0"
                (click)="openCustomColumnModal(); ddConfigureColumns.hide()"
              >
                <i c8yIcon="plus-circle"></i>
                <span>{{ 'Add custom column' | translate }}</span>
              </button>
            </li>
          </ul>
        </div>

        <button
          title="{{ 'Reload' | translate }}"
          class="btnbar-btn btn-link"
          [disabled]="dataSource.loading$ | async"
          (click)="clickReload()"
        >
          <i c8yIcon="refresh" class="m-r-4"></i>
          <span>{{ 'Reload' | translate }}</span>
        </button>

        <div
          *ngIf="!serverSideDataCallback || showSearch"
          class="input-group input-group-search m-l-sm-16"
        >
          <input
            type="search"
            class="form-control"
            placeholder="{{ 'Search…' | translate }}"
            [ngModel]="searchText"
            (input)="searchText$.emit($event.target.value)"
            c8yProductExperience
            [actionName]="'dataGrid:SearchInput'"
          />
          <div class="input-group-addon">
            <i c8yIcon="search" *ngIf="searchText.length === 0"></i>
            <i
              c8yIcon="times"
              class="pointer"
              *ngIf="searchText.length > 0"
              (click)="searchText = ''; searchText$.emit('')"
              c8yProductExperience
              [actionName]="'dataGrid:SearchInputClear'"
            ></i>
          </div>
        </div>
      </div>
    </div>
    <div
      class="table-data-grid-header-bulk-actions animated slideInDown fast"
      *ngIf="selectedItemIds.length !== 0"
    >
      <h4>
        <span ngNonBindable translate [translateParams]="{ count: selectedItemIds.length }">
          {{ count }} selected items.
        </span>
        <br class="visible-xs" />
        <small *ngIf="!serverSideDataCallback && selectedItemIds.length >= pagination.pageSize">
          <a (click)="setAllItemsSelected(true)" class="interact">
            <span
              ngNonBindable
              translate
              [translateParams]="{ count: (dataSource.stats$ | async).filteredSize }"
            >
              Select all {{ count }} items
            </span>
          </a>
        </small>
      </h4>
      <div class="flex-item-right">
        <div class="btnbar flex-row">
          <ng-container
            *ngFor="let bulkActionControl of bulkActionControls"
            [ngSwitch]="bulkActionControl.type"
          >
            <ng-container *ngIf="bulkActionControl | isControlVisible: selectedItemIds">
              <button
                title="{{ 'Export' | translate }}"
                *ngSwitchCase="builtInActionType.Export"
                class="btnbar-btn"
                (click)="bulkActionControl.callback(selectedItemIds, reload.bind(this))"
                c8yProductExperience
                [actionName]="'dataGrid:BulkExport'"
              >
                <i c8yIcon="sign-out"></i>
                <span>{{ 'Export' | translate }}</span>
              </button>

              <button
                title="{{ 'Delete' | translate }}"
                *ngSwitchCase="builtInActionType.Delete"
                class="btnbar-btn"
                (click)="bulkActionControl.callback(selectedItemIds, reload.bind(this))"
                c8yProductExperience
                [actionName]="'dataGrid:BulkDelete'"
              >
                <i c8yIcon="trash"></i>
                <span>{{ 'Delete' | translate }}</span>
              </button>

              <button
                title="{{ bulkActionControl.text | translate }}"
                *ngSwitchDefault
                class="btnbar-btn"
                (click)="bulkActionControl.callback(selectedItemIds, reload.bind(this))"
                c8yProductExperience
                [actionName]="'dataGrid:Bulk:' + bulkActionControl.text"
              >
                <i c8yIcon="{{ bulkActionControl.icon }}"></i>
                <span>{{ bulkActionControl.text | translate }}</span>
              </button>
            </ng-container>
          </ng-container>

          <button title="{{ 'Cancel' | translate }}" class="btnbar-btn" (click)="cancel()">
            <i c8yIcon="times"></i>
            <span>{{ 'Cancel' | translate }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <table
    class="table table-hover table-filtered-sorted table-data-grid large-padding"
    cdk-table
    [dataSource]="dataSource"
    [trackBy]="trackByName"
    [class.table-striped]="displayOptions.striped"
    [class.table-bordered]="displayOptions.bordered"
    [class.table-data-grid-with-checkboxes]="selectable"
    [class.table-data-grid-with-actions]="actionControls.length > 0"
    [style.grid-template-columns]="styles.gridTemplateColumns"
    (mousemove)="resizeHandleContainerMouseMove$.emit($event)"
    (mouseup)="resizeHandleContainerMouseUp$.emit($event)"
  >
    <ng-container
      *ngFor="let column of columns; let i = index; trackBy: trackByName"
      [cdkColumnDef]="column.name"
    >
      <ng-container [ngSwitch]="column.name">
        <ng-container *ngSwitchCase="'checkbox'">
          <th cdk-header-cell *cdkHeaderCellDef data-type="icon">
            <div>
              <label class="c8y-checkbox">
                <input
                  type="checkbox"
                  [checked]="currentPageSelectionState.allSelected"
                  [indeterminate]="
                    !(
                      currentPageSelectionState.allSelected ||
                      currentPageSelectionState.allDeselected
                    )
                  "
                  (change)="setAllItemsInCurrentPageSelected($event.target.checked)"
                />
                <span></span>
              </label>
            </div>
          </th>

          <td cdk-cell *cdkCellDef="let row" data-type="icon">
            <label class="c8y-checkbox">
              <input
                type="checkbox"
                [checked]="isItemSelected(row)"
                (change)="setItemsSelected([row], $event.target.checked)"
              />
              <span></span>
            </label>
          </td>
        </ng-container>

        <ng-container *ngSwitchCase="'actions'">
          <th cdk-header-cell *cdkHeaderCellDef data-type="icon"></th>

          <td cdk-cell *cdkCellDef="let row" data-type="icon">
            <ng-container *ngIf="actionControls.length <= 2">
              <ng-container
                *ngFor="let actionControl of actionControls"
                [ngSwitch]="actionControl.type"
              >
                <ng-container *ngIf="actionControl.showIf ? actionControl.showIf(row) : true">
                  <button
                    *ngSwitchCase="builtInActionType.Edit"
                    class="btn btn-icon btn-xs btn-default"
                    tooltip="{{ 'Edit' | translate }}"
                    container="body"
                    (click)="actionControl.callback(row, reload.bind(this))"
                    c8yProductExperience
                    [actionName]="'dataGridEntry:Edit'"
                  >
                    <i c8yIcon="pencil"></i>
                  </button>
                  <button
                    *ngSwitchCase="builtInActionType.Delete"
                    class="btn btn-dot showOnHover"
                    tooltip="{{ 'Delete' | translate }}"
                    container="body"
                    (click)="actionControl.callback(row, reload.bind(this))"
                    c8yProductExperience
                    [actionName]="'dataGridEntry:Delete'"
                  >
                    <i class="text-danger" c8yIcon="minus-circle"></i>
                  </button>
                  <button
                    *ngSwitchDefault
                    class="btn btn-icon btn-xs btn-default showOnHover"
                    (click)="actionControl.callback(row, reload.bind(this))"
                    tooltip="{{ (actionControl.icon ? actionControl.text : '') | translate }}"
                    container="body"
                    c8yProductExperience
                    [actionName]="'dataGridEntry:' + actionControl.text"
                  >
                    <i *ngIf="actionControl.icon" c8yIcon="{{ actionControl.icon }}"></i>
                    <span *ngIf="!actionControl.icon">{{ actionControl.text | translate }}</span>
                  </button>
                </ng-container>
              </ng-container>
            </ng-container>

            <div [ngClass]="{ 'm-l-auto overflow-visible': actionControls.length > 2 }">
              <div
                *ngIf="actionControls.length > 2"
                class="dropdown"
                dropdown
                container="body"
                placement="bottom right"
              >
                <button
                  title="{{ 'Actions' | translate }}"
                  class="dropdown-toggle c8y-dropdown"
                  dropdownToggle
                  c8yProductExperience
                  [actionName]="'dataGridEntry:Actions'"
                >
                  <i c8yIcon="ellipsis-v"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
                  <li *ngFor="let actionControl of actionControls" [ngSwitch]="actionControl.type">
                    <ng-container *ngIf="actionControl | isControlVisible: row">
                      <button
                        title="{{ 'Edit' | translate }}"
                        *ngSwitchCase="builtInActionType.Edit"
                        (click)="actionControl.callback(row, reload.bind(this))"
                        c8yProductExperience
                        [actionName]="'dataGridActions:Edit'"
                      >
                        <i c8yIcon="pencil"></i>
                        {{ 'Edit' | translate }}
                      </button>
                      <button
                        title="{{ 'Delete' | translate }}"
                        *ngSwitchCase="builtInActionType.Delete"
                        (click)="actionControl.callback(row, reload.bind(this))"
                        c8yProductExperience
                        [actionName]="'dataGridActions:Delete'"
                      >
                        <i c8yIcon="trash"></i>
                        {{ 'Delete' | translate }}
                      </button>
                      <button
                        title="{{ 'Export' | translate }}"
                        *ngSwitchCase="builtInActionType.Export"
                        (click)="actionControl.callback(row, reload.bind(this))"
                        c8yProductExperience
                        [actionName]="'dataGridActions:Export'"
                      >
                        <i c8yIcon="download"></i>
                        {{ 'Export' | translate }}
                      </button>
                      <button
                        title="{{ actionControl.text | translate }}"
                        *ngSwitchDefault
                        (click)="actionControl.callback(row, reload.bind(this))"
                        c8yProductExperience
                        [actionName]="'dataGridActions:' + actionControl.text"
                        [actionData]="{ type: actionControl.type }"
                      >
                        <i c8yIcon="{{ actionControl.icon }}"></i>
                        {{ actionControl.text | translate }}
                      </button>
                    </ng-container>
                  </li>
                </ul>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container *ngSwitchDefault>
          <th
            cdk-header-cell
            *cdkHeaderCellDef
            [ngClass]="column.headerCSSClassName"
            [attr.data-type]="column.dataType"
            [class.sorted]="column.sortOrder"
            [class.filtered]="column | map: isColumnFilteringApplied"
            [class.hidden]="!column.visible"
          >
            <div *ngIf="!column.filterable" [title]="(column.header | translate) || column.name">
              <ng-container
                *ngIf="
                  [
                    {
                      columnName: column.name,
                      value: (column.header | translate) || column.name
                    }
                  ] | map: getHeaderCellRendererSpec:this as cellRendererSpec
                "
              >
                <c8y-cell-renderer [spec]="cellRendererSpec"></c8y-cell-renderer>
              </ng-container>
            </div>

            <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->
            <div
              *ngIf="column.filterable"
              class="dropdown"
              dropdown
              #dropdown="bs-dropdown"
              container="body"
              placement="bottom {{ isDropDownPlacedRight(column) ? 'right' : 'left' }} "
              [insideClick]="true"
            >
              <button
                class="btn-header c8y-dropdown"
                dropdownToggle
                [title]="(column.header | translate) || column.name"
                c8yProductExperience
                [actionName]="'dataGridFilterColumn:' + (column.header || column.name)"
              >
                <ng-container
                  *ngIf="
                    [
                      {
                        columnName: column.name,
                        value: (column.header | translate) || column.name
                      }
                    ] | map: getHeaderCellRendererSpec:this as cellRendererSpec
                  "
                >
                  <c8y-cell-renderer [spec]="cellRendererSpec"></c8y-cell-renderer>
                </ng-container>
                <i c8yIcon="filter" title="{{ 'Filter' | translate }}"></i>
              </button>

              <!-- isDropDownPlacedRight to be removed when columns are transformed to observables. -->
              <ul
                *dropdownMenu
                class="dropdown-menu"
                [ngClass]="{ 'dropdown-menu-right-grid': isDropDownPlacedRight(column) }"
                (click)="$event.stopPropagation()"
              >
                <li class="data-grid__dropdown">
                  <ng-container
                    *ngIf="
                      [
                        {
                          column: column,
                          dropdown: dropdown
                        }
                      ] | map: getFilteringFormRendererSpec:this as filteringFormRendererSpec
                    "
                  >
                    <c8y-filtering-form-renderer
                      [spec]="filteringFormRendererSpec"
                    ></c8y-filtering-form-renderer>
                  </ng-container>
                </li>
              </ul>
            </div>

            <button
              *ngIf="column.sortable"
              class="btn-sort"
              title="{{ 'Sort' | translate }}"
              (click)="changeSortOrder(column.name)"
            >
              <ng-container [ngSwitch]="column.sortOrder">
                <i *ngSwitchCase="'asc'" c8yIcon="long-arrow-up"></i>
                <i *ngSwitchCase="'desc'" c8yIcon="long-arrow-down"></i>
                <i *ngSwitchDefault c8yIcon="exchange"></i>
              </ng-container>
            </button>

            <span
              *ngIf="column.resizable"
              class="resize-handle"
              (mousedown)="
                resizeHandleMouseDown$.emit({ event: $event, targetColumnName: column.name })
              "
            ></span>
          </th>

          <td
            cdk-cell
            *cdkCellDef="let row"
            [ngClass]="column.cellCSSClassName"
            [attr.data-cell-title]="column.header | translate"
            [attr.data-type]="column.dataType"
            [class.hidden]="!column.visible"
          >
            <ng-container
              *ngIf="
                [
                  {
                    value: resolveCellValue(row, column.path),
                    row: row,
                    columnName: column.name
                  }
                ] | map: getCellRendererSpec:this as cellRendererSpec
              "
            >
              <c8y-cell-renderer [spec]="cellRendererSpec"></c8y-cell-renderer>
            </ng-container>
          </td>
        </ng-container>
      </ng-container>
    </ng-container>

    <ng-container cdkColumnDef="infiniteScrollFooter">
      <td cdk-footer-cell *cdkFooterCellDef [style.grid-column]="styles.gridInfiniteScrollColumn">
        <template #infiniteScrollContainer></template>
      </td>
    </ng-container>

    <tr cdk-header-row *cdkHeaderRowDef="columnNames"></tr>

    <tr
      cdk-row
      *cdkRowDef="let row; columns: columnNames"
      (mouseover)="rowMouseOver.emit(row)"
      (mouseleave)="rowMouseLeave.emit(row)"
      (click)="rowClick.emit(row)"
    ></tr>

    <ng-container>
      <tr
        [ngClass]="{ hidden: !infiniteScroll }"
        cdk-footer-row
        *cdkFooterRowDef="['infiniteScrollFooter']"
      ></tr>
    </ng-container>
  </table>

  <div
    class="row m-0 p-t-40 p-b-40"
    *ngIf="!(dataSource.loading$ | async) && (dataSource.stats$ | async).filteredSize === 0"
  >
    <div class="col-md-4 col-md-offset-4">
      <ng-content select="c8y-ui-empty-state, .c8y-empty-state"></ng-content>
    </div>
  </div>

  <div *ngIf="pagination && !infiniteScroll" class="table-data-grid-footer separator large-padding">
    <div class="col-sm-4 no-gutter">
      <div *ngIf="(dataSource.stats$ | async).currentPageSize > 0" class="counter">
        <span class="text-muted" ngNonBindable translate [translateParams]="paginationLabelParams">
          {{ pageFirstItemIdx }} - {{ pageLastItemIdx }} of {{ itemsTotal }}
        </span>
      </div>
    </div>

    <div class="col-sm-4 no-gutter text-center">
      <div
        *ngIf="(dataSource.stats$ | async).filteredSize > minPossiblePageSize"
        class="form-group form-inline"
      >
        <label class="m-r-4">{{ 'Items per page' | translate }}</label>
        <div class="c8y-select-wrapper">
          <select
            class="form-control"
            [ngModel]="pagination.pageSize"
            (ngModelChange)="
              updatePagination({ itemsPerPage: $event, page: pagination.currentPage })
            "
          >
            <option *ngFor="let pageSize of possiblePageSizes" [ngValue]="pageSize">
              {{ pageSize }}
            </option>
          </select>
        </div>
      </div>
    </div>

    <div class="col-sm-4 no-gutter text-right">
      <pagination
        *ngIf="(dataSource.stats$ | async).filteredSize > 0"
        [class.hidden]="hidePagination$ | async"
        [ngModel]="pagination.currentPage"
        (pageChanged)="updatePagination($event)"
        [totalItems]="(dataSource.stats$ | async).filteredSize"
        [itemsPerPage]="pagination.pageSize"
        (numPages)="totalPagesCount$.next($event)"
        [maxSize]="5"
        [boundaryLinks]="false"
        previousText=" "
        nextText=" "
      ></pagination>
    </div>
  </div>
</div>