@c8y/tutorial 1019.0.3

package/src/dashboard/widget-dashboard/widget-dashboard.component.ts

@@ -0,0 +1,65 @@
+import { Component } from '@angular/core';
+import { Widget, DashboardSettings, DashboardChange, CoreModule } from '@c8y/ngx-components';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'widget-dashboard',
+  template: `<c8y-title>Widget dashboard</c8y-title>
+    <c8y-widgets-dashboard
+      [context]="{}"
+      [contextDashboard]="{}"
+      [widgets]="widgets"
+      [settings]="{
+        isLoading: false,
+        isDisabled: false,
+        canDelete: false,
+        translateWidgetTitle: false,
+        allowFullscreen: true,
+        title: false
+      }"
+      (onFreeze)="toggleFreeze($event)"
+      (onChangeDashboard)="change($event)"
+      (onAddWidget)="addWidget()"
+      (onEditWidget)="editWidget($event)"
+      (onEditDashboard)="editDashboard()"
+    >
+      <!-- TODO: check me
+    Not added to demo that the functionality is gone then:
+    (onDeleteWidget)="deleteWidget($event)"
+    (onDeleteDashboard)="deleteDashboard($event)"
+  -->
+    </c8y-widgets-dashboard> `,
+  standalone: true,
+  imports: [CommonModule, CoreModule]
+})
+export class WidgetDashboardComponent {
+  widgets = [
+    { _x: 0, _y: 0, _width: 6, _height: 4, componentId: 'angular.widget.demo' },
+    { _x: 6, _y: 0, _width: 6, _height: 6, componentId: 'angular.widget.demo' }
+  ] as Widget[];
+
+  toggleFreeze(event: DashboardSettings) {
+    console.log('toggle freeze called', event);
+    event.isFrozen = !event.isFrozen;
+  }
+
+  change(event: DashboardChange) {
+    console.log('change called', event);
+  }
+
+  addWidget() {
+    console.log('add called');
+  }
+
+  editWidget(event: DashboardChange) {
+    console.log('edit called', event);
+  }
+
+  editDashboard() {
+    console.log('edit dashboard called');
+  }
+
+  update(event: DashboardChange) {
+    console.log(event);
+  }
+}

package/src/dashboard/widget-dashboard/widget-dashboard.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'dashboards/widget',
+      loadComponent: () =>
+        import('./widget-dashboard.component').then(m => m.WidgetDashboardComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Widget dashboard',
+        path: '/dashboards/widget',
+        icon: 'th-list',
+        priority: 1,
+        parent: 'Dashboards'
+      })
+    )
+  ]
+})
+export class WidgetDashboardModule {}

package/src/date-time-range/date-time-range-example.component.ts

