@c8y/tutorial 1019.24.2 → 1020.0.4

package/src/for-of-directive/for-of-example.component.ts

@@ -13,19 +13,33 @@ import { map, tap } from 'rxjs/operators';
 export class ForOfExampleComponent {
   devices: IResultList<IManagedObject>;
   filterPipe: ForOfFilterPipe = pipe(tap());
+  config = {
+    loadMore: 'auto',
+    filter: '',
+    pageSize: 10,
+    maxIterations: 12
+  };
 
-  constructor(private inventoryService: InventoryService) {
+  constructor(private inventoryService: InventoryService) {}
+
+  ngOnInit(): void {
     this.loadDevices();
   }
 
   async loadDevices() {
     this.devices = await this.inventoryService.list({
-      pageSize: 10,
+      pageSize: this.config.pageSize,
       withTotalPages: true,
-      fragmentType: 'c8y_IsDevice'
+      fragmentType: 'c8y_IsDevice',
+      currentPage: 1
     });
   }
 
+  async reload() {
+    await this.loadDevices();
+    this.setPipe(this.config.filter);
+  }
+
   setPipe(filterStr: string) {
     this.filterPipe = pipe(
       map((data: []) => {

package/src/grids/async-expandable-rows-grid-example/async-expandable-rows-example.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-async-expandable-row-example',
+  template: `<div id="{{ context.id }}">Context ID: {{ context.id }}</div>`,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class AsyncExpandableRowsComponent implements OnInit {
+  @Input() context: any;
+  @Input() asyncRenderSuccess: () => void;
+  @Input() asyncRenderFail: () => void;
+
+  ngOnInit() {
+    // simulate async data loading with a timeout
+    setTimeout(() => {
+      this.asyncRenderSuccess();
+    }, 2000);
+  }
+}

package/src/grids/async-expandable-rows-grid-example/async-expandable-rows-grid-example.component.html

@@ -0,0 +1,28 @@
+<c8y-title>Data grid examples - asynchronous expandable rows</c8y-title>
+
+<c8y-data-grid
+  class="content-fullpage d-flex d-col border-top border-bottom"
+  [title]="title"
+  [columns]="columns"
+  [displayOptions]="displayOptions"
+  [rows]="data"
+  [pagination]="pagination"
+  [selectable]="selectable"
+  [expandableRows]="'ASYNC'"
+  (itemsSelect)="onItemsSelect($event)"
+  [actionControls]="actionControls"
+>
+  <div
+    *c8yExpandableRow="
+      let context;
+      let asyncRenderSuccess = asyncRenderSuccess;
+      let asyncRenderFail = asyncRenderFail
+    "
+  >
+    <c8y-async-expandable-row-example
+      [context]="context"
+      [asyncRenderSuccess]="asyncRenderSuccess"
+      [asyncRenderFail]="asyncRenderFail"
+    ></c8y-async-expandable-row-example>
+  </div>
+</c8y-data-grid>

package/src/grids/async-expandable-rows-grid-example/async-expandable-rows-grid-example.component.ts

@@ -0,0 +1,91 @@
+import { Component, OnInit } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ActionControl, DisplayOptions, Column, CoreModule, Pagination } from '@c8y/ngx-components';
+import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
+import { getData } from '../client-grid-example/data';
+import { AsyncExpandableRowsComponent } from './async-expandable-rows-example.component';
+import { ContextDashboardModule } from '@c8y/ngx-components/context-dashboard';
+
+@Component({
+  selector: 'c8y-async-expandable-rows-grid-example',
+  templateUrl: './async-expandable-rows-grid-example.component.html',
+  standalone: true,
+  imports: [
+    CoreModule,
+    DeviceGridModule,
+    RouterModule,
+    AsyncExpandableRowsComponent,
+    ContextDashboardModule
+  ]
+})
+export class AsyncExpandableRowsGridComponent implements OnInit {
+  /** This will be used as a title for the data grid. */
+  title = 'Devices';
+
+  displayOptions: DisplayOptions = {
+    bordered: false,
+    striped: true,
+    filter: true,
+    gridHeader: true,
+    hover: false
+  };
+  columns: Column[] = [
+    {
+      name: 'id',
+      header: 'ID',
+      path: 'id',
+      filterable: true
+    },
+    {
+      name: 'name',
+      header: 'Name',
+      path: 'name',
+      filterable: true
+    },
+    {
+      name: 'type',
+      header: 'Type',
+      path: 'type',
+      filterable: true
+    },
+    {
+      name: 'creationTime',
+      header: 'Creation time',
+      path: 'creationTime',
+      filterable: true
+    },
+    {
+      name: 'lastUpdated',
+      header: 'Last updated',
+      path: 'lastUpdated',
+      filterable: true
+    },
+    {
+      name: 'owner',
+      header: 'Owner',
+      path: 'owner',
+      filterable: true
+    }
+  ];
+  actionControls: ActionControl[] = [];
+  pagination: Pagination = {
+    pageSize: 30,
+    currentPage: 1
+  };
+  selectable = true;
+  data: any[];
+
+  ngOnInit() {
+    this.data = getData();
+  }
+
+  onItemsSelect(selectedItemIds) {
+    console.log('selected items:');
+    console.dir(selectedItemIds);
+  }
+
+  onFilter(filter) {
+    console.log('filter changed:');
+    console.log(filter);
+  }
+}

package/src/grids/async-expandable-rows-grid-example/async-expandable-rows-grid-example.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'grids/async-expandable-rows-grid-example',
+      loadComponent: () =>
+        import('./async-expandable-rows-grid-example.component').then(
+          m => m.AsyncExpandableRowsGridComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 5,
+        path: 'grids/async-expandable-rows-grid-example',
+        icon: 'table',
+        label: 'Asynchronous expandable rows grid',
+        parent: 'Data grid examples'
+      })
+    )
+  ]
+})
+export class AsyncExpandableRowsGridExampleModule {}

