@c8y/tutorial 1019.24.6 → 1020.0.8

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

@@ -1,19 +1,86 @@
 <c8y-title>For of directive</c8y-title>
 
-<div class="input-group input-group-search">
-  <input
-    class="form-control"
-    title="{{ 'Filter' }}"
-    placeholder="Filter…"
-    type="search"
-    (keyup)="setPipe($event.target.value)"
-  />
-  <span class="input-group-addon">
-    <i c8yIcon="search"></i>
-  </span>
-</div>
-<!-- important -->
-<div *c8yFor="let device of devices; loadMore: 'show'; let i = index; pipe: filterPipe">
-  {{ i + 1 }}. {{ device.name }}
+<div class="row d-flex-sm">
+  <div class="col-sm-3 p-0">
+    <div class="d-col p-t-8 p-l-16 p-b-16 p-r-16 form-group-sm bg-level-1">
+      <p class="text-medium p-b-16">Config options</p>
+
+      <div class="form-group">
+        <label for="filterInput">Filter pipe</label>
+        <input
+          class="form-control"
+          id="filterInput"
+          placeholder="Enter a known device…"
+          type="text"
+          [(ngModel)]="config.filter"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="pageSizeInput">Page size</label>
+        <input
+          class="form-control"
+          id="pageSizeInput"
+          type="number"
+          [(ngModel)]="config.pageSize"
+          min="1"
+          max="2000"
+        />
+      </div>
+
+      <div class="form-group">
+        <label for="maxIterations">Max iterations</label>
+        <input
+          class="form-control"
+          id="maxIterations"
+          type="number"
+          [(ngModel)]="config.maxIterations"
+          min="1"
+        />
+      </div>
+
+      <div class="form-group">
+        <label>Load more option:</label>
+        <div class="c8y-select-wrapper">
+          <select
+            class="form-control"
+            type="text"
+            [(ngModel)]="config.loadMore"
+          >
+            <option value="auto">auto - automatically load more items</option>
+            <option value="show">show - show a button to load more items.</option>
+            <option value="hidden">none - hidden and not loading more items</option>
+            <option value="hidden">hidden - hidden but loading more items</option>
+          </select>
+        </div>
+      </div>
+
+      <button
+        class="btn btn-primary"
+        (click)="reload()"
+      >
+        Apply
+      </button>
+    </div>
+  </div>
+  <div class="col-sm-9">
+    <p class="text-medium p-t-8">Preview</p>
+    <div class="card m-t-16">
+      <div class="card-block d-flex d-col p-0">
+        <!-- important -->
+        <div
+          *c8yFor="
+            let device of devices;
+            let i = index;
+            loadMore: config.loadMore;
+            pipe: filterPipe;
+            maxIterations: config.maxIterations;
+          "
+        >
+          {{ i + 1 }}. {{ device.name }}
+        </div>
+        <!-- /important -->
+      </div>
+    </div>
+  </div>
 </div>
-<!-- /important -->

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