@@ -0,0 +1,109 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { C8yTranslateModule, CommonModule, FormsModule, HeaderModule } from '@c8y/ngx-components';
+import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { DateTimePickerModule } from '@c8y/ngx-components';
+
+@Component({
+  selector: 'date-time-range-example',
+  template: `
+    <c8y-title>Date time range</c8y-title>
+    <div class="p-24">
+      <form class="d-flex-sm a-i-center-sm" [formGroup]="form">
+        <label class="m-r-sm-8">{{ 'Range' | translate }}</label>
+        <div
+          class="dropdown m-r-4 m-t-xs-4 m-b-xs-4"
+          container="body"
+          #dropdown="bs-dropdown"
+          dropdown
+          [insideClick]="true"
+        >
+          <button
+            class="dropdown-toggle form-control l-h-1 d-flex a-i-center"
+            title="{{ form.value.dateFrom | c8yDate: 'short' }} — {{
+              form.value.dateTo | c8yDate: 'short'
+            }}"
+            aria-haspopup="true"
+            dropdownToggle
+          >
+            <span data-cy="widget-time-context--selected-time-range">
+              {{ form.value.dateFrom | c8yDate: 'shortDate' }} —
+              {{ form.value.dateTo | c8yDate: 'shortDate' }}
+            </span>
+            <span class="caret m-r-8 m-l-4"></span>
+          </button>
+
+          <div class="dropdown-menu dropdown-menu--date-range" *dropdownMenu>
+            <div class="p-16">
+              <c8y-form-group [ngClass]="form.controls.dateFrom.errors ? 'has-error' : ''">
+                <label [title]="'From\`date\`' | translate" for="dateFrom" translate>
+                  From\`date\`
+                </label>
+                <c8y-date-time-picker
+                  id="dateFrom"
+                  [maxDate]="form.value.dateTo"
+                  [placeholder]="'From\`date\`' | translate"
+                  [formControl]="form.controls.dateFrom"
+                  [ngClass]="form.controls.dateFrom.errors ? 'has-error' : ''"
+                ></c8y-date-time-picker>
+                <c8y-messages [show]="form.controls.dateFrom.errors">
+                  <c8y-message
+                    name="dateAfterRangeMax"
+                    [text]="'This date is after the last allowed date.' | translate"
+                  ></c8y-message>
+                  <c8y-message
+                    name="invalidDateTime"
+                    [text]="'This date is invalid.' | translate"
+                  ></c8y-message>
+                </c8y-messages>
+              </c8y-form-group>
+
+              <c8y-form-group [ngClass]="form.controls.dateTo.errors ? 'has-error' : ''">
+                <label [title]="'To\`date\`' | translate" for="dateTo" translate>To\`date\`</label>
+                <c8y-date-time-picker
+                  id="dateTo"
+                  [minDate]="form.value.dateFrom"
+                  [placeholder]="'To\`date\`' | translate"
+                  [formControl]="form.controls.dateTo"
+                  [ngClass]="form.controls.dateTo.errors ? 'has-error' : ''"
+                ></c8y-date-time-picker>
+                <c8y-messages [show]="form.controls.dateTo.errors">
+                  <c8y-message
+                    name="dateBeforeRangeMin"
+                    [text]="'This date is before the earliest allowed date.' | translate"
+                  ></c8y-message>
+                  <c8y-message
+                    name="invalidDateTime"
+                    [text]="'This date is invalid.' | translate"
+                  ></c8y-message>
+                </c8y-messages>
+              </c8y-form-group>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  `,
+  standalone: true,
+  imports: [
+    ReactiveFormsModule,
+    HeaderModule,
+    BsDropdownModule,
+    C8yTranslateModule,
+    CommonModule,
+    DateTimePickerModule,
+    FormsModule
+  ]
+})
+export class DateTimeRangeExampleComponent {
+  form: FormGroup;
+
+  constructor() {
+    const dateTo = new Date();
+    const dateFrom = new Date(dateTo.valueOf() - 24 * 60 * 60 * 1000);
+    this.form = new FormGroup({
+      dateFrom: new FormControl(dateFrom.toISOString()),
+      dateTo: new FormControl(dateTo.toISOString())
+    });
+  }
+}

package/src/date-time-range/date-time-range-example.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+@NgModule({
+  providers: [
+    hookRoute({
+      path: 'date-time-range',
+      loadComponent: () =>
+        import('./date-time-range-example.component').then(m => m.DateTimeRangeExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Date time range',
+        path: '/date-time-range',
+        icon: 'realtime',
+        priority: 10
+      })
+    )
+  ]
+})
+export class DateTimeRangeExampleModule {}

package/src/dynamic-forms/custom-element-example/custom-element-example.component.ts

