@c8y/tutorial 1022.21.3 → 1022.27.0

package/cumulocity.config.ts

@@ -703,6 +703,20 @@ export default {
         description: 'An introduction to data points export selector example.',
         scope: 'self'
       },
+      {
+        name: 'Introduction to properties selector- inline usage',
+        module: 'propertiesSelectorInlineExampleProviders',
+        path: './src/selector/properties-selector-inline-example/properties-selector-inline.providers.ts',
+        description: 'An introduction to properties selector example- inline usage.',
+        scope: 'self'
+      },
+      {
+        name: 'Introduction to properties selector- drawer usage',
+        module: 'propertiesSelectorDrawerExampleProviders',
+        path: './src/selector/properties-selector-drawer-example/properties-selector-drawer.providers.ts',
+        description: 'An introduction to properties selector example- drawer usage.',
+        scope: 'self'
+      },
       {
         name: 'Introduction to asset selector device child',
         module: 'AssetSingleSelectModule',

package/package.json

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

package/src/selector/properties-selector-drawer-example/properties-selector-drawer.component.ts

@@ -0,0 +1,85 @@
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IIdentified, IManagedObject, InventoryService } from '@c8y/client';
+import { BottomDrawerService, TitleComponent } from '@c8y/ngx-components';
+import { AssetPropertySelectorDrawerComponent } from '@c8y/ngx-components/asset-properties';
+import {
+  AssetSelectionChangeEvent,
+  AssetSelectorModule
+} from '@c8y/ngx-components/assets-navigator';
+import { SubAssetsModule } from '@c8y/ngx-components/sub-assets';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { JsonPipe } from '@angular/common';
+
+@Component({
+  selector: 'tut-properties-selector-drawer',
+  template: `<c8y-title>Properties selector- drawer</c8y-title>
+    <div class="d-flex row">
+      <div class="col-xs-12 col-md-6">
+        <div class="card">
+          <div class="card-inner-scroll d-flex d-col bg-component" style="height: 490px">
+            <c8y-asset-selector
+              [(ngModel)]="model"
+              [config]="{
+                groupsSelectable: true,
+                showUnassignedDevices: true,
+                showChildDevices: true
+              }"
+              (onSelected)="selectionChanged($event)"
+            ></c8y-asset-selector>
+          </div>
+          <div class="card-footer separator-top">
+            <button class="btn btn-primary" (click)="selectProperty()" [disabled]="!selectedAsset">
+              Select property
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-xs-12 col-md-6">
+        <pre class="inner-scroll m-0" style="height: 554px">{{ output | json }}</pre>
+      </div>
+    </div>`,
+  imports: [
+    AssetSelectorModule,
+    TitleComponent,
+    FormsModule,
+    SubAssetsModule,
+    TooltipModule,
+    JsonPipe
+  ]
+})
+export class PropertiesSelectorDrawerExampleComponent {
+  inventoryService = inject(InventoryService);
+  model: IIdentified;
+  selectedAsset: IManagedObject;
+  output: unknown;
+  bottomDrawerService = inject(BottomDrawerService);
+
+  selectionChanged(e: AssetSelectionChangeEvent) {
+    this.selectedAsset = e.change.item;
+  }
+
+  async selectProperty() {
+    const drawer = this.bottomDrawerService.openDrawer(AssetPropertySelectorDrawerComponent, {
+      disableClickOutside: true,
+      initialState: {
+        asset: this.selectedAsset,
+        config: {
+          selectMode: 'single',
+          expansionMode: 'collapsedByDefault',
+          showValue: true,
+          showKey: true,
+          emptyStateContent: 'default-properties'
+        }
+      }
+    });
+
+    try {
+      const resultOf = await drawer.instance.result;
+      this.output = resultOf;
+    } catch (ex) {
+      this.output = 'Cancelled';
+    }
+  }
+}

package/src/selector/properties-selector-drawer-example/properties-selector-drawer.providers.ts

