Merge pull request #8931 from ArtemDzhereleiko/AD/imp/add-asset-dialog

Improvement for Add asset dialog

ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.html

@@ -43,6 +43,11 @@
           (click)="editAssetProfile($event)">
     <mat-icon class="material-icons">edit</mat-icon>
   </button>
+  <button mat-button color="primary" matSuffix
+          (click)="createAssetProfile($event, '')"
+          *ngIf="!selectAssetProfileFormGroup.get('assetProfile').value && !disabled && addNewProfile">
+    <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
+  </button>
   <mat-autocomplete
     class="tb-autocomplete"
     (closed)="onPanelClosed()"

ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.scss

@@ -19,3 +19,9 @@
     color: inherit;
   }
 }
+
+:host ::ng-deep {
+  .mat-mdc-form-field-icon-suffix {
+    display: flex;
+  }
+}

ui-ngx/src/app/modules/home/components/profile/asset-profile-autocomplete.component.ts

@@ -46,6 +46,7 @@ import { AssetProfile, AssetProfileInfo } from '@shared/models/asset.models';
 import { AssetProfileService } from '@core/http/asset-profile.service';
 import { AssetProfileDialogComponent, AssetProfileDialogData } from './asset-profile-dialog.component';
 import { SubscriptSizing } from '@angular/material/form-field';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
   selector: 'tb-asset-profile-autocomplete',
@@ -84,14 +85,9 @@ export class AssetProfileAutocompleteComponent implements ControlValueAccessor,
   @Input()
   showDetailsPageLink = false;
 
-  private requiredValue: boolean;
-  get required(): boolean {
-    return this.requiredValue;
-  }
   @Input()
-  set required(value: boolean) {
+  @coerceBoolean()
-    this.requiredValue = coerceBooleanProperty(value);
+  required = false;
-  }
 
   @Input()
   disabled: boolean;

ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.html

@@ -45,7 +45,7 @@
   </button>
   <button mat-button color="primary" matSuffix
           (click)="createDeviceProfile($event, '')"
-          *ngIf="!selectDeviceProfileFormGroup.get('deviceProfile').value && !disabled && addNewProfile && showCreateNewButton">
+          *ngIf="!selectDeviceProfileFormGroup.get('deviceProfile').value && !disabled && addNewProfile">
     <span style="white-space: nowrap">{{ 'notification.create-new' | translate }}</span>
   </button>
   <mat-autocomplete

ui-ngx/src/app/modules/home/components/profile/device-profile-autocomplete.component.ts

@@ -88,10 +88,6 @@ export class DeviceProfileAutocompleteComponent implements ControlValueAccessor,
   @coerceBoolean()
   addNewProfile = true;
 
-  @Input()
-  @coerceBoolean()
-  showCreateNewButton = false;
-
   @Input()
   showDetailsPageLink = false;
 

ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.ts

@@ -146,11 +146,8 @@ export class DeviceWizardDialogComponent extends DialogComponent<DeviceWizardDia
         overwriteActivityTime: this.deviceWizardFormGroup.get('overwriteActivityTime').value,
         description: this.deviceWizardFormGroup.get('description').value
       },
-      customerId: null
+      customerId: this.deviceWizardFormGroup.get('customerId').value
     };
-    if (this.deviceWizardFormGroup.get('customerId').value) {
-      device.customerId = new CustomerId(this.deviceWizardFormGroup.get('customerId').value);
-    }
     if (this.addDeviceWizardStepper.steps.last.completed || this.addDeviceWizardStepper.selectedIndex > 0) {
       return this.deviceService.saveDeviceWithCredentials(deepTrim(device), deepTrim(this.credentialsFormGroup.value.credential)).pipe(
         catchError((e: HttpErrorResponse) => {

ui-ngx/src/app/modules/home/pages/asset/asset.component.html

@@ -86,13 +86,6 @@
           {{ 'asset.name-max-length' | translate }}
         </mat-error>
       </mat-form-field>
-      <tb-asset-profile-autocomplete
-        [selectDefaultProfile]="isAdd"
-        required
-        formControlName="assetProfileId"
-        [showDetailsPageLink]="true"
-        (assetProfileUpdated)="onAssetProfileUpdated()">
-      </tb-asset-profile-autocomplete>
       <mat-form-field class="mat-block">
         <mat-label translate>asset.label</mat-label>
         <input matInput formControlName="label">
@@ -100,6 +93,20 @@
           {{ 'asset.label-max-length' | translate }}
         </mat-error>
       </mat-form-field>
+      <tb-asset-profile-autocomplete
+        [selectDefaultProfile]="isAdd"
+        required
+        formControlName="assetProfileId"
+        [showDetailsPageLink]="true"
+        (assetProfileUpdated)="onAssetProfileUpdated()">
+      </tb-asset-profile-autocomplete>
+      <tb-entity-autocomplete
+        *ngIf="isAdd"
+        useFullEntityId
+        formControlName="customerId"
+        labelText="asset.assign-to-customer"
+        [entityType]="entityType.CUSTOMER">
+      </tb-entity-autocomplete>
       <div formGroupName="additionalInfo">
         <mat-form-field class="mat-block">
           <mat-label translate>asset.description</mat-label>

ui-ngx/src/app/modules/home/pages/asset/asset.component.ts

@@ -69,6 +69,7 @@ export class AssetComponent extends EntityComponent<AssetInfo> {
         name: [entity ? entity.name : '', [Validators.required, Validators.maxLength(255)]],
         assetProfileId: [entity ? entity.assetProfileId : null, [Validators.required]],
         label: [entity ? entity.label : '', Validators.maxLength(255)],
+        customerId: [entity ? entity.customerId : ''],
         additionalInfo: this.fb.group(
           {
             description: [entity && entity.additionalInfo ? entity.additionalInfo.description : ''],
@@ -82,6 +83,7 @@ export class AssetComponent extends EntityComponent<AssetInfo> {
     this.entityForm.patchValue({name: entity.name});
     this.entityForm.patchValue({assetProfileId: entity.assetProfileId});
     this.entityForm.patchValue({label: entity.label});
+    this.entityForm.patchValue({customerId: entity.customerId});
     this.entityForm.patchValue({additionalInfo: {description: entity.additionalInfo ? entity.additionalInfo.description : ''}});
   }