@@ -0,0 +1,70 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { DynamicFormsModule, HeaderModule } from '@c8y/ngx-components';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+
+@Component({
+  selector: 'c8y-custom-element-example',
+  template: `<c8y-title>Dynamic forms: Custom element</c8y-title>
+    <div class="row">
+      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+        <form class="card" [formGroup]="form" (ngSubmit)="onSubmit()">
+          <div class="card-block">
+            <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
+          </div>
+          <div class="card-footer">
+            <button class="btn btn-default" title="Reset" type="reset">Reset</button>
+            <button class="btn btn-primary" title="Submit" type="submit">Submit</button>
+          </div>
+        </form>
+      </div>
+      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+        <div class="card">
+          <div class="card-block">
+            <div class="legend form-block">Model</div>
+            <pre style="min-height: 98px;"><code>{{ model | json }}</code></pre>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, DynamicFormsModule, HeaderModule]
+})
+export class CustomElementExampleComponent {
+  readonly pageTitle = 'Dynamic forms';
+  form = new FormGroup({});
+  model = {};
+  fields: FormlyFieldConfig[] = [
+    {
+      key: 'custom',
+      type: 'custom',
+      templateOptions: {
+        label: 'Custom checkbox',
+        description: 'This custom checkbox always displays its label in UPPERCASE.'
+      }
+    },
+    {
+      key: 'checkbox',
+      type: 'checkbox',
+      templateOptions: {
+        label: 'Standard checkbox'
+      }
+    },
+    {
+      key: 'text',
+      type: 'input',
+      templateOptions: {
+        label: 'Simple text input',
+        placeholder: 'You can provide some examples displayed as placeholder…',
+        description: '…and some short description.'
+      }
+    }
+  ];
+
+  onSubmit() {
+    if (this.form.valid) {
+      alert(JSON.stringify(this.model));
+    }
+  }
+}

package/src/dynamic-forms/custom-element-example/custom-element-example.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator, hookRoute } from '@c8y/ngx-components';
+import { FORMLY_CONFIG } from '@ngx-formly/core';
+import { CustomFieldCheckbox } from './types/checkbox/checkbox.type.component';
+
+@NgModule({
+  imports: [CustomFieldCheckbox],
+  declarations: [],
+  providers: [
+    hookRoute({
+      path: 'dynamic-forms/custom',
+      loadComponent: () =>
+        import('./custom-element-example.component').then(m => m.CustomElementExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/dynamic-forms/custom',
+        label: 'Custom element',
+        icon: 'cut',
+        priority: 78,
+        parent: 'Dynamic forms'
+      })
+    ),
+    {
+      provide: FORMLY_CONFIG,
+      multi: true,
+      useValue: {
+        types: [
+          {
+            name: 'custom',
+            component: CustomFieldCheckbox
+          }
+        ]
+      }
+    }
+  ]
+})
+export class CustomElementExampleModule {}

package/src/dynamic-forms/custom-element-example/types/checkbox/checkbox.type.component.html

@@ -0,0 +1,26 @@
+<label class="c8y-checkbox" [class.has-error]="showError">
+  <input
+    type="checkbox"
+    [class.is-invalid]="showError"
+    [class.form-check-input]="to.formCheck.indexOf('custom') === -1"
+    [class.position-static]="to.formCheck === 'nolabel'"
+    [class.custom-control-input]="to.formCheck.indexOf('custom') === 0"
+    [indeterminate]="to.indeterminate && formControl.value == null"
+    [formControl]="formControl"
+    [formlyAttributes]="field"
+  />
+  <span></span>
+  <span class="text-uppercase">{{ to.label }}</span>
+  <span *ngIf="to.required && to.hideRequiredMarker !== true">
+    <em class="m-l-4">(required)</em>
+  </span>
+  <button
+    type="button"
+    class="btn-help btn-help--sm m-t-auto m-b-auto"
+    [attr.aria-label]="'Help' | translate"
+    [popover]="to.description"
+    triggers="focus"
+    placement="right"
+    *ngIf="!!to.description"
+  ></button>
+</label>

package/src/dynamic-forms/custom-element-example/types/checkbox/checkbox.type.component.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DynamicFormsModule } from '@c8y/ngx-components';
+import { FieldType } from '@ngx-formly/core';
+import { PopoverModule } from 'ngx-bootstrap/popover';
+
+@Component({
+  selector: 'c8y-field-checkbox',
+  templateUrl: './checkbox.type.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, PopoverModule, DynamicFormsModule]
+})
+export class CustomFieldCheckbox extends FieldType {
+  defaultOptions = {
+    templateOptions: {
+      indeterminate: true,
+      formCheck: 'custom'
+    }
+  };
+}

package/src/dynamic-forms/dynamic-forms.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { NavigatorNode, hookNavigator } from '@c8y/ngx-components';
+
+@NgModule({
+  declarations: [],
+  imports: [],
+  providers: [
+    hookNavigator(
+      new NavigatorNode({
+        label: 'Dynamic forms',
+        icon: 'file-text'
+      })
+    )
+  ]
+})
+export class DynamicFormsTutorialModule {}

package/src/dynamic-forms/index.ts

@@ -0,0 +1,2 @@
+export * from './dynamic-forms.module';
+export * from './custom-element-example/custom-element-example.module';

package/src/dynamic-forms/introduction-example/introduction-example.component.ts

@@ -0,0 +1,116 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { DynamicFormsModule, HeaderModule } from '@c8y/ngx-components';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+
+@Component({
+  selector: 'c8y-introduction-example',
+  template: `<c8y-title>Dynamic forms: Introduction</c8y-title>
+    <div class="row">
+      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+        <form class="card" [formGroup]="form" (ngSubmit)="onSubmit()">
+          <div class="card-block">
+            <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
+          </div>
+          <div class="card-footer">
+            <button class="btn btn-default" title="Reset" type="reset">Reset</button>
+            <button class="btn btn-primary" title="Submit" type="submit">Submit</button>
+          </div>
+        </form>
+      </div>
+      <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+        <div class="card">
+          <div class="card-block">
+            <div class="legend form-block">Model</div>
+            <pre style="min-height: 98px;"><code>{{ model | json }}</code></pre>
+          </div>
+        </div>
+      </div>
+    </div> `,
+  standalone: true,
+  imports: [CommonModule, DynamicFormsModule, HeaderModule]
+})
+export class IntroductionExampleComponent {
+  form = new FormGroup({});
+  model = {
+    readonly: 'This is a read-only value',
+    disabled: 'This is a disabled field',
+    'checkbox-disabled': true
+  };
+  fields: FormlyFieldConfig[] = [
+    {
+      key: 'text',
+      type: 'input',
+      templateOptions: {
+        label: 'Simple text input',
+        placeholder: 'Use placeholder to provide an expected value example',
+        description: 'If helpful, add&nbsp;<strong>short</strong>&nbspinfo here.'
+      }
+    },
+    {
+      key: 'required',
+      type: 'input',
+      templateOptions: {
+        label: 'Required text input',
+        placeholder: 'Required value example',
+        description:
+          'If needed, you can give more context to the user using a popover.&nbsp;<br>&nbsp;You can use&nbsp;<em><strong>HTML</strong></em>&nbsp;markup. The HTML content is sanitized.',
+        required: true
+      }
+    },
+    {
+      key: 'readonly',
+      type: 'input',
+      templateOptions: {
+        label: 'Read-only text input',
+        description: 'This is a read-only field',
+        readonly: true
+      }
+    },
+    {
+      key: 'disabled',
+      type: 'input',
+      templateOptions: {
+        label: 'Disabled text input',
+        description: 'This is a disabled field',
+        disabled: true
+      }
+    },
+    {
+      key: 'checkbox',
+      type: 'checkbox',
+      templateOptions: {
+        label: 'Checkbox',
+        description: 'Checkboxes can have a description too.',
+        required: true
+      }
+    },
+    {
+      key: 'checkbox-disabled',
+      type: 'checkbox',
+      templateOptions: {
+        label: 'Disabled checkboxes cannot be interacted with',
+        disabled: true
+      }
+    },
+    {
+      key: 'attachments',
+      type: 'file',
+      templateOptions: {
+        label: 'Attachments',
+        description: 'One or more text or image files can be uploaded',
+        required: true,
+        accept: 'image/*,text/*',
+        icon: 'file-text-o',
+        alwaysShow: true
+      }
+    }
+  ];
+
+  onSubmit() {
+    if (this.form.valid) {
+      alert(JSON.stringify(this.model));
+    }
+  }
+}

package/src/dynamic-forms/introduction-example/introduction-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/introduction',
+      loadComponent: () =>
+        import('./introduction-example.component').then(m => m.IntroductionExampleComponent)
+    }),
+    hookNavigator(
+      new NavigatorNode({
+        path: '/dynamic-forms/introduction',
+        label: 'Introduction',
+        icon: 'hand-o-right',
+        priority: 80,
+        parent: 'Dynamic forms'
+      })
+    )
+  ]
+})
+export class IntroductionExampleModule {}

package/src/dynamic-forms/json-schema-example/json-schema-example.component.html

@@ -0,0 +1,33 @@
+<c8y-title>Dynamic forms: JSON schema</c8y-title>
+<div class="row">
+  <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+    <form class="card" [formGroup]="form" (ngSubmit)="onSubmit()">
+      <div class="card-block">
+        <!-- important -->
+        <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
+        <!-- /important -->
+      </div>
+      <div class="card-footer">
+        <button type="reset" class="btn btn-default" title="Reset">
+          Reset
+        </button>
+        <button
+          type="submit"
+          class="btn btn-primary"
+          title="Submit"
+          [disabled]="form.invalid"
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  </div>
+  <div class="col-xs-12 col-sm-10 col-md-8 col-lg-6">
+    <div class="card">
+      <div class="card-block">
+        <div class="legend form-block">Model</div>
+        <pre style="min-height: 98px;"><code>{{ model | json }}</code></pre>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,102 @@
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { C8yJSONSchema, DynamicFormsModule, HeaderModule } from '@c8y/ngx-components';
+import { FormlyFieldConfig } from '@ngx-formly/core';
+import { JSONSchema7 } from 'json-schema';
+import { CommonModule } from '@angular/common';
+
+const exampleSchema: object = {
+  $schema: 'https://json-schema.org/draft/2019-09/schema',
+  type: 'object',
+  properties: {
+    fixedValue: {
+      type: 'string',
+      const: 'This is a constant value presented as hidden input'
+    },
+    text: {
+      type: 'string',
+      title: 'Simple text input',
+      description: '…and some short description.',
+      examples: ['You can provide some examples displayed as placeholder…']
+    },
+    'required-field': {
+      type: 'string',
+      title: 'Required text input',
+      description:
+        'A longer description can also be provided. It will be displayed in a tooltip next to the label.',
+      examples: ['Enter some very important, required text']
+    },
+    'radio-group': {
+      type: 'string',
+      enum: ['Radio One', 'Radio Two', 'Radio Three'],
+      title: 'Radio button group',
+      description: 'Let the user select one option of a given range of options.'
+    },
+    checkbox: {
+      type: 'boolean',
+      title: 'Checkbox',
+      description: 'Checkboxes can have a description too.',
+      default: 'true'
+    },
+    list: {
+      title: 'List of items',
+      description: 'You can also declare a list of inputs',
+      minItems: 1,
+      type: 'array',
+      items: {
+        type: 'string',
+        title: 'URL',
+        pattern: '(http|https)://(\\S+)'
+      }
+    },
+    password: {
+      type: 'string',
+      title: 'Password',
+      examples: ['Some very secure password'],
+      writeOnly: true
+    },
+    image: {
+      type: 'string',
+      title: 'File upload',
+      description:
+        'You can use file upload component to let users send files. This input would accept only a single PNG image file.',
+      contentEncoding: 'base64',
+      contentMediaType: 'image/png'
+    }
+  },
+  required: ['provider', 'required-field', 'list', 'radio-group'],
+  additionalProperties: false
+};
+
+@Component({
+  selector: 'c8y-json-schema-example',
+  templateUrl: './json-schema-example.component.html',
+  standalone: true,
+  imports: [CommonModule, HeaderModule, DynamicFormsModule]
+})
+export class JSONSchemaExampleComponent {
+  form = new FormGroup({});
+  model = {};
+  fields: FormlyFieldConfig[] = [
+    this.jsonschema.toFieldConfig(exampleSchema, {
+      map(mappedField: FormlyFieldConfig, _mapSource: JSONSchema7) {
+        return mappedField;
+      }
+    })
+  ];
+
+  constructor(
+    public jsonschema: C8yJSONSchema,
+    private readonly changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  ngAfterViewChecked(): void {
+    this.changeDetectorRef.detectChanges();
+  }
+
+  onSubmit() {
+    if (this.form.valid) {
+      alert(JSON.stringify(this.model));
+    }
+  }
+}