@c8y/tutorial 1019.0.3

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

@@ -0,0 +1,342 @@
+<c8y-title>Asset selector</c8y-title>
+
+<div class="row">
+  <div class="col-xs-12 col-sm-8 col-md-9">
+    <div class="card">
+      <div class="card-header">
+        <h4 class="card-title">Miller columns</h4>
+      </div>
+      <div class="card-block">
+        <p>
+          Miller columns (also known as cascading lists) are a browsing/visualization technique that
+          can be applied to tree structures. The columns allow multiple levels of the hierarchy to
+          be open at once, and provide a visual representation of the current location.
+        </p>
+      </div>
+    </div>
+    <!-- Single select -->
+    <div class="card">
+      <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">
+        <c8y-asset-selector-miller
+          [(ngModel)]="model"
+          (onSelected)="selectionChanged($event)"
+          [config]="{
+            groupsSelectable: true,
+            showChildDevices: true,
+            showUnassignedDevices: true,
+            showFilter: true
+          }"
+        ></c8y-asset-selector-miller>
+      </div>
+    </div>
+    <div class="card">
+      <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">
+        <c8y-asset-selector-miller
+          [(ngModel)]="model"
+          (onSelected)="selectionChanged($event)"
+          [config]="{
+            groupsSelectable: true,
+            showUnassignedDevices: true
+          }"
+        ></c8y-asset-selector-miller>
+      </div>
+    </div>
+    <div class="card">
+      <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">
+        <c8y-asset-selector-miller
+          [(ngModel)]="model"
+          (onSelected)="selectionChanged($event)"
+          [config]="{
+            groupsSelectable: false
+          }"
+        ></c8y-asset-selector-miller>
+      </div>
+    </div>
+
+    <!-- Single select  column headers and filter-->
+    <div class="card">
+      <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">
+        <c8y-asset-selector-miller
+          [(ngModel)]="model"
+          (onSelected)="selectionChanged($event)"
+          [config]="{
+            groupsSelectable: true,
+            columnHeaders: true,
+            showFilter: true
+          }"
+        ></c8y-asset-selector-miller>
+      </div>
+    </div>
+
+    <!-- Single select  column headers, filter and global search-->
+    <div class="card">
+      <div class="card-header separator">
+        <h4 class="card-title">
+          Miller view single select with column headers, filter, and global search
+        </h4>
+      </div>
+      <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+        <c8y-asset-selector-miller
+          [(ngModel)]="model"
+          (onSelected)="selectionChanged($event)"
+          [config]="{
+            groupsSelectable: true,
+            columnHeaders: true,
+            showFilter: true,
+            showUnassignedDevices: true,
+            showChildDevices: true,
+            search: true
+          }"
+          class="bg-component"
+        ></c8y-asset-selector-miller>
+      </div>
+    </div>
+
+    <!-- Multi select -->
+    <div class="card">
+      <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">
+        <c8y-asset-selector-miller
+          [(ngModel)]="model"
+          (onSelected)="selectionChanged($event)"
+          [config]="{
+            groupsSelectable: true,
+            multi: true,
+            columnHeaders: false,
+            showFilter: false
+          }"
+        ></c8y-asset-selector-miller>
+      </div>
+    </div>
+
+    <div class="row" *ngIf="rootNode$.value !== undefined">
+      <div class="col-sm-6">
+        <div class="card">
+          <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">
+            <c8y-asset-selector-miller
+              [(ngModel)]="model"
+              (onSelected)="selectionChanged($event)"
+              [asset]="rootNode$ | async"
+              [config]="{
+                groupsSelectable: true,
+                columnHeaders: true,
+                showFilter: true
+              }"
+            ></c8y-asset-selector-miller>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <div class="card">
+          <div class="card-header separator">
+            <h4 class="card-title">
+              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">
+            <c8y-asset-selector-miller
+              [(ngModel)]="model"
+              (onSelected)="selectionChanged($event)"
+              [config]="{
+                groupsSelectable: true,
+                multi: false,
+                columnHeaders: true,
+                singleColumn: true,
+                showFilter: true
+              }"
+              [asset]="rootNode$ | async"
+              class="bg-component"
+            ></c8y-asset-selector-miller>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Single column -->
+    <div class="row">
+      <div class="col-sm-6">
+        <div class="card">
+          <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">
+            <c8y-asset-selector-miller
+              [(ngModel)]="model"
+              (onSelected)="selectionChanged($event)"
+              [config]="{
+                groupsSelectable: true,
+                singleColumn: true,
+                columnHeaders: true,
+                showFilter: true,
+                search: true
+              }"
+            ></c8y-asset-selector-miller>
+          </div>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <div class="card">
+          <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">
+            <c8y-asset-selector-miller
+              [(ngModel)]="model"
+              (onSelected)="selectionChanged($event)"
+              [config]="{
+                groupsSelectable: true,
+                singleColumn: true,
+                columnHeaders: true,
+                showFilter: true,
+                multi: true
+              }"
+            ></c8y-asset-selector-miller>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- tree -->
+    <div class="card">
+      <div class="card-header">
+        <h4 class="card-title">Hierarchical tree</h4>
+      </div>
+      <div class="card-block">
+        <p>
+          In computer science, a tree is a widely used abstract data type that simulates a
+          hierarchical tree structure, with a root value and subtrees of children with a parent
+          node, represented as a set of linked nodes.
+        </p>
+      </div>
+    </div>
+    <!-- tree single select -->
+    <div class="row">
+      <div class="col-sm-6">
+        <div class="card">
+          <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>
+        </div>
+      </div>
+      <div class="col-sm-6">
+        <div class="card">
+          <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>
+        </div>
+      </div>
+    </div>
+    <div class="col-sm-6">
+      <div class="card">
+        <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>
+      </div>
+    </div>
+
+    <div class="col-sm-6">
+      <div class="card">
+        <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>
+      </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>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-sm-6">
+      <div class="card">
+        <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>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-xs-12 col-sm-4 col-md-3 sticky-top" style="top: 72px; z-index: 1000">
+    <div class="card">
+      <div class="card-block">
+        <div class="legend form-block">Model</div>
+        <pre style="min-height: 98px"><code>{{ model | json }}</code></pre>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { InventoryService } from '@c8y/ngx-components/api';
+import { BehaviorSubject } from 'rxjs';
+import { IIdentified, IManagedObject } from '@c8y/client';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
+
+@Component({
+  selector: 'c8y-asset-selector-example',
+  templateUrl: './asset-selector-example.component.html',
+  standalone: true,
+  imports: [CommonModule, CoreModule, AssetSelectorModule, DatapointSelectorModule]
+})
+export class AssetSelectorExampleComponent {
+  model: IIdentified;
+  rootNode$ = new BehaviorSubject<IManagedObject>(undefined);
+
+  constructor(private inventory: InventoryService) {
+    this.loadFirstSubGroup();
+  }
+
+  async loadFirstSubGroup() {
+    const { data } = await this.inventory.list({ type: 'c8y_DeviceSubgroup', pageSize: 1 });
+    if (data.length === 1) {
+      this.rootNode$.next(data[0]);
+    }
+  }
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

package/src/selector/asset-selector-example/general-example/asset-selector-example.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'selector/asset-selector-example/general-example',
+      loadComponent: () =>
+        import('./asset-selector-example.component').then(m => m.AssetSelectorExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Asset selector',
+        path: '/selector/asset-selector-example/general-example',
+        icon: 'list-alt',
+        priority: 2,
+        parent: 'Asset selector'
+      })
+    )
+  ]
+})
+export class AssetSelectorExampleModule {}

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

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import { IIdentified } from '@c8y/client';
+
+@Component({
+  selector: 'asset-selector-only-devices',
+  template: `<c8y-title>Asset selector</c8y-title>
+    <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">
+            <c8y-asset-selector-miller
+              class="bg-component"
+              [(ngModel)]="model"
+              (onSelected)="selectionChanged($event)"
+              [config]="{
+                groupsSelectable: true,
+                columnHeaders: true,
+                showFilter: true,
+                showUnassignedDevices: true,
+                showChildDevices: true,
+                search: true
+              }"
+            ></c8y-asset-selector-miller>
+          </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>{{ model | json }}</code></pre>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, AssetSelectorModule, CoreModule]
+})
+export class AssetSelectorGlobalSearchComponent {
+  model: IIdentified;
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

package/src/selector/asset-selector-example/global-search/asset-selector-global-search.module.ts

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

package/src/selector/asset-selector-example/miller-columns-options/asset-selector-miller-example.component.ts

@@ -0,0 +1,85 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import { IIdentified } from '@c8y/client';
+
+@Component({
+  selector: 'c8y-asset-selector-miller-example',
+  template: `<c8y-title>Miller columns config</c8y-title>
+    <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>
+          <label>Label</label>
+          <div class="input-group input-group-sm">
+            <input class="form-control" type="text" [(ngModel)]="config.label" />
+            <div class="input-group-btn">
+              <button class="btn btn-default" (click)="reloadComponent()">
+                {{ 'Apply' | translate }}
+              </button>
+            </div>
+          </div>
+          <ng-container *ngFor="let item of config | keyvalue">
+            <label class="c8y-checkbox m-t-8" title="{{ item.key }}" *ngIf="item.key != 'label'">
+              <input
+                class="form-control"
+                type="checkbox"
+                [(ngModel)]="config[item.key]"
+                (ngModelChange)="reloadComponent()"
+              />
+              <span></span> <span>{{ item.key }}</span>
+            </label>
+          </ng-container>
+          <pre class="m-t-16 inner-scroll small">{{ config | json }}</pre>
+        </div>
+      </div>
+      <div class="col-sm-9">
+        <ng-container *ngIf="showComponent">
+          <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" style="height: 540px">
+              <!-- important -->
+              <c8y-asset-selector-miller
+                [(ngModel)]="model"
+                (onSelected)="selectionChanged($event)"
+                [config]="config"
+              ></c8y-asset-selector-miller>
+              <!-- /important -->
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>`,
+  standalone: true,
+  imports: [CommonModule, AssetSelectorModule, CoreModule]
+})
+export class AssetSelectorMillerExampleComponent {
+  model: IIdentified;
+  showComponent = true;
+  config = {
+    columnHeaders: false,
+    groupsSelectable: true,
+    groupsOnly: false,
+    multi: false,
+    required: false,
+    search: false,
+    showChildDevices: false,
+    showFilter: false,
+    showUnassignedDevices: false,
+    singleColumn: false,
+    label: 'Asset selection'
+  };
+
+  reloadComponent() {
+    // Reload the component by toggling the flag
+    this.showComponent = false;
+    setTimeout(() => {
+      this.showComponent = true;
+    });
+  }
+  selectionChanged(e) {
+    // eslint-disable-next-line no-console
+    console.log(e);
+  }
+}

package/src/selector/asset-selector-example/miller-columns-options/asset-selector-miller-example.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+
+@NgModule({
+  imports: [BsDropdownModule.forRoot()],
+  providers: [
+    hookRoute({
+      path: 'selector/asset-selector-example/miller-columns-options',
+      loadComponent: () =>
+        import('./asset-selector-miller-example.component').then(
+          m => m.AssetSelectorMillerExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Miller columns options',
+        path: '/selector/asset-selector-example/miller-columns-options',
+        icon: 'view-column',
+        priority: 5,
+        parent: 'Asset selector'
+      })
+    )
+  ]
+})
+export class AssetSelectorMillerExampleModule {}

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

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
+import { IIdentified } from '@c8y/client';
+
+@Component({
+  selector: 'asset-selector-multi-select',
+  template: `<c8y-title>Asset selector</c8y-title>
+    <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">Miller view multi select</h4>
+          </div>
+          <div class="card-block d-flex d-col p-t-0 p-b-0" style="height: 300px">
+            <c8y-asset-selector-miller
+              [(ngModel)]="model"
+              (onSelected)="selectionChanged($event)"
+              [config]="{
+                groupsSelectable: true,
+                multi: true,
+                columnHeaders: false,
+                showFilter: false
+              }"
+            ></c8y-asset-selector-miller>
+          </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>{{ model | json }}</code></pre>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, AssetSelectorModule, CoreModule]
+})
+export class AssetSelectorMultiSelectComponent {
+  model: IIdentified;
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

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

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