@c8y/tutorial 1019.0.3

package/src/dynamic-forms/json-schema-example/json-schema-example.module.ts

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'dynamic-forms/json',
+      loadComponent: () =>
+        import('./json-schema-example.component').then(m => m.JSONSchemaExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/dynamic-forms/json',
+        label: 'JSON Schema',
+        icon: 'c8y-css',
+        priority: 79,
+        parent: 'Dynamic forms'
+      })
+    )
+  ]
+})
+export class JsonSchemaExampleModule {}

package/src/for-of-directive/for-of-example.component.html

@@ -0,0 +1,19 @@
+<c8y-title>For of directive</c8y-title>
+
+<div class="input-group input-group-search">
+  <input
+    class="form-control"
+    title="{{ 'Filter' }}"
+    placeholder="Filter…"
+    type="search"
+    (keyup)="setPipe($event.target.value)"
+  />
+  <span class="input-group-addon">
+    <i c8yIcon="search"></i>
+  </span>
+</div>
+<!-- important -->
+<div *c8yFor="let device of devices; loadMore: 'show'; let i = index; pipe: filterPipe">
+  {{ i + 1 }}. {{ device.name }}
+</div>
+<!-- /important -->

package/src/for-of-directive/for-of-example.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { CoreModule, ForOfFilterPipe } from '@c8y/ngx-components';
+import { IManagedObject, InventoryService, IResultList } from '@c8y/client';
+import { pipe } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
+
+@Component({
+  selector: 'c8y-for-of-example',
+  templateUrl: './for-of-example.component.html',
+  standalone: true,
+  imports: [CoreModule]
+})
+export class ForOfExampleComponent {
+  devices: IResultList<IManagedObject>;
+  filterPipe: ForOfFilterPipe = pipe(tap());
+
+  constructor(private inventoryService: InventoryService) {
+    this.loadDevices();
+  }
+
+  async loadDevices() {
+    this.devices = await this.inventoryService.list({
+      pageSize: 10,
+      withTotalPages: true,
+      fragmentType: 'c8y_IsDevice'
+    });
+  }
+
+  setPipe(filterStr: string) {
+    this.filterPipe = pipe(
+      map((data: []) => {
+        return data.filter(
+          (mo: IManagedObject) =>
+            mo.name && mo.name.toLowerCase().indexOf(filterStr.toLowerCase()) > -1
+        );
+      })
+    );
+  }
+}

package/src/for-of-directive/for-of.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'for-of',
+      loadComponent: () => import('./for-of-example.component').then(m => m.ForOfExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'For of directive example',
+        path: 'for-of'
+      })
+    )
+  ]
+})
+export class ForOfModule {}

package/src/forms/form-validation/forms-validation.component.html

@@ -0,0 +1,105 @@
+<c8y-title>Forms Validation</c8y-title>
+<form
+  (ngSubmit)="formGroup.valid && save(formGroup.value)"
+  (change)="formChange()"
+  [formGroup]="formGroup"
+>
+  <c8y-form-group>
+    <label for="firstName" class="control-label" translate>First name (default validation messages)</label>
+    <input
+      type="text"
+      class="form-control"
+      id="firstName"
+      formControlName="firstName"
+      [placeholder]="'e.g. {{ example }}' | translate: { example: 'Max' }"
+    />
+  </c8y-form-group>
+
+  <c8y-form-group>
+    <label for="lastName" class="control-label" translate>Last name (custom validation messages added)</label>
+    <input
+      type="text"
+      class="form-control"
+      id="lastName"
+      formControlName="lastName"
+      [placeholder]="'e.g. {{ example }}' | translate: { example: 'Mustermann' }"
+    />
+    <c8y-messages>
+      <c8y-message name="required" text="Last Name is an required field, please fill it."></c8y-message>
+      <c8y-message name="minlength" [text]="'Last Name is supposed to be longer then {{ requiredLength }} characters.'"></c8y-message>
+      <c8y-message name="maxlength" [text]="'Last Name is not supposed to be longer then {{ requiredLength }} characters.'"></c8y-message>
+    </c8y-messages>
+  </c8y-form-group>
+
+  <c8y-form-group>
+    <label for="eMail" class="control-label" translate>E-Mail</label>
+    <input
+      type="email"
+      class="form-control"
+      id="eMail"
+      formControlName="eMail"
+      [placeholder]="'e.g. {{ example }}' | translate: { example: 'max.mustermann@example.com' }"
+    />
+    <c8y-messages>
+      <c8y-message name="email" text="This does not fulfill our standards for email addresses."></c8y-message>
+    </c8y-messages>
+  </c8y-form-group>
+
+  <c8y-form-group>
+    <label for="gender" translate>Gender</label>
+    <div class="c8y-select-wrapper">
+      <select id="gender" class="form-control" formControlName="gender">
+        <option [ngValue]="''">Select…</option>
+        <option [ngValue]="'male'">{{ 'Male' | translate }}</option>
+        <option [ngValue]="'female'">{{ 'Female' | translate }}</option>
+        <option [ngValue]="'x'">X</option>
+      </select>
+      <span></span>
+    </div>
+    <c8y-messages>
+      <c8y-message name="gender" [text]="'This is not a valid gender.' | translate"></c8y-message>
+    </c8y-messages>
+  </c8y-form-group>
+
+  <c8y-form-group>
+    <label for="description" class="control-label" translate>Description</label>
+    <input
+      type="text"
+      class="form-control"
+      id="description"
+      formControlName="description"
+      [placeholder]="'e.g. {{ example }}' | translate: { example: 'Some description' }"
+    />
+  </c8y-form-group>
+
+  <c8y-form-group>
+    <label for="description2" class="control-label" translate>Description2</label>
+    <input
+      type="text"
+      class="form-control"
+      id="description2"
+      formControlName="description2"
+      [placeholder]="'e.g. {{ example }}' | translate: { example: 'Some description' }"
+    />
+    <c8y-messages>
+      <c8y-message name="pattern" [text]="'Must start with \'description\', optionally followed by further letters.' | translate"></c8y-message>
+    </c8y-messages>
+  </c8y-form-group>
+
+  <c8y-form-group [novalidation]="true">
+    <label for="notes" class="control-label" translate>Notes</label>
+    <input
+      type="text"
+      class="form-control"
+      id="notes"
+      formControlName="notes"
+      [placeholder]="'e.g. {{ example }}' | translate: { example: 'Some notes' }" #test
+    />
+    <c8y-messages>
+      <c8y-message *ngIf="test.value?.length > 0 && test.value?.length < 5 ">Take longer notes.</c8y-message>
+      <c8y-message *ngIf="test.value?.length > 50">Don't take too long notes.</c8y-message>
+    </c8y-messages>
+  </c8y-form-group>
+
+  <button type="submit" class="btn btn-primary" [disabled]="formGroup.invalid" translate>Submit</button>
+</form>

