@c8y/tutorial 1019.0.3

package/src/selector/datapoint-selection-example/context-example/datapoint-selection-context-example.component.ts

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { DatapointSelectorModule, KPIDetails } from '@c8y/ngx-components/datapoint-selector';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import { IManagedObject, InventoryService } from '@c8y/client';
+
+@Component({
+  selector: 'datapoint-selection-context-example',
+  template: `<c8y-title>Data point selector</c8y-title>
+    <div class="container-fluid p-t-24">
+      <div class="row" *ngIf="contextAsset">
+        <div class="col-xs-12 col-sm-8 col-md-9">
+          <div class="card">
+            <div class="card-block d-flex d-col p-0" style="height: 300px">
+              <c8y-datapoint-selector
+                class="d-contents"
+                [contextAsset]="contextAsset"
+                [allowDatapointsFromMultipleAssets]="true"
+                [allowSearch]="false"
+                [(ngModel)]="datapoints"
+              ></c8y-datapoint-selector>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3">
+          <div class="card">
+            <div class="card-header separator">
+              <h4 class="card-title">Model</h4>
+            </div>
+            <div class="card-inner-scroll">
+              <pre style="min-height: 98px"><code>{{ datapoints | json }}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, CoreModule, AssetSelectorModule, DatapointSelectorModule]
+})
+export class DatapointSelectionContextExampleComponent {
+  datapoints: KPIDetails[] = [];
+  contextAsset: IManagedObject;
+
+  constructor(private inventory: InventoryService) {}
+
+  async ngOnInit(): Promise<void> {
+    const { data: groups } = await this.inventory.list({
+      pageSize: 1,
+      fragmentType: 'c8y_IsDeviceGroup'
+    });
+    this.contextAsset = groups[0];
+  }
+}

package/src/selector/datapoint-selection-example/context-example/datapoint-selection-context-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/datapoint-selection-example/context-example',
+      loadComponent: () =>
+        import('./datapoint-selection-context-example.component').then(
+          m => m.DatapointSelectionContextExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'context',
+        path: '/selector/datapoint-selection-example/context-example',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Datapoint selection'
+      })
+    )
+  ]
+})
+export class DatapointSelectionContextExampleModule {}

package/src/selector/datapoint-selection-example/dragdrop-example/datapoint-selection-dragdrop-example.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { DatapointSelectorModule, KPIDetails } from '@c8y/ngx-components/datapoint-selector';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+
+@Component({
+  selector: 'datapoint-selection-modal-example',
+  template: `<c8y-title>Data point selector</c8y-title>
+    <div class="container-fluid p-t-24">
+      <div class="row">
+        <div class="col-xs-12 col-sm-8 col-md-9">
+          <div class="card">
+            <div class="card-inner-scroll d-flex d-col bg-component" style="height: 350px">
+              <!-- important -->
+              <c8y-datapoint-selection-list
+                class="d-contents"
+                [(ngModel)]="datapoints"
+                [allowDragAndDrop]="true"
+              >
+              </c8y-datapoint-selection-list>
+              <!-- /important -->
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3">
+          <div class="card">
+            <div class="card-header separator">
+              <h4 class="card-title">Model</h4>
+            </div>
+            <div class="card-inner-scroll">
+              <pre style="min-height: 98px"><code>{{ datapoints | json }}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, CoreModule, AssetSelectorModule, DatapointSelectorModule]
+})
+export class DatapointSelectionDragdropExampleComponent {
+  datapoints: KPIDetails[] = [];
+}

package/src/selector/datapoint-selection-example/dragdrop-example/datapoint-selection-dragdrop-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/datapoint-selection-example/dragdrop-example',
+      loadComponent: () =>
+        import('./datapoint-selection-dragdrop-example.component').then(
+          m => m.DatapointSelectionDragdropExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'drag and drop',
+        path: '/selector/datapoint-selection-example/dragdrop-example',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Datapoint selection'
+      })
+    )
+  ]
+})
+export class DatapointSelectionDragdropExampleModule {}

