@c8y/tutorial 1022.8.0 → 1022.9.6

package/cumulocity.config.ts

@@ -486,6 +486,20 @@ export default {
         description: 'An example for hooking into the shown versions.',
         scope: 'self'
       },
+      {
+        name: 'Query param bottom drawer hook sample',
+        module: 'QueryParamBottomDrawerModule',
+        path: './src/hooks/query-param-bottom-drawer/query-param-bottom-drawer.module.ts',
+        description: 'An example for hooking into the query param bottom drawer.',
+        scope: 'self'
+      },
+      {
+        name: 'Query param modal hook sample',
+        module: 'QueryParamModalModule',
+        path: './src/hooks/query-param-modal/query-param-modal.module.ts',
+        description: 'An example for hooking into the query param modal.',
+        scope: 'self'
+      },
       {
         name: 'pop confirm example',
         module: 'PopConfirmExampleModule',

package/package.json

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

package/src/hooks/query-param-bottom-drawer/example-button.component.ts

@@ -0,0 +1,21 @@
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-example-button',
+  template: ` <button (click)="addQueryParam()">Add Query Param</button> `
+})
+export class ExampleButtonComponent {
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
+
+  addQueryParam() {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { showExampleComponent: true },
+      queryParamsHandling: 'merge'
+    });
+  }
+}

package/src/hooks/query-param-bottom-drawer/example-component.ts

@@ -0,0 +1,35 @@
+import { Component, inject } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'app-example-component',
+  template: `<p>This component was rendered via <code>hookQueryParamBottomDrawer</code></p>
+    <div class="text-center card-footer p-24 separator">
+      <button class="btn btn-default" title="{{ 'Close' }}" type="button" (click)="close()">
+        {{ 'Close' }}
+      </button>
+    </div>`
+})
+export class ExampleComponent {
+  shouldClose: Promise<boolean>;
+  private resolveClose!: (value: boolean | PromiseLike<boolean>) => void;
+
+  private readonly router = inject(Router);
+  private readonly route = inject(ActivatedRoute);
+
+  constructor() {
+    this.shouldClose = new Promise<boolean>(resolve => {
+      this.resolveClose = resolve;
+    });
+  }
+
+  close() {
+    this.resolveClose(true);
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { showExampleComponent: null },
+      queryParamsHandling: 'merge',
+      replaceUrl: true
+    });
+  }
+}

package/src/hooks/query-param-bottom-drawer/index.ts

@@ -0,0 +1 @@
+export * from './query-param-bottom-drawer.module';

package/src/hooks/query-param-bottom-drawer/query-param-bottom-drawer.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import {
+  CommonModule,
+  hookNavigator,
+  hookQueryParamBottomDrawer,
+  hookRoute,
+  NavigatorNode
+} from '@c8y/ngx-components';
+import { ExampleComponent } from './example-component';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'hooks/query-param-bottom-drawer',
+      loadComponent: () => import('./example-button.component').then(m => m.ExampleButtonComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 70,
+        path: 'hooks/query-param-bottom-drawer',
+        icon: 'filter',
+        label: 'QueyParamBottomDrawer',
+        parent: 'Hooks'
+      })
+    ),
+    hookQueryParamBottomDrawer({
+      queryParam: 'showExampleComponent',
+      closeOnNavigation: false,
+      disableClickOutside: true,
+      component: ExampleComponent
+    })
+  ]
+})
+export class QueryParamBottomDrawerModule {}

package/src/hooks/query-param-modal/example-button.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-example-button',
+  template: ` <button (click)="addQueryParam()">Add Query Param</button> `
+})
+export class ExampleButtonComponent {
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute
+  ) {}
+
+  addQueryParam() {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: { showExampleModalComponent: true },
+      queryParamsHandling: 'merge',
+      replaceUrl: true
+    });
+  }
+}

package/src/hooks/query-param-modal/example-component.ts

@@ -0,0 +1,17 @@
+import { Component, inject } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+  selector: 'app-example-component',
+  template: `<p>This component was rendered via <code>hookQueryParamModal</code></p>
+    <button class="btn btn-default" title="{{ 'Close' }}" type="button" (click)="cancel()">
+      {{ 'Close' }}
+    </button>`
+})
+export class ExampleComponent {
+  private readonly bsModalRef = inject(BsModalRef);
+
+  cancel() {
+    this.bsModalRef.hide();
+  }
+}

package/src/hooks/query-param-modal/indext.ts

@@ -0,0 +1 @@
+export * from './query-param-modal.module';

package/src/hooks/query-param-modal/query-param-modal.module.ts

@@ -0,0 +1,39 @@
+import { NgModule } from '@angular/core';
+import {
+  CommonModule,
+  hookNavigator,
+  hookQueryParamModal,
+  hookRoute,
+  NavigatorNode
+} from '@c8y/ngx-components';
+import { ExampleComponent } from './example-component';
+
+@NgModule({
+  declarations: [],
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'hooks/query-param-modal',
+      loadComponent: () => import('./example-button.component').then(m => m.ExampleButtonComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 70,
+        path: 'hooks/query-param-modal',
+        icon: 'navigation-toolbar-top',
+        label: 'QueryParamModal',
+        parent: 'Hooks'
+      })
+    ),
+    hookQueryParamModal({
+      queryParam: 'showExampleModalComponent',
+      component: ExampleComponent,
+      modalConfig: {
+        class: 'modal-lg',
+        ignoreBackdropClick: true,
+        keyboard: false
+      }
+    })
+  ]
+})
+export class QueryParamModalModule {}