@c8y/tutorial 1019.24.2 → 1020.0.4

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

@@ -2,17 +2,20 @@ import { Component } from '@angular/core';
 import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
 import { CoreModule } from '@c8y/ngx-components';
 import { RouterModule } from '@angular/router';
+import { BehaviorSubject, map } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { OnInit } from '@angular/core';
 
 @Component({
   selector: 'list-check',
   templateUrl: './list-check.component.html',
   standalone: true,
-  imports: [CoreModule, RouterModule]
+  imports: [CoreModule, RouterModule, CommonModule]
 })
-export class ListCheckComponent {
+export class ListCheckComponent implements OnInit {
   devices: IResultList<IManagedObject>;
-  selected = { id: null, name: '' };
-  checkAll;
+  loadedDevices: IManagedObject[] = [];
+  selected$: BehaviorSubject<IManagedObject[]> = new BehaviorSubject([]);
 
   // The filter object will add query parameters
   // to the request which is made by the service.
@@ -20,10 +23,37 @@ export class ListCheckComponent {
     fragmentType: 'c8y_IsDevice',
     // paging information will be a part of the response now
     withTotalPages: true,
-    pageSize: 10
+    pageSize: 10,
+    currentPage: 1
   };
 
-  constructor(public inventory: InventoryService) {
+  isIndeterminate$ = this.selected$.pipe(
+    map(selected => {
+      return !(selected.length === 0 || selected.length === this.loadedDevices.length);
+    })
+  );
+
+  constructor(public inventory: InventoryService) {}
+
+  itemsChange(newItems: IManagedObject[]) {
+    this.loadedDevices.push(...newItems);
+    // trigger the isIndeterminate$ observable
+    this.selected$.next([...this.selected$.value]);
+  }
+
+  checkAll(checked) {
+    if (!checked) {
+      this.selected$.next([]);
+      return;
+    }
+    this.selected$.next([...this.loadedDevices]);
+  }
+
+  isSelected(device: IManagedObject) {
+    return this.selected$.value.some(d => d.id === device.id);
+  }
+
+  ngOnInit(): void {
     this.loadDevices();
   }
 
@@ -42,6 +72,14 @@ export class ListCheckComponent {
 
   // triggered if a device is selected
   updateSelected(checked, device) {
-    console.log(checked, device);
+    const selected = this.selected$.value;
+    const index = selected.findIndex(d => d.id === device.id);
+    if (checked && index === -1) {
+      this.selected$.next([...selected, device]);
+      return;
+    } else if (!checked && index > -1) {
+      selected.splice(index, 1);
+      this.selected$.next(selected);
+    }
   }
 }

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

@@ -1,7 +1,7 @@
 <c8y-title>List example</c8y-title>
 
 <c8y-list-group class="m-t-16">
-  <c8y-li-timeline *c8yFor="let device of devices; let i = index">
+  <c8y-li-timeline *c8yFor="let device of devices; loadMore: 'auto'; let i = index">
     {{ device.creationTime | date }}
     <c8y-li>
       <c8y-li-radio (onSelect)="updateSelected($event, device)"></c8y-li-radio>

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

@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
 import { CoreModule } from '@c8y/ngx-components';
 import { RouterModule } from '@angular/router';
+import { OnInit } from '@angular/core';
 
 @Component({
   selector: 'list-timeline',
@@ -9,7 +10,7 @@ import { RouterModule } from '@angular/router';
   standalone: true,
   imports: [CoreModule, RouterModule]
 })
-export class ListTimelineComponent {
+export class ListTimelineComponent implements OnInit {
   devices: IResultList<IManagedObject>;
   selected = { id: null, name: '' };
 
@@ -19,10 +20,13 @@ export class ListTimelineComponent {
     fragmentType: 'c8y_IsDevice',
     // paging information will be a part of the response now
     withTotalPages: true,
-    pageSize: 10
+    pageSize: 10,
+    currentPage: 1
   };
 
-  constructor(public inventory: InventoryService) {
+  constructor(public inventory: InventoryService) {}
+
+  ngOnInit(): void {
     this.loadDevices();
   }
 

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

@@ -1,5 +1,5 @@
 import { CoreModule, StepperService, throttle } from '@c8y/ngx-components';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
 import { RouterModule } from '@angular/router';
 
@@ -13,7 +13,7 @@ import { RouterModule } from '@angular/router';
   imports: [CoreModule, RouterModule],
   providers: [StepperService]
 })
-export class ListVirtualScrollCheckComponent {
+export class ListVirtualScrollCheckComponent implements OnInit {
   devices: IResultList<IManagedObject>;
   devicesContainerStrategy: IResultList<IManagedObject>;
   selected = { id: null, name: '' };
@@ -30,20 +30,16 @@ export class ListVirtualScrollCheckComponent {
     pageSize: 10
   };
 
-  constructor(public inventory: InventoryService) {
-    this.loadDevices();
-    this.loadDevicesContainerStrategy();
-  }
+  constructor(public inventory: InventoryService) {}
 
-  // Promise-based usage of InventoryService.
-  async loadDevices() {
-    this.devices = await this.inventory.list(this.filter);
+  ngOnInit(): void {
+    this.loadDevicesContainerStrategy();
   }
 
   @throttle(500, { trailing: false })
   async loadDevicesContainerStrategy() {
     const filter: any = { ...this.filter };
-    filter.pageSize = 999999999;
+    filter.pageSize = 2000;
 
     const items = await this.inventory.list(filter);
 
@@ -58,8 +54,7 @@ export class ListVirtualScrollCheckComponent {
   // 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();
+      console.log('Not really deleting the device.');
     }
   }
 

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

@@ -1,5 +1,5 @@
-import { CoreModule, StepperService, throttle } from '@c8y/ngx-components';
-import { Component } from '@angular/core';
+import { CoreModule, StepperService } from '@c8y/ngx-components';
+import { Component, OnInit } from '@angular/core';
 import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
 import { RouterModule } from '@angular/router';
 
@@ -13,11 +13,11 @@ import { RouterModule } from '@angular/router';
   imports: [CoreModule, RouterModule],
   providers: [StepperService]
 })
-export class ListVirtualScrollTimelineComponent {
+export class ListVirtualScrollTimelineComponent implements OnInit {
   devices: IResultList<IManagedObject>;
-  devicesContainerStrategy: IResultList<IManagedObject>;
   selected = { id: null, name: '' };
-  dataMultiplier = 1;
+  checkAll;
+  enableBasicList = false;
 
   // The filter object will add query parameters
   // to the request which is made by the service.
@@ -25,13 +25,14 @@ export class ListVirtualScrollTimelineComponent {
     fragmentType: 'c8y_IsDevice',
     // paging information will be a part of the response now
     withTotalPages: true,
-    pageSize: 10
+    pageSize: 10,
+    currentPage: 1
   };
 
-  constructor(public inventory: InventoryService) {
-    // _ annotation to mark this string as translatable string.
+  constructor(public inventory: InventoryService) {}
+
+  ngOnInit(): void {
     this.loadDevices();
-    this.loadDevicesContainerStrategy();
   }
 
   // Promise-based usage of InventoryService.
@@ -39,26 +40,10 @@ export class ListVirtualScrollTimelineComponent {
     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();
+      console.log('Not really deleting the device.');
     }
   }
 

package/src/main.ts

@@ -1,5 +1,5 @@
 import './i18n';
-import { applyOptions, loadOptions, loginOptions } from '@c8y/bootstrap';
+import { applyOptions, loadOptions } from '@c8y/bootstrap';
 
 /** Verify that custom webpack config is working */
 declare const HELLO_WORLD: string;
@@ -12,11 +12,13 @@ applicationSetup();
 
 async function applicationSetup() {
   const options = await applyOptions({
-    ...(await loadOptions()),
-    ...((await loginOptions()) as object)
+    ...(await loadOptions())
   });
 
-  const mod = await import('./bootstrap');
+  const mod = await import(
+    /* webpackPreload: true */
+    './bootstrap'
+  );
   const bootstrapApp = mod.bootstrap || (window as any).bootstrap || (() => null);
 
   return Promise.resolve(bootstrapApp(options)).then(removeProgress);

package/src/polyfills.ts

@@ -30,4 +30,4 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.

package/src/popconfirm/pop-confirm-example.component.ts

@@ -18,14 +18,14 @@ import {
         type="button"
         (click)="triggerPopover(poConfirm)"
       >
-        <c8y-popover-confirm
-          [title]="'Delete item' | translate"
-          [placement]="'right'"
-          [outsideClick]="true"
-          #poConfirm
-        ></c8y-popover-confirm>
         <i c8yIcon="minus-circle"></i>
       </button>
+      <c8y-popover-confirm
+        [title]="'Delete item' | translate"
+        [placement]="'right'"
+        [outsideClick]="true"
+        #poConfirm
+      ></c8y-popover-confirm>
     </div>`,
   standalone: true,
   imports: [ModalModule, CommonModule, HeaderModule]
@@ -50,9 +50,11 @@ export class PopConfirmExampleComponent {
     try {
       const remove = await poConfirm.show(this.confirmRemoveColumnButtons);
       if (!remove) {
+        // eslint-disable-next-line no-console
         console.log('You clicked "Cancel"!');
         return;
       }
+      // eslint-disable-next-line no-console
       console.log('You successfully deleted the item!');
     } catch (e) {
       // do nothing or display "deletion failed" message

package/src/selector/asset-selector-example/different-root/asset-selector-different-root.component.ts

@@ -14,7 +14,7 @@ import { BehaviorSubject } from 'rxjs';
           <div class="card-header separator">
             <h4 class="card-title">Miller view different root {{ (rootNode$ | async)?.id }}</h4>
           </div>
-          <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+          <div class="d-flex d-col" style="height: 300px">
             <c8y-asset-selector-miller
               [(ngModel)]="model"
               (onSelected)="selectionChanged($event)"
@@ -35,7 +35,7 @@ import { BehaviorSubject } from 'rxjs';
               Miller view single column different root {{ (rootNode$ | async)?.id }}
             </h4>
           </div>
-          <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+          <div class="d-flex d-col" style="height: 300px">
             <c8y-asset-selector-miller
               class="bg-component"
               [(ngModel)]="model"

package/src/selector/asset-selector-example/general-example/asset-selector-example.component.html

@@ -19,7 +19,7 @@
       <div class="card-header separator">
         <h4 class="card-title">Miller view single select child devices</h4>
       </div>
-      <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+      <div class="d-flex d-col" style="height: 300px">
         <c8y-asset-selector-miller
           [(ngModel)]="model"
           (onSelected)="selectionChanged($event)"
@@ -36,7 +36,7 @@
       <div class="card-header separator">
         <h4 class="card-title">Miller view single select</h4>
       </div>
-      <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+      <div class="d-flex d-col" style="height: 300px">
         <c8y-asset-selector-miller
           [(ngModel)]="model"
           (onSelected)="selectionChanged($event)"
@@ -51,7 +51,7 @@
       <div class="card-header separator">
         <h4 class="card-title">Miller view single select only devices</h4>
       </div>
-      <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+      <div class="d-flex d-col" style="height: 300px">
         <c8y-asset-selector-miller
           [(ngModel)]="model"
           (onSelected)="selectionChanged($event)"
@@ -67,7 +67,7 @@
       <div class="card-header separator">
         <h4 class="card-title">Miller view single select with column headers and filter</h4>
       </div>
-      <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+      <div class="d-flex d-col" style="height: 300px">
         <c8y-asset-selector-miller
           [(ngModel)]="model"
           (onSelected)="selectionChanged($event)"
@@ -84,10 +84,10 @@
     <div class="card">
       <div class="card-header separator">
         <h4 class="card-title">
-          Miller view single select with column headers, filter, and global search
+          Miller view single select with column headers, filter, global search
         </h4>
       </div>
-      <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+      <div class="d-flex d-col" style="height: 300px">
         <c8y-asset-selector-miller
           [(ngModel)]="model"
           (onSelected)="selectionChanged($event)"
@@ -97,7 +97,8 @@
             showFilter: true,
             showUnassignedDevices: true,
             showChildDevices: true,
-            search: true
+            search: true,
+            showSelected: false
           }"
           class="bg-component"
         ></c8y-asset-selector-miller>
@@ -109,7 +110,7 @@
       <div class="card-header separator">
         <h4 class="card-title">Miller view multi select</h4>
       </div>
-      <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+      <div class="d-flex d-col" style="height: 300px">
         <c8y-asset-selector-miller
           [(ngModel)]="model"
           (onSelected)="selectionChanged($event)"
@@ -129,7 +130,7 @@
           <div class="card-header separator">
             <h4 class="card-title">Miller view different root {{ (rootNode$ | async)?.id }}</h4>
           </div>
-          <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+          <div class="d-flex d-col" style="height: 300px">
             <c8y-asset-selector-miller
               [(ngModel)]="model"
               (onSelected)="selectionChanged($event)"
@@ -150,7 +151,7 @@
               Miller view single column different root {{ (rootNode$ | async)?.id }}
             </h4>
           </div>
-          <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+          <div class="d-flex d-col" style="height: 300px">
             <c8y-asset-selector-miller
               [(ngModel)]="model"
               (onSelected)="selectionChanged($event)"
@@ -176,7 +177,7 @@
           <div class="card-header separator">
             <h4 class="card-title">Miller view single select single column with global search</h4>
           </div>
-          <div class="card-block d-flex d-col p-t-0 p-b-0 bg-level-1" style="height: 300px">
+          <div class="d-flex d-col bg-level-1" style="height: 300px">
             <c8y-asset-selector-miller
               [(ngModel)]="model"
               (onSelected)="selectionChanged($event)"
@@ -196,7 +197,7 @@
           <div class="card-header separator">
             <h4 class="card-title">Miller view multi select single column</h4>
           </div>
-          <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+          <div class="d-flex d-col" style="height: 300px">
             <c8y-asset-selector-miller
               [(ngModel)]="model"
               (onSelected)="selectionChanged($event)"
@@ -233,17 +234,15 @@
           <div class="card-header separator">
             <h4 class="card-title">Tree view single select child devices</h4>
           </div>
-          <div class="card-block">
-            <c8y-asset-selector
-              (onSelected)="selectionChanged($event)"
-              [(ngModel)]="model"
-              [config]="{
-                groupsSelectable: true,
-                showUnassignedDevices: true,
-                showChildDevices: true
-              }"
-            ></c8y-asset-selector>
-          </div>
+          <c8y-asset-selector
+            (onSelected)="selectionChanged($event)"
+            [(ngModel)]="model"
+            [config]="{
+              groupsSelectable: true,
+              showUnassignedDevices: true,
+              showChildDevices: true
+            }"
+          ></c8y-asset-selector>
         </div>
       </div>
       <div class="col-sm-6">
@@ -251,16 +250,14 @@
           <div class="card-header separator">
             <h4 class="card-title">Tree view multi select</h4>
           </div>
-          <div class="card-block">
-            <c8y-asset-selector
-              (onSelected)="selectionChanged($event)"
-              [(ngModel)]="model"
-              [config]="{
-                groupsSelectable: true,
-                multi: true
-              }"
-            ></c8y-asset-selector>
-          </div>
+          <c8y-asset-selector
+            (onSelected)="selectionChanged($event)"
+            [(ngModel)]="model"
+            [config]="{
+              groupsSelectable: true,
+              multi: true
+            }"
+          ></c8y-asset-selector>
         </div>
       </div>
     </div>
@@ -269,12 +266,10 @@
         <div class="card-header separator">
           <h4 class="card-title">Tree view only devices</h4>
         </div>
-        <div class="card-block">
-          <c8y-asset-selector
-            [(ngModel)]="model"
-            (onSelected)="selectionChanged($event)"
-          ></c8y-asset-selector>
-        </div>
+        <c8y-asset-selector
+          [(ngModel)]="model"
+          (onSelected)="selectionChanged($event)"
+        ></c8y-asset-selector>
       </div>
     </div>
 
@@ -283,35 +278,32 @@
         <div class="card-header separator">
           <h4 class="card-title">Tree view only groups</h4>
         </div>
-        <div class="card-block">
-          <c8y-asset-selector
-            [(ngModel)]="model"
-            (onSelected)="selectionChanged($event)"
-            [config]="{
-              groupsSelectable: true,
-              groupsOnly: true
-            }"
-          ></c8y-asset-selector>
-        </div>
+        <c8y-asset-selector
+          [(ngModel)]="model"
+          (onSelected)="selectionChanged($event)"
+          [config]="{
+            groupsSelectable: true,
+            groupsOnly: true
+          }"
+        ></c8y-asset-selector>
       </div>
     </div>
 
     <div class="col-sm-6">
       <div class="card">
         <div class="card-header separator">
-          <h4 class="card-title">Tree view with global search</h4>
-        </div>
-        <div class="card-block">
-          <c8y-asset-selector
-            [(ngModel)]="model"
-            (onSelected)="selectionChanged($event)"
-            [config]="{
-              groupsSelectable: true,
-              multi: true,
-              search: true
-            }"
-          ></c8y-asset-selector>
+          <h4 class="card-title">Tree view with global search and chips</h4>
         </div>
+        <c8y-asset-selector
+          [(ngModel)]="model"
+          (onSelected)="selectionChanged($event)"
+          [config]="{
+            groupsSelectable: true,
+            multi: true,
+            search: true,
+            showSelected: true
+          }"
+        ></c8y-asset-selector>
       </div>
     </div>
 
@@ -320,13 +312,11 @@
         <div class="card-header separator">
           <h4 class="card-title">Tree view different root {{ (rootNode$ | async)?.id }}</h4>
         </div>
-        <div class="card-block">
-          <c8y-asset-selector
-            [(ngModel)]="model"
-            (onSelected)="selectionChanged($event)"
-            [asset]="rootNode$ | async"
-          ></c8y-asset-selector>
-        </div>
+        <c8y-asset-selector
+          [(ngModel)]="model"
+          (onSelected)="selectionChanged($event)"
+          [asset]="rootNode$ | async"
+        ></c8y-asset-selector>
       </div>
     </div>
   </div>

package/src/selector/asset-selector-example/multi-select/asset-selector-multi-select.component.ts

@@ -13,7 +13,7 @@ import { IIdentified } from '@c8y/client';
           <div class="card-header separator">
             <h4 class="card-title">Miller view multi select</h4>
           </div>
-          <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+          <div class="d-flex d-col" style="height: 300px">
             <c8y-asset-selector-miller
               [(ngModel)]="model"
               (onSelected)="selectionChanged($event)"

package/src/selector/asset-selector-example/single-search/asset-selector-single-search.component.ts

@@ -13,7 +13,7 @@ import { IIdentified } from '@c8y/client';
           <div class="card-header separator">
             <h4 class="card-title">Miller view single select single column with global search</h4>
           </div>
-          <div class="card-block d-flex d-col p-t-0 p-b-0 bg-level-1" style="height: 300px">
+          <div class="d-flex d-col p-t-0 p-b-0 bg-level-1" style="height: 300px">
             <c8y-asset-selector-miller
               [(ngModel)]="model"
               (onSelected)="selectionChanged($event)"
@@ -33,7 +33,7 @@ import { IIdentified } from '@c8y/client';
           <div class="card-header separator">
             <h4 class="card-title">Miller view multi select single column</h4>
           </div>
-          <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+          <div class="d-flex d-col p-t-0 p-b-0" style="height: 300px">
             <c8y-asset-selector-miller
               [(ngModel)]="model"
               (onSelected)="selectionChanged($event)"

package/src/selector/asset-selector-example/tree-devices/asset-selector-tree-devices.component.ts

@@ -13,12 +13,10 @@ import { IIdentified } from '@c8y/client';
           <div class="card-header separator">
             <h4 class="card-title">Tree view only devices</h4>
           </div>
-          <div class="card-block">
-            <c8y-asset-selector
-              [(ngModel)]="model"
-              (onSelected)="selectionChanged($event)"
-            ></c8y-asset-selector>
-          </div>
+          <c8y-asset-selector
+            [(ngModel)]="model"
+            (onSelected)="selectionChanged($event)"
+          ></c8y-asset-selector>
         </div>
       </div>
 
@@ -27,16 +25,14 @@ import { IIdentified } from '@c8y/client';
           <div class="card-header separator">
             <h4 class="card-title">Tree view only groups</h4>
           </div>
-          <div class="card-block">
-            <c8y-asset-selector
-              [(ngModel)]="model"
-              (onSelected)="selectionChanged($event)"
-              [config]="{
-                groupsSelectable: true,
-                groupsOnly: true
-              }"
-            ></c8y-asset-selector>
-          </div>
+          <c8y-asset-selector
+            [(ngModel)]="model"
+            (onSelected)="selectionChanged($event)"
+            [config]="{
+              groupsSelectable: true,
+              groupsOnly: true
+            }"
+          ></c8y-asset-selector>
         </div>
       </div>
     </div>