@c8y/tutorial 1022.34.0 → 1022.44.3

package/cumulocity.config.ts

@@ -724,6 +724,13 @@ export default {
         description: 'An introduction to properties selector example- drawer usage.',
         scope: 'self'
       },
+      {
+        name: 'Properties selector- computed properties',
+        module: 'computedAssetPropertiesProvidersExample',
+        path: './src/selector/properties-selector-computed-properties/index.ts',
+        description: 'Hookable computed property example.',
+        scope: 'self'
+      },
       {
         name: 'Introduction to asset selector device child',
         module: 'AssetSingleSelectModule',
@@ -877,6 +884,27 @@ export default {
         path: './src/hooks/widget/widget.providers.ts',
         description: 'This is an example for the bottom drawer service.',
         scope: 'self'
+      },
+      {
+        name: 'Computed asset properties',
+        module: 'computedAssetPropertiesProviders',
+        path: '@c8y/ngx-components/computed-asset-properties',
+        description: 'Set of predefined computed asset properties.',
+        scope: 'self'
+      },
+      {
+        name: 'Editor JSON sample',
+        module: 'editorJSONSampleProviders',
+        path: './src/editor/editor-json-sample/index.ts',
+        description: 'This is an example for editing JSON via the editor component.',
+        scope: 'self'
+      },
+      {
+        name: 'Editor CSS sample',
+        module: 'editorCSSSampleProviders',
+        path: './src/editor/editor-css-sample/index.ts',
+        description: 'This is an example for editing CSS via the editor component.',
+        scope: 'self'
       }
     ]
   },

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@c8y/tutorial",
-  "version": "1022.34.0",
+  "version": "1022.44.3",
   "description": "This package is used to scaffold a tutorial for Cumulocity IoT Web SDK which explains a lot of concepts.",
   "dependencies": {
-    "@c8y/style": "1022.34.0",
-    "@c8y/ngx-components": "1022.34.0",
-    "@c8y/client": "1022.34.0",
-    "@c8y/bootstrap": "1022.34.0",
+    "@c8y/style": "1022.44.3",
+    "@c8y/ngx-components": "1022.44.3",
+    "@c8y/client": "1022.44.3",
+    "@c8y/bootstrap": "1022.44.3",
     "@angular/cdk": "^19.2.19",
     "monaco-editor": "~0.52.2",
     "ngx-bootstrap": "19.0.2",
@@ -14,8 +14,8 @@
     "rxjs": "7.8.1"
   },
   "devDependencies": {
-    "@c8y/options": "1022.34.0",
-    "@c8y/devkit": "1022.34.0"
+    "@c8y/options": "1022.44.3",
+    "@c8y/devkit": "1022.44.3"
   },
   "peerDependencies": {
     "@angular/common": ">=19 <20"

package/src/editor/editor-css-sample/editor-css-sample.component.html

@@ -0,0 +1,31 @@
+<form
+  class="d-contents"
+  [formGroup]="form"
+>
+  <c8y-form-group class="d-col fit-h">
+    <label
+      for="cssEditor"
+      translate
+    >
+      CSS Editor (with validation)
+    </label>
+    <c8y-editor
+      class="flex-grow"
+      name="cssEditor"
+      [editorOptions]="{ language: 'css' }"
+      [formControlName]="'cssEditor'"
+      monacoEditorMarkerValidator
+    ></c8y-editor>
+    <c8y-messages [helpMessage]="''"></c8y-messages>
+  </c8y-form-group>
+
+  @if (form.valid) {
+    <p class="d-flex a-i-center">
+      <i class="dlt-c8y-icon-ok text-success icon-20 m-r-4"></i> Form is valid.
+    </p>
+  } @else {
+    <p class="d-flex a-i-center">
+      <i class="dlt-c8y-icon-exclamation-circle text-danger icon-20 m-r-4"></i> Form is invalid.
+    </p>
+  }
+</form>

package/src/editor/editor-css-sample/editor-css-sample.component.ts

@@ -0,0 +1,31 @@
+import { Component, ViewChild } from '@angular/core';
+import { EditorComponent, MonacoEditorMarkerValidatorDirective } from '@c8y/ngx-components/editor';
+import { FormGroupComponent, MessagesComponent } from '@c8y/ngx-components';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'c8y-editor-css-sample',
+  templateUrl: './editor-css-sample.component.html',
+  standalone: true,
+  imports: [
+    EditorComponent,
+    MessagesComponent,
+    FormGroupComponent,
+    ReactiveFormsModule,
+    MonacoEditorMarkerValidatorDirective
+  ],
+  host: {
+    class: 'd-col fit-w',
+    style: 'height: 400px'
+  }
+})
+export class EditorCSSSampleComponent {
+  form: FormGroup;
+  @ViewChild(EditorComponent) editorComponent!: EditorComponent;
+
+  constructor() {
+    this.form = new FormGroup({
+      cssEditor: new FormControl('.test { display: none; }')
+    });
+  }
+}