package/src/grids/client-grid-example/client-grid-example.component.html

@@ -13,4 +13,5 @@
   (onFilter)="onFilter($event)"
   (onAddCustomColumn)="onAddCustomColumn($event)"
   (onRemoveCustomColumn)="onRemoveCustomColumn($event)"
+  class="content-fullpage d-flex d-col border-top border-bottom"
 ></c8y-data-grid>

package/src/grids/device-grid-example/device-grid-example.component.html

@@ -26,4 +26,5 @@
   [actionControls]="[]"
   (onColumnsChange)="onColumnsChange($event)"
   (onDeviceQueryStringChange)="onDeviceQueryStringChange($event)"
+  class="content-fullpage d-flex d-col border-top border-bottom"
 ></c8y-device-grid>

package/src/grids/empty-grid-example/empty-grid-example.component.html

@@ -4,6 +4,7 @@
   [title]="title"
   [columns]="columns"
   [actionControls]="actionControls"
+  class="content-fullpage d-flex d-col border-top border-bottom"
 >
   <c8y-ui-empty-state
     icon="search"

package/src/grids/expandable-rows-grid-example/expandable-rows-example.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-expandable-row-example',
+  template: `<div id="{{ context.id }}">Context ID: {{ context.id }}</div>`,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class ExpandableRowsComponent {
+  @Input() context: any;
+}

package/src/grids/expandable-rows-grid-example/expandable-rows-grid-example.component.html

@@ -0,0 +1,18 @@
+<c8y-title>Data grid examples</c8y-title>
+
+<c8y-data-grid
+  [title]="title"
+  [columns]="columns"
+  [displayOptions]="displayOptions"
+  [rows]="data"
+  [pagination]="pagination"
+  [selectable]="selectable"
+  [expandableRows]="true"
+  (itemsSelect)="onItemsSelect($event)"
+  [actionControls]="actionControls"
+  class="content-fullpage d-flex d-col border-top border-bottom"
+>
+  <div *c8yExpandableRow="let context">
+    <c8y-expandable-row-example [context]="context"></c8y-expandable-row-example>
+  </div>
+</c8y-data-grid>

package/src/grids/expandable-rows-grid-example/expandable-rows-grid-example.component.ts

@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ActionControl, DisplayOptions, Column, CoreModule, Pagination } from '@c8y/ngx-components';
+import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
+import { getData } from '../client-grid-example/data';
+import { ExpandableRowsComponent } from './expandable-rows-example.component';
+
+@Component({
+  selector: 'c8y-expandable-rows-grid-example',
+  templateUrl: './expandable-rows-grid-example.component.html',
+  standalone: true,
+  imports: [CoreModule, DeviceGridModule, RouterModule, ExpandableRowsComponent]
+})
+export class ExpandableRowsGridComponent implements OnInit {
+  /** This will be used as a title for the data grid. */
+  title = 'Devices';
+
+  displayOptions: DisplayOptions = {
+    bordered: false,
+    striped: true,
+    filter: true,
+    gridHeader: true,
+    hover: false
+  };
+  columns: Column[] = [
+    {
+      name: 'id',
+      header: 'ID',
+      path: 'id',
+      filterable: true
+    },
+    {
+      name: 'name',
+      header: 'Name',
+      path: 'name',
+      filterable: true
+    },
+    {
+      name: 'type',
+      header: 'Type',
+      path: 'type',
+      filterable: true
+    },
+    {
+      name: 'creationTime',
+      header: 'Creation time',
+      path: 'creationTime',
+      filterable: true
+    },
+    {
+      name: 'lastUpdated',
+      header: 'Last updated',
+      path: 'lastUpdated',
+      filterable: true
+    },
+    {
+      name: 'owner',
+      header: 'Owner',
+      path: 'owner',
+      filterable: true
+    }
+  ];
+  actionControls: ActionControl[] = [];
+  pagination: Pagination = {
+    pageSize: 30,
+    currentPage: 1
+  };
+  selectable = true;
+  data: any[];
+
+  ngOnInit() {
+    this.data = getData();
+  }
+
+  onItemsSelect(selectedItemIds) {
+    console.log('selected items:');
+    console.dir(selectedItemIds);
+  }
+
+  onFilter(filter) {
+    console.log('filter changed:');
+    console.log(filter);
+  }
+}

