[ADF-4272] TaskListCloud - improvements on CopyClipboardDirective (#4547)

* [ADF-4272] DocumentList -  add Copy content tooltip directive

* [ADF-4272] - fix build issue

* [ADF-4272] - change directive name and add requested changes

* [ADF-4272] - reset task-list-cloud html content

* [ADF-4272] - fix build

* [AFG-4272] - change name to CopyClipboard

* [ADF-4272] - PR changes

* [ADF-4272] - fix tests

* [ADF-4272[] - lint

* [ADF-4272] - merge clipboard directive with copy-content directive

* [ADF-4272] - PR changes

* [ADF-4272] - change docs

lib/core/clipboard/clipboard.directive.spec.ts

@@ -15,28 +15,30 @@
  * limitations under the License.
  */
 
-import { Component } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing';
 import { setupTestBed } from '../testing/setupTestBed';
 import { CoreModule } from '../core.module';
 import { ClipboardService } from './clipboard.service';
+import { ClipboardDirective } from './clipboard.directive';
+import { RouterTestingModule } from '@angular/router/testing';
 
 @Component({
      selector: 'adf-test-component',
      template: `
         <button
             clipboard-notification="copy success"
-            [adf-clipboard]="ref">
+            [adf-clipboard] [target]="ref">
             copy
         </button>
 
         <input #ref />
      `
 })
-class TestComponent {}
+class TestTargetClipboardComponent {}
 
 describe('ClipboardDirective', () => {
-    let fixture: ComponentFixture<TestComponent>;
+    let fixture: ComponentFixture<TestTargetClipboardComponent>;
     let clipboardService: ClipboardService;
 
     setupTestBed({
@@ -44,7 +46,7 @@ describe('ClipboardDirective', () => {
             CoreModule.forRoot()
         ],
         declarations: [
-            TestComponent
+            TestTargetClipboardComponent
         ],
         providers: [
             ClipboardService
@@ -52,7 +54,7 @@ describe('ClipboardDirective', () => {
     });
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(TestComponent);
+        fixture = TestBed.createComponent(TestTargetClipboardComponent);
         clipboardService = TestBed.get(ClipboardService);
         fixture.detectChanges();
     });
@@ -65,3 +67,73 @@ describe('ClipboardDirective', () => {
         expect(clipboardService.copyToClipboard).toHaveBeenCalled();
     });
 });
+
+describe('CopyClipboardDirective', () => {
+
+    @Component({
+        selector:  'adf-copy-conent-test-component',
+        template: `<span adf-clipboard='DOCUMENT_LIST.ACTIONS.DOCUMENT.CLICK_TO_COPY'>{{ mockText }}</span>`
+    })
+    class TestCopyClipboardComponent {
+
+        mockText = 'text to copy';
+
+        @ViewChild(ClipboardDirective)
+        clipboardDirective: ClipboardDirective;
+    }
+
+    let fixture: ComponentFixture<TestCopyClipboardComponent>;
+    let element: HTMLElement;
+
+    setupTestBed({
+        imports: [
+            CoreModule.forRoot(),
+            RouterTestingModule
+        ],
+        declarations: [
+            TestCopyClipboardComponent
+        ]
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestCopyClipboardComponent);
+        element = fixture.debugElement.nativeElement;
+        fixture.detectChanges();
+    });
+
+    it('should show tooltip when hover element', (() => {
+        const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span');
+        spanHTMLElement.dispatchEvent(new Event('mouseenter'));
+        fixture.detectChanges();
+        expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).not.toBeNull();
+    }));
+
+    it('should not show tooltip when element it is not hovered', (() => {
+        const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span');
+        spanHTMLElement.dispatchEvent(new Event('mouseenter'));
+        expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).not.toBeNull();
+
+        spanHTMLElement.dispatchEvent(new Event('mouseleave'));
+        expect(fixture.debugElement.nativeElement.querySelector('.adf-datatable-copy-tooltip')).toBeNull();
+    }));
+
+    it('should copy the content of element when click it', fakeAsync(() => {
+        const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span');
+        fixture.detectChanges();
+        spyOn(document, 'execCommand');
+        spanHTMLElement.dispatchEvent(new Event('click'));
+        tick();
+        fixture.detectChanges();
+        expect(document.execCommand).toHaveBeenCalledWith('copy');
+    }));
+
+    it('should not copy the content of element when click it', fakeAsync(() => {
+        const spanHTMLElement: HTMLInputElement = <HTMLInputElement> element.querySelector('span');
+        fixture.detectChanges();
+        spyOn(document, 'execCommand');
+        spanHTMLElement.dispatchEvent(new Event('mouseleave'));
+        tick();
+        fixture.detectChanges();
+        expect(document.execCommand).not.toHaveBeenCalled();
+    }));
+});

lib/core/clipboard/clipboard.directive.ts

@@ -15,33 +15,78 @@
  * limitations under the License.
  */
 
-import { Directive, Input, HostListener } from '@angular/core';
+import { Directive, Input, HostListener, Component, ViewContainerRef, ComponentFactoryResolver, AfterContentInit } from '@angular/core';
 import { ClipboardService } from './clipboard.service';
 
 @Directive({
     selector: '[adf-clipboard]',
     exportAs: 'adfClipboard'
 })
-export class ClipboardDirective {
+export class ClipboardDirective implements AfterContentInit {
     // tslint:disable-next-line:no-input-rename
-    @Input('adf-clipboard') target: HTMLInputElement | HTMLTextAreaElement;
+    @Input('adf-clipboard')
+    placeholder: string;
+
+    @Input()
+    target: HTMLInputElement | HTMLTextAreaElement;
 
     // tslint:disable-next-line:no-input-rename
     @Input('clipboard-notification') message: string;
 
+    private value: string;
+
+    constructor(private clipboardService: ClipboardService,
+                public viewContainerRef: ViewContainerRef,
+                private resolver: ComponentFactoryResolver) {}
+
     @HostListener('click', ['$event'])
     handleClickEvent(event: MouseEvent) {
         event.preventDefault();
+        event.stopPropagation();
         this.copyToClipboard();
     }
 
-    constructor(private clipboardService: ClipboardService) {}
+    @HostListener('mouseenter')
+    showTooltip() {
+        const componentFactory = this.resolver.resolveComponentFactory(ClipboardComponent);
+        const componentRef = this.viewContainerRef.createComponent(componentFactory).instance;
+        componentRef.copyText = this.value;
+        componentRef.placeholder = this.placeholder;
+    }
+
+    @HostListener('mouseleave')
+    closeTooltip() {
+        this.viewContainerRef.remove();
+    }
 
     private copyToClipboard() {
         const isValidTarget = this.clipboardService.isTargetValid(this.target);
 
         if (isValidTarget) {
             this.clipboardService.copyToClipboard(this.target, this.message);
+        } else {
+            this.copyContentToClipboard(this.viewContainerRef.element.nativeElement.innerHTML);
         }
     }
+
+    private copyContentToClipboard(content) {
+        this.clipboardService.copyContentToClipboard(content, this.message);
+    }
+
+    ngAfterContentInit() {
+        setTimeout( () => {
+            this.value = this.viewContainerRef.element.nativeElement.innerHTML;
+        });
+    }
+}
+
+@Component({
+    selector: 'adf-datatable-highlight-tooltip',
+    template: `
+        <span class='adf-datatable-copy-tooltip'>{{ placeholder | translate }} <b> {{ copyText }} </b></span>
+        `
+})
+export class ClipboardComponent {
+    copyText: string;
+    placeholder: string;
 }

lib/core/clipboard/clipboard.module.ts

@@ -17,22 +17,26 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { ClipboardDirective } from './clipboard.directive';
+import { ClipboardDirective, ClipboardComponent } from './clipboard.directive';
 import { ClipboardService } from './clipboard.service';
+import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
     imports: [
-        CommonModule
+        CommonModule,
+        TranslateModule.forChild()
     ],
     providers: [
         ClipboardService
     ],
     declarations: [
-        ClipboardDirective
+        ClipboardDirective,
+        ClipboardComponent
     ],
     exports: [
         ClipboardDirective
-    ]
+    ],
+    entryComponents: [ClipboardComponent]
 })
 
 export class ClipboardModule {}

lib/core/clipboard/clipboard.service.ts

@@ -32,8 +32,6 @@ export class ClipboardService {
         if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) {
             return !target.hasAttribute('disabled');
         }
-
-        this.logService.error(`${target} should be input or textarea`);
         return false;
     }
 
@@ -50,6 +48,20 @@ export class ClipboardService {
         }
     }
 
+    copyContentToClipboard(content: string, message: string) {
+        try {
+            document.addEventListener('copy', (e: ClipboardEvent) => {
+                e.clipboardData.setData('text/plain', (content));
+                e.preventDefault();
+                document.removeEventListener('copy', null);
+              });
+            document.execCommand('copy');
+            this.notify(message);
+        } catch (error) {
+            this.logService.error(error);
+        }
+    }
+
     private notify(message) {
         if (message) {
             this.notificationService.openSnackMessage(message);