@c8y/tutorial 1021.80.1 → 1022.3.2

package/src/grids/tree-grid-example/client-tree-grid-example.component.ts

@@ -0,0 +1,169 @@
+import { Component, OnInit } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {
+  ActionControl,
+  BuiltInActionType,
+  BulkActionControl,
+  Column,
+  CoreModule,
+  CustomColumnConfig,
+  GridConfig,
+  Pagination,
+  Row
+} from '@c8y/ngx-components';
+import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
+import { data } from './client-tree-grid.data';
+
+/**
+ * This is an example of using DataGridComponent to display a static set of data
+ * and allow user for filering and sorting it on client side.
+ */
+@Component({
+  selector: 'c8y-client-tree-grid-example',
+  templateUrl: './client-tree-grid-example.component.html',
+  standalone: true,
+  imports: [CoreModule, DeviceGridModule, RouterModule]
+})
+export class ClientGridExampleComponent implements OnInit {
+  /** 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: 'name',
+      header: 'Name',
+      path: 'name',
+      filterable: true
+    },
+    {
+      name: 'id',
+      header: 'ID',
+      path: 'id',
+      filterable: true
+    },
+    {
+      name: 'serialNumber',
+      header: 'Serial number',
+      path: 'serialNumber',
+      filterable: true
+    },
+    {
+      name: 'firmwareVersion',
+      header: 'Firmware',
+      path: 'firmwareVersion',
+      filterable: true
+    }
+  ];
+  /** Initial pagination settings. */
+  pagination: Pagination = {
+    pageSize: 30,
+    currentPage: 1
+  };
+  /** Will allow for selecting items and perform bulk actions on them. */
+  selectable = 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.Edit,
+      callback: selectedItem => this.onItemEdit(selectedItem)
+    },
+    {
+      type: BuiltInActionType.Delete,
+      callback: selectedItem => this.onItemDelete(selectedItem)
+    }
+  ];
+  /**
+   * Defines actions for multiple rows.
+   * `type` can be one of the predefined ones, or a custom one.
+   * `callback` executes the action (based on the ids of selected items).
+   */
+  bulkActionControls: BulkActionControl[] = [
+    {
+      type: BuiltInActionType.Export,
+      callback: selectedItemIds => this.onItemsExport(selectedItemIds)
+    },
+    {
+      type: BuiltInActionType.Delete,
+      callback: selectedItemIds => this.onItemsDelete(selectedItemIds)
+    }
+  ];
+  /** Static data to display. */
+  data: any[];
+
+  ngOnInit() {
+    // load static data from another file, could be loaded from anywhere
+    this.data = this.dataToRows(data);
+    console.log('data loaded:', this.data);
+  }
+
+  /** Executes an edit action on the selected item. */
+  onItemEdit(selectedItem) {
+    console.log('item to edit:');
+    console.dir(selectedItem);
+  }
+
+  /** Executes a delete action on the selected item. */
+  onItemDelete(selectedItem) {
+    console.log('item to delete:');
+    console.dir(selectedItem);
+  }
+
+  /** Executes an action on selected items, whenever the selection changes. */
+  onItemsSelect(selectedItemIds) {
+    console.log('selected items:');
+    console.dir(selectedItemIds);
+  }
+
+  /** Executes an export action of the selected multiple items. */
+  onItemsExport(selectedItemIds) {
+    console.log('items to export:');
+    console.dir(selectedItemIds);
+  }
+
+  /** Executes a delete action on the selected multiple items. */
+  onItemsDelete(selectedItemIds) {
+    console.log('items to delete:');
+    console.dir(selectedItemIds);
+  }
+
+  /** Executes logic when data grid config changes. */
+  onConfigChange(config: GridConfig) {
+    console.log('configuration changed:');
+    console.dir(config);
+  }
+
+  onFilter(filter) {
+    console.log('filter changed:');
+    console.log(filter);
+  }
+
+  onAddCustomColumn(customColumnConfig: CustomColumnConfig) {
+    console.log('custom column added:');
+    console.log(customColumnConfig);
+  }
+
+  onRemoveCustomColumn(column: Column) {
+    console.log('custom column removed:');
+    console.log(column);
+  }
+
+  private dataToRows(data: any[], parentRow?: Row): Row[] {
+    return data.map(item => {
+      const row = {
+        ...item,
+        hasChildren: item.childNodes?.length > 0,
+        parentRow
+      };
+      row.childNodes =
+        item.childNodes?.length > 0 ? this.dataToRows(item.childNodes, row) : undefined;
+      return row;
+    });
+  }
+}

package/src/grids/tree-grid-example/client-tree-grid.data.ts

