From acb0c09bd6b1e41ed71dacc416370e6c810d5d59 Mon Sep 17 00:00:00 2001 From: Shijun Sun <30999793+AllForNothing@users.noreply.github.com> Date: Tue, 28 Jun 2022 14:41:13 +0800 Subject: [PATCH] Improve copy command component (#17068) Signed-off-by: AllForNothing --- .../app/services/event-service/event.service.spec.ts | 6 +++--- .../src/app/services/event-service/event.service.ts | 6 +++--- .../components/push-image/copy-input.component.ts | 10 +++++++--- .../third-party/ngx-clipboard/clipboard.service.ts | 7 +++++++ 4 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/portal/src/app/services/event-service/event.service.spec.ts b/src/portal/src/app/services/event-service/event.service.spec.ts index 9412e2788..b58f61665 100644 --- a/src/portal/src/app/services/event-service/event.service.spec.ts +++ b/src/portal/src/app/services/event-service/event.service.spec.ts @@ -1,5 +1,5 @@ import { TestBed } from '@angular/core/testing'; -import { EventService } from './event.service'; +import { EventService, HarborEvent } from './event.service'; import { Subscription } from 'rxjs'; describe('EventServiceService', () => { @@ -16,12 +16,12 @@ describe('EventServiceService', () => { it('able to subscribe', () => { let result: string; - const sub1 = service.subscribe('testEvent', data => { + const sub1 = service.subscribe(HarborEvent.SCROLL, data => { result = data; }); expect(sub1).toBeTruthy(); expect(sub1 instanceof Subscription).toEqual(true); - service.publish('testEvent', 'resultString'); + service.publish(HarborEvent.SCROLL, 'resultString'); sub1.unsubscribe(); expect(result).toEqual('resultString'); }); diff --git a/src/portal/src/app/services/event-service/event.service.ts b/src/portal/src/app/services/event-service/event.service.ts index 94f89341f..8b5fb966a 100644 --- a/src/portal/src/app/services/event-service/event.service.ts +++ b/src/portal/src/app/services/event-service/event.service.ts @@ -13,7 +13,7 @@ export class EventService { * @param {function} handler the event handler * @return A Subscription to unsubscribe */ - subscribe(topic: string, handler: Function): Subscription { + subscribe(topic: HarborEvent, handler: Function): Subscription { if (!this._channels[topic]) { this._channels[topic] = []; } @@ -30,7 +30,7 @@ export class EventService { * @param {function} handler the event handler * */ - private unsubscribe(topic: string, handler: Function = null) { + private unsubscribe(topic: HarborEvent, handler: Function = null) { let t = this._channels[topic]; if (!t) { // Wasn't found, wasn't removed @@ -60,7 +60,7 @@ export class EventService { * @param topic * @param data */ - publish(topic: string, data?: any) { + publish(topic: HarborEvent, data?: any) { const t = this._channels[topic]; if (!t) { return; diff --git a/src/portal/src/app/shared/components/push-image/copy-input.component.ts b/src/portal/src/app/shared/components/push-image/copy-input.component.ts index 6647ce47b..ba4c09b6f 100644 --- a/src/portal/src/app/shared/components/push-image/copy-input.component.ts +++ b/src/portal/src/app/shared/components/push-image/copy-input.component.ts @@ -1,4 +1,5 @@ import { Component, Input, Output, EventEmitter } from '@angular/core'; +import { ClipboardService } from '../third-party/ngx-clipboard'; export const enum CopyStatus { NORMAL, @@ -10,8 +11,6 @@ export const enum CopyStatus { selector: 'hbr-copy-input', templateUrl: './copy-input.coponent.html', styleUrls: ['./push-image.scss'], - - providers: [], }) export class CopyInputComponent { @Input() inputSize: number = 40; @@ -25,6 +24,8 @@ export class CopyInputComponent { @Output() onCopySuccess: EventEmitter = new EventEmitter(); // eslint-disable-next-line @angular-eslint/no-output-on-prefix @Output() onCopyError: EventEmitter = new EventEmitter(); + + constructor(private clipboardSrv: ClipboardService) {} onSuccess($event: any): void { this.state = CopyStatus.SUCCESS; this.onCopySuccess.emit($event); @@ -44,7 +45,10 @@ export class CopyInputComponent { } public get isCopied(): boolean { - return this.state === CopyStatus.SUCCESS; + return ( + this.state === CopyStatus.SUCCESS && + this.clipboardSrv?.getCurrentCopiedText() === this.defaultValue + ); } public get hasCopyError(): boolean { diff --git a/src/portal/src/app/shared/components/third-party/ngx-clipboard/clipboard.service.ts b/src/portal/src/app/shared/components/third-party/ngx-clipboard/clipboard.service.ts index c4e761b3d..61361aed7 100644 --- a/src/portal/src/app/shared/components/third-party/ngx-clipboard/clipboard.service.ts +++ b/src/portal/src/app/shared/components/third-party/ngx-clipboard/clipboard.service.ts @@ -11,6 +11,7 @@ import { WINDOW } from '../ngx-window-token/window-token'; @Injectable() export class ClipboardService { private tempTextArea: HTMLTextAreaElement; + private _currentCopiedText: string; constructor( @Inject(DOCUMENT) private document: any, @Inject(WINDOW) private window: any @@ -22,6 +23,10 @@ export class ClipboardService { ); } + getCurrentCopiedText(): string { + return this._currentCopiedText; + } + public isTargetValid( element: HTMLInputElement | HTMLTextAreaElement ): boolean { @@ -50,6 +55,7 @@ export class ClipboardService { this.selectTarget(targetElm, renderer); const re = this.copyText(); this.clearSelection(targetElm, this.window); + this._currentCopiedText = targetElm?.value; return re; } catch (error) { return false; @@ -69,6 +75,7 @@ export class ClipboardService { this.document.body.appendChild(this.tempTextArea); } this.tempTextArea.value = content; + this._currentCopiedText = content; return this.copyFromInputElement(this.tempTextArea, renderer); }