#3 asset selection

plugin/components/reminder-modal/reminder-modal.component.html

@@ -4,19 +4,24 @@ <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"
+      (onSelected)="assetSelected($event.items)" [config]="{
+      groupsSelectable: true,
+      singleColumn: true,
+      columnHeaders: true,
+      showFilter: true,
+      search: true
+    }"></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>
 
-    <button
-      type="submit"
-      class="btn btn-primary"
-      [disabled]="!form.valid || isLoading"
-      [class.btn-pending]="isLoading"
-      translate
-    >
+    <button type="submit" class="btn btn-primary" [disabled]="!form.valid || isLoading" [class.btn-pending]="isLoading"
+      translate>
       Create
     </button>
   </div>

plugin/components/reminder-modal/reminder-modal.component.less

@@ -0,0 +1,9 @@
+:host ::ng-deep {
+  .miller-view-wrapper.p-t-72 {
+    padding-top: 0 !important;
+
+    &:has(.miller-column__header) {
+      padding-top: 72px !important;
+    }
+  }
+}

plugin/components/reminder-modal/reminder-modal.component.ts

@@ -12,19 +12,20 @@ import { Reminder, ReminderStatus, REMINDER_TEXT_LENGTH, REMINDER_TYPE } from '.
 
 @Component({
   selector: 'c8y-reminder-modal',
-  templateUrl: './reminder-modal.component.html'
+  templateUrl: './reminder-modal.component.html',
+  styleUrls: ['./reminder-modal.component.less']
 })
 export class ReminderModalComponent implements OnInit {
   // TODO selectable context
   isLoading = false;
-  asset!: IManagedObject;
+  asset!: Partial<IManagedObject>;
   form = new FormGroup({});
 
   reminder: Partial<Reminder> = {
-    source: {
-      id: undefined,
-      name: undefined
-    },
+    // source: {
+    //   id: undefined,
+    //   name: undefined
+    // },
     text: undefined,
     time: undefined,
     type: REMINDER_TYPE
@@ -33,15 +34,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.name',
+        //   type: 'input',
+        //   props: {
+        //     label: this.translateService.instant('Attach to'),
+        //     required: true,
+        //     disabled: true
+        //   }
+        // },
         {
           key: 'text',
           type: 'input',
@@ -82,12 +83,19 @@ export class ReminderModalComponent implements OnInit {
     this.bsModalRef.hide();
   }
 
+  assetSelected(asset: Partial<IManagedObject>): void {
+    this.asset = {
+      id: asset.id,
+      name: asset.name
+    };
+  }
+
   async submit(): Promise<void> {
     this.isLoading = true;
 
     const reminder: IEvent = {
       source: {
-        id: `${this.reminder.source.id}`
+        id: `${this.asset.id}`
       },
       type: REMINDER_TYPE,
       time: moment(this.reminder.time).toISOString(),
@@ -130,7 +138,11 @@ export class ReminderModalComponent implements OnInit {
 
   private getAssetFromRoute(route: ActivatedRouteSnapshot): IManagedObject {
     if (!route) console.error('No Route provided');
-    else return this.recursiveContextSearch(route);
+    else {
+      const mo = this.recursiveContextSearch(route);
+
+      if (has(mo, 'c8y_IsDevice') || has(mo, 'c8y_IsDeviceGroup')) return mo;
+    }
     return undefined;
   }
 }

plugin/reminder-plugin.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CoreModule, EventRealtimeService, hookAction } from '@c8y/ngx-components';
+import { AssetSelectorModule } from '@c8y/ngx-components/assets-navigator';
 import { FormlyModule } from '@ngx-formly/core';
 import { MomentModule } from 'ngx-moment';
 import { ReminderDrawerComponent } from './components/reminder-drawer/reminder-drawer.component';
@@ -16,6 +17,7 @@ import { ReminderService } from './services/reminder.service';
     CommonModule,
     CoreModule,
     RouterModule,
+    AssetSelectorModule,
     MomentModule,
     FormlyModule.forChild({
       types: [{ name: 'time', component: TimeFieldType }]