@c8y/tutorial 1021.36.0 → 1021.37.5

package/cumulocity.config.ts

@@ -702,6 +702,13 @@ export default {
         description: 'An introduction to asset selector tree devices example.',
         scope: 'self'
       },
+      {
+        name: 'Example of selectable nodes in the asset selector',
+        module: 'AssetSelectorNodeSelectableExampleModule',
+        path: './src/selector/asset-selector-example/node-selectable/asset-selector-node-selectable.module.ts',
+        description: 'Selectable nodes example for the asset-selector',
+        scope: 'self'
+      },
       {
         name: 'Introduction to asset selector tree search',
         module: 'AssetSelectorTreeSearchModule',

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1021.36.0",
+  "version": "1021.37.5",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1021.36.0",
-    "@c8y/ngx-components": "1021.36.0",
-    "@c8y/client": "1021.36.0",
-    "@c8y/bootstrap": "1021.36.0",
+    "@c8y/style": "1021.37.5",
+    "@c8y/ngx-components": "1021.37.5",
+    "@c8y/client": "1021.37.5",
+    "@c8y/bootstrap": "1021.37.5",
     "@angular/cdk": "^18.2.10",
     "ngx-bootstrap": "18.0.0",
     "leaflet": "1.9.4",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@c8y/options": "1021.36.0",
-    "@c8y/devkit": "1021.36.0"
+    "@c8y/options": "1021.37.5",
+    "@c8y/devkit": "1021.37.5"
   },
   "peerDependencies": {
     "@angular/common": ">=18 <19"

package/src/selector/asset-selector-example/node-selectable/asset-selector-node-selectable.component.ts

@@ -0,0 +1,52 @@
+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 node selectable</h4>
+          </div>
+          <c8y-asset-selector
+            (onSelected)="selectionChanged($event)"
+            [(ngModel)]="model"
+            [isNodeSelectable]="isNodeSelectable"
+            [config]="{
+              groupsSelectable: true,
+              multi: true
+            }"
+          ></c8y-asset-selector>
+        </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 AssetSelectorNodeSelectableExampleComponent {
+  model: IIdentified;
+
+  isNodeSelectable = node => {
+    // Only allow selecting assets of type building
+    return node.mo.type === 'building';
+  };
+
+  selectionChanged(e) {
+    console.log(e);
+  }
+}

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