From 195ed51afa9ba44d2fc93ca2a680303aa96a9efe Mon Sep 17 00:00:00 2001 From: Vladyslav_Prykhodko Date: Fri, 4 Jun 2021 20:49:01 +0300 Subject: [PATCH] UI: Add copy button checksum --- .../src/app/core/http/ota-package.service.ts | 2 +- .../entity/entities-table.component.html | 28 +++++- .../entity/entities-table.component.ts | 4 +- .../entity/entities-table-config.models.ts | 13 ++- .../ota-update-table-config.resolve.ts | 66 +++++++------ .../ota-update/ota-update.component.html | 8 +- .../pages/ota-update/ota-update.component.ts | 11 +++ .../button/copy-button.component.html | 29 ++++++ .../button/copy-button.component.scss | 30 ++++++ .../button/copy-button.component.ts | 95 +++++++++++++++++++ .../ota-package-autocomplete.component.ts | 2 +- ui-ngx/src/app/shared/shared.module.ts | 7 +- .../assets/locale/locale.constant-en_US.json | 1 + 13 files changed, 256 insertions(+), 40 deletions(-) create mode 100644 ui-ngx/src/app/shared/components/button/copy-button.component.html create mode 100644 ui-ngx/src/app/shared/components/button/copy-button.component.scss create mode 100644 ui-ngx/src/app/shared/components/button/copy-button.component.ts diff --git a/ui-ngx/src/app/core/http/ota-package.service.ts b/ui-ngx/src/app/core/http/ota-package.service.ts index 0042f67b24..7e7f09726e 100644 --- a/ui-ngx/src/app/core/http/ota-package.service.ts +++ b/ui-ngx/src/app/core/http/ota-package.service.ts @@ -39,7 +39,7 @@ export class OtaPackageService { } public getOtaPackagesInfoByDeviceProfileId(pageLink: PageLink, deviceProfileId: string, type: OtaUpdateType, - hasData = true, config?: RequestConfig): Observable> { + config?: RequestConfig): Observable> { const url = `/api/otaPackages/${deviceProfileId}/${type}${pageLink.toQuery()}`; return this.http.get>(url, defaultHttpOptionsFromConfig(config)); } diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html index f4ecd52437..83f221f9e1 100644 --- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html +++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.html @@ -163,8 +163,34 @@ *matCellDef="let entity; let row = index" [matTooltip]="cellTooltip(entity, column, row)" matTooltipPosition="above" - [innerHTML]="cellContent(entity, column, row)" [ngStyle]="cellStyle(entity, column, row)"> + + + + + + + + + + + + diff --git a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts index 40a6b0cece..df164adda4 100644 --- a/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/entity/entities-table.component.ts @@ -43,7 +43,7 @@ import { TranslateService } from '@ngx-translate/core'; import { BaseData, HasId } from '@shared/models/base-data'; import { ActivatedRoute } from '@angular/router'; import { - CellActionDescriptor, + CellActionDescriptor, CellActionDescriptorType, EntityActionTableColumn, EntityColumn, EntityTableColumn, @@ -104,6 +104,8 @@ export class EntitiesTableComponent extends PageComponent implements AfterViewIn timewindow: Timewindow; dataSource: EntitiesDataSource>; + cellActionType = CellActionDescriptorType; + isDetailsOpen = false; detailsPanelOpened = new EventEmitter(); diff --git a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts index 4b057d8fef..8fcd2aa070 100644 --- a/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts +++ b/ui-ngx/src/app/modules/home/models/entity/entities-table-config.models.ts @@ -48,6 +48,9 @@ export type CellContentFunction> = (entity: T, key: st export type CellTooltipFunction> = (entity: T, key: string) => string | undefined; export type HeaderCellStyleFunction> = (key: string) => object; export type CellStyleFunction> = (entity: T, key: string) => object; +export type CopyCellContent> = (entity: T, key: string, length: number) => object; + +export enum CellActionDescriptorType { 'DEFAULT', 'COPY_BUTTON'} export interface CellActionDescriptor> { name: string; @@ -56,7 +59,8 @@ export interface CellActionDescriptor> { mdiIcon?: string; style?: any; isEnabled: (entity: T) => boolean; - onAction: ($event: MouseEvent, entity: T) => void; + onAction: ($event: MouseEvent, entity: T) => any; + type?: CellActionDescriptorType; } export interface GroupActionDescriptor> { @@ -95,7 +99,8 @@ export class EntityTableColumn> extends BaseEntityTabl public sortable: boolean = true, public headerCellStyleFunction: HeaderCellStyleFunction = () => ({}), public cellTooltipFunction: CellTooltipFunction = () => undefined, - public isNumberColumn: boolean = false) { + public isNumberColumn: boolean = false, + public actionCell: CellActionDescriptor = {isEnabled: () => false, name: null, onAction: () => ({})}) { super('content', key, title, width, sortable); } } @@ -187,3 +192,7 @@ export class EntityTableConfig, P extends PageLink = P export function checkBoxCell(value: boolean): string { return `${value ? 'check_box' : 'check_box_outline_blank'}`; } + +export function copyCellContent(value: string): string { + return `${value ? 'check_box' : 'check_box_outline_blank'}`; +} diff --git a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts index d56b4e4541..dc7c36371d 100644 --- a/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts +++ b/ui-ngx/src/app/modules/home/pages/ota-update/ota-update-table-config.resolve.ts @@ -17,6 +17,7 @@ import { Injectable } from '@angular/core'; import { Resolve } from '@angular/router'; import { + CellActionDescriptorType, DateEntityTableColumn, EntityTableColumn, EntityTableConfig @@ -61,27 +62,46 @@ export class OtaUpdateTableConfigResolve implements Resolve('createdTime', 'common.created-time', this.datePipe, '150px'), - new EntityTableColumn('title', 'ota-update.title', '25%'), - new EntityTableColumn('version', 'ota-update.version', '25%'), - new EntityTableColumn('type', 'ota-update.package-type', '25%', entity => { + new EntityTableColumn('title', 'ota-update.title', '20%'), + new EntityTableColumn('version', 'ota-update.version', '20%'), + new EntityTableColumn('type', 'ota-update.package-type', '20%', entity => { return this.translate.instant(OtaUpdateTypeTranslationMap.get(entity.type)); }), - new EntityTableColumn('fileName', 'ota-update.file-name', '25%'), + new EntityTableColumn('url', 'ota-update.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'), + icon: 'content_paste', + style: { + 'font-size': '16px', + color: 'rgba(0,0,0,.87)' + }, + isEnabled: (otaPackage) => !!otaPackage.url, + onAction: ($event, entity) => entity.url, + type: CellActionDescriptorType.COPY_BUTTON + }), + new EntityTableColumn('fileName', 'ota-update.file-name', '20%'), new EntityTableColumn('dataSize', 'ota-update.file-size', '70px', entity => { return entity.dataSize ? this.fileSize.transform(entity.dataSize) : ''; }), - new EntityTableColumn('checksum', 'ota-update.checksum', '540px', entity => { - return entity.checksum ? `${ChecksumAlgorithmTranslationMap.get(entity.checksumAlgorithm)}: ${entity.checksum}` : ''; - }, () => ({}), false) - ); - - this.config.cellActionDescriptors.push( + new EntityTableColumn('checksum', 'ota-update.checksum', '220px', entity => { + return entity.checksum ? this.checksumText(entity) : ''; + }, () => ({}), true, () => ({}), () => undefined, false, { name: this.translate.instant('ota-update.copy-checksum'), - icon: 'content_copy', + icon: 'content_paste', + style: { + 'font-size': '16px', + color: 'rgba(0,0,0,.87)' + }, isEnabled: (otaPackage) => !!otaPackage.checksum, - onAction: ($event, entity) => this.copyPackageChecksum($event, entity) - }, + onAction: ($event, entity) => entity.checksum, + type: CellActionDescriptorType.COPY_BUTTON + }) + ); + + this.config.cellActionDescriptors.push( { name: this.translate.instant('ota-update.download'), icon: 'file_download', @@ -120,19 +140,12 @@ export class OtaUpdateTableConfigResolve implements Resolve 20) { + text = `${text.slice(0, 20)}…`; } - this.clipboardService.copy(otaPackageInfo?.checksum); - this.store.dispatch(new ActionNotificationShow( - { - message: this.translate.instant('ota-update.checksum-copied-message'), - type: 'success', - duration: 750, - verticalPosition: 'bottom', - horizontalPosition: 'right' - })); + return text; } onPackageAction(action: EntityAction): boolean { @@ -140,9 +153,6 @@ export class OtaUpdateTableConfigResolve implements Resolve 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 42e0ffc33c..9193b37c8e 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 @@ -149,6 +149,17 @@ export class OtaUpdateComponent extends EntityComponent implements O })); } + onPackageChecksumCopied() { + 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; diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.html b/ui-ngx/src/app/shared/components/button/copy-button.component.html new file mode 100644 index 0000000000..55f3008cf7 --- /dev/null +++ b/ui-ngx/src/app/shared/components/button/copy-button.component.html @@ -0,0 +1,29 @@ + + diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.scss b/ui-ngx/src/app/shared/components/button/copy-button.component.scss new file mode 100644 index 0000000000..3cf3757c03 --- /dev/null +++ b/ui-ngx/src/app/shared/components/button/copy-button.component.scss @@ -0,0 +1,30 @@ +/** + * Copyright © 2016-2021 The Thingsboard Authors + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +:host { + .mat-icon-button{ + height: 32px; + width: 32px; + line-height: 32px; + .mat-icon.copied{ + color: #00C851!important; + } + } + &:hover{ + .mat-icon{ + color: #28567E !important; + } + } +} diff --git a/ui-ngx/src/app/shared/components/button/copy-button.component.ts b/ui-ngx/src/app/shared/components/button/copy-button.component.ts new file mode 100644 index 0000000000..e8e4d8e4b8 --- /dev/null +++ b/ui-ngx/src/app/shared/components/button/copy-button.component.ts @@ -0,0 +1,95 @@ +/// +/// Copyright © 2016-2021 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { ChangeDetectorRef, Component, Input, ViewChild } from '@angular/core'; +import { ClipboardService } from 'ngx-clipboard'; +import { MatTooltip, TooltipPosition } from '@angular/material/tooltip/tooltip'; +import { TranslateService } from '@ngx-translate/core'; + +@Component({ + selector: 'tb-copy-button', + styleUrls: ['copy-button.component.scss'], + templateUrl: './copy-button.component.html' +}) +export class CopyButtonComponent { + + private copedIcon = ''; + private timer; + + copied = false; + + @Input() + copyText: string; + + @Input() + disabled = false; + + @Input() + mdiIcon: string; + + @Input() + icon: string; + + @Input() + tooltipText: string; + + @Input() + tooltipPosition: TooltipPosition; + + @Input() + style: {[key: string]: any} = {}; + + constructor(private clipboardService: ClipboardService, + private translate: TranslateService, + private cd: ChangeDetectorRef) { + } + + @ViewChild('tooltip', {static: true}) tooltip: MatTooltip; + + copy($event: Event): void { + $event.stopPropagation(); + $event.preventDefault(); + if (this.timer) { + clearTimeout(this.timer); + } + this.clipboardService.copy(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); + } + + get iconSymbol(): string { + return this.copedIcon || this.icon; + } + + get mdiIconSymbol(): string { + return this.copedIcon ? '' : this.mdiIcon; + } + + get matTooltipText(): string { + return this.copied ? this.translate.instant('ota-update.copied') : this.tooltipText; + } + + get matTooltipPosition(): TooltipPosition { + return this.copied ? 'below' : this.tooltipPosition; + } +} 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 25df909a8c..bb3be21fa8 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 @@ -216,7 +216,7 @@ export class OtaPackageAutocompleteComponent implements ControlValueAccessor, On direction: Direction.ASC }); return this.otaPackageService.getOtaPackagesInfoByDeviceProfileId(pageLink, this.deviceProfileId, this.type, - true, {ignoreLoading: true}).pipe( + {ignoreLoading: true}).pipe( map((data) => data && data.data.length ? data.data : null) ); } diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 5e71d4c44a..f2bcdc97a4 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -143,6 +143,7 @@ import { SelectableColumnsPipe } from '@shared/pipe/selectable-columns.pipe'; import { QuickTimeIntervalComponent } from '@shared/components/time/quick-time-interval.component'; import { OtaPackageAutocompleteComponent } from '@shared/components/ota-package/ota-package-autocomplete.component'; import { MAT_DATE_LOCALE } from '@angular/material/core'; +import { CopyButtonComponent } from '@shared/components/button/copy-button.component'; @NgModule({ providers: [ @@ -240,7 +241,8 @@ import { MAT_DATE_LOCALE } from '@angular/material/core'; EntityGatewaySelectComponent, ContactComponent, OtaPackageAutocompleteComponent, - WidgetsBundleSearchComponent + WidgetsBundleSearchComponent, + CopyButtonComponent ], imports: [ CommonModule, @@ -412,7 +414,8 @@ import { MAT_DATE_LOCALE } from '@angular/material/core'; EntityGatewaySelectComponent, ContactComponent, OtaPackageAutocompleteComponent, - WidgetsBundleSearchComponent + WidgetsBundleSearchComponent, + CopyButtonComponent ] }) export class SharedModule { } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 6f2618dd7a..da35b00d3a 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2166,6 +2166,7 @@ "content-type": "Content type", "copy-checksum": "Copy checksum", "copyId": "Copy package Id", + "copied": "Copied!", "delete": "Delete package", "delete-ota-update-text": "Be careful, after the confirmation the OTA update will become unrecoverable.", "delete-ota-update-title": "Are you sure you want to delete the OTA update '{{title}}'?",