#32: adjsust display of selected asset for 1018 ui (#33)

Co-authored-by: Dirk Peter <dirk.peter@softwareg.com>

plugin/components/asset.formly/asset.formly.component.html

@@ -1,14 +1,24 @@
-<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>
+<ng-container *ngIf="!model.source; else assetDetails">
+  <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>
+</ng-container>
+
+<ng-template #assetDetails>
+  <div class="form-group no-asset">
+    <label>Selected asset</label>
+
+    <div class="d-flex">
+      <span>
+        {{ model.source.name }} <span class="text-muted">#{{ model.source.id }}</span>
+      </span>
+      <button type="button" class="btn btn-primary" (click)="clearSelection()">{{ 'Change' | translate }}</button>
+    </div>
+  </div>
+</ng-template>

plugin/components/asset.formly/asset.formly.component.less

@@ -1,6 +1,49 @@
 :host ::ng-deep {
-  .miller-column__selection {
-    padding-left: 0 !important;
-    padding-right: 0 !important;
+  .miller-view-wrapper{
+    position: relative;
+    margin-bottom: 24px;
+
+    .miller-column__header {
+      position: relative;
+      margin-top: 34px !important;
+      align-items: center;
+      justify-content: space-between;
+
+      p {
+         margin: 0 !important;
+      }
+
+      > :nth-child(2) {
+        position: absolute;
+        top: 3em;
+        right: 8px;
+        left: 8px;
+      }
+    }
+
+    .miller-column {
+      c8y-asset-selector > div {
+        display: flex;
+      }
+
+      .p-absolute {
+        left: 0;
+        right: 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 0 4px !important;
+      }
+
+      + .miller-column .miller-column__header {
+        margin-top: 0 !important;
+        padding-bottom: 3.1rem;
+      }
+    }
   }
 }
+
+.no-asset div {
+  justify-content: space-between;
+  align-items: center;
+}

plugin/components/asset.formly/asset.formly.component.ts

@@ -6,4 +6,10 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
   templateUrl: './asset.formly.component.html',
   styleUrls: ['./asset.formly.component.less']
 })
-export class AssetFieldType extends FieldType<FieldTypeConfig> {}
+export class AssetFieldType extends FieldType<FieldTypeConfig> {
+  clearSelection(): void {
+    this.formControl.setValue(null);
+    this.formControl.markAsDirty();
+    this.options.updateInitialValue({});
+  }
+}

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

@@ -0,0 +1,5 @@
+:host {
+  .form-group label {
+    white-space: normal !important;
+  }
+}

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

@@ -12,7 +12,8 @@ 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 {
   isLoading = false;