@c8y/tutorial 1019.5.11 → 1019.6.10

package/cumulocity.config.ts

@@ -13,6 +13,7 @@ export default {
     globalTitle: 'Tutorial application IoT',
     tabsHorizontal: true,
     rightDrawer: true,
+    contextHelp: true,
     icon: {
       class: 'c8y-icon-tools'
     },
@@ -525,11 +526,23 @@ export default {
         path: './src/stepper/stepper.module.ts',
         description: 'A simple stepper example.'
       },
+      {
+        name: 'ApplicationCard',
+        module: 'ApplicationCardExampleModule',
+        path: './src/application-card/application-card-example.module.ts',
+        description: 'Application card example.'
+      },
       {
         name: 'Hooking via service',
         module: 'HookStateModule',
         path: './src/hooks/state/hook-state.module.ts',
         description: 'This is an example for an Action added via service or factory.'
+      },
+      {
+        name: 'Pagination',
+        module: 'PaginationExampleModule',
+        path: './src/pagination/pagination-example.module.ts',
+        description: 'This is an example for pagination.'
       }
     ],
     remotes: {
@@ -614,7 +627,9 @@ export default {
         'AssetSelectorTreeDevicesModule',
         'AssetSelectorTreeSearchModule',
         'StepperModule',
-        'HookStateModule'
+        'ApplicationCardExampleModule',
+        'HookStateModule',
+        'PaginationExampleModule'
       ]
     }
   },

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1019.5.11",
+  "version": "1019.6.10",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/devkit": "1019.5.11",
-    "@c8y/style": "1019.5.11",
-    "@c8y/ngx-components": "1019.5.11",
-    "@c8y/client": "1019.5.11",
-    "@c8y/bootstrap": "1019.5.11",
+    "@c8y/devkit": "1019.6.10",
+    "@c8y/style": "1019.6.10",
+    "@c8y/ngx-components": "1019.6.10",
+    "@c8y/client": "1019.6.10",
+    "@c8y/bootstrap": "1019.6.10",
     "@angular/cdk": "^16.2.11",
     "ngx-bootstrap": "11.0.2",
     "leaflet": "1.7.1",

package/src/application-card/application-card-example.component.html

@@ -0,0 +1,41 @@
+<c8y-title>Application card</c8y-title>
+
+<c8y-action-bar-item
+  [placement]="'left'"
+  itemClass="navbar-form hidden-xs"
+>
+  <c8y-list-display-switch
+    (onListClassChange)="listClass = $event"
+    [listLength]="(apps$ | async)?.length"
+  ></c8y-list-display-switch>
+</c8y-action-bar-item>
+<div
+  class="card-group"
+  [ngClass]="listClass"
+>
+  <div
+    class="page-sticky-header hidden-xs d-flex"
+    *ngIf="(apps$ | async)?.length > 0"
+  >
+    <div class="card-block card-column-40">
+      <div class="card-appicon p-l-32 p-r-16 m-r-0 m-l-4"></div>
+      {{ 'Application' }}
+    </div>
+    <div class="card-block p-0 card-column-80 m-r-40">
+      <div class="card-block card-column-80">{{ 'Description' }}</div>
+      <div class="card-block card-column-20">{{ 'Type' }}</div>
+      <div class="card-block card-column-20"></div>
+    </div>
+  </div>
+  <div
+    class="col-xs-12 col-sm-4 col-md-3"
+    *ngFor="let app of apps$ | async"
+  >
+    <c8y-application-card
+      class="d-contents"
+      (onAppDeleted)="appDeleted(app)"
+      (onAppCloned)="appCloned(app)"
+      [app]="app"
+    ></c8y-application-card>
+  </div>
+</div>

package/src/application-card/application-card-example.component.ts

@@ -0,0 +1,57 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { AppStateService, CoreModule, PackageType } from '@c8y/ngx-components';
+import { SharedEcosystemModule } from '@c8y/ngx-components/ecosystem/shared';
+import { IApplication } from '@c8y/client';
+import { Observable, of } from 'rxjs';
+
+@Component({
+  selector: 'tut-application-card',
+  templateUrl: './application-card-example.component.html',
+  standalone: true,
+  imports: [CommonModule, FormsModule, CoreModule, SharedEcosystemModule],
+  providers: [
+    {
+      provide: AppStateService,
+      useValue: { currentTenant: { value: { name: '' } } }
+    }
+  ]
+})
+export class ApplicationCardExampleComponent {
+  listClass: string;
+  apps$: Observable<IApplication[]> = of([
+    {
+      name: 'cockpit',
+      contextPath: 'cockpit',
+      key: 'cockpit-application-key',
+      label: PackageType.OFFICIAL,
+      description: 'This package is used to scaffold a cockpit application for Cumulocity IoT.',
+      manifest: { version: '1.0.0', author: 'c8y_dev' }
+    },
+    {
+      name: 'administration',
+      contextPath: 'administration',
+      key: 'administration-application-key',
+      label: PackageType.OFFICIAL,
+      description: '',
+      manifest: { version: '1.0.0', author: 'c8y_dev' }
+    },
+    {
+      name: 'devicemanagement',
+      contextPath: 'devicemanagement',
+      key: 'devicemanagement-application-key',
+      label: PackageType.OFFICIAL,
+      description:
+        'This package is used to scaffold a Device management application for Cumulocity IoT.',
+      manifest: { version: '1.0.0', author: 'c8y_dev' }
+    }
+  ]);
+
+  appDeleted(app: IApplication[]) {
+    console.log('App deleted:', app);
+  }
+  appCloned(app: IApplication[]) {
+    console.log('App cloned:', app);
+  }
+}

