UI: Refactoring

ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts

@@ -36,8 +36,6 @@ import { PageLink } from '@shared/models/page/page-link';
 import { OtaUpdateComponent } from '@home/pages/ota-update/ota-update.component';
 import { EntityAction } from '@home/models/entity/entity-component.models';
 import { FileSizePipe } from '@shared/pipe/file-size.pipe';
-import { ClipboardService } from 'ngx-clipboard';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 
@@ -51,8 +49,7 @@ export class OtaUpdateTableConfigResolve implements Resolve<EntityTableConfig<Ot
               private datePipe: DatePipe,
               private store: Store<AppState>,
               private otaPackageService: OtaPackageService,
-              private fileSize: FileSizePipe,
-              private clipboardService: ClipboardService) {
+              private fileSize: FileSizePipe) {
     this.config.entityType = EntityType.OTA_PACKAGE;
     this.config.entityComponent = OtaUpdateComponent;
     this.config.entityTranslations = entityTypeTranslations.get(EntityType.OTA_PACKAGE);
@@ -67,11 +64,11 @@ export class OtaUpdateTableConfigResolve implements Resolve<EntityTableConfig<Ot
       new EntityTableColumn<OtaPackageInfo>('type', 'ota-update.package-type', '20%', entity => {
         return this.translate.instant(OtaUpdateTypeTranslationMap.get(entity.type));
       }),
-      new EntityTableColumn<OtaPackageInfo>('url', 'ota-update.url', '20%', entity => {
+      new EntityTableColumn<OtaPackageInfo>('url', 'ota-update.direct-url', '20%', entity => {
           return entity.url && entity.url.length > 20 ? `${entity.url.slice(0, 20)}…` : '';
         }, () => ({}), true, () => ({}), () => undefined, false,
         {
-          name: this.translate.instant('ota-update.copy-checksum'),
+          name: this.translate.instant('ota-update.copy-direct-url'),
           icon: 'content_paste',
           style: {
             'font-size': '16px',

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

@@ -41,10 +41,18 @@
             ngxClipboard
             (cbOnSuccess)="onPackageChecksumCopied()"
             [cbContent]="entity?.checksum"
-            [fxShow]="!isEdit">
+            [fxShow]="!isEdit && entity?.checksum">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>ota-update.copy-checksum</span>
     </button>
+    <button mat-raised-button
+            ngxClipboard
+            (cbOnSuccess)="onPackageDirectUrlCopied()"
+            [cbContent]="entity?.url"
+            [fxShow]="!isEdit && entity?.url">
+      <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+      <span translate>ota-update.copy-direct-url</span>
+    </button>
   </div>
 </div>
 <div class="mat-padding" fxLayout="column" fxLayoutGap="8px">
@@ -137,12 +145,12 @@
       </section>
       <section *ngIf="entityForm.get('resource').value === 'url'" style="margin-top: 8px">
         <mat-form-field class="mat-block">
-          <mat-label translate>ota-update.url</mat-label>
+          <mat-label translate>ota-update.direct-url</mat-label>
           <input matInput formControlName="url"
                  type="text"
                  [required]="entityForm.get('resource').value === 'url'">
           <mat-error *ngIf="entityForm.get('url').hasError('required')" translate>
-            ota-update.url-required
+            ota-update.direct-url-required
           </mat-error>
         </mat-form-field>
       </section>

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

@@ -160,6 +160,17 @@ export class OtaUpdateComponent extends EntityComponent<OtaPackage> implements O
       }));
   }
 
+  onPackageDirectUrlCopied() {
+    this.store.dispatch(new ActionNotificationShow(
+      {
+        message: this.translate.instant('ota-update.checksum-copied-message'),
+        type: 'success',
+        duration: 750,
+        verticalPosition: 'bottom',
+        horizontalPosition: 'right'
+      }));
+  }
+
   prepareFormValue(formValue: any): any {
     delete formValue.resource;
     delete formValue.generateChecksum;

ui-ngx/src/app/shared/components/button/copy-button.component.html

@@ -16,12 +16,9 @@
 
 -->
 <button mat-icon-button
-        #tooltip
         [disabled]="disabled"
         [matTooltip]="matTooltipText"
         [matTooltipPosition]="matTooltipPosition"
-        (mouseenter)="immediatePropagation($event)"
-        (mouseleave)="immediatePropagation($event)"
         (click)="copy($event)">
   <mat-icon [svgIcon]="mdiIconSymbol" [ngStyle]="style" [ngClass]="{'copied': copied}">
     {{ iconSymbol }}

ui-ngx/src/app/shared/components/button/copy-button.component.ts

@@ -14,9 +14,9 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
 import { ClipboardService } from 'ngx-clipboard';
-import { MatTooltip, TooltipPosition } from '@angular/material/tooltip';
+import { TooltipPosition } from '@angular/material/tooltip';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -53,15 +53,13 @@ export class CopyButtonComponent {
   style: {[key: string]: any} = {};
 
   @Output()
-  successCopied: EventEmitter<string>;
+  successCopied = new EventEmitter<string>();
 
   constructor(private clipboardService: ClipboardService,
               private translate: TranslateService,
               private cd: ChangeDetectorRef) {
   }
 
-  @ViewChild('tooltip', {static: true}) tooltip: MatTooltip;
-
   copy($event: Event): void {
     $event.stopPropagation();
     if (this.timer) {
@@ -71,11 +69,9 @@ export class CopyButtonComponent {
     this.successCopied.emit(this.copyText);
     this.copedIcon = 'done';
     this.copied = true;
-    this.tooltip.show();
     this.timer = setTimeout(() => {
       this.copedIcon = null;
       this.copied = false;
-      this.tooltip.hide();
       this.cd.detectChanges();
     }, 1500);
   }
@@ -96,7 +92,4 @@ export class CopyButtonComponent {
     return this.copied ? 'below' : this.tooltipPosition;
   }
 
-  immediatePropagation($event: Event): void {
-    this.copied ? $event.stopImmediatePropagation(): '';
-  }
 }

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2165,6 +2165,7 @@
       "chose-software-distributed-device": "Choose software that will be distributed to the devices",
       "content-type": "Content type",
       "copy-checksum": "Copy checksum",
+      "copy-direct-url": "Copy direct URL",
       "copyId": "Copy package Id",
       "copied": "Copied!",
       "delete": "Delete package",
@@ -2173,6 +2174,9 @@
       "delete-ota-updates-text": "Be careful, after the confirmation all selected OTA updates will be removed.",
       "delete-ota-updates-title": "Are you sure you want to delete { count, plural, 1 {1 OTA update} other {# OTA updates} }?",
       "description": "Description",
+      "direct-url": "Direct URL",
+      "direct-url-copied-message": "Package direct URL has been copied to clipboard",
+      "direct-url-required": "Direct URL is required",
       "download": "Download package",
       "drop-file": "Drop a package file or click to select a file to upload.",
       "file-name": "File name",
@@ -2197,8 +2201,6 @@
         "firmware": "Firmware",
         "software": "Software"
       },
-      "url": "Direct URL",
-      "url-required": "Direct URL is required",
       "version": "Version",
       "version-required": "Version is required.",
       "warning-after-save-no-edit": "Once the package is uploaded, you will not be able to modify title, version, device profile and package type."