package/src/selector/datapoint-selection-example/general-example/datapoint-selection-example.component.html

@@ -0,0 +1,202 @@
+<c8y-title>Data point selector</c8y-title>
+
+<div class="container-fluid p-t-24">
+  <div class="row">
+    <div class="col-xs-12 col-sm-8 col-md-9">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Open selection modal via e.g. button</h4>
+        </div>
+        <div class="card-block d-flex d-col">
+          <button class="btn btn-primary" (click)="addDatapoints()">Select data points</button>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-4 col-md-3">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Model</h4>
+        </div>
+        <div class="card-inner-scroll">
+          <pre style="min-height: 98px"><code>{{ datapoints1 | json }}</code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-xs-12 col-sm-8 col-md-9">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Data point selection list</h4>
+        </div>
+        <div class="card-inner-scroll d-flex d-col bg-component" style="height: 350px">
+          <c8y-datapoint-selection-list
+            class="d-contents"
+            [(ngModel)]="datapoints2"
+            [allowDragAndDrop]="false"
+          >
+          </c8y-datapoint-selection-list>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-4 col-md-3">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Model</h4>
+        </div>
+        <div class="card-inner-scroll">
+          <pre style="min-height: 98px"><code>{{ datapoints2 | json }}</code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-xs-12 col-sm-8 col-md-9">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Data point selection list (with drag and drop reordering)</h4>
+        </div>
+        <div class="card-inner-scroll d-flex d-col bg-component" style="height: 350px">
+          <c8y-datapoint-selection-list
+            class="d-contents"
+            [(ngModel)]="datapoints3"
+            [allowDragAndDrop]="true"
+          >
+          </c8y-datapoint-selection-list>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-4 col-md-3">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Model</h4>
+        </div>
+        <div class="card-inner-scroll">
+          <pre style="min-height: 98px"><code>{{ datapoints3 | json }}</code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-xs-12 col-sm-8 col-md-9">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Data point selection list (with validation error)</h4>
+        </div>
+        <div class="card-inner-scroll d-flex d-col bg-component" style="height: 350px">
+          <c8y-datapoint-selection-list
+            class="d-contents"
+            [(ngModel)]="datapoints4"
+            [allowDragAndDrop]="false"
+          >
+            <div
+              class="alert alert-danger"
+              role="alert"
+              translate
+            >
+              Some validation error message
+            </div>
+          </c8y-datapoint-selection-list>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-4 col-md-3">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Model</h4>
+        </div>
+        <div class="card-inner-scroll">
+          <pre style="min-height: 98px"><code>{{ datapoints4 | json }}</code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-xs-12 col-sm-8 col-md-9">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Data point selector</h4>
+        </div>
+        <div class="card-block d-flex d-col p-0" style="height: 300px">
+          <c8y-datapoint-selector
+            [allowDatapointsFromMultipleAssets]="true"
+            [(ngModel)]="datapoints5"
+            class="d-contents"
+          >
+          </c8y-datapoint-selector>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-4 col-md-3">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Model</h4>
+        </div>
+        <div class="card-inner-scroll">
+          <pre style="min-height: 98px"><code>{{ datapoints5 | json }}</code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row" *ngIf="contextAsset">
+    <div class="col-xs-12 col-sm-8 col-md-9">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Data point selector with context</h4>
+        </div>
+        <div class="card-block d-flex d-col p-0" style="height: 300px">
+          <c8y-datapoint-selector
+            [contextAsset]="contextAsset"
+            [allowDatapointsFromMultipleAssets]="true"
+            [allowSearch]="false"
+            [(ngModel)]="datapoints6"
+            class="d-contents"
+          ></c8y-datapoint-selector>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-4 col-md-3">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Model</h4>
+        </div>
+        <div class="card-inner-scroll">
+          <pre style="min-height: 98px"><code>{{ datapoints6 | json }}</code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-xs-12 col-sm-8 col-md-9">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Data point selector (without data point templates)</h4>
+        </div>
+        <div class="card-block d-flex d-col p-0" style="height: 300px">
+          <c8y-datapoint-selector
+            [allowDatapointsFromMultipleAssets]="true"
+            [(ngModel)]="datapoints7"
+            [ignoreDatapointTemplates]="true"
+            class="d-contents"
+          ></c8y-datapoint-selector>
+        </div>
+      </div>
+    </div>
+    <div class="col-xs-12 col-sm-4 col-md-3">
+      <div class="card">
+        <div class="card-header separator">
+          <h4 class="card-title">Model</h4>
+        </div>
+        <div class="card-inner-scroll">
+          <pre style="min-height: 98px"><code>{{ datapoints7 | json }}</code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/selector/datapoint-selection-example/general-example/datapoint-selection-example.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { IManagedObject, InventoryService } from '@c8y/client';
+import {
+  DatapointSelectorModule,
+  DatapointSelectorService
+} from '@c8y/ngx-components/datapoint-selector';
+import { KPIDetails } from '@c8y/ngx-components/datapoint-selector/datapoint-selection.model';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+
+@Component({
+  selector: 'c8y-datapoint-selection-example',
+  templateUrl: './datapoint-selection-example.component.html',
+  standalone: true,
+  imports: [CommonModule, CoreModule, AssetSelectorModule, DatapointSelectorModule]
+})
+export class DatapointSelectionExampleComponent implements OnInit {
+  datapoints1: KPIDetails[] = [];
+  datapoints2: KPIDetails[] = [];
+  datapoints3: KPIDetails[] = [];
+  datapoints4: KPIDetails[] = [];
+  datapoints5: KPIDetails[] = [];
+  datapoints6: KPIDetails[] = [];
+  datapoints7: KPIDetails[] = [];
+  contextAsset: IManagedObject;
+
+  constructor(
+    private datapointSelection: DatapointSelectorService,
+    private inventory: InventoryService
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    const { data: groups } = await this.inventory.list({
+      pageSize: 1,
+      fragmentType: 'c8y_IsDeviceGroup'
+    });
+    this.contextAsset = groups[0];
+  }
+
+  addDatapoints(): void {
+    this.datapointSelection.selectDataPoints({ selectedDatapoints: [...this.datapoints1] }).then(
+      res => {
+        this.datapoints1 = res;
+      },
+      () => {
+        // nothing to do, modal was canceled
+      }
+    );
+  }
+}