package/src/application-card/application-card-example.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'application-card',
+      loadComponent: () =>
+        import('./application-card-example.component').then(m => m.ApplicationCardExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: 'application-card',
+        icon: 'inactive-state',
+        label: 'Application card'
+      })
+    )
+  ]
+})
+export class ApplicationCardExampleModule {}

package/src/help/help-example.component.html

@@ -0,0 +1,12 @@
+<c8y-title>Context help</c8y-title>
+<c8y-action-bar-item [placement]="'right'">
+  <a class="btn btn-link" title="{{ 'Only pretends to do something...' }}" disabled="disabled">
+    <i c8yIcon="refresh"></i>
+    {{ 'Refresh' }}
+  </a>
+</c8y-action-bar-item>
+<!-- important -->
+<c8y-help
+  src="/docs/device-management-application/viewing-all-devices/#viewing-all-devices"
+></c8y-help>
+<!-- /important --> 

package/src/help/help-example.component.ts

@@ -2,21 +2,10 @@ import { Component } from '@angular/core';
 import { CommonModule, CoreModule } from '@c8y/ngx-components';
 import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
 import { DeviceListModule } from '@c8y/ngx-components/device-list';
+
 @Component({
   selector: 'help-example',
-  template: `<c8y-title>Context help</c8y-title>
-    <div class="card">
-      <div class="card-block">
-        <div>
-          The "Help" component adds contextual help to the action bar(question mark icon). The
-          content of contextual help comes from the user guide.
-        </div>
-      </div>
-    </div>
-
-    <c8y-help
-      src="/docs/device-management-application/viewing-all-devices/#viewing-all-devices"
-    ></c8y-help> `,
+  templateUrl: './help-example.component.html',
   standalone: true,
   imports: [CoreModule, CommonModule, DeviceGridModule, DeviceListModule]
 })

package/src/pagination/pagination-example.component.ts

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+import { PageChangedEvent, PaginationModule } from 'ngx-bootstrap/pagination';
+
+interface Item {
+  id: number;
+  name: string;
+}
+
+@Component({
+  selector: 'tut-pagination-example',
+  template: `
+    <div class="container-fluid">
+      <c8y-title>Pagination</c8y-title>
+      <c8y-list-group>
+        <c8y-li *ngFor="let item of itemsToShow">
+          {{ item.name }}
+        </c8y-li>
+        <c8y-li class="sticky-bottom">
+          <pagination
+            [totalItems]="totalItems"
+            [(ngModel)]="currentPage"
+            [itemsPerPage]="itemsPerPage"
+            (pageChanged)="pageChanged($event)"
+            previousText="previous"
+            nextText="next"
+          ></pagination>
+        </c8y-li>
+      </c8y-list-group>
+    </div>
+  `,
+  standalone: true,
+  imports: [CoreModule, PaginationModule]
+})
+export class PaginationExampleComponent {
+  currentPage = 1;
+  itemsPerPage = 10;
+  // Items to display on the current page
+  itemsToShow: Item[] = [];
+  totalItems = 50;
+
+  // Mock dataset
+  private allItems: Item[] = Array.from({ length: this.totalItems }, (_, i) => ({
+    id: i + 1,
+    name: `Item ${i + 1}`
+  }));
+
+  constructor() {
+    this.updateItemsToShow();
+  }
+
+  pageChanged(event: PageChangedEvent): void {
+    this.currentPage = event.page;
+    this.updateItemsToShow();
+  }
+
+  private updateItemsToShow(): void {
+    const startIndex = (this.currentPage - 1) * this.itemsPerPage;
+    this.itemsToShow = this.allItems.slice(startIndex, startIndex + this.itemsPerPage);
+  }
+}

package/src/pagination/pagination-example.module.ts

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

package/src/properties-list/properties-list-example.component.html

