#16: moves asset selection to formly field (#25)

* #16: moves asset selection to formly field * #16: removes dev logging --------- Co-authored-by: Dirk Peter <[email protected]>
Cumulocity-IoT · Jun 12, 2024 · abb56cd · abb56cd
1 parent b4fb982
commit abb56cd
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 49 deletions.
diff --git a/plugin/components/asset.formly/asset.formly.component.html b/plugin/components/asset.formly/asset.formly.component.html
@@ -0,0 +1,14 @@
+<c8y-asset-selector-miller
+  class="m-b-24"
+  [selectedDevice]="field.props.asset"
+  [config]="{
+    groupsSelectable: true,
+    singleColumn: true,
+    columnHeaders: true,
+    showFilter: true,
+    search: true,
+    label: field.props.label
+  }"
+  [formControl]="formControl"
+  [formlyAttributes]="field">
+</c8y-asset-selector-miller>
diff --git a/plugin/components/asset.formly/asset.formly.component.less b/plugin/components/asset.formly/asset.formly.component.less
@@ -0,0 +1,6 @@
+:host ::ng-deep {
+  .miller-column__selection {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+}
diff --git a/plugin/components/asset.formly/asset.formly.component.ts b/plugin/components/asset.formly/asset.formly.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
+
+@Component({
+  selector: 'formly-asset',
+  templateUrl: './asset.formly.component.html',
+  styleUrls: ['./asset.formly.component.less']
+})
+export class AssetFieldType extends FieldType<FieldTypeConfig> {}
diff --git a/plugin/components/reminder-modal/reminder-modal.component.html b/plugin/components/reminder-modal/reminder-modal.component.html
@@ -4,24 +4,9 @@ <h3 translate>Create a Reminder</h3>
 
 <form [formGroup]="form" (submit)="submit()">
   <div class="modal-body">
-    <c8y-asset-selector-miller class="m-b-24"
-      [label]="'Assign to'"
-      [selectedDevice]="asset"
-      [isLoading]="isLoading"
-      [config]="{
-        groupsSelectable: true,
-        singleColumn: true,
-        columnHeaders: true,
-        showFilter: true,
-        search: true
-      }"
-      (onSelected)="assetSelected($event.items)"
-    ></c8y-asset-selector-miller>
-
     <formly-form [form]="form" [fields]="fields" [model]="reminder"></formly-form>
   </div>
 
-
   <div class="modal-footer">
     <button type="button" class="btn btn-default" (click)="close()" translate>Cancel</button>
 

diff --git a/plugin/components/reminder-modal/reminder-modal.component.less b/plugin/components/reminder-modal/reminder-modal.component.less
diff --git a/plugin/components/reminder-modal/reminder-modal.component.ts b/plugin/components/reminder-modal/reminder-modal.component.ts
@@ -12,8 +12,7 @@ import { Reminder, ReminderStatus, REMINDER_TEXT_LENGTH, REMINDER_TYPE } from '.
 
 @Component({
   selector: 'c8y-reminder-modal',
-  templateUrl: './reminder-modal.component.html',
-  styleUrls: ['./reminder-modal.component.less']
+  templateUrl: './reminder-modal.component.html'
 })
 export class ReminderModalComponent implements OnInit {
   isLoading = false;
@@ -33,15 +32,15 @@ export class ReminderModalComponent implements OnInit {
   fields: FormlyFieldConfig[] = [
     {
       fieldGroup: [
-        // {
-        //   key: 'source.name',
-        //   type: 'input',
-        //   props: {
-        //     label: this.translateService.instant('Attach to'),
-        //     required: true,
-        //     disabled: true
-        //   }
-        // },
+        {
+          key: 'source',
+          type: 'asset',
+          props: {
+            label: this.translateService.instant('Attach to'),
+            required: true,
+            asset: this.asset
+          }
+        },
         {
           key: 'text',
           type: 'input',
@@ -74,28 +73,18 @@ export class ReminderModalComponent implements OnInit {
 
   ngOnInit(): void {
     this.asset = this.getAssetFromRoute(this.activatedRoute.snapshot);
+    this.reminder.source = { id: this.asset.id, name: this.asset.name };
   }
 
   close() {
     this.bsModalRef.hide();
   }
 
-  assetSelected(asset: Partial<IManagedObject>): void {
-    if (!asset || !asset.id) return;
-
-    this.asset = {
-      id: asset.id,
-      name: asset.name
-    };
-  }
-
   async submit(): Promise<void> {
     this.isLoading = true;
 
     const reminder: IEvent = {
-      source: {
-        id: `${this.asset.id}`
-      },
+      source: this.reminder.source,
       type: REMINDER_TYPE,
       time: moment(this.reminder.time).toISOString(),
       text: this.reminder.text,

diff --git a/plugin/reminder-plugin.module.ts b/plugin/reminder-plugin.module.ts
@@ -6,6 +6,7 @@ import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import { FormlyModule } from '@ngx-formly/core';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { MomentModule } from 'ngx-moment';
+import { AssetFieldType } from './components/asset.formly/asset.formly.component';
 import { ReminderDrawerComponent } from './components/reminder-drawer/reminder-drawer.component';
 import { ReminderIndicatorComponent } from './components/reminder-indicator/reminder-indicator.component';
 import { ReminderModalComponent } from './components/reminder-modal/reminder-modal.component';
@@ -21,11 +22,20 @@ import { ReminderService } from './services/reminder.service';
     AssetSelectorModule,
     MomentModule,
     FormlyModule.forChild({
-      types: [{ name: 'time', component: TimeFieldType }]
+      types: [
+        { name: 'time', component: TimeFieldType },
+        { name: 'asset', component: AssetFieldType }
+      ]
     }),
     TooltipModule
   ],
-  declarations: [ReminderDrawerComponent, ReminderIndicatorComponent, ReminderModalComponent, TimeFieldType],
+  declarations: [
+    ReminderDrawerComponent,
+    ReminderIndicatorComponent,
+    ReminderModalComponent,
+    TimeFieldType,
+    AssetFieldType
+  ],
   providers: [
     ReminderService,
     EventRealtimeService,