package/src/selector/datapoint-selection-example/general-example/datapoint-selection-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/datapoint-selection-example/general-example',
+      loadComponent: () =>
+        import('./datapoint-selection-example.component').then(
+          m => m.DatapointSelectionExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Datapoint selection',
+        path: '/selector/datapoint-selection-example/general-example',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Datapoint selection'
+      })
+    )
+  ]
+})
+export class DatapointSelectionExampleModule {}

package/src/selector/datapoint-selection-example/list-example/datapoint-selection-list-example.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import { DatapointSelectorModule, KPIDetails } from '@c8y/ngx-components/datapoint-selector';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'datapoint-selection-list-example',
+  template: `<c8y-title>Data point selector</c8y-title>
+    <div class="container-fluid p-t-24">
+      <div class="row">
+        <div class="col-xs-12 col-sm-8 col-md-9">
+          <div class="card">
+            <div class="card-inner-scroll d-flex d-col bg-component" style="height: 350px">
+              <!-- important -->
+              <c8y-datapoint-selection-list
+                class="d-contents"
+                [(ngModel)]="datapoints"
+                [allowDragAndDrop]="false"
+              >
+              </c8y-datapoint-selection-list>
+              <!-- /important -->
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3">
+          <div class="card">
+            <div class="card-header separator">
+              <h4 class="card-title">Model</h4>
+            </div>
+            <div class="card-inner-scroll">
+              <pre style="min-height: 98px"><code>{{ datapoints | json }}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, DatapointSelectorModule, CoreModule]
+})
+export class DatapointSelectionListExampleComponent {
+  datapoints: KPIDetails[] = [];
+}

package/src/selector/datapoint-selection-example/list-example/datapoint-selection-list-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/datapoint-selection-example/list-example',
+      loadComponent: () =>
+        import('./datapoint-selection-list-example.component').then(
+          m => m.DatapointSelectionListExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'list',
+        path: '/selector/datapoint-selection-example/list-example',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Datapoint selection'
+      })
+    )
+  ]
+})
+export class DatapointSelectionListExampleModule {}

package/src/selector/datapoint-selection-example/modal-example/datapoint-selection-modal-example.component.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { DatapointSelectorService, KPIDetails } from '@c8y/ngx-components/datapoint-selector';
+import { CommonModule } from '@angular/common';
+import { HeaderModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'datapoint-selection-dragdrop-example',
+  template: `<c8y-title>Data point selector</c8y-title>
+    <div class="container-fluid p-t-24">
+      <div class="row">
+        <div class="col-xs-12 col-sm-8 col-md-9">
+          <div class="card">
+            <div class="card-block d-flex d-col">
+              <button class="btn btn-primary" (click)="addDatapoints()">Select data points</button>
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3">
+          <div class="card">
+            <div class="card-header separator">
+              <h4 class="card-title">Model</h4>
+            </div>
+            <div class="card-inner-scroll">
+              <pre style="min-height: 98px"><code>{{ datapoints | json }}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, HeaderModule]
+})
+export class DatapointSelectionModalExampleComponent {
+  // important
+  datapoints: KPIDetails[] = [];
+  constructor(private datapointSelectorService: DatapointSelectorService) {}
+
+  addDatapoints(): void {
+    this.datapointSelectorService
+      .selectDataPoints({ selectedDatapoints: [...this.datapoints] })
+      .then(
+        res => {
+          this.datapoints = res;
+        },
+        () => {
+          // nothing to do, modal was canceled
+        }
+      );
+  }
+  // /important
+}