package/src/grids/expandable-rows-grid-example/expandable-rows-grid-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'grids/expandable-rows-grid-example',
+      loadComponent: () =>
+        import('./expandable-rows-grid-example.component').then(m => m.ExpandableRowsGridComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 5,
+        path: 'grids/expandable-rows-grid-example',
+        icon: 'table',
+        label: 'Expandable rows grid',
+        parent: 'Data grid examples'
+      })
+    )
+  ]
+})
+export class ExpandableRowsGridExampleModule {}

package/src/grids/server-grid-example/server-grid-example.component.html

@@ -16,6 +16,7 @@
   (itemsSelect)="onItemsSelect($event)"
   [bulkActionControls]="bulkActionControls"
   (onConfigChange)="onConfigChange($event)"
+  class="content-fullpage d-flex d-col border-top border-bottom"
 >
   <c8y-ui-empty-state
     [icon]="'search'"

package/src/grids/server-grid-example/server-grid-example.component.ts

@@ -62,7 +62,8 @@ export class ServerGridExampleComponent implements GridConfigContextProvider {
     bordered: true,
     striped: true,
     filter: true,
-    gridHeader: true
+    gridHeader: true,
+    hover: true
   };
 
   columns: Column[] = this.service.getColumns();

package/src/grids/sync-expandable-rows-grid-example/sync-expandable-rows-example.component.ts

@@ -0,0 +1,12 @@
+import { Component, Input } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-sync-expandable-row-example',
+  template: `<div id="{{ context.id }}">Context ID: {{ context.id }}</div>`,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class SyncExpandableRowsComponent {
+  @Input() context: any;
+}

package/src/grids/sync-expandable-rows-grid-example/sync-expandable-rows-grid-example.component.html

@@ -0,0 +1,18 @@
+<c8y-title>Data grid examples - synchronous expandable rows</c8y-title>
+
+<c8y-data-grid
+  class="content-fullpage d-flex d-col border-top border-bottom"
+  [title]="title"
+  [columns]="columns"
+  [displayOptions]="displayOptions"
+  [rows]="data"
+  [pagination]="pagination"
+  [selectable]="selectable"
+  [expandableRows]="'SYNC'"
+  (itemsSelect)="onItemsSelect($event)"
+  [actionControls]="actionControls"
+>
+  <div *c8yExpandableRow="let context">
+    <c8y-sync-expandable-row-example [context]="context"></c8y-sync-expandable-row-example>
+  </div>
+</c8y-data-grid>

package/src/grids/sync-expandable-rows-grid-example/sync-expandable-rows-grid-example.component.ts

