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

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);
+    }
 }