@@ -0,0 +1,147 @@
+/** Just a sample set of data. */
+export const data = [
+  {
+    id: '1000000001',
+    name: 'SmartTemp XT-200 Environmental Sensor',
+    serialNumber: 'SN-XT200-9F4G7K',
+    firmwareVersion: '1.3.2',
+    childNodes: [
+      {
+        id: '1000000101',
+        name: 'Temperature Probe',
+        serialNumber: 'CH-TEMP-234XF',
+        firmwareVersion: '2.1.0',
+        childNodes: [
+          {
+            id: '1000000111',
+            name: 'Thermistor Core',
+            serialNumber: 'CMP-TC-0021',
+            firmwareVersion: '1.0.5'
+          },
+          {
+            id: '1000000112',
+            name: 'Shielding Module',
+            serialNumber: 'CMP-SH-3992',
+            firmwareVersion: '1.1.1'
+          }
+        ]
+      },
+      {
+        id: '1000000102',
+        name: 'Humidity Sensor',
+        serialNumber: 'CH-HMD-92JF3',
+        firmwareVersion: '2.0.3',
+        childNodes: [
+          {
+            id: '1000000121',
+            name: 'Moisture Grid',
+            serialNumber: 'CMP-MG-1200',
+            firmwareVersion: '1.0.2'
+          },
+          {
+            id: '1000000122',
+            name: 'Condensation Shield',
+            serialNumber: 'CMP-CS-8902',
+            firmwareVersion: '1.0.7'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: '1000000002',
+    name: 'AquaSense Flow Meter V3',
+    serialNumber: 'SN-AQ3-V3J8L2',
+    firmwareVersion: '4.0.1',
+    childNodes: [
+      {
+        id: '1000000201',
+        name: 'Flow Rate Sensor',
+        serialNumber: 'CH-FLOW-12LD9',
+        firmwareVersion: '3.2.0',
+        childNodes: [
+          {
+            id: '1000000211',
+            name: 'Turbine Core',
+            serialNumber: 'CMP-TUR-3456',
+            firmwareVersion: '1.1.3'
+          },
+          {
+            id: '1000000212',
+            name: 'Velocity Encoder',
+            serialNumber: 'CMP-VEL-0082',
+            firmwareVersion: '1.0.9'
+          }
+        ]
+      },
+      {
+        id: '1000000202',
+        name: 'Pressure Gauge',
+        serialNumber: 'CH-PRES-77XMN',
+        firmwareVersion: '3.1.1',
+        childNodes: [
+          {
+            id: '1000000221',
+            name: 'Sensor Diaphragm',
+            serialNumber: 'CMP-DIA-4712',
+            firmwareVersion: '1.2.5'
+          },
+          {
+            id: '1000000222',
+            name: 'Analog-to-Digital Module',
+            serialNumber: 'CMP-ADM-9913',
+            firmwareVersion: '1.3.0'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: '1000000003',
+    name: 'SkyLink Drone Beacon',
+    serialNumber: 'SN-SKYB-239DKT',
+    firmwareVersion: '2.5.0',
+    childNodes: [
+      {
+        id: '1000000301',
+        name: 'GPS Module',
+        serialNumber: 'CH-GPS-0039H',
+        firmwareVersion: '1.9.0',
+        childNodes: [
+          {
+            id: '1000000311',
+            name: 'Antenna Array',
+            serialNumber: 'CMP-ANT-2100',
+            firmwareVersion: '1.0.4'
+          },
+          {
+            id: '1000000312',
+            name: 'Triangulation Processor',
+            serialNumber: 'CMP-TRI-3029',
+            firmwareVersion: '1.1.2'
+          }
+        ]
+      },
+      {
+        id: '1000000302',
+        name: 'Altitude Sensor',
+        serialNumber: 'CH-ALT-112PK',
+        firmwareVersion: '2.4.3',
+        childNodes: [
+          {
+            id: '1000000321',
+            name: 'Barometric Core',
+            serialNumber: 'CMP-BAR-0192',
+            firmwareVersion: '1.0.8'
+          },
+          {
+            id: '1000000322',
+            name: 'Drift Compensator',
+            serialNumber: 'CMP-DRF-6674',
+            firmwareVersion: '1.2.1'
+          }
+        ]
+      }
+    ]
+  }
+];

package/src/grids/tree-grid-example/server-tree-grid-example.component.html

@@ -0,0 +1,30 @@
+<c8y-title>Data grid examples</c8y-title>
+
+<c8y-data-grid
+  class="content-fullpage d-flex d-col border-top border-bottom"
+  [title]="title"
+  [loadMoreItemsLabel]="loadMoreItemsLabel"
+  [loadingItemsLabel]="loadingItemsLabel"
+  [displayOptions]="displayOptions"
+  [columns]="columns"
+  [pagination]="pagination"
+  [childNodePagination]="childNodePagination"
+  [infiniteScroll]="infiniteScroll"
+  [treeGrid]="true"
+  [serverSideDataCallback]="serverSideDataCallback"
+  [refresh]="refresh"
+  (rowClick)="onRowClick($event)"
+  [actionControls]="actionControls"
+  [selectable]="selectable"
+  parentNodeLabelProperty="name"
+  (itemsSelect)="onItemsSelect($event)"
+  [bulkActionControls]="bulkActionControls"
+  (onConfigChange)="onConfigChange($event)"
+>
+  <c8y-ui-empty-state
+    [icon]="'search'"
+    [title]="'No results to display.' | translate"
+    [subtitle]="'Refine your search terms or check your spelling.' | translate"
+    [horizontal]="true"
+  ></c8y-ui-empty-state>
+</c8y-data-grid>

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

@@ -0,0 +1,156 @@
+import { Component, EventEmitter } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import {
+  ActionControl,
+  BulkActionControl,
+  Column,
+  CoreModule,
+  DataSourceModifier,
+  DisplayOptions,
+  GridConfig,
+  GridConfigContext,
+  GridConfigContextProvider,
+  LoadMoreMode,
+  Pagination,
+  Row,
+  ServerSideDataResult
+} from '@c8y/ngx-components';
+import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
+import { ServerTreeGridExampleService } from './server-tree-grid-example.service';
+
+/**
+ * This is an example of using DataGridComponent for displaying, filtering and sorting managed objects
+ * using customized columns and dynamically built inventory queries.
+ */
+@Component({
+  selector: 'c8y-server-tree-grid-example',
+  templateUrl: './server-tree-grid-example.component.html',
+  standalone: true,
+  imports: [CoreModule, DeviceGridModule, RouterModule],
+  providers: [ServerTreeGridExampleService]
+})
+export class ServerTreeGridExampleComponent implements GridConfigContextProvider {
+  title = 'Managed objects';
+  loadMoreItemsLabel = 'Load more managed objects';
+  loadingItemsLabel = 'Loading managed objects…';
+
+  displayOptions: DisplayOptions = {
+    bordered: true,
+    striped: true,
+    filter: true,
+    gridHeader: true,
+    hover: true
+  };
+
+  columns: Column[];
+  pagination: Pagination;
+  childNodePagination: Pagination;
+  infiniteScroll: LoadMoreMode = 'auto';
+  serverSideDataCallback: any;
+
+  refresh: EventEmitter<any> = new EventEmitter<any>();
+
+  selectable = true;
+  actionControls: ActionControl[];
+  bulkActionControls: BulkActionControl[];
+
+  constructor(private service: ServerTreeGridExampleService) {
+    this.columns = this.service.getColumns();
+    this.pagination = this.service.getPagination();
+    this.childNodePagination = this.service.getChildNodePagination();
+    this.actionControls = this.service.getActionControls();
+    this.bulkActionControls = this.service.getBulkActionControls();
+    // we're setting up `serverSideDataCallback` to execute a method from this component with bound `this`
+    this.serverSideDataCallback = this.onDataSourceModifier.bind(this);
+    // we're setting up `onRefreshClick` to be executed on refresh event
+    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;
+  }
+
+  /**
+   * This method loads data when data grid requests it (e.g. on initial load or on column settings change).
+   * It gets the object with current data grid setup and is supposed to return:
+   * full response, list of items, paging object, the number of items in the filtered subset, the number of all items.
+   */
+  async onDataSourceModifier(
+    dataSourceModifier: DataSourceModifier
+  ): Promise<ServerSideDataResult> {
+    const { parentRow } = dataSourceModifier;
+    if (parentRow) {
+      const { res, data, paging } = await this.service.getChildDevices(
+        parentRow?.id,
+        parentRow?.pagination
+      );
+
+      data.forEach(row => {
+        row.hasChildren = row.childDevices.count > 0;
+      });
+
+      const serverSideDataResult: ServerSideDataResult = {
+        res,
+        data,
+        paging,
+        filteredSize: parentRow.childDevices.count,
+        size: parentRow.childDevices.count,
+        parentRow
+      };
+      return serverSideDataResult;
+    } else {
+      const { res, data, paging } = await this.service.getData(
+        dataSourceModifier.columns,
+        dataSourceModifier.pagination
+      );
+
+      data.forEach(row => {
+        row.hasChildren = row.childDevices.count > 0;
+      });
+
+      const filteredSize: number = await this.service.getCount(
+        dataSourceModifier.columns,
+        dataSourceModifier.pagination
+      );
+      const size: number = await this.service.getTotal();
+
+      const serverSideDataResult: ServerSideDataResult = { res, data, paging, filteredSize, size };
+      return serverSideDataResult;
+    }
+  }
+
+  /** Executes an action on row click. */
+  onRowClick(row: Row) {
+    console.log('row clicked:');
+    console.dir(row);
+  }
+
+  /** Executes an action on the selected items. */
+  onItemsSelect(selectedItemIds: string[]) {
+    console.log('selected item ids:');
+    console.dir(selectedItemIds);
+  }
+
+  /** Executes an action on grid config change. */
+  onConfigChange(gridConfig: GridConfig) {
+    console.log('grid config changed:');
+    console.dir(gridConfig);
+  }
+
+  /** Executes an action on refresh event. */
+  onRefreshClick() {
+    console.log('refresh clicked');
+  }
+}