@c8y/apps/tutorial/list/list-virtual-scroll.component.html

Cumulocity IoT applications

<c8y-title>List example</c8y-title>

<c8y-action-bar-item itemClass="navbar-form">
  <div class="input-group input-group-search">
    <input
      title="{{ 'Filter' }}"
      type="search"
      class="form-control"
      placeholder="Filter…"
      (change)="setPipe($event.target.value)"
    />
    <span class="input-group-addon">
      <i c8yIcon="search"></i>
    </span>
  </div>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
  <a class="btn btn-link" (click)="stepperService.modalCreateDevice()">
    <i c8yIcon="plus-square"></i> {{ 'Create device' }}
  </a>
</c8y-action-bar-item>

<div class="row m-b-16">
  <div class="col-xs-6">
    <ng-container *ngIf="selected.id">
      Selected: {{ selected.name }}, ID: {{ selected.id }}
    </ng-container>
  </div>
</div>

<div class="m-b-16">
  {{ 'Create new device' }}:
  <input #deviceName />
  <button type="button" (click)="addDevice(deviceName.value)">
    <i [c8yIcon]="'plus-circle'"></i>
  </button>
</div>

<div class="row">
  <div class="col-xs-6">
    <p>
      This column presents c8yFor directive with virtual scroll enabled and default strategy.
      It renders items based of window's scroll position.
    </p>
    <c8y-list-group>
      <c8y-li-timeline
        *c8yFor="
          let device of devices;
          let i = index;
          pipe: filterPipe;
          notFound: this.pattern ? resetFilter : undefined;
          enableVirtualScroll: true;
          virtualScrollElementSize: 68;
        "
      >
        {{ device.creationTime | date }}
        <c8y-li>
          <c8y-li-radio (onSelect)="updateSelected($event, device)"></c8y-li-radio>
          <c8y-li-icon [icon]="'rocket'"></c8y-li-icon>
          {{ i + 1 }}. {{ device.name || '-' }}
          <c8y-li-footer>
            Device id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
            {{ device.creationTime }}
          </c8y-li-footer>

          <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
            Delete
          </c8y-li-action>
          <c8y-li-action (click)="(false)" icon="rocket">
            Launch to space
          </c8y-li-action>
        </c8y-li>
      </c8y-li-timeline>
    </c8y-list-group>

    <ng-template #resetFilter>
      <c8y-li class="p-8 text-center">
        <p>
          <span>No more entries found for filter:</span>&nbsp;<strong>{{ pattern }}</strong>
        </p>

        <button class="btn btn-primary btn-xs m-t-8" (click)="pattern = ''; setPipe('')">
          Reset filter
        </button>
      </c8y-li>
    </ng-template>
  </div>
  <div class="col-xs-6">
    <c8y-range>
      <input
        id="range"
        type="range"
        min="0"
        max="10000"
        step="100"
        [(ngModel)]="dataMultiplier"
        (ngModelChange)="loadDevicesContainerStrategy()">
    </c8y-range>
    <p>
      This column presents c8yFor directive with
      virtual scroll enabled and container strategy.
      It displays items inside scrollable container,
      and rendering is based on this container scroll position.
      You can use above range selector to increase size of data, to check
      how performance is affected.
    </p>
    <p>
      number of loaded objects: {{ devicesContainerStrategy?.data?.length }}
    </p>
    <c8y-list-group>
      <c8y-li>
        <c8y-li-checkbox (onSelect)="checkAll = $event"></c8y-li-checkbox>
        <label>All devices</label>
      </c8y-li>
      <c8y-li
        *c8yFor="let device of devicesContainerStrategy;
        loadMore: 'show';
        enableVirtualScroll: true;
        virtualScrollElementSize: 40;
        virtualScrollStrategy: 'fixed';
        virtualScrollContainerHeight: 400"
        #li
      >
        <c8y-li-checkbox
          [selected]="checkAll"
          (onSelect)="updateSelected($event, device)"
          (click)="$event.stopPropagation()"
        ></c8y-li-checkbox>
        <c8y-li-icon [icon]="'file'"></c8y-li-icon>
        <button class="btn-clean" (click)="li.collapsed = !li.collapsed">
          {{ device.name || '-' }}
        </button>
        <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
          Delete
        </c8y-li-action>
        <c8y-li-collapse>
          id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
        </c8y-li-collapse>
      </c8y-li>
    </c8y-list-group>

    <hr/>


    <label
      class="c8y-checkbox"
      title="Enable basic c8yFor with same number of elements as above:"
    >
      <input
        type="checkbox"
        [(ngModel)]="enableBasicList"
      />
      <span></span>
      <span>Enable basic (non virtual scroll) c8yFor with same number of elements as above (this might crash Your browser if input data is big):</span>
    </label>

    <c8y-list-group *ngIf="enableBasicList">
      <c8y-li>
        <c8y-li-checkbox (onSelect)="checkAll = $event"></c8y-li-checkbox>
        <label>All devices</label>
      </c8y-li>
      <c8y-li
        *c8yFor="let device of devicesContainerStrategy;"
        #li
      >
        <c8y-li-checkbox
          [selected]="checkAll"
          (onSelect)="updateSelected($event, device)"
          (click)="$event.stopPropagation()"
        ></c8y-li-checkbox>
        <c8y-li-icon [icon]="'file'"></c8y-li-icon>
        <button class="btn-clean" (click)="li.collapsed = !li.collapsed">
          {{ device.name || '-' }}
        </button>
        <c8y-li-action (click)="deleteDevice(device.id)" icon="times">
          Delete
        </c8y-li-action>
        <c8y-li-collapse>
          id: <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
        </c8y-li-collapse>
      </c8y-li>
    </c8y-list-group>

  </div>
</div>