@c8y/tutorial 1019.23.9 → 1019.24.0

package/package.json

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

package/src/grids/server-grid-example/server-grid-action-controls.factory.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { ActionControlFactory, ActionControlHook, AppStateService } from '@c8y/ngx-components';
+import { Observable } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export class ActionControlsFactory implements ActionControlFactory {
+  constructor(private appState: AppStateService) {}
+
+  get():
+    | ActionControlHook
+    | ActionControlHook[]
+    | Observable<ActionControlHook | ActionControlHook[]>
+    | Promise<ActionControlHook | ActionControlHook[]> {
+    return {
+      actionControls: {
+        text: 'Factory',
+        callback: () => alert('factory'),
+        type: 'factory',
+        icon: 'factory',
+        priority: -10
+      },
+      matchesGrid: () => {
+        return this.appState.currentApplication.value.contextPath === 'tutorial';
+      }
+    };
+  }
+}

package/src/grids/server-grid-example/server-grid-action-controls.module.ts

@@ -0,0 +1,90 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {
+  BuiltInActionType,
+  GridConfigContext,
+  hookDataGridActionControls
+} from '@c8y/ngx-components';
+import { isEqual } from 'lodash-es';
+import { of } from 'rxjs';
+import { ActionControlsFactory } from './server-grid-action-controls.factory';
+
+/**
+ * Demostrates how `hookDataGridActionControls` can be used to
+ * add or override action controls in data grid.
+ */
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookDataGridActionControls({
+      actionControls: {
+        text: 'URL match',
+        callback: item => console.dir(item),
+        type: 'url',
+        icon: 'console',
+        /* Put icon on last position */
+        priority: -Infinity
+      },
+      /* This action matches agains the URL to hook into a grid */
+      matchesGrid: (route: ActivatedRoute) => {
+        return isEqual(
+          route.snapshot.url.map(segment => segment.path),
+          ['grids', 'server-grid-example']
+        );
+      }
+    }),
+    hookDataGridActionControls({
+      actionControls: [
+        {
+          text: 'Context match',
+          callback: item => console.dir(item),
+          type: 'context',
+          icon: 'source-code',
+          /* Negative priority places actions after the ones with no priority */
+          priority: -100
+        },
+        /* Action controls can be displayed for specific records only */
+        {
+          text: 'Odd',
+          callback: item => console.dir(item),
+          type: 'odd',
+          icon: 'rewind',
+          showIf: device => Number.parseInt(device.id) % 2 === 1
+        },
+        {
+          text: 'Even',
+          callback: item => console.dir(item),
+          type: 'even',
+          icon: 'forward11',
+          showIf: device => Number.parseInt(device.id) % 2 === 0
+        },
+        /* This action overrides the default 'Delete' action for 'Application' MOs only */
+        {
+          type: BuiltInActionType.Delete,
+          callback: () => alert('This shows how to override default action,'),
+          /* If you want to override a default action for all records simply always return `true` */
+          showIf: item => item?.type?.startsWith('c8y_Application')
+        },
+        {
+          text: 'Reload',
+          /* You can use the `reload` callback to triger data reload after your action */
+          callback: (item, reload) => {
+            console.dir(item);
+            reload();
+          },
+          type: 'reload',
+          icon: 'refresh'
+        }
+      ],
+      /* This action matches agains grid config context to hook into a grid */
+      matchesGrid: (_: ActivatedRoute, context: GridConfigContext) => {
+        /* `matchesGrid` can also resolve asynchronously */
+        return of(context?.key === 'server-grid-example');
+      }
+    }),
+    /* For finer control on actions you can also provide a factory */
+    hookDataGridActionControls(ActionControlsFactory)
+  ]
+})
+export class ServerGridActionControlsModule {}

package/src/grids/server-grid-example/server-grid-example.component.ts

