@c8y/tutorial 1019.0.3

package/src/realtime/realtime-tutorial.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'realtime',
+      loadComponent: () =>
+        import('./realtime-tutorial.component').then(m => m.RealtimeTutorialComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Realtime',
+        path: '/realtime',
+        icon: 'realtime',
+        priority: 10
+      })
+    )
+  ]
+})
+export class RealtimeTutorialModule {}

package/src/redirect-to-last-route/index.ts

@@ -0,0 +1 @@
+export * from './redirect-to-last-route.module';

package/src/redirect-to-last-route/redirect-to-last-route-guard.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+
+@Injectable({ providedIn: 'root' })
+export class RedirectToLastRouteGuardService {
+  constructor(private router: Router) {}
+
+  canActivate: CanActivateFn = () => {
+    if (!this.router.config.length) {
+      return false;
+    }
+    const lastRoute = this.router.config[this.router.config.length - 1];
+    this.router.navigate([lastRoute.path]);
+    return false;
+  };
+}

package/src/redirect-to-last-route/redirect-to-last-route.module.ts

@@ -0,0 +1,20 @@
+import { NgModule, inject } from '@angular/core';
+import { CanActivateFn, RouterModule } from '@angular/router';
+import { RedirectToLastRouteGuardService } from './redirect-to-last-route-guard.service';
+import { EmptyComponent } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'pickLastRoute',
+        canActivate: [
+          ((...args) =>
+            inject(RedirectToLastRouteGuardService).canActivate(...args)) as CanActivateFn
+        ],
+        component: EmptyComponent
+      }
+    ])
+  ]
+})
+export class RedirectToLastRouteModule {}

package/src/redirect-to-last-route/view-context-redirect.service.ts

@@ -0,0 +1,53 @@
+import { Injectable, inject, Type } from '@angular/core';
+import { Router } from '@angular/router';
+import { AlertService, DeviceService, ViewContext, ViewContextServices } from '@c8y/ngx-components';
+import { SERVICE_FRAGMENT } from '@c8y/ngx-components/services';
+
+@Injectable({ providedIn: 'root' })
+export class ViewContextRedirectService {
+  constructor(
+    private router: Router,
+    private alert: AlertService
+  ) {}
+
+  async redirectToFirstItemOf(viewContext: ViewContext, subPath = ''): Promise<boolean> {
+    const service = this.getServiceForViewContext(viewContext);
+    const filter = this.getFilterForViewContext(viewContext);
+    let firstEntry: Awaited<ReturnType<(typeof service)['list']>>['data'][0];
+    try {
+      const { data } = await service.list(filter);
+      [firstEntry] = data;
+      if (!firstEntry) {
+        const message = `No entry present for context: "${viewContext}" in this tenant.`;
+        throw Error(message);
+      }
+    } catch (e) {
+      this.alert.warning(e);
+      console.warn(e);
+      return false;
+    }
+
+    const baseRoute = viewContext.replace(':id', `${firstEntry.id}`);
+    this.router.navigate([baseRoute, subPath]);
+    return false;
+  }
+
+  private getFilterForViewContext(viewContext: ViewContext) {
+    switch (viewContext) {
+      case ViewContext.Device: {
+        return { query: `has(${DeviceService.DEVICE_FRAGMENT_TYPE})` } as const;
+      }
+      case ViewContext.Group: {
+        return { query: 'has(c8y_IsDeviceGroup)' } as const;
+      }
+      case ViewContext.Service: {
+        return { query: `type eq ${SERVICE_FRAGMENT}` } as const;
+      }
+    }
+  }
+
+  private getServiceForViewContext(viewContext: ViewContext) {
+    const serviceClass = ViewContextServices.contextToService(viewContext);
+    return inject(serviceClass as Type<InstanceType<typeof serviceClass>>);
+  }
+}

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

@@ -0,0 +1,49 @@
+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-child-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">
+            <!-- important -->
+            <c8y-asset-selector-miller
+              [(ngModel)]="model"
+              (onSelected)="selectionChanged($event)"
+              [config]="{
+                groupsSelectable: true,
+                showChildDevices: true,
+                showUnassignedDevices: true,
+                showFilter: 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 AssetSelectorChildDevicesComponent {
+  model: IIdentified;
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

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

package/src/selector/asset-selector-example/column-header/asset-selector-column-header.component.ts

@@ -0,0 +1,46 @@
+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-column-header',
+  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: true,
+                columnHeaders: true,
+                showFilter: 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 AssetSelectorColumnHeaderComponent {
+  model: IIdentified;
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

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

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

@@ -0,0 +1,87 @@
+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-different-root',
+  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 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
+              class="bg-component"
+              [(ngModel)]="model"
+              (onSelected)="selectionChanged($event)"
+              [config]="{
+                groupsSelectable: true,
+                multi: false,
+                columnHeaders: true,
+                singleColumn: true,
+                showFilter: true
+              }"
+              [asset]="rootNode$ | async"
+            ></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 AssetSelectorDifferentRootComponent {
+  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/different-root/asset-selector-different-root.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/different-root',
+      loadComponent: () =>
+        import('./asset-selector-different-root.component').then(
+          m => m.AssetSelectorDifferentRootComponent
+        )
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'different root',
+        path: '/selector/asset-selector-example/different-root',
+        icon: 'th-list',
+        priority: -1,
+        parent: 'Asset selector'
+      })
+    )
+  ]
+})
+export class AssetSelectorDifferentRootModule {}