@c8y/tutorial 1019.0.3

package/src/lazy/index.ts

@@ -0,0 +1 @@
+export * from './lazy-routing.module';

package/src/lazy/lazy-loaded.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { ComponentTwo } from './component-two.component';
+import { ComponentOne } from './component-one.component';
+
+const routes: Routes = [
+  {
+    path: 'one',
+    component: ComponentOne
+  },
+  {
+    path: 'two',
+    component: ComponentTwo
+  }
+];
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild(routes)]
+})
+export class LazyLoadedModule {}

package/src/lazy/lazy-routing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule as NgCommonModule } from '@angular/common';
+import { RouterModule, Routes } from '@angular/router';
+import { CoreModule } from '@c8y/ngx-components';
+import { hooks as lazyHooks } from './lazy.hooks';
+
+/**
+ * Angular Routes.
+ * Within this array at least path (url) and components are linked.
+ */
+const routes: Routes = [
+  {
+    path: 'lazy',
+    loadChildren: () => import('./lazy-loaded.module').then(m => m.LazyLoadedModule)
+  }
+];
+@NgModule({
+  imports: [NgCommonModule, RouterModule.forChild(routes), CoreModule],
+  providers: [...lazyHooks]
+})
+export class LazyRoutingModule {}

package/src/lazy/lazy.hooks.ts

@@ -0,0 +1,24 @@
+import { NavigatorNode, hookNavigator } from '@c8y/ngx-components';
+
+const root = new NavigatorNode({
+  label: 'Lazy loaded',
+  icon: 'hourglass-start'
+});
+
+root.add(
+  new NavigatorNode({
+    path: '/lazy/one',
+    label: 'One',
+    icon: 'thermometer'
+  })
+);
+
+root.add(
+  new NavigatorNode({
+    path: '/lazy/two',
+    label: 'Two',
+    icon: 'thermometer-3'
+  })
+);
+
+export const hooks = [hookNavigator(root)];

package/src/lazy-widget/index.ts

@@ -0,0 +1 @@
+export * from './lazy-widget.module';

package/src/lazy-widget/lazy-widget-config/index.ts

@@ -0,0 +1 @@
+export * from './lazy-widget-config.component';

package/src/lazy-widget/lazy-widget-config/lazy-widget-config.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'tutorial-lazy-widget-config',
+  template: `<p>This widget's configuration component/module is only loaded when needed.</p>`,
+  standalone: true,
+  imports: [CommonModule]
+})
+export class LazyWidgetConfigComponent {}

package/src/lazy-widget/lazy-widget-view/index.ts

@@ -0,0 +1 @@
+export * from './lazy-widget-view.component';

package/src/lazy-widget/lazy-widget-view/lazy-widget-view.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'tutorial-lazy-widget-view',
+  template: `<p>This widget's view component/module is only loaded when needed.</p>`,
+  standalone: true,
+  imports: [CommonModule]
+})
+export class LazyWidgetViewComponent {}

package/src/lazy-widget/lazy-widget.module.ts

@@ -0,0 +1,27 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { hookComponent } from '@c8y/ngx-components';
+
+async function loadViewComponent() {
+  const { LazyWidgetViewComponent } = await import('./lazy-widget-view');
+  return LazyWidgetViewComponent;
+}
+
+async function loadConfigComponent() {
+  const { LazyWidgetConfigComponent } = await import('./lazy-widget-config');
+  return LazyWidgetConfigComponent;
+}
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookComponent({
+      id: 'tutorial-lazy-widget',
+      label: 'Lazy Loaded Widget',
+      description: 'Lazy Loaded Widget',
+      loadComponent: loadViewComponent,
+      loadConfigComponent: loadConfigComponent
+    })
+  ]
+})
+export class LazyWidgetModule {}

package/src/list/index.ts

@@ -0,0 +1 @@
+export * from './lists.module';

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

@@ -0,0 +1,35 @@
+<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-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
+      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>
+</c8y-list-group>

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

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
+import { CoreModule } from '@c8y/ngx-components';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'list-check',
+  templateUrl: './list-check.component.html',
+  standalone: true,
+  imports: [CoreModule, RouterModule]
+})
+export class ListCheckComponent {
+  devices: IResultList<IManagedObject>;
+  selected = { id: null, name: '' };
+  checkAll;
+
+  // The filter object will add query parameters
+  // to the request which is made by the service.
+  private filter: object = {
+    fragmentType: 'c8y_IsDevice',
+    // paging information will be a part of the response now
+    withTotalPages: true,
+    pageSize: 10
+  };
+
+  constructor(public inventory: InventoryService) {
+    this.loadDevices();
+  }
+
+  // Promise-based usage of InventoryService.
+  async loadDevices() {
+    this.devices = await this.inventory.list(this.filter);
+  }
+
+  // Delete a managedObject (as device) with given id from database.
+  async deleteDevice(id: string) {
+    if (id && id.length > 0) {
+      await this.inventory.delete(id);
+      this.loadDevices();
+    }
+  }
+
+  // triggered if a device is selected
+  updateSelected(checked, device) {
+    console.log(checked, device);
+  }
+}