package/src/forms/form-validation/forms-validation.component.ts

@@ -0,0 +1,52 @@
+import { Component } from '@angular/core';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormGroup,
+  ValidationErrors,
+  ValidatorFn,
+  Validators
+} from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'app-forms-validation-tutorial',
+  templateUrl: './forms-validation.component.html',
+  standalone: true,
+  imports: [CommonModule, CoreModule]
+})
+export class FormsValidationTutorialComponent {
+  formGroup: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.formGroup = this.formBuilder.group({
+      firstName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
+      lastName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(50)]],
+      eMail: ['', [Validators.required, Validators.email]],
+      gender: ['', this.genderValidator()],
+      description: ['', [Validators.required, Validators.pattern(/^description[a-z]*$/)]],
+      description2: ['', [Validators.required, Validators.pattern(/^description[a-z]*$/)]],
+      notes: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(50)]]
+    });
+  }
+
+  save(value) {
+    console.log(value);
+  }
+
+  formChange() {
+    console.log('change');
+  }
+
+  genderValidator(): ValidatorFn {
+    return (control: AbstractControl): ValidationErrors | null => {
+      const validValues = ['x', 'female', 'male'];
+      const currentFormFieldValue = control.value;
+      if (validValues.includes(currentFormFieldValue)) {
+        return null;
+      }
+      return { gender: true };
+    };
+  }
+}

package/src/forms/form-validation/forms.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { hookNavigator, hookRoute, NavigatorNode } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'forms/form-validation',
+      loadComponent: () =>
+        import('./forms-validation.component').then(m => m.FormsValidationTutorialComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/forms/form-validation',
+        label: 'Validation',
+        icon: 'form',
+        priority: 80,
+        parent: 'Dynamic forms'
+      })
+    )
+  ]
+})
+export class FormsTutorialModule {}

package/src/forms/index.ts

@@ -0,0 +1 @@
+export * from './form-validation/forms.module';

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

@@ -0,0 +1,16 @@
+<c8y-title>Data grid examples</c8y-title>
+
+<c8y-data-grid
+  [title]="title"
+  [columns]="columns"
+  [rows]="data"
+  [pagination]="pagination"
+  [selectable]="selectable"
+  (itemsSelect)="onItemsSelect($event)"
+  [actionControls]="actionControls"
+  [bulkActionControls]="bulkActionControls"
+  (onConfigChange)="onConfigChange($event)"
+  (onFilter)="onFilter($event)"
+  (onAddCustomColumn)="onAddCustomColumn($event)"
+  (onRemoveCustomColumn)="onRemoveCustomColumn($event)"
+></c8y-data-grid>

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

@@ -0,0 +1,166 @@
+import { Component, OnInit } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {
+  ActionControl,
+  BuiltInActionType,
+  BulkActionControl,
+  Column,
+  CoreModule,
+  CustomColumnConfig,
+  GridConfig,
+  Pagination
+} from '@c8y/ngx-components';
+import { DeviceGridModule } from '@c8y/ngx-components/device-grid';
+import { getData } from './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-grid-example',
+  templateUrl: './client-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: '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
+    }
+  ];
+  /** 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 = getData();
+  }
+
+  /** 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);
+  }
+}

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

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  imports: [CommonModule],
+  providers: [
+    hookRoute({
+      path: 'grids/client-grid-example',
+      loadComponent: () =>
+        import('./client-grid-example.component').then(m => m.ClientGridExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        priority: 30,
+        path: 'grids/client-grid-example',
+        icon: 'table',
+        label: 'Client grid',
+        parent: 'Data grid examples'
+      })
+    )
+  ]
+})
+export class ClientGridExampleModule {}