[ADF-3726] Add copy to clipbouard support to card view properties (#5565)

lib/core/card-view/card-view.module.ts

@@ -29,7 +29,8 @@ import {
     MatSelectModule,
     MatChipsModule,
     MatMenuModule,
-    MatCardModule
+    MatCardModule,
+    MatTooltipModule
 } from '@angular/material';
 import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -64,7 +65,8 @@ import { CardViewArrayItemComponent } from './components/card-view-arrayitem/car
         MatMenuModule,
         MatCardModule,
         MatDatetimepickerModule,
-        MatNativeDatetimeModule
+        MatNativeDatetimeModule,
+        MatTooltipModule
     ],
     declarations: [
         CardViewComponent,

lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -1,54 +1,53 @@
-<div
-    *ngIf="showProperty() || isEditable()"
-    [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-    class="adf-property-label"
->{{ property.label | translate }}</div>
+<div *ngIf="showProperty() || isEditable()"
+     [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+     class="adf-property-label">{{ property.label | translate }}</div>
 
 <div class="adf-property-value">
-    <span *ngIf="!isEditable()" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
+    <span *ngIf="!isEditable()"
+          [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
         <span [attr.data-automation-id]="'card-dateitem-' + property.key">
-            <span *ngIf="showProperty()">{{ property.displayValue }}</span>
+            <span *ngIf="showProperty()"
+                  (dblclick)="copyToClipboard(property.displayValue)"
+                  matTooltipShowDelay="1000"
+                  [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">{{ property.displayValue }}</span>
         </span>
     </span>
-    <div *ngIf="isEditable()" class="adf-dateitem-editable">
+    <div *ngIf="isEditable()"
+         class="adf-dateitem-editable">
         <div class="adf-dateitem-editable-controls">
-            <span
-                class="adf-datepicker-toggle"
-                [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
-                (click)="showDatePicker()">
-                <span
-                    *ngIf="showProperty(); else elseEmptyValueBlock"
-                    [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key"
-                >{{ property.displayValue }}</span>
+            <span class="adf-datepicker-toggle"
+                  [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
+                  (click)="showDatePicker()">
+                <span *ngIf="showProperty(); else elseEmptyValueBlock"
+                      [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">{{ property.displayValue }}</span>
             </span>
 
             <mat-icon *ngIf="showClearAction()"
-                class="adf-date-reset-icon"
-                (click)="onDateClear()"
-                [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
-                [attr.data-automation-id]="'datepicker-date-clear-' + property.key">
+                      class="adf-date-reset-icon"
+                      (click)="onDateClear()"
+                      [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
+                      [attr.data-automation-id]="'datepicker-date-clear-' + property.key">
                 clear
             </mat-icon>
 
-            <mat-datetimepicker-toggle
-                [attr.tabindex]="-1"
-                [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                [attr.data-automation-id]="'datepickertoggle-' + property.key"
-                [for]="datetimePicker">
+            <mat-datetimepicker-toggle [attr.tabindex]="-1"
+                                       [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+                                       [attr.data-automation-id]="'datepickertoggle-' + property.key"
+                                       [for]="datetimePicker">
             </mat-datetimepicker-toggle>
         </div>
 
         <input class="adf-invisible-date-input"
-            [attr.tabIndex]="-1"
-            [matDatetimepicker]="datetimePicker"
-            [value]="valueDate"
-            (dateChange)="onDateChanged($event)">
+               [attr.tabIndex]="-1"
+               [matDatetimepicker]="datetimePicker"
+               [value]="valueDate"
+               (dateChange)="onDateChanged($event)">
 
         <mat-datetimepicker #datetimePicker
-            [type]="property.type"
-            timeInterval="5"
-            [attr.data-automation-id]="'datepicker-' + property.key"
-            [startAt]="valueDate">
+                            [type]="property.type"
+                            timeInterval="5"
+                            [attr.data-automation-id]="'datepicker-' + property.key"
+                            [startAt]="valueDate">
         </mat-datetimepicker>
     </div>
     <ng-template #elseEmptyValueBlock>

lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

@@ -23,6 +23,7 @@ import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { CardViewDateItemComponent } from './card-view-dateitem.component';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
+import { ClipboardService } from '../../../clipboard/clipboard.service';
 import { AppConfigService } from '@alfresco/adf-core';
 
 describe('CardViewDateItemComponent', () => {
@@ -219,6 +220,20 @@ describe('CardViewDateItemComponent', () => {
         );
     }));
 
+    it('should copy value to clipboard on double click', () => {
+        const clipboardService = TestBed.get(ClipboardService);
+        spyOn(clipboardService, 'copyContentToClipboard');
+
+        component.editable = false;
+        fixture.detectChanges();
+
+        const doubleClickEl = fixture.debugElement.query(By.css(`[data-automation-id="card-dateitem-${component.property.key}"] span`));
+        doubleClickEl.triggerEventHandler('dblclick', new MouseEvent('dblclick'));
+
+        fixture.detectChanges();
+        expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('Jul 10, 2017', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
+    });
+
     describe('clear icon', () => {
         it('should render the clear icon in case of displayClearAction:true', () => {
             component.editable = true;

lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts

@@ -30,6 +30,8 @@ import { AppConfigService } from '../../../app-config/app-config.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { BaseCardView } from '../base-card-view';
+import { ClipboardService } from '../../../clipboard/clipboard.service';
+import { TranslationService } from '../../../services/translation.service';
 
 @Component({
     providers: [
@@ -67,7 +69,9 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
     constructor(cardViewUpdateService: CardViewUpdateService,
                 private dateAdapter: DateAdapter<Moment>,
                 private userPreferencesService: UserPreferencesService,
-                private appConfig: AppConfigService) {
+                private appConfig: AppConfigService,
+                private clipboardService: ClipboardService,
+                private translateService: TranslationService) {
         super(cardViewUpdateService);
         this.dateFormat = this.appConfig.get('dateValues.defaultDateFormat');
     }
@@ -127,4 +131,8 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
         this.property.default = null;
     }
 
+    copyToClipboard(valueToCopy: string) {
+        const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
+        this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
+    }
 }

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -7,7 +7,11 @@
               [attr.data-automation-id]="'card-textitem-value-' + property.key">
             <span *ngIf="!isChipViewEnabled; else chipListTemplate">
                 <span *ngIf="showProperty()"
-                      [ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'">
+                      [ngClass]="property.multiline?'adf-textitem-multiline':'adf-textitem-scroll'"
+                      (dblclick)="copyToClipboard(property.displayValue)"
+                      class="adf-textitem-value"
+                      matTooltipShowDelay="1000"
+                      [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">
                     {{ property.displayValue }}
                 </span>
             </span>

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -24,6 +24,7 @@ import { setupTestBed } from '../../../testing/setup-test-bed';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { CardViewItemFloatValidator, CardViewItemIntValidator } from '@alfresco/adf-core';
 import { MatChipsModule } from '@angular/material';
+import { ClipboardService } from '../../../clipboard/clipboard.service';
 
 describe('CardViewTextItemComponent', () => {
 
@@ -328,6 +329,22 @@ describe('CardViewTextItemComponent', () => {
             expect(component.property.value).toBe(expectedText);
         });
 
+        it('should copy value to clipboard on double click', () => {
+            const clipboardService = TestBed.get(ClipboardService);
+            spyOn(clipboardService, 'copyContentToClipboard');
+
+            component.property.value = 'myValueToCopy';
+            component.property.icon = 'FAKE_ICON';
+            component.editable = false;
+            fixture.detectChanges();
+
+            const doubleClickEl = fixture.debugElement.query(By.css('span[class*="adf-textitem-value"]'));
+            doubleClickEl.triggerEventHandler('dblclick', new MouseEvent('dblclick'));
+
+            fixture.detectChanges();
+            expect(clipboardService.copyContentToClipboard).toHaveBeenCalledWith('myValueToCopy', 'CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
+        });
+
     });
 
     describe('Update', () => {
@@ -495,7 +512,7 @@ describe('CardViewTextItemComponent', () => {
             expect(textItemReadOnly.nativeElement.textContent).toEqual('Lorem ipsum');
             expect(component.property.value).toBe('Lorem ipsum');
 
-            cardViewUpdateService.updateElement({ key: component.property.key, value: expectedText  });
+            cardViewUpdateService.updateElement({ key: component.property.key, value: expectedText });
             fixture.detectChanges();
 
             expect(textItemReadOnly.nativeElement.textContent).toEqual(expectedText);

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts

@@ -21,6 +21,8 @@ import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { AppConfigService } from '../../../app-config/app-config.service';
 import { BaseCardView } from '../base-card-view';
 import { MatChipInputEvent } from '@angular/material';
+import { ClipboardService } from '../../../clipboard/clipboard.service';
+import { TranslationService } from '../../../services/translation.service';
 
 @Component({
     selector: 'adf-card-view-textitem',
@@ -48,7 +50,9 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
     useChipsForMultiValueProperty: boolean;
 
     constructor(cardViewUpdateService: CardViewUpdateService,
-                private appConfig: AppConfigService) {
+                private appConfig: AppConfigService,
+                private clipboardService: ClipboardService,
+                private translateService: TranslationService) {
         super(cardViewUpdateService);
         this.valueSeparator = this.appConfig.get<string>('content-metadata.multi-value-pipe-separator') || CardViewTextItemComponent.DEFAULT_SEPARATOR;
         this.useChipsForMultiValueProperty = this.appConfig.get<boolean>('content-metadata.multi-value-chips') || CardViewTextItemComponent.DEFAULT_USE_CHIPS;
@@ -166,6 +170,11 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         }
     }
 
+    copyToClipboard(valueToCopy: string) {
+        const clipboardMessage = this.translateService.instant('CORE.METADATA.ACCESSIBILITY.COPY_TO_CLIPBOARD_MESSAGE');
+        this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
+    }
+
     get isChipViewEnabled(): boolean {
         return this.property.multivalued && this.useChipsForMultiValueProperty;
     }