package/src/list/list/list-check/list-check.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'lists/list-check',
+      loadComponent: () => import('./list-check.component').then(m => m.ListCheckComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Basic list with checkboxes',
+        path: 'lists/list-check',
+        parent: 'Lists'
+      })
+    )
+  ]
+})
+export class ListCheckModule {}

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

@@ -0,0 +1,30 @@
+<c8y-title>List example</c8y-title>
+
+<c8y-list-group class="m-t-16">
+  <c8y-li-timeline *c8yFor="let device of devices; let i = index">
+    {{ 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
+        icon="times"
+        (click)="deleteDevice(device.id)"
+      >
+        Delete
+      </c8y-li-action>
+      <c8y-li-action
+        icon="rocket"
+        (click)="(false)"
+      >
+        Launch to space
+      </c8y-li-action>
+    </c8y-li>
+  </c8y-li-timeline>
+</c8y-list-group>

package/src/list/list/list-timeline/list-timeline.component.ts

@@ -0,0 +1,46 @@
+import { Component } from '@angular/core';
+import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
+import { CoreModule } from '@c8y/ngx-components';
+import { RouterModule } from '@angular/router';
+
+@Component({
+  selector: 'list-timeline',
+  templateUrl: './list-timeline.component.html',
+  standalone: true,
+  imports: [CoreModule, RouterModule]
+})
+export class ListTimelineComponent {
+  devices: IResultList<IManagedObject>;
+  selected = { id: null, name: '' };
+
+  // The filter object will add query parameters
+  // to the request which is made by the service.
+  private filter: object = {
+    fragmentType: 'c8y_IsDevice',
+    // paging information will be a part of the response now
+    withTotalPages: true,
+    pageSize: 10
+  };
+
+  constructor(public inventory: InventoryService) {
+    this.loadDevices();
+  }
+
+  // Promise-based usage of InventoryService.
+  async loadDevices() {
+    this.devices = await this.inventory.list(this.filter);
+  }
+
+  // Delete a managedObject (as device) with given id from database.
+  async deleteDevice(id: string) {
+    if (id && id.length > 0) {
+      await this.inventory.delete(id);
+      this.loadDevices();
+    }
+  }
+
+  // triggered if a device is selected
+  updateSelected(checked, device) {
+    console.log(checked, device);
+  }
+}

package/src/list/list/list-timeline/list-timeline.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'lists/list-timeline',
+      loadComponent: () => import('./list-timeline.component').then(m => m.ListTimelineComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Basic list with timeline',
+        path: 'lists/list-timeline',
+        parent: 'Lists'
+      })
+    )
+  ]
+})
+export class ListTimelineModule {}

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

@@ -0,0 +1,105 @@
+<c8y-title>List example</c8y-title>
+
+<c8y-range>
+  <input
+    id="range"
+    type="range"
+    min="0"
+    max="10000"
+    step="100"
+    [(ngModel)]="dataMultiplier"
+    (ngModelChange)="loadDevicesContainerStrategy()"
+  />
+</c8y-range>
+<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
+      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>
+</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
+      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>
+</c8y-list-group>

package/src/list/list-virtual-scroll/list-virtual-scroll-check/list-virtual-scroll-check.component.ts

@@ -0,0 +1,70 @@
+import { CoreModule, StepperService, throttle } from '@c8y/ngx-components';
+import { Component } from '@angular/core';
+import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
+import { RouterModule } from '@angular/router';
+
+/**
+ * The ListComponent shows how to generate a list.
+ */
+@Component({
+  selector: 'list-virtual-scroll-check',
+  templateUrl: './list-virtual-scroll-check.component.html',
+  standalone: true,
+  imports: [CoreModule, RouterModule],
+  providers: [StepperService]
+})
+export class ListVirtualScrollCheckComponent {
+  devices: IResultList<IManagedObject>;
+  devicesContainerStrategy: IResultList<IManagedObject>;
+  selected = { id: null, name: '' };
+  checkAll;
+  enableBasicList = false;
+  dataMultiplier = 1;
+
+  // The filter object will add query parameters
+  // to the request which is made by the service.
+  private filter: object = {
+    fragmentType: 'c8y_IsDevice',
+    // paging information will be a part of the response now
+    withTotalPages: true,
+    pageSize: 10
+  };
+
+  constructor(public inventory: InventoryService) {
+    this.loadDevices();
+    this.loadDevicesContainerStrategy();
+  }
+
+  // Promise-based usage of InventoryService.
+  async loadDevices() {
+    this.devices = await this.inventory.list(this.filter);
+  }
+
+  @throttle(500, { trailing: false })
+  async loadDevicesContainerStrategy() {
+    const filter: any = { ...this.filter };
+    filter.pageSize = 999999999;
+
+    const items = await this.inventory.list(filter);
+
+    // Let us simulate that we have very large amount of data to display:
+    const template = [...items.data];
+    while (items.data.length < this.dataMultiplier) {
+      items.data.push(...template);
+    }
+    this.devicesContainerStrategy = items;
+  }
+
+  // Delete a managedObject (as device) with given id from database.
+  async deleteDevice(id: string) {
+    if (id && id.length > 0) {
+      await this.inventory.delete(id);
+      this.loadDevices();
+    }
+  }
+
+  // triggered if a device is selected
+  updateSelected(checked, device) {
+    console.log(checked, device);
+  }
+}