package/src/editor/editor-css-sample/index.ts

@@ -0,0 +1,14 @@
+import { hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+export const editorCSSSampleProviders = [
+  hookRoute({
+    path: 'editor-css-sample',
+    loadComponent: () =>
+      import('./editor-css-sample.component').then(c => c.EditorCSSSampleComponent)
+  }),
+  hookNavigator({
+    label: 'Editor CSS sample',
+    icon: 'code',
+    path: 'editor-css-sample'
+  })
+];

package/src/editor/editor-json-sample/editor-json-sample.component.html

@@ -0,0 +1,23 @@
+<form [formGroup]="form" class="d-contents">
+  <c8y-form-group class="d-col fit-h">
+    <label for="jsonEditor" translate>JSON Editor (with JSON schema validation)</label>
+    <c8y-editor
+      class="flex-grow"
+      name="jsonEditor"
+      [formControlName]="'jsonEditor'"
+      (editorInit)="assignSchema()"
+      monacoEditorMarkerValidator
+    ></c8y-editor>
+    <c8y-messages [helpMessage]="''"></c8y-messages>
+  </c8y-form-group>
+
+  @if (form.valid) {
+    <p class="d-flex a-i-center">
+      <i class="dlt-c8y-icon-ok text-success icon-20 m-r-4"></i> Form is valid.
+    </p>
+  } @else {
+    <p class="d-flex a-i-center">
+      <i class="dlt-c8y-icon-exclamation-circle text-danger icon-20 m-r-4"></i> Form is invalid.
+    </p>
+  }
+</form>

package/src/editor/editor-json-sample/editor-json-sample.component.ts

@@ -0,0 +1,63 @@
+import { Component, ViewChild } from '@angular/core';
+import { EditorComponent, MonacoEditorMarkerValidatorDirective } from '@c8y/ngx-components/editor';
+import { FormGroupComponent, MessagesComponent } from '@c8y/ngx-components';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'c8y-editor-json-sample',
+  templateUrl: './editor-json-sample.component.html',
+  standalone: true,
+  imports: [
+    EditorComponent,
+    MessagesComponent,
+    FormGroupComponent,
+    ReactiveFormsModule,
+    MonacoEditorMarkerValidatorDirective
+  ],
+  host: {
+    class: 'd-col fit-w',
+    style: 'height: 400px'
+  }
+})
+export class EditorJsonSampleComponent {
+  form: FormGroup;
+  @ViewChild(EditorComponent) editorComponent!: EditorComponent;
+
+  constructor() {
+    this.form = new FormGroup({
+      jsonEditor: new FormControl(
+        JSON.stringify({ name: 'John Doe', age: 30, email: 'john.doe@example.com' }, undefined, 2)
+      )
+    });
+  }
+
+  assignSchema() {
+    const schema = {
+      $schema: 'http://json-schema.org/draft-07/schema#',
+      type: 'object',
+      properties: {
+        name: {
+          type: 'string',
+          description: 'Name of the person'
+        },
+        age: {
+          type: 'integer',
+          description: 'Age of the person',
+          minimum: 0
+        },
+        email: {
+          type: 'string',
+          format: 'email',
+          description: 'Email address of the person'
+        }
+      },
+      required: ['name', 'age']
+    } as const;
+    this.editorComponent.monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      schemas: [{ schema, fileMatch: ['*'], uri: 'editor-json-sample' }],
+      enableSchemaRequest: false,
+      allowComments: false
+    });
+  }
+}

