inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [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
This commit is contained in:
Silviu Popa
2019-04-08 18:37:37 +03:00
committed by Eugenio Romano
parent dee63e3f3b
commit a87d1ef002
19 changed files with 433 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
lib/core/clipboard/clipboard.directive.spec.ts
View File

@@ -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();
}));
});

53
lib/core/clipboard/clipboard.directive.ts
View File

@@ -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;
}

12
lib/core/clipboard/clipboard.module.ts
View File

@@ -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 {}

16
lib/core/clipboard/clipboard.service.ts
View File

@@ -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);

4
lib/core/data-column/data-column.component.ts
View File

@@ -66,6 +66,10 @@ export class DataColumnComponent implements OnInit {
@Input('class')
cssClass: string;
/** flag to show the copy content directive */
@Input()
copyContent: boolean;
ngOnInit() {
if (!this.srTitle && this.key === '$thumbnail') {
this.srTitle = 'Thumbnail';

18
lib/core/datatable/components/datatable/datatable-cell.component.ts
View File

@@ -35,13 +35,21 @@ import { Node } from '@alfresco/js-api';
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<ng-container>
<span *ngIf="copyContent; else defaultCell"
adf-clipboard="DATATABLE.CLICK_TO_COPY"
[clipboard-notification]="'DATATABLE.SUCCESS_COPY'"
[attr.aria-label]="value$ | async"
[title]="tooltip"
class="adf-datatable-cell-value"
>{{ value$ | async }}</span>
</ng-container>
<ng-template #defaultCell>
<span
[attr.aria-label]="value$ | async"
[title]="tooltip"
class="adf-datatable-cell-value"
>{{ value$ | async }}</span
>
</ng-container>
>{{ value$ | async }}</span>
</ng-template>
`,
encapsulation: ViewEncapsulation.None,
host: { class: 'adf-datatable-cell' }
@@ -58,6 +66,9 @@ export class DataTableCellComponent implements OnInit, OnDestroy {
value$ = new BehaviorSubject<any>('');
@Input()
copyContent: boolean;
@Input()
tooltip: string;
@@ -67,7 +78,6 @@ export class DataTableCellComponent implements OnInit, OnDestroy {
ngOnInit() {
this.updateValue();
this.sub = this.alfrescoApiService.nodeUpdated.subscribe((node: Node) => {
if (this.row) {
const { entry } = this.row['node'];

1
lib/core/datatable/components/datatable/datatable.component.html
View File

@@ -148,6 +148,7 @@
<div *ngSwitchCase="'text'" class="adf-cell-value"
[attr.data-automation-id]="'text_' + data.getValue(row, col)">
<adf-datatable-cell
[copyContent]="col.copyContent"
[data]="data"
[column]="col"
[row]="row"

1
lib/core/datatable/components/datatable/datatable.component.scss
View File

@@ -216,6 +216,7 @@
&--text {
text-align: left;
position: relative;
}
&--date {

1
lib/core/datatable/data/data-column.model.ts
View File

@@ -27,4 +27,5 @@ export interface DataColumn {
cssClass?: string;
template?: TemplateRef<any>;
formatTooltip?: Function;
copyContent?: boolean;
}

2
lib/core/datatable/data/object-datacolumn.model.ts
View File

@@ -29,6 +29,7 @@ export class ObjectDataColumn implements DataColumn {
srTitle: string;
cssClass: string;
template?: TemplateRef<any>;
copyContent?: boolean;
constructor(input: any) {
this.key = input.key;
@@ -39,5 +40,6 @@ export class ObjectDataColumn implements DataColumn {
this.srTitle = input.srTitle;
this.cssClass = input.cssClass;
this.template = input.template;
this.copyContent = input.copyContent;
}
}

5
lib/core/datatable/datatable.module.ts
View File

@@ -41,6 +41,7 @@ import { CustomEmptyContentTemplateDirective } from './directives/custom-empty-c
import { CustomLoadingContentTemplateDirective } from './directives/custom-loading-template.directive';
import { CustomNoPermissionTemplateDirective } from './directives/custom-no-permission-template.directive';
import { JsonCellComponent } from './components/datatable/json-cell.component';
import { ClipboardModule } from '../clipboard/clipboard.module';
@NgModule({
imports: [
@@ -50,7 +51,8 @@ import { JsonCellComponent } from './components/datatable/json-cell.component';
TranslateModule.forChild(),
ContextMenuModule,
PipeModule,
DirectiveModule
DirectiveModule,
ClipboardModule
],
declarations: [
DataTableComponent,
@@ -88,5 +90,6 @@ import { JsonCellComponent } from './components/datatable/json-cell.component';
CustomLoadingContentTemplateDirective,
CustomNoPermissionTemplateDirective
]
})
export class DataTableModule {}