@c8y/tutorial 1021.55.2 → 1021.56.4

package/cumulocity.config.ts

@@ -506,6 +506,13 @@ export default {
         description: 'An example for For of directive.',
         scope: 'self'
       },
+      {
+        name: 'Generate JSON Schema example',
+        module: 'GenerateJsonSchemaModule',
+        path: './src/generate-json-schema/generate-json-schema.module.ts',
+        description: 'An example for generate JSON schema from interface.',
+        scope: 'self'
+      },
       {
         name: 'Example of ngx modal',
         module: 'NgxModalExampleModule',

package/package.json

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

package/src/generate-json-schema/generate-json-schema.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'c8y-generate-json-schema',
+  template: `
+    <h3>Base interface</h3>
+    <pre>{{ baseInterface }}</pre>
+    <pre>{{ referencedInterfaces }}</pre>
+    <h3>JSON Schema generated from ExampleInterface</h3>
+    <pre>{{ schemaString }}</pre>
+  `,
+  standalone: true,
+  imports: [CoreModule]
+})
+export class GenerateJsonSchemaComponent implements OnInit {
+  schemaString: unknown;
+  baseInterface = `
+  export type ExampleInterface = {
+    name: string;
+    id: number;
+    location: Address;
+    children?: Children[] | null;
+  }
+  `;
+  referencedInterfaces = `
+  export type Address ={
+    street: string;
+    city: string;
+  }
+
+  export type Children = {
+    name: string;
+    id: number;
+  }
+  `;
+
+  async ngOnInit() {
+    const { schema } = await import(
+      'c8y-schema-loader?interfaceName=ExampleInterface!./schema-example.model'
+    );
+    this.schemaString = JSON.stringify(schema, null, 2);
+  }
+}

package/src/generate-json-schema/generate-json-schema.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'generate-json-schema',
+      loadComponent: () =>
+        import('./generate-json-schema.component').then(m => m.GenerateJsonSchemaComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'JSON schema',
+        path: 'generate-json-schema',
+        icon: 'code1'
+      })
+    )
+  ]
+})
+export class GenerateJsonSchemaModule {}

package/src/generate-json-schema/schema-example.model.ts

@@ -0,0 +1,16 @@
+export type ExampleInterface = {
+  name: string;
+  id: number;
+  location: Address;
+  children?: Children[] | null;
+};
+
+export type Address = {
+  street: string;
+  city: string;
+};
+
+export type Children = {
+  name: string;
+  id: number;
+};

package/src/lazy-widget/lazy-widget-config/lazy-widget-config.component.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { WidgetConfig } from '../widget-config.model';
 
 @Component({
   selector: 'tutorial-lazy-widget-config',
@@ -7,4 +8,6 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule]
 })
-export class LazyWidgetConfigComponent {}
+export class LazyWidgetConfigComponent {
+  @Input() config: WidgetConfig;
+}

package/src/lazy-widget/lazy-widget-view/lazy-widget-view.component.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { WidgetConfig } from '../widget-config.model';
 
 @Component({
   selector: 'tutorial-lazy-widget-view',
@@ -7,4 +8,6 @@ import { CommonModule } from '@angular/common';
   standalone: true,
   imports: [CommonModule]
 })
-export class LazyWidgetViewComponent {}
+export class LazyWidgetViewComponent {
+  @Input() config: WidgetConfig;
+}

package/src/lazy-widget/lazy-widget.module.ts

@@ -20,7 +20,10 @@ async function loadConfigComponent() {
       label: 'Lazy Loaded Widget',
       description: 'Lazy Loaded Widget',
       loadComponent: loadViewComponent,
-      loadConfigComponent: loadConfigComponent
+      loadConfigComponent: loadConfigComponent,
+      data: {
+        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model')
+      }
     })
   ]
 })

package/src/lazy-widget/widget-config.model.ts

@@ -0,0 +1,3 @@
+export interface WidgetConfig {
+  [key: string]: any;
+}

package/src/widget/demo-widget-config.component.ts

@@ -1,12 +1,8 @@
 import { Component, Input } from '@angular/core';
 import { ControlContainer, NgForm } from '@angular/forms';
-import {
-  DynamicComponent,
-  OnBeforeSave,
-  AlertService,
-  GlobalTimeContextWidgetConfig
-} from '@c8y/ngx-components';
+import { DynamicComponent, OnBeforeSave, AlertService } from '@c8y/ngx-components';
 import { omit } from 'lodash';
+import { WidgetConfig } from './widget-config.model';
 
 @Component({
   selector: 'c8y-widget-config-demo',
@@ -45,7 +41,7 @@ export class WidgetConfigDemo implements DynamicComponent, OnBeforeSave {
    *
    * Note: The dashboard itself adds certain properties. As such, some properties are not allowed (e.g. device or settings)
    */
-  @Input() config: GlobalTimeContextWidgetConfig & { [key: string]: any } = {};
+  @Input() config: WidgetConfig = {};
 
   /**
    * An internal component property used to hide/show settings.

package/src/widget/demo-widget.component.ts

@@ -5,6 +5,7 @@ import {
   DynamicComponentAlertAggregator,
   gettext
 } from '@c8y/ngx-components';
+import { WidgetConfig } from './widget-config.model';
 
 @Component({
   selector: 'c8y-widget-demo',
@@ -33,7 +34,7 @@ import {
   ]
 })
 export class WidgetDemo implements OnChanges {
-  @Input() config;
+  @Input() config: WidgetConfig;
   alerts: DynamicComponentAlertAggregator;
 
   ngOnInit() {

package/src/widget/demo-widget.module.ts

@@ -33,6 +33,7 @@ import { WidgetDemo } from './demo-widget.component';
 
       /** new Angular-Dashboard definition */
       data: {
+        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
         // The settings object can be used to configure the configComponent
         settings: {
           noNewWidgets: false, // Set this to true, to don't allow adding new widgets.

package/src/widget/widget-config.model.ts

@@ -0,0 +1,3 @@
+import { GlobalTimeContextWidgetConfig } from '@c8y/ngx-components';
+
+export type WidgetConfig = GlobalTimeContextWidgetConfig & { [key: string]: any };

package/src/widget-resolvers/widget-config.model.ts

@@ -0,0 +1,3 @@
+export interface WidgetConfig {
+  [key: string]: any;
+}

package/src/widget-resolvers/widget-resolvers.component.ts

@@ -1,13 +1,14 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { IEvent, IManagedObject } from '@c8y/client';
 import { DynamicComponentAlertAggregator, DynamicComponent } from '@c8y/ngx-components';
+import { WidgetConfig } from './widget-config.model';
 
 @Component({
   selector: 'app-widget-resolvers',
   templateUrl: './widget-resolvers.component.html'
 })
 export class WidgetResolversComponent implements OnInit, DynamicComponent {
-  @Input() config: any;
+  @Input() config: WidgetConfig;
   label: string;
   value: string;
   alerts: DynamicComponentAlertAggregator;

package/src/widget-resolvers/widget-resolvers.module.ts

@@ -31,6 +31,7 @@ import { ContextWidgetConfig } from '@c8y/ngx-components/context-dashboard';
       },
       errorStrategy: DynamicComponentErrorStrategy.OVERLAY_ERROR,
       data: {
+        schema: () => import('c8y-schema-loader?interfaceName=WidgetConfig!./widget-config.model'),
         settings: {
           noNewWidgets: false,
           widgetDefaults: {