package/src/list/list-virtual-scroll/list-virtual-scroll-check/list-virtual-scroll-check.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'lists/list-virtual-scroll-check',
+      loadComponent: () =>
+        import('./list-virtual-scroll-check.component').then(m => m.ListVirtualScrollCheckComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Virtual scroll with checkboxes',
+        path: 'lists/list-virtual-scroll-check',
+        parent: 'Lists'
+      })
+    )
+  ]
+})
+export class ListVirtualScrollCheckModule {}

package/src/list/list-virtual-scroll/list-virtual-scroll-timeline/list-virtual-scroll-timeline.component.html

@@ -0,0 +1,37 @@
+<c8y-title>List example</c8y-title>
+
+<c8y-list-group class="m-t-16">
+  <c8y-li-timeline
+    *c8yFor="
+      let device of devices;
+      let i = index;
+      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
+        icon="times"
+        (click)="deleteDevice(device.id)"
+      >
+        Delete
+      </c8y-li-action>
+      <c8y-li-action
+        icon="rocket"
+        (click)="(false)"
+      >
+        Launch to space
+      </c8y-li-action>
+    </c8y-li>
+  </c8y-li-timeline>
+</c8y-list-group>

package/src/list/list-virtual-scroll/list-virtual-scroll-timeline/list-virtual-scroll-timeline.component.ts

@@ -0,0 +1,69 @@
+import { CoreModule, StepperService, throttle } from '@c8y/ngx-components';
+import { Component } from '@angular/core';
+import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
+import { RouterModule } from '@angular/router';
+
+/**
+ * The ListComponent shows how to generate a list.
+ */
+@Component({
+  selector: 'list-virtual-scroll-timeline',
+  templateUrl: './list-virtual-scroll-timeline.component.html',
+  standalone: true,
+  imports: [CoreModule, RouterModule],
+  providers: [StepperService]
+})
+export class ListVirtualScrollTimelineComponent {
+  devices: IResultList<IManagedObject>;
+  devicesContainerStrategy: IResultList<IManagedObject>;
+  selected = { id: null, name: '' };
+  dataMultiplier = 1;
+
+  // The filter object will add query parameters
+  // to the request which is made by the service.
+  private filter: object = {
+    fragmentType: 'c8y_IsDevice',
+    // paging information will be a part of the response now
+    withTotalPages: true,
+    pageSize: 10
+  };
+
+  constructor(public inventory: InventoryService) {
+    // _ annotation to mark this string as translatable string.
+    this.loadDevices();
+    this.loadDevicesContainerStrategy();
+  }
+
+  // Promise-based usage of InventoryService.
+  async loadDevices() {
+    this.devices = await this.inventory.list(this.filter);
+  }
+
+  @throttle(500, { trailing: false })
+  async loadDevicesContainerStrategy() {
+    const filter: any = { ...this.filter };
+    filter.pageSize = 999999999;
+
+    const items = await this.inventory.list(filter);
+
+    // Let us simulate that we have very large amount of data to display:
+    const template = [...items.data];
+    while (items.data.length < this.dataMultiplier) {
+      items.data.push(...template);
+    }
+    this.devicesContainerStrategy = items;
+  }
+
+  // Delete a managedObject (as device) with given id from database.
+  async deleteDevice(id: string) {
+    if (id && id.length > 0) {
+      await this.inventory.delete(id);
+      this.loadDevices();
+    }
+  }
+
+  // triggered if a device is selected
+  updateSelected(checked, device) {
+    console.log(checked, device);
+  }
+}

package/src/list/list-virtual-scroll/list-virtual-scroll-timeline/list-virtual-scroll-timeline.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: 'lists/list-virtual-scroll-timeline',
+      loadComponent: () =>
+        import('./list-virtual-scroll-timeline.component').then(
+          m => m.ListVirtualScrollTimelineComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Virtual scroll with filter',
+        path: 'lists/list-virtual-scroll-timeline',
+        parent: 'Lists'
+      })
+    )
+  ]
+})
+export class ListVirtualScrollTimelineModule {}