@@ -0,0 +1,22 @@
+<div class="p-t-16">
+  <c8y-title>Properties list</c8y-title>
+  <!-- important -->
+  <c8y-properties-list
+    [title]="'Custom object properties'"
+    [data]="customData"
+    [emptyLabel]="'--'"
+    [properties]="customProperties"
+  ></c8y-properties-list>
+  <!-- /important -->
+
+  <br />
+
+  <!-- important -->
+  <c8y-properties-list
+    [title]="'Typed object properties'"
+    [data]="archiveManifest"
+    [emptyLabel]="'--'"
+    [properties]="specifiedPackageVersionProperties"
+  ></c8y-properties-list>
+  <!-- /important -->
+</div>

package/src/properties-list/properties-list-example.component.ts

@@ -1,49 +1,97 @@
 import { Component } from '@angular/core';
-import { CoreModule, gettext, PropertiesListItem } from '@c8y/ngx-components';
 import { IManifest } from '@c8y/client';
-// import { packageProperties } from '@c8y/ngx-components/ecosystem/shared';
+import { CoreModule, PropertiesListItem } from '@c8y/ngx-components';
 
 @Component({
-  selector: 'properties-list-example',
-  template: `
-    <c8y-properties-list
-      [title]="'Application properties'"
-      [data]="archiveManifest"
-      [emptyLabel]="'--'"
-      [properties]="packageVersionProperties"
-    >
-    </c8y-properties-list>
-  `,
+  selector: 'tut-properties-list-example',
+  templateUrl: './properties-list-example.component.html',
   standalone: true,
   imports: [CoreModule]
 })
 export class PropertiesListExampleComponent {
-  archiveManifest: Partial<IManifest> = {
+  readonly customData: any = {
+    string: 'Hello, world!',
+    number: 42,
+    boolean: true,
+    array: [1, 'two', false],
+    object: { key: 'value' },
+    null: null,
+    undefined: undefined
+  };
+
+  readonly customProperties: PropertiesListItem[] = [
+    {
+      label: 'String property',
+      key: 'string'
+    },
+    {
+      label: 'Number property',
+      key: 'number'
+    },
+    {
+      label: 'Boolean property',
+      key: 'boolean'
+    },
+    {
+      label: 'Array property',
+      key: 'array'
+    },
+    {
+      label: 'Object property',
+      key: 'object',
+      transform: (object: any) => object.key
+    },
+    {
+      label: 'Null property',
+      key: 'null'
+    },
+    {
+      label: 'Undefined property',
+      key: 'undefined'
+    }
+  ];
+
+  readonly archiveManifest: Partial<IManifest> = {
     author: 'Cumulocity IoT',
+    homepage: 'https://cumulocity.com/guides/web/overview/',
+    keywords: ['Cumulocity', 'Plugin', 'Widget'],
+    license: 'Apache 2.0',
+    repository: {
+      type: 'git',
+      url: 'git+https://github.com/SoftwareAG/some-not-exisiting-repository.git'
+    },
+    requiredPlatformVersion: '>=10.18.0.0',
     version: '10.20.0.0',
-    requiredPlatformVersion: '10.18.0.0',
-    homepage: 'https://cumulocity.com/guides/web/overview/'
+    name: 'Application name',
+    custom: 'Custom property value'
   };
-  // Optionally you can use predefined package properties.
-  // readonly packageVersionProperties: PropertiesListItem[] = packageProperties;
-  readonly packageVersionProperties: PropertiesListItem[] = [
+
+  readonly specifiedPackageVersionProperties: PropertiesListItem[] = [
     {
-      label: gettext('Version'),
-      key: 'version'
+      label: 'Author',
+      key: 'author'
     },
     {
-      label: gettext('Author'),
-      key: 'author'
+      label: 'Homepage',
+      key: 'homepage',
+      type: 'link',
+      action: (event, link: string) => window.open(link, '_blank', 'noopener,noreferrer')
     },
     {
-      label: gettext('Required platform version'),
+      label: 'Required platform version',
       key: 'requiredPlatformVersion'
     },
     {
-      label: gettext('Homepage'),
-      key: 'homepage',
-      type: 'link',
-      action: (e, link: string) => window.open(link, '_blank', 'noopener,noreferrer')
+      label: 'Version',
+      key: 'version'
+    },
+    {
+      label: 'Name',
+      key: 'name'
+    },
+    {
+      label: 'Custom property',
+      key: 'custom'
     }
   ];
 }

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

@@ -14,7 +14,7 @@ import { Observable, merge } from 'rxjs';
 import { map, scan } from 'rxjs/operators';
 
 @Component({
-  selector: 'cmp-realtime-tutorial',
+  selector: 'tut-realtime-button',
   templateUrl: './realtime-tutorial.component.html',
   providers: [
     ManagedObjectRealtimeService,