@c8y/sample-plugin 1023.48.0 → 1023.48.2

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@c8y/sample-plugin",
-  "version": "1023.48.0",
+  "version": "1023.48.2",
   "description": "",
   "dependencies": {
-    "@c8y/style": "1023.48.0",
-    "@c8y/ngx-components": "1023.48.0",
-    "@c8y/client": "1023.48.0",
-    "@c8y/bootstrap": "1023.48.0",
+    "@c8y/style": "1023.48.2",
+    "@c8y/ngx-components": "1023.48.2",
+    "@c8y/client": "1023.48.2",
+    "@c8y/bootstrap": "1023.48.2",
     "@angular/cdk": "^20.2.14",
     "monaco-editor": "~0.53.0",
     "ngx-bootstrap": "20.0.2",
     "rxjs": "7.8.2"
   },
   "devDependencies": {
-    "@c8y/options": "1023.48.0",
-    "@c8y/devkit": "1023.48.0"
+    "@c8y/options": "1023.48.2",
+    "@c8y/devkit": "1023.48.2"
   },
   "peerDependencies": {
     "@angular/common": ">=20 <21"

package/src/app/widget/sample-widget-config.component.ts

@@ -1,7 +1,26 @@
-import { Component, inject, Input, OnInit, TemplateRef, ViewChild } from '@angular/core';
-import { ControlContainer, NgForm } from '@angular/forms';
-import { AlertService, CommonModule, DynamicComponent, FormsModule } from '@c8y/ngx-components';
+import { AsyncPipe } from '@angular/common';
+import {
+  Component,
+  DestroyRef,
+  inject,
+  Input,
+  OnInit,
+  TemplateRef,
+  ViewChild
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import {
+  ControlContainer,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  NgForm,
+  ReactiveFormsModule,
+  Validators
+} from '@angular/forms';
+import { AlertService, DynamicComponent, FormGroupComponent } from '@c8y/ngx-components';
 import { WidgetConfigService } from '@c8y/ngx-components/context-dashboard';
+import { BehaviorSubject } from 'rxjs';
 import { SamplePluginConfig } from '../sample-plugin.model';
 import { SamplePluginComponent } from './sample-widget.component';
 
@@ -11,41 +30,53 @@ import { SamplePluginComponent } from './sample-widget.component';
     <div class="form-group">
       <c8y-form-group>
         <label>Text</label>
-        <textarea
-          style="width:100%"
-          name="text"
-          [(ngModel)]="config.text"
-          [required]="true"
-        ></textarea>
+        <textarea style="width: 100%" [formControl]="formGroup.controls.text"></textarea>
       </c8y-form-group>
     </div>
 
     <ng-template #sampleWidgetPreview>
-      <c8y-sample-plugin [config]="config"></c8y-sample-plugin>
+      <c8y-sample-plugin [config]="config$ | async"></c8y-sample-plugin>
     </ng-template>
   `,
   viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
   standalone: true,
-  imports: [CommonModule, FormsModule, SamplePluginComponent]
+  imports: [FormGroupComponent, ReactiveFormsModule, SamplePluginComponent, AsyncPipe]
 })
 export class SamplePluginConfigComponent implements DynamicComponent, OnInit {
   @Input() config: SamplePluginConfig = {};
 
+  formGroup: FormGroup<{ text: FormControl<string | null> }>;
+  config$ = new BehaviorSubject<SamplePluginConfig>({});
+
   private readonly alert = inject(AlertService);
   private readonly widgetConfigService = inject(WidgetConfigService);
+  private readonly formBuilder = inject(FormBuilder);
+  private readonly form = inject(NgForm);
+  private readonly destroyRef = inject(DestroyRef);
 
   @ViewChild('sampleWidgetPreview')
-  set previewMapSet(template: TemplateRef<any>) {
-    if (template) {
-      this.widgetConfigService.setPreview(template);
-      return;
-    }
-    this.widgetConfigService.setPreview(null);
+  set preview(template: TemplateRef<any>) {
+    this.widgetConfigService.setPreview(template ?? null);
   }
 
   ngOnInit(): void {
+    this.formGroup = this.formBuilder.group({
+      text: [this.config?.text || '', Validators.required]
+    });
+
+    this.form.form.addControl('widgetConfig', this.formGroup);
+    this.config$.next(this.config);
+
+    this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {
+      this.config$.next({ ...this.config, ...value });
+    });
+
     this.widgetConfigService.addOnBeforeSave(config => {
-      this.alert.success('Widget added successfully', JSON.stringify(config, null, 2));
+      if (this.formGroup.invalid) {
+        this.alert.warning('Please enter a valid text.');
+        return false;
+      }
+      Object.assign(config, this.formGroup.value);
       return true;
     });
   }

package/src/app/widget/sample-widget.component.ts

@@ -1,6 +1,4 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { FormsModule } from '@c8y/ngx-components';
+import { Component, computed, input } from '@angular/core';
 import { SamplePluginConfig } from '../sample-plugin.model';
 
 @Component({
@@ -8,14 +6,16 @@ import { SamplePluginConfig } from '../sample-plugin.model';
   template: `
     <div class="p-16">
       <h1>Sample-plugin</h1>
-      <p class="text">{{ config?.text || 'No text' }}</p>
-      <small>My context is: {{ config?.device?.name || 'No context' }}</small>
+      <p class="text">{{ displayText() }}</p>
+      <small>My context is: {{ deviceName() }}</small>
     </div>
   `,
   styleUrls: ['./sample-widget.component.css'],
-  standalone: true,
-  imports: [CommonModule, FormsModule]
+  standalone: true
 })
 export class SamplePluginComponent {
-  @Input() config: SamplePluginConfig;
+  readonly config = input<SamplePluginConfig>();
+
+  readonly displayText = computed(() => this.config()?.text || 'No text');
+  readonly deviceName = computed(() => this.config()?.device?.['name'] || 'No context');
 }