@c8y/tutorial 1019.0.3 → 1019.2.4

package/cumulocity.config.ts

@@ -1,8 +1,8 @@
 import { EnvironmentOptions } from '@c8y/devkit/dist/options';
-import { author, description, version } from './package.json';
 import { DefinePlugin } from 'webpack';
+import { author, description, version } from './package.json';
 
-const options: EnvironmentOptions = {
+export default {
   runTime: {
     author,
     description,
@@ -315,6 +315,12 @@ const options: EnvironmentOptions = {
         path: './src/grids/device-grid-example/device-grid-example.module.ts',
         description: 'An example for a device data grid.'
       },
+      {
+        name: 'Empty grid example',
+        module: 'EmptyGridExampleModule',
+        path: './src/grids/empty-grid-example/empty-grid-example.module.ts',
+        description: 'An example for an empty data grid.'
+      },
       {
         name: 'Right drawer hook sample',
         module: 'RightDrawerModule',
@@ -557,6 +563,7 @@ const options: EnvironmentOptions = {
         'ClientGridExampleModule',
         'ServerGridExampleModule',
         'DeviceGridExampleModule',
+        'EmptyGridExampleModule',
         'TextTranslationByServiceModule',
         'TextTranslationGettextModule',
         'C8yDateTranslationModule',
@@ -638,6 +645,4 @@ const options: EnvironmentOptions = {
       '@ngx-translate/core'
     ]
   }
-};
-
-export default options;
+} as const satisfies EnvironmentOptions;

package/package.json

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

package/src/grids/device-grid-example/device-grid-example-configuration-strategy.ts

@@ -0,0 +1,44 @@
+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({ providedIn: 'root' })
+export class DeviceGridExampleConfigurationStrategy 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$(ctx?: GridConfigContext): Observable<GridConfig> {
+    const context = this.retrieveContext(ctx);
+    return context?.key
+      ? of(JSON.parse(localStorage.getItem(context?.key)) as unknown as GridConfig)
+      : null;
+  }
+
+  saveConfig$(config: GridConfig, ctx?: GridConfigContext): Observable<GridConfig> {
+    const context = this.retrieveContext(ctx);
+    if (context?.key) {
+      localStorage.setItem(context.key, JSON.stringify(config));
+    }
+    return of(config);
+  }
+}

package/src/grids/device-grid-example/device-grid-example.component.html

@@ -1,58 +1,29 @@
 <c8y-title>Data grid examples</c8y-title>
 
-<div class="card">
-  <div class="card-header separator">
-    <h4 class="card-title">Device grid</h4>
-  </div>
-  <div class="card-block">
-    <p>
-      The following example features
-      <code>DeviceGridComponent</code>
-      and:
-    </p>
-    <ul>
-      <li>displaying a filterable and sortable list of devices</li>
-      <li>loading grid configuration from presets (columns, stored filtering and sorting)</li>
-      <li>event handlers for: columns config changes, device query string changes</li>
-      <li>
-        custom validators for filters (based on
-        <a
-          href="https://formly.dev/docs/guide/validation/#3-declaring-validation-function-and-message-within-field-definition"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Formly documentation
-        </a>
-        )
-      </li>
-    </ul>
-
-    <div class="form-group">
-      <label for="exampleSelect">Select a preset example</label>
-      <div class="c8y-select-wrapper">
-        <select
-          class="form-control"
-          id="exampleSelect"
-          [ngModel]="selectedExample"
-          (ngModelChange)="selectExample($event)"
-        >
-          <option
-            *ngFor="let example of examples"
-            [ngValue]="example"
-          >
-            {{ example.label }}
-          </option>
-        </select>
-        <span></span>
-      </div>
-    </div>
-
-    <c8y-device-grid
-      [title]="'Devices'"
-      [columns]="columnsInput"
-      [actionControls]="[]"
-      (onColumnsChange)="onColumnsChange($event)"
-      (onDeviceQueryStringChange)="onDeviceQueryStringChange($event)"
-    ></c8y-device-grid>
+<div class="form-group">
+  <label for="exampleSelect">Select a preset example</label>
+  <div class="c8y-select-wrapper">
+    <select
+      class="form-control"
+      id="exampleSelect"
+      [ngModel]="selectedExample"
+      (ngModelChange)="selectExample($event)"
+    >
+      <option
+        *ngFor="let example of examples"
+        [ngValue]="example"
+      >
+        {{ example.label }}
+      </option>
+    </select>
+    <span></span>
   </div>
 </div>
+
+<c8y-device-grid
+  [title]="'Devices'"
+  [columns]="columnsInput"
+  [actionControls]="[]"
+  (onColumnsChange)="onColumnsChange($event)"
+  (onDeviceQueryStringChange)="onDeviceQueryStringChange($event)"
+></c8y-device-grid>

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

@@ -1,19 +1,54 @@
 import { Component } from '@angular/core';
 import { AbstractControl } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { Column, CoreModule, CustomColumn, gettext } from '@c8y/ngx-components';
+import {
+  Column,
+  CoreModule,
+  CustomColumn,
+  DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER,
+  DATA_GRID_CONFIGURATION_STRATEGY,
+  gettext,
+  GridConfigContext,
+  GridConfigContextProvider
+} from '@c8y/ngx-components';
 import { DeviceGridModule, DeviceGridService } from '@c8y/ngx-components/device-grid';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { find } from 'lodash-es';
+import { DeviceGridExampleConfigurationStrategy } from './device-grid-example-configuration-strategy';
 
 @Component({
   selector: 'c8y-device-grid-example',
   templateUrl: './device-grid-example.component.html',
   standalone: true,
   imports: [CoreModule, DeviceGridModule, RouterModule],
-  providers: [DeviceGridService]
+  providers: [
+    DeviceGridService,
+    /* Providing DATA_GRID_CONFIGURATION_STRATEGY defines how grid configuration
+     * should be persisted. You can use existing implementations like
+     * `UserPreferencesConfigurationStrategy` or implement your own.
+     */
+    {
+      provide: DATA_GRID_CONFIGURATION_STRATEGY,
+      useClass: DeviceGridExampleConfigurationStrategy
+    },
+    /* Providing a DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER gives you the flexibility
+     * to persist configurations based on various criteria at runtime - device type,
+     * current user, group, etc.
+     * By default all configurable options in a grid are persisted. You can exlude
+     * specific options (pagination, filters, sorting, etc.) by defining `GridConfigFilter`
+     * in your context.
+     * Alternatevely, in simpler scenarios you can provide a static context
+     * with DATA_GRID_CONFIGURATION_CONTEXT and `useValue`.
+     */
+    {
+      provide: DATA_GRID_CONFIGURATION_CONTEXT_PROVIDER,
+      useExisting: DeviceGridExampleComponent
+    }
+  ]
 })
-export class DeviceGridExampleComponent {
+export class DeviceGridExampleComponent implements GridConfigContextProvider {
+  readonly withPersistedConfigExampleLabel =
+    'Standard columns with configuration persisted in local storage';
   examples: Array<{ label: string; columns: Column[] }>;
   selectedExample;
   columnsInput: Column[];
@@ -23,11 +58,21 @@ export class DeviceGridExampleComponent {
       this.getExampleWithStandardColumns(),
       this.getExampleWithStandardColumnsAndSavedFilteringSorting(),
       this.getExampleWithCustomColumnAndPredefinedFiltering(),
-      this.getExampleWithCustomColumnAndCustomValidator()
+      this.getExampleWithCustomColumnAndCustomValidator(),
+      this.getExampleWithStandardColumnsAndPersistedConfiguration()
     ];
     this.selectExample(this.examples[0]);
   }
 
+  getGridConfigContext(): GridConfigContext {
+    return {
+      key:
+        this.selectedExample.label === this.withPersistedConfigExampleLabel
+          ? 'example-device-grid'
+          : null
+    };
+  }
+
   getExampleWithStandardColumns() {
     const columns = this.deviceGridService.getDefaultColumns();
     return {
@@ -113,6 +158,14 @@ export class DeviceGridExampleComponent {
     };
   }
 
+  getExampleWithStandardColumnsAndPersistedConfiguration() {
+    const columns = this.deviceGridService.getDefaultColumns();
+    return {
+      label: this.withPersistedConfigExampleLabel,
+      columns
+    };
+  }
+
   selectExample(example) {
     this.selectedExample = example;
     this.columnsInput = example.columns;

package/src/grids/empty-grid-example/empty-grid-example.component.html

@@ -0,0 +1,14 @@
+<c8y-title>Empty grid example</c8y-title>
+
+<c8y-data-grid
+  [title]="title"
+  [columns]="columns"
+  [actionControls]="actionControls"
+>
+  <c8y-ui-empty-state
+    icon="search"
+    title="No results to display."
+    subtitle="Refine your search terms or check your spelling."
+    [horizontal]="true"
+  ></c8y-ui-empty-state>
+</c8y-data-grid>

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

@@ -0,0 +1,74 @@
+import { Component } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { ActionControl, BuiltInActionType, Column, CoreModule } from '@c8y/ngx-components';
+import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
+
+@Component({
+  selector: 'c8y-empty-grid-example',
+  templateUrl: './empty-grid-example.component.html',
+  standalone: true,
+  imports: [CoreModule, DeviceGridModule, RouterModule]
+})
+export class EmptyGridExampleComponent {
+  /** This will be used as a title for the data grid. */
+  title = 'Devices';
+  /**
+   * This defines what columns will be displayed in the grid.
+   * In this example we're just displaying properties from the items from the loaded data file.
+   */
+  columns: Column[] = [
+    {
+      name: 'id',
+      header: 'ID',
+      path: 'id',
+      filterable: true
+    },
+    {
+      name: 'name',
+      header: 'Name',
+      path: 'name',
+      filterable: true
+    },
+    {
+      name: 'type',
+      header: 'Type',
+      path: 'type',
+      filterable: true
+    },
+    {
+      name: 'creationTime',
+      header: 'Creation time',
+      path: 'creationTime',
+      filterable: true
+    },
+    {
+      name: 'lastUpdated',
+      header: 'Last updated',
+      path: 'lastUpdated',
+      filterable: true
+    },
+    {
+      name: 'owner',
+      header: 'Owner',
+      path: 'owner',
+      filterable: true
+    }
+  ];
+  /**
+   * Defines actions for individual rows.
+   * `type` can be one of the predefined ones, or a custom one.
+   * `callback` executes the action (based on the selected item object).
+   */
+  actionControls: ActionControl[] = [
+    {
+      type: BuiltInActionType.Delete,
+      callback: selectedItem => this.onItemDelete(selectedItem)
+    }
+  ];
+
+  /** Executes a delete action on the selected item. */
+  onItemDelete(selectedItem) {
+    console.log('item to delete:');
+    console.dir(selectedItem);
+  }
+}

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

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'grids/empty-grid-example',
+      loadComponent: () =>
+        import('./empty-grid-example.component').then(m => m.EmptyGridExampleComponent)
+    })
+  ]
+})
+export class EmptyGridExampleModule {}

package/src/input/range-input-example.component.ts

@@ -6,20 +6,20 @@ import { CoreModule } from '@c8y/ngx-components';
   template: `<c8y-title> Range Input examples </c8y-title>
     <div class="p-t-24">
       <div class="form-group">
-        <label>Default range slider</label>
+        <label for="range1">Default range slider</label>
         <c8y-range>
-          <input type="range" min="0" max="100" steps="1" />
+          <input id="range1" type="range" min="0" max="100" steps="1" />
         </c8y-range>
       </div>
       <div class="form-group">
-        <label>Range with custom popover</label>
+        <label for="range2">Range with custom popover</label>
         <c8y-range #range>
           <ng-template #c8yRangeValue>
             <div>
               <span>The <strong>Value</strong> is: {{ range.value }}</span>
             </div>
           </ng-template>
-          <input type="range" min="20" max="60" steps="2" />
+          <input id="range2" type="range" min="20" max="60" steps="2" />
         </c8y-range>
       </div>
     </div>`,