@c8y/tutorial 1019.0.3

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

@@ -0,0 +1,44 @@
+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
+              [(ngModel)]="model"
+              (onSelected)="selectionChanged($event)"
+              [config]="{
+                groupsSelectable: 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 AssetSelectorOnlyDevicesComponent {
+  model: IIdentified;
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

package/src/selector/asset-selector-example/only-devices/asset-selector-only-devices.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/only-devices',
+      loadComponent: () =>
+        import('./asset-selector-only-devices.component').then(
+          m => m.AssetSelectorOnlyDevicesComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'only devices',
+        path: '/selector/asset-selector-example/only-devices',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Asset selector'
+      })
+    )
+  ]
+})
+export class AssetSelectorOnlyDevicesModule {}

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

@@ -0,0 +1,71 @@
+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-single-search',
+  template: `<c8y-title>Asset selector</c8y-title>
+    <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>
+    <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> `,
+  standalone: true,
+  imports: [CommonModule, AssetSelectorModule, CoreModule]
+})
+export class AssetSelectorSingleSearchComponent {
+  model: IIdentified;
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

package/src/selector/asset-selector-example/single-search/asset-selector-single-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/single-search',
+      loadComponent: () =>
+        import('./asset-selector-single-search.component').then(
+          m => m.AssetSelectorSingleSearchComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Single search',
+        path: '/selector/asset-selector-example/single-search',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Asset selector'
+      })
+    )
+  ]
+})
+export class AssetSelectorSingleSearchModule {}

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

@@ -0,0 +1,47 @@
+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-single-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-inner-scroll d-flex d-col bg-component" style="height: 350px">
+            <!-- important -->
+            <c8y-asset-selector-miller
+              [(ngModel)]="model"
+              (onSelected)="selectionChanged($event)"
+              [config]="{
+                groupsSelectable: true,
+                showUnassignedDevices: true
+              }"
+            ></c8y-asset-selector-miller>
+            <!-- /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>{{ model | json }}</code></pre>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, AssetSelectorModule, CoreModule]
+})
+export class AssetSelectorSingleSelectComponent {
+  model: IIdentified;
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

package/src/selector/asset-selector-example/single-select/asset-single-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/single-select',
+      loadComponent: () =>
+        import('./asset-selector-single-select.component').then(
+          m => m.AssetSelectorSingleSelectComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'single select',
+        path: '/selector/asset-selector-example/single-select',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Asset selector'
+      })
+    )
+  ]
+})
+export class AssetSingleSelectModule {}

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

@@ -0,0 +1,62 @@
+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-tree-devices',
+  template: `<c8y-title>Asset selector</c8y-title>
+    <div class="row">
+      <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>
+    <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> `,
+  standalone: true,
+  imports: [CommonModule, AssetSelectorModule, CoreModule]
+})
+export class AssetSelectorTreeDevicesComponent {
+  model: IIdentified;
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

package/src/selector/asset-selector-example/tree-devices/asset-selector-tree-devices.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/tree-devices',
+      loadComponent: () =>
+        import('./asset-selector-tree-devices.component').then(
+          m => m.AssetSelectorTreeDevicesComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Tree devices',
+        path: '/selector/asset-selector-example/tree-devices',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Asset selector'
+      })
+    )
+  ]
+})
+export class AssetSelectorTreeDevicesModule {}

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

@@ -0,0 +1,83 @@
+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-tree-example',
+  template: `<c8y-title>Tree options</c8y-title>
+    <div class="row d-flex-sm">
+      <div class="col-sm-4 p-0">
+        <div class="d-col p-t-8 p-l-16 p-b-16 p-r-16 bg-level-1 form-group-sm">
+          <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-8">
+        <ng-container *ngIf="showComponent">
+          <p class="text-medium p-t-8">Preview</p>
+          <div class="card m-t-16">
+            <div class="card-block p-0 bg-inherit" style="height: 428px">
+              <!-- important -->
+              <c8y-asset-selector
+                class="bg-inherit"
+                [(ngModel)]="model"
+                (onSelected)="selectionChanged($event)"
+                [config]="config"
+              ></c8y-asset-selector>
+              <!-- /important -->
+            </div>
+          </div>
+        </ng-container>
+      </div>
+    </div>`,
+  standalone: true,
+  imports: [CommonModule, AssetSelectorModule, CoreModule]
+})
+export class AssetSelectorTreeExampleComponent {
+  model: IIdentified;
+  showComponent = true;
+  config = {
+    groupsSelectable: true,
+    groupsOnly: false,
+    multi: false,
+    required: false,
+    search: false,
+    showChildDevices: false,
+    showUnassignedDevices: 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/tree-options/asset-selector-tree-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/tree-options',
+      loadComponent: () =>
+        import('./asset-selector-tree-example.component').then(
+          m => m.AssetSelectorTreeExampleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Hierarchy tree options',
+        path: '/selector/asset-selector-example/tree-options',
+        icon: 'tree-structure',
+        priority: 10,
+        parent: 'Asset selector'
+      })
+    )
+  ]
+})
+export class AssetSelectorTreeExampleModule {}

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

@@ -0,0 +1,75 @@
+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, IManagedObject, InventoryService } from '@c8y/client';
+import { BehaviorSubject } from 'rxjs';
+
+@Component({
+  selector: 'asset-selector-tree-search',
+  template: `<c8y-title>Asset selector</c8y-title>
+    <div class="row">
+      <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 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> `,
+  standalone: true,
+  imports: [CommonModule, AssetSelectorModule, CoreModule]
+})
+export class AssetSelectorTreeSearchComponent {
+  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/tree-search/asset-selector-tree-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/tree-search',
+      loadComponent: () =>
+        import('./asset-selector-tree-search.component').then(
+          m => m.AssetSelectorTreeSearchComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Tree search',
+        path: '/selector/asset-selector-example/tree-search',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Asset selector'
+      })
+    )
+  ]
+})
+export class AssetSelectorTreeSearchModule {}

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

@@ -0,0 +1,66 @@
+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-tree-single',
+  template: `<c8y-title>Asset selector</c8y-title>
+    <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 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 AssetSelectorTreeSingleComponent {
+  model: IIdentified;
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

package/src/selector/asset-selector-example/tree-single/asset-selector-tree-single.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/tree-single',
+      loadComponent: () =>
+        import('./asset-selector-tree-single.component').then(
+          m => m.AssetSelectorTreeSingleComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'tree single',
+        path: '/selector/asset-selector-example/tree-single',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Asset selector'
+      })
+    )
+  ]
+})
+export class AssetSelectorTreeSingleModule {}