@@ -5,20 +5,25 @@ import {
   ActionControl,
   BulkActionControl,
   Column,
-  Pagination,
+  CoreModule,
+  DataSourceModifier,
+  DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER,
+  DATA_GRID_CONFIGURATION_STRATEGY,
+  DisplayOptions,
   GridConfig,
+  GridConfigContext,
+  GridConfigContextProvider,
   LoadMoreMode,
-  DataSourceModifier,
-  ServerSideDataResult,
+  Pagination,
   Row,
-  DisplayOptions,
-  CoreModule
+  ServerSideDataResult
 } from '@c8y/ngx-components';
 import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
 import { ServerGridExampleService } from './server-grid-example.service';
 import { TypeCellRendererComponent } from './type-data-grid-column/type.cell-renderer.component';
 import { TypeFilteringFormRendererComponent } from './type-data-grid-column/type.filtering-form-renderer.component';
 import { TypeHeaderCellRendererComponent } from './type-data-grid-column/type.header-cell-renderer.component';
+import { VoidConfigurationStrategy } from './void-configuration-strategy';
 
 /**
  * This is an example of using DataGridComponent for displaying, filtering and sorting managed objects
@@ -36,9 +41,19 @@ import { TypeHeaderCellRendererComponent } from './type-data-grid-column/type.he
     TypeFilteringFormRendererComponent,
     TypeHeaderCellRendererComponent
   ],
-  providers: [ServerGridExampleService]
+  providers: [
+    ServerGridExampleService,
+    {
+      provide: DATA_GRID_CONFIGURATION_STRATEGY,
+      useClass: VoidConfigurationStrategy
+    },
+    {
+      provide: DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER,
+      useExisting: ServerGridExampleComponent
+    }
+  ]
 })
-export class ServerGridExampleComponent {
+export class ServerGridExampleComponent implements GridConfigContextProvider {
   title = 'Managed objects';
   loadMoreItemsLabel = 'Load more managed objects';
   loadingItemsLabel = 'Loading managed objects…';
@@ -68,6 +83,16 @@ export class ServerGridExampleComponent {
     this.refresh.subscribe(() => this.onRefreshClick());
   }
 
+  getGridConfigContext(): GridConfigContext {
+    return {
+      /**
+       * You can provide data here that can be used for grid configration storage,
+       * action control matchers, etc.
+       */
+      key: 'server-grid-example'
+    };
+  }
+
   /** Used in ngFor for columns iteration. */
   trackByName(_index, column: Column): string {
     return column.name;

package/src/grids/server-grid-example/server-grid-example.module.ts

@@ -1,9 +1,10 @@
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { NgModule } from '@angular/core';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+import { ServerGridActionControlsModule } from './server-grid-action-controls.module';
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, ServerGridActionControlsModule],
   providers: [
     hookRoute({
       path: 'grids/server-grid-example',

package/src/grids/server-grid-example/void-configuration-strategy.ts

@@ -0,0 +1,37 @@
+import { Inject, Injectable, Optional } from '@angular/core';
+import {
+  AbstractConfigurationStrategy,
+  DATA_GRID_CONFIGURATION_CONTEXT,
+  DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER,
+  GridConfig,
+  GridConfigContext,
+  GridConfigContextProvider
+} from '@c8y/ngx-components';
+import { Observable, of } from 'rxjs';
+
+/**
+ * A <code>DataGridConfigurationStrategy</code> gives you the flexibility to implement
+ * the desired mechanism of how data grid configuration (column order, visibility, sorting,
+ * filtering, custom columns, pagination) can be persisted.
+ */
+@Injectable()
+export class VoidConfigurationStrategy extends AbstractConfigurationStrategy {
+  constructor(
+    @Inject(DATA_GRID_CONFIGURATION_CONTEXT)
+    @Optional()
+    protected context: GridConfigContext,
+    @Inject(DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER)
+    @Optional()
+    protected contextProvider: GridConfigContextProvider
+  ) {
+    super(context, contextProvider);
+  }
+
+  getConfig$(): Observable<GridConfig> {
+    return of(null);
+  }
+
+  saveConfig$(): Observable<GridConfig> {
+    return of(null);
+  }
+}