@c8y/tutorial 1019.5.11 → 1019.6.3

package/cumulocity.config.ts

@@ -525,11 +525,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 +626,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.3",
   "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.3",
+    "@c8y/style": "1019.6.3",
+    "@c8y/ngx-components": "1019.6.3",
+    "@c8y/client": "1019.6.3",
+    "@c8y/bootstrap": "1019.6.3",
     "@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,39 @@
+<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/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/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,