package/src/editor/editor-json-sample/index.ts

@@ -0,0 +1,14 @@
+import { hookNavigator, hookRoute } from '@c8y/ngx-components';
+
+export const editorJSONSampleProviders = [
+  hookRoute({
+    path: 'editor-json-sample',
+    loadComponent: () =>
+      import('./editor-json-sample.component').then(c => c.EditorJsonSampleComponent)
+  }),
+  hookNavigator({
+    label: 'Editor JSON sample',
+    icon: 'code',
+    path: 'editor-json-sample'
+  })
+];

package/src/grids/server-grid-example/last-updated-data-grid-column/last-updated.data-grid-column.ts

@@ -1,5 +1,6 @@
 import { FormGroup } from '@angular/forms';
-import { BaseColumn, ColumnConfig, gettext } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { BaseColumn, ColumnConfig } from '@c8y/ngx-components';
 import { LastUpdatedCellRendererComponent } from './last-updated.cell-renderer.component';
 
 /**

package/src/selector/asset-selector-example/miller-columns-options/asset-selector-miller-example.component.ts

@@ -66,7 +66,8 @@ export class AssetSelectorMillerExampleComponent {
     showFilter: false,
     showUnassignedDevices: false,
     singleColumn: false,
-    label: 'Asset selection'
+    label: 'Asset selection',
+    showSelected: true
   };
 
   reloadComponent() {

package/src/selector/asset-selector-example/tree-options/asset-selector-tree-example.component.ts

@@ -64,7 +64,8 @@ export class AssetSelectorTreeExampleComponent {
     search: false,
     showChildDevices: false,
     showUnassignedDevices: false,
-    label: 'Asset selection'
+    label: 'Asset selection',
+    showSelected: true
   };
 
   reloadComponent() {

package/src/selector/properties-selector-computed-properties/alarm-count-config.component.ts

@@ -0,0 +1,76 @@
+import { Component, inject, Input, OnInit } from '@angular/core';
+import {
+  ControlContainer,
+  FormBuilder,
+  NgForm,
+  ReactiveFormsModule,
+  Validators
+} from '@angular/forms';
+import { C8yTranslatePipe, CommonModule, CoreModule } from '@c8y/ngx-components';
+import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
+import { Observable } from 'rxjs';
+import { AlarmCountLastWeekConfig } from './alarm-count-last-week-computed-property';
+
+@Component({
+  selector: 'c8y-alarm-count-config',
+  template: `
+    <form class="row d-flex-md" [formGroup]="formGroup">
+      <div class="col-md-6">
+        <c8y-form-group class="m-b-16">
+          <label [title]="'Alarm type' | translate" translate> Alarm type </label>
+          <input
+            class="form-control"
+            placeholder="{{ 'e.g.' | translate }} c8y_UnavailabilityAlarm"
+            name="type"
+            type="string"
+            formControlName="type"
+          />
+          <c8y-messages
+            [show]="formGroup.controls?.type?.touched && formGroup?.controls?.type?.errors"
+          ></c8y-messages>
+        </c8y-form-group>
+      </div>
+    </form>
+  `,
+  imports: [
+    CoreModule,
+    DatapointSelectorModule,
+    CommonModule,
+    C8yTranslatePipe,
+    ReactiveFormsModule
+  ],
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }]
+})
+export class ComputedPropertyAlarmCountConfigComponent implements OnInit {
+  @Input() config?: AlarmCountLastWeekConfig;
+  formGroup: ReturnType<ComputedPropertyAlarmCountConfigComponent['createForm']>;
+
+  private formBuilder = inject(FormBuilder);
+  private form = inject(NgForm);
+
+  ngOnInit() {
+    this.initForm();
+  }
+
+  onBeforeSave(
+    config?: AlarmCountLastWeekConfig
+  ): boolean | Promise<boolean> | Observable<boolean> {
+    if (this.formGroup.valid) {
+      Object.assign(config, this.formGroup.value);
+      return true;
+    }
+    return false;
+  }
+
+  private initForm(): void {
+    this.formGroup = this.createForm();
+    this.form.form.addControl('config', this.formGroup);
+    this.formGroup.patchValue(this.config);
+  }
+
+  private createForm() {
+    return this.formBuilder.group({
+      type: ['', [Validators.required]]
+    });
+  }
+}

package/src/selector/properties-selector-computed-properties/alarm-count-last-week-computed-property.ts

@@ -0,0 +1,56 @@
+import { inject, Injector } from '@angular/core';
+import { AlarmQueryFilter, AlarmService, IManagedObject } from '@c8y/client';
+import { ComputedPropertyDefinition } from '@c8y/ngx-components/asset-properties';
+
+export type AlarmCountLastWeekConfig = {
+  type: string;
+};
+
+export const alarmCountLastWeek: ComputedPropertyDefinition<
+  ['device', 'group', 'asset'],
+  AlarmCountLastWeekConfig
+> = {
+  name: 'alarmCountLastWeek',
+  contextType: ['device', 'group', 'asset'],
+  prop: {
+    c8y_JsonSchema: {
+      properties: {
+        alarmCountLastWeek: {
+          label: 'Alarm count last week',
+          type: 'number'
+        }
+      }
+    },
+    name: 'alarmCountLastWeek',
+    label: 'Alarm count last week',
+    type: 'number',
+    config: { type: '' } as AlarmCountLastWeekConfig,
+    computed: true,
+    isEditable: false,
+    isStandardProperty: true
+  },
+  loadConfigComponent: () =>
+    import('./alarm-count-config.component').then(m => m.ComputedPropertyAlarmCountConfigComponent),
+  value: ({ config, context }) => alarmCountValue(config, context)
+};
+
+async function alarmCountValue(
+  config: AlarmCountLastWeekConfig,
+  asset: IManagedObject
+): Promise<number> {
+  const injector = inject(Injector);
+  const alarmService = injector.get(AlarmService);
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 8);
+
+  const filters: AlarmQueryFilter = {
+    source: asset.id,
+    dateFrom: sevenDaysAgo.toISOString(),
+    type: config.type,
+    pageSize: 1,
+    withTotalElements: true
+  };
+
+  const resp = await alarmService.list(filters);
+  return resp?.paging?.totalElements || 0;
+}

package/src/selector/properties-selector-computed-properties/index.ts

@@ -0,0 +1,4 @@
+import { hookComputedProperty } from '@c8y/ngx-components/asset-properties';
+import { alarmCountLastWeek } from './alarm-count-last-week-computed-property';
+
+export const computedAssetPropertiesProvidersExample = [hookComputedProperty([alarmCountLastWeek])];

package/src/selector/properties-selector-drawer-example/properties-selector-drawer.component.ts

@@ -22,6 +22,7 @@ import { JsonPipe } from '@angular/common';
         <div class="card">
           <div class="card-inner-scroll d-flex d-col bg-component" style="height: 490px">
             <c8y-asset-selector
+              class="bg-inherit"
               [(ngModel)]="model"
               [config]="{
                 groupsSelectable: true,

package/src/translations/dynamic-form-translation/dynamic-form-translation.component.ts

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { CoreModule, DynamicFormsModule, gettext } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { CoreModule, DynamicFormsModule } from '@c8y/ngx-components';
 
 @Component({
   selector: 'dynamic-form-translation',

package/src/translations/text-translation/gettext-translation/text-translation-gettext.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { CoreModule, gettext } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { CoreModule } from '@c8y/ngx-components';
 
 @Component({
   selector: 'text-translation-gettext',

package/src/translations/text-translation/service-translation/text-translation-by-service.component.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { CoreModule, gettext } from '@c8y/ngx-components';
+import { gettext } from '@c8y/ngx-components/gettext';
+import { CoreModule } from '@c8y/ngx-components';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({

package/tsconfig.app.json

@@ -17,5 +17,6 @@
   ],
   "exclude": [
     "../ngx-components/dist",
+    "../ngx-components/**/*.spec.ts",
   ]
 }