From 807a543d1c66ff11da387baccc357cb0025e52af Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 15 Jun 2021 16:50:30 +0300
Subject: [PATCH] UI: Add validation ota package URL; Improvement
 ota-package-autocomplete; Refactoring update ota-packages in device-component

---
 .../home/pages/device/device.component.ts      | 18 +++++++++++++-----
 .../pages/ota-update/ota-update.component.html |  2 +-
 .../pages/ota-update/ota-update.component.ts   |  7 ++++++-
 .../ota-package-autocomplete.component.html    |  3 ++-
 .../ota-package-autocomplete.component.ts      |  2 +-
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/pages/device/device.component.ts b/ui-ngx/src/app/modules/home/pages/device/device.component.ts
index 1ed9f784f1..b55498ed05 100644
--- a/ui-ngx/src/app/modules/home/pages/device/device.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/device/device.component.ts
@@ -35,6 +35,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { EntityTableConfig } from '@home/models/entity/entities-table-config.models';
 import { Subject } from 'rxjs';
 import { OtaUpdateType } from '@shared/models/ota-package.models';
+import { distinctUntilChanged } from 'rxjs/operators';
 
 @Component({
   selector: 'tb-device',
@@ -78,7 +79,7 @@ export class DeviceComponent extends EntityComponent<DeviceInfo> {
   }
 
   buildForm(entity: DeviceInfo): FormGroup {
-    return this.fb.group(
+    const form = this.fb.group(
       {
         name: [entity ? entity.name : '', [Validators.required]],
         deviceProfileId: [entity ? entity.deviceProfileId : null, [Validators.required]],
@@ -95,6 +96,17 @@ export class DeviceComponent extends EntityComponent<DeviceInfo> {
         )
       }
     );
+    form.get('deviceProfileId').valueChanges.pipe(
+      distinctUntilChanged((prev, curr) => prev?.id === curr?.id)
+    ).subscribe(profileId => {
+      if (profileId && this.isEdit) {
+        this.entityForm.patchValue({
+          firmwareId: null,
+          softwareId: null
+        }, {emitEvent: false});
+      }
+    });
+    return form;
   }
 
   updateForm(entity: DeviceInfo) {
@@ -156,10 +168,6 @@ export class DeviceComponent extends EntityComponent<DeviceInfo> {
           this.entityForm.markAsDirty();
         }
       }
-      this.entityForm.patchValue({
-        firmwareId: null,
-        softwareId: null
-      });
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
index 0f2662a251..6802768303 100644
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.html
@@ -149,7 +149,7 @@
           <input matInput formControlName="url"
                  type="text"
                  [required]="entityForm.get('resource').value === 'url'">
-          <mat-error *ngIf="entityForm.get('url').hasError('required')" translate>
+          <mat-error *ngIf="entityForm.get('url').hasError('required') || entityForm.get('url').hasError('pattern')" translate>
             ota-update.direct-url-required
           </mat-error>
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.ts b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.ts
index 1182e6c40a..0c2d82e171 100644
--- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update.component.ts
@@ -67,7 +67,7 @@ export class OtaUpdateComponent extends EntityComponent<OtaPackage> implements O
         this.entityForm.get('file').updateValueAndValidity({emitEvent: false});
       } else {
         this.entityForm.get('file').clearValidators();
-        this.entityForm.get('url').setValidators(Validators.required);
+        this.entityForm.get('url').setValidators([Validators.required, Validators.pattern('(.|\\s)*\\S(.|\\s)*')]);
         this.entityForm.get('file').updateValueAndValidity({emitEvent: false});
         this.entityForm.get('url').updateValueAndValidity({emitEvent: false});
       }
@@ -172,6 +172,11 @@ export class OtaUpdateComponent extends EntityComponent<OtaPackage> implements O
   }
 
   prepareFormValue(formValue: any): any {
+    if (formValue.resource === 'url') {
+      delete formValue.file;
+    } else {
+      delete formValue.url;
+    }
     delete formValue.resource;
     delete formValue.generateChecksum;
     return super.prepareFormValue(formValue);
diff --git a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
index 51c291006d..b29f32a1c6 100644
--- a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.html
@@ -21,7 +21,8 @@
          formControlName="packageId"
          (focusin)="onFocus()"
          [required]="required"
-         [matAutocomplete]="packageAutocomplete">
+         [matAutocomplete]="packageAutocomplete"
+         [matAutocompleteDisabled]="disabled">
   <button *ngIf="otaPackageFormGroup.get('packageId').value && !disabled"
           type="button"
           matSuffix mat-button mat-icon-button aria-label="Clear"
diff --git a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.ts b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.ts
index bb3be21fa8..a8f7aa65a5 100644
--- a/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/ota-package/ota-package-autocomplete.component.ts
@@ -222,7 +222,7 @@ export class OtaPackageAutocompleteComponent implements ControlValueAccessor, On
   }
 
   clear() {
-    this.otaPackageFormGroup.get('packageId').patchValue('', {emitEvent: true});
+    this.otaPackageFormGroup.get('packageId').patchValue('', {emitEvent: false});
     setTimeout(() => {
       this.packageInput.nativeElement.blur();
       this.packageInput.nativeElement.focus();