@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ActionControl, DisplayOptions, Column, CoreModule, Pagination } from '@c8y/ngx-components';
+import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
+import { getData } from '../client-grid-example/data';
+import { SyncExpandableRowsComponent } from './sync-expandable-rows-example.component';
+
+@Component({
+  selector: 'c8y-sync-expandable-rows-grid-example',
+  templateUrl: './sync-expandable-rows-grid-example.component.html',
+  standalone: true,
+  imports: [CoreModule, DeviceGridModule, RouterModule, SyncExpandableRowsComponent]
+})
+export class SyncExpandableRowsGridComponent implements OnInit {
+  /** This will be used as a title for the data grid. */
+  title = 'Devices';
+
+  displayOptions: DisplayOptions = {
+    bordered: false,
+    striped: true,
+    filter: true,
+    gridHeader: true,
+    hover: false
+  };
+  columns: Column[] = [
+    {
+      name: 'id',
+      header: 'ID',
+      path: 'id',
+      filterable: true
+    },
+    {
+      name: 'name',
+      header: 'Name',
+      path: 'name',
+      filterable: true
+    },
+    {
+      name: 'type',
+      header: 'Type',
+      path: 'type',
+      filterable: true
+    },
+    {
+      name: 'creationTime',
+      header: 'Creation time',
+      path: 'creationTime',
+      filterable: true
+    },
+    {
+      name: 'lastUpdated',
+      header: 'Last updated',
+      path: 'lastUpdated',
+      filterable: true
+    },
+    {
+      name: 'owner',
+      header: 'Owner',
+      path: 'owner',
+      filterable: true
+    }
+  ];
+  actionControls: ActionControl[] = [];
+  pagination: Pagination = {
+    pageSize: 30,
+    currentPage: 1
+  };
+  selectable = true;
+  data: any[];
+
+  ngOnInit() {
+    this.data = getData();
+  }
+
+  onItemsSelect(selectedItemIds) {
+    console.log('selected items:');
+    console.dir(selectedItemIds);
+  }
+
+  onFilter(filter) {
+    console.log('filter changed:');
+    console.log(filter);
+  }
+}

package/src/grids/sync-expandable-rows-grid-example/sync-expandable-rows-grid-example.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'grids/sync-expandable-rows-grid-example',
+      loadComponent: () =>
+        import('./sync-expandable-rows-grid-example.component').then(
+          m => m.SyncExpandableRowsGridComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 5,
+        path: 'grids/sync-expandable-rows-grid-example',
+        icon: 'table',
+        label: 'Synchronous expandable rows grid',
+        parent: 'Data grid examples'
+      })
+    )
+  ]
+})
+export class SyncExpandableRowsGridExampleModule {}

package/src/hooks/navigator-route/navigator-route.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { NavigatorNode, NavigatorNodeData, hookNavigator, hookRoute } from '@c8y/ngx-components';
 
 export const hooks = [
   hookRoute({
@@ -13,7 +13,7 @@ export const hooks = [
       icon: 'navigation',
       label: 'Navigator-route',
       parent: 'Hooks'
-    })
+    } as NavigatorNodeData)
   )
 ];
 

package/src/hooks/tabs/tab.ts

@@ -18,7 +18,7 @@ export class ExampleTabFactory implements TabFactory {
      * but these tabs should only displayed if the URL matches
      * something like: .../apps/tutorial-application/#/world/
      */
-    if (this.router.url.match(/tabs/g)) {
+    if (this.router.url.match(/\/tabs/g)) {
       /**
        * mandatory for a Tab is the path (string) and the label (string)
        * A click on the tab will load the given path and therefore angular loads the

package/src/list/list/list-check/list-check.component.html

@@ -1,35 +1,47 @@
 <c8y-title>List example</c8y-title>
 
 <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 devices; loadMore: 'show'"
-    #li
-  >
+  <c8y-li class="page-sticky-header">
     <c8y-li-checkbox
-      [selected]="checkAll"
-      (onSelect)="updateSelected($event, device)"
-      (click)="$event.stopPropagation()"
+      (onSelect)="checkAll($event)"
+      [indeterminate]="isIndeterminate$ | async"
     ></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
-      icon="times"
-      (click)="deleteDevice(device.id)"
-    >
-      Delete
-    </c8y-li-action>
-    <c8y-li-collapse>
-      id:
-      <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
-    </c8y-li-collapse>
+    <c8y-li-icon
+      [icon]="'file'"
+      style="opacity: 0"
+    ></c8y-li-icon>
+    <span>Devices</span>
   </c8y-li>
+  <ng-template
+    c8yFor
+    let-device
+    [c8yForOf]="devices"
+    [c8yForLoadMore]="'show'"
+    (c8yForChange)="itemsChange($event)"
+  >
+    <c8y-li #li>
+      <c8y-li-checkbox
+        [selected]="isSelected(device)"
+        (onSelect)="updateSelected($event, device)"
+        (click)="$event.stopPropagation()"
+      ></c8y-li-checkbox>
+      <c8y-li-icon [icon]="'exchange'"></c8y-li-icon>
+      <button
+        class="btn-clean"
+        (click)="li.collapsed = !li.collapsed"
+      >
+        {{ device.name || '-' }} {{ totalLoaded }}
+      </button>
+      <c8y-li-action
+        icon="delete"
+        (click)="deleteDevice(device.id)"
+      >
+        Delete
+      </c8y-li-action>
+      <c8y-li-collapse>
+        id:
+        <a [routerLink]="['/device', device.id]">{{ device.id }}</a>
+      </c8y-li-collapse>
+    </c8y-li>
+  </ng-template>
 </c8y-list-group>