package/src/selector/datapoint-selection-example/modal-example/datapoint-selection-modal-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/datapoint-selection-example/modal-example',
+      loadComponent: () =>
+        import('./datapoint-selection-modal-example.component').then(
+          m => m.DatapointSelectionModalExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'modal',
+        path: '/selector/datapoint-selection-example/modal-example',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Datapoint selection'
+      })
+    )
+  ]
+})
+export class DatapointSelectionModalExampleModule {}

package/src/selector/datapoint-selection-example/no-templates-example/datapoint-selection-notemplates-example.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { DatapointSelectorModule, KPIDetails } from '@c8y/ngx-components/datapoint-selector';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+
+@Component({
+  selector: 'datapoint-selection-notemplates-example',
+  template: `<c8y-title>Data point selector</c8y-title>
+    <div class="container-fluid p-t-24">
+      <div class="row">
+        <div class="col-xs-12 col-sm-8 col-md-9">
+          <div class="card">
+            <div class="card-block d-flex d-col p-0" style="height: 300px">
+              <!-- important -->
+              <c8y-datapoint-selector
+                class="d-contents"
+                [allowDatapointsFromMultipleAssets]="true"
+                [(ngModel)]="datapoints"
+                [ignoreDatapointTemplates]="true"
+              ></c8y-datapoint-selector>
+              <!-- /important -->
+            </div>
+          </div>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-md-3">
+          <div class="card">
+            <div class="card-header separator">
+              <h4 class="card-title">Model</h4>
+            </div>
+            <div class="card-inner-scroll">
+              <pre style="min-height: 98px"><code>{{ datapoints | json }}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, CoreModule, AssetSelectorModule, DatapointSelectorModule]
+})
+export class DatapointSelectionNotemplatesExampleComponent {
+  datapoints: KPIDetails[] = [];
+}

package/src/selector/datapoint-selection-example/no-templates-example/datapoint-selection-notemplates-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/datapoint-selection-example/no-templates-example',
+      loadComponent: () =>
+        import('./datapoint-selection-notemplates-example.component').then(
+          m => m.DatapointSelectionNotemplatesExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'without templates',
+        path: '/selector/datapoint-selection-example/no-templates-example',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Datapoint selection'
+      })
+    )
+  ]
+})
+export class DatapointSelectionNotemplatesExampleModule {}