@@ -0,0 +1,19 @@
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+export const propertiesSelectorDrawerExampleProviders = [
+  hookRoute({
+    path: 'selector/properties-selector-drawer-example',
+    loadComponent: () =>
+      import('./properties-selector-drawer.component').then(
+        m => m.PropertiesSelectorDrawerExampleComponent
+      )
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      label: 'Properties selector drawer example',
+      path: '/selector/properties-selector-drawer-example',
+      icon: 'th-list',
+      priority: 4
+    })
+  )
+];

package/src/selector/properties-selector-inline-example/properties-selector-inline.component.ts

@@ -0,0 +1,197 @@
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { IIdentified, IManagedObject, InventoryService } from '@c8y/client';
+import { BottomDrawerService, C8yTranslatePipe, TitleComponent } from '@c8y/ngx-components';
+import {
+  AssetPropertyActionDirective,
+  AssetPropertyListComponent,
+  AssetPropertyType
+} from '@c8y/ngx-components/asset-properties';
+import {
+  AssetSelectionChangeEvent,
+  AssetSelectorModule
+} from '@c8y/ngx-components/assets-navigator';
+import { SubAssetsModule } from '@c8y/ngx-components/sub-assets';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { JsonPipe } from '@angular/common';
+
+@Component({
+  selector: 'tut-properties-selector-inline',
+  template: `<c8y-title>Properties selector- inline</c8y-title>
+    <div class="d-flex-md row">
+      <div class="col-xs-12 col-md-3">
+        <div class="card">
+          <div class="card-inner-scroll d-flex d-col bg-component" style="height: 208px">
+            <c8y-asset-selector
+              class="bg-component"
+              [(ngModel)]="model"
+              [config]="{
+                groupsSelectable: true,
+                showUnassignedDevices: true,
+                showChildDevices: true
+              }"
+              (onSelected)="selectionChanged($event)"
+            ></c8y-asset-selector>
+          </div>
+        </div>
+        <div class="card bg-level-1 p-16">
+          <p class="text-medium">Config options</p>
+          <fieldset class="c8y-fieldset m-b-16">
+            <legend>Select mode</legend>
+            <div class="d-flex gap-16 p-b-8">
+              <label class="c8y-radio">
+                <input name="assetSelection" type="radio" value="multi" [(ngModel)]="multiSelect" />
+                <span></span>
+                <span class="small m-l-4">multi</span>
+              </label>
+              <label class="c8y-radio">
+                <input
+                  name="assetSelection"
+                  type="radio"
+                  value="single"
+                  [(ngModel)]="multiSelect"
+                />
+                <span></span>
+                <span class="small m-l-4">single</span>
+              </label>
+              <label class="c8y-radio">
+                <input name="assetSelection" type="radio" value="none" [(ngModel)]="multiSelect" />
+                <span></span>
+                <span class="small m-l-4">none</span>
+              </label>
+            </div>
+          </fieldset>
+          <fieldset class="c8y-fieldset m-t-0">
+            <legend>Expansion mode</legend>
+            <div class="d-flex gap-8 p-b-8">
+              <label class="c8y-radio">
+                <input
+                  name="expansionMode"
+                  type="radio"
+                  value="expandedByDefault"
+                  [(ngModel)]="expansionMode"
+                />
+                <span></span>
+                <span class="small m-l-4">expanded</span>
+              </label>
+              <label class="c8y-radio">
+                <input
+                  name="expansionMode"
+                  type="radio"
+                  value="collapsedByDefault"
+                  [(ngModel)]="expansionMode"
+                />
+                <span></span>
+                <span class="small m-l-4">collapsed</span>
+              </label>
+              <label class="c8y-radio">
+                <input
+                  name="expansionMode"
+                  type="radio"
+                  value="nonCollapsible"
+                  [(ngModel)]="expansionMode"
+                />
+                <span></span>
+                <span class="small m-l-4">nonCollapsible</span>
+              </label>
+            </div>
+          </fieldset>
+          <label class="c8y-switch">
+            <input type="checkbox" [(ngModel)]="searchable" />
+            <span></span>
+            <small>searchable</small>
+          </label>
+          <label class="c8y-switch m-0">
+            <input type="checkbox" [(ngModel)]="showHeader" />
+            <span></span>
+            <small>showHeader</small>
+          </label>
+          <label class="c8y-switch m-0">
+            <input type="checkbox" [(ngModel)]="showValue" />
+            <span></span>
+            <small>showValue</small>
+          </label>
+          <label class="c8y-switch m-0">
+            <input type="checkbox" [(ngModel)]="showKey" />
+            <span></span>
+            <small>showKey</small>
+          </label>
+        </div>
+      </div>
+      <div class="col-xs-12 col-md-5">
+        <div class="card">
+          <div class="card-inner-scroll d-flex d-col bg-component" style="height: 559px">
+            <c8y-asset-property-list
+              class="bg-component"
+              [asset]="selectedAsset"
+              [config]="{
+                selectMode: multiSelect,
+                showHeader: showHeader,
+                searchable: searchable,
+                showValue: showValue,
+                expansionMode: expansionMode,
+                showKey: showKey
+              }"
+              (selectedProperties)="onSelectedProperties($event)"
+            >
+              <button
+                class="btn-dot btn fit-h"
+                [attr.aria-label]="'Copy' | translate"
+                tooltip="{{ 'Copy' | translate }}"
+                type="button"
+                *c8yAssetPropertyAction="let context"
+                [delay]="500"
+                (click)="copyProperty(context)"
+              >
+                <i class="dlt-c8y-icon-copy"></i>
+              </button>
+            </c8y-asset-property-list>
+          </div>
+        </div>
+      </div>
+      <div class="col-xs-12 col-md-4">
+        <pre class="inner-scroll" style="height: 559px">{{ assetPropertiesOutput | json }}</pre>
+      </div>
+    </div>`,
+  standalone: true,
+  imports: [
+    AssetSelectorModule,
+    AssetPropertyListComponent,
+    TitleComponent,
+    FormsModule,
+    SubAssetsModule,
+    AssetPropertyActionDirective,
+    C8yTranslatePipe,
+    TooltipModule,
+    JsonPipe
+  ]
+})
+export class PropertiesSelectorInlineExampleComponent {
+  inventoryService = inject(InventoryService);
+  model: IIdentified;
+  selectedAsset: IManagedObject;
+  assetPropertiesOutput: AssetPropertyType[] | AssetPropertyType;
+  bottomDrawerService = inject(BottomDrawerService);
+
+  multiSelect: 'single' | 'multi' | 'none' = 'multi';
+  expansionMode: 'expandedByDefault' | 'collapsedByDefault' | 'nonCollapsible' =
+    'expandedByDefault';
+  showHeader = true;
+  showValue = true;
+  showKey = true;
+  searchable = true;
+
+  selectionChanged(e: AssetSelectionChangeEvent) {
+    this.selectedAsset = e.change.item;
+  }
+
+  onSelectedProperties($event: AssetPropertyType[]) {
+    this.assetPropertiesOutput = $event;
+    // console.log('Selected properties:', $event);
+  }
+
+  copyProperty(context: AssetPropertyType) {
+    this.assetPropertiesOutput = context;
+    // console.log('Copy property:', context);
+  }
+}

package/src/selector/properties-selector-inline-example/properties-selector-inline.providers.ts

@@ -0,0 +1,19 @@
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+export const propertiesSelectorInlineExampleProviders = [
+  hookRoute({
+    path: 'selector/properties-selector-inline-example',
+    loadComponent: () =>
+      import('./properties-selector-inline.component').then(
+        m => m.PropertiesSelectorInlineExampleComponent
+      )
+  }),
+  hookNavigator(
+    new NavigatorNode({
+      label: 'Properties selector inline example',
+      path: '/selector/properties-selector-inline-example',
+      icon: 'th-list',
+      priority: 4
+    })
+  )
+];