From 6806504a657ffa8542b4b6135367eb32d58a3f2d Mon Sep 17 00:00:00 2001
From: davidcanonieto <david.cano.nieto@gmail.com>
Date: Wed, 25 Mar 2020 13:42:35 +0000
Subject: [PATCH] [ADF-3726] Add copy to clipbouard support to card view
 properties (#5565)

---
 lib/core/card-view/card-view.module.ts        |  6 +-
 .../card-view-dateitem.component.html         | 65 +++++++++----------
 .../card-view-dateitem.component.spec.ts      | 15 +++++
 .../card-view-dateitem.component.ts           | 10 ++-
 .../card-view-textitem.component.html         |  6 +-
 .../card-view-textitem.component.spec.ts      | 19 +++++-
 .../card-view-textitem.component.ts           | 11 +++-
 lib/core/i18n/en.json                         |  6 +-
 8 files changed, 97 insertions(+), 41 deletions(-)

diff --git a/lib/core/card-view/card-view.module.ts b/lib/core/card-view/card-view.module.ts
index 24f616469f..c11b6cf14b 100644
--- a/lib/core/card-view/card-view.module.ts
+++ b/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,
diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
index 038984c955..0ef4b88a3b 100644
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+++ b/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>
diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
index 62dbff5d4c..acf2f5d69b 100644
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
+++ b/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;
diff --git a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts b/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
index c0a5a92654..841d8fca82 100644
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
+++ b/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);
+    }
 }
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
index 09a2cd4fa2..180efab41d 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/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>
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
index 22d71b48b6..5a181a7ac0 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
+++ b/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);
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
index 8821879b22..cc860e606a 100644
--- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
+++ b/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;
     }
diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json
index 35da8ceaf0..da509c57a9 100644
--- a/lib/core/i18n/en.json
+++ b/lib/core/i18n/en.json
@@ -198,11 +198,13 @@
         "SAVE": "Save",
         "CANCEL": "Cancel",
         "CLEAR": "Clear",
-        "TOGGLE": "Toggle value"
+        "TOGGLE": "Toggle value",
+        "COPY_TO_CLIPBOARD": "Double click to copy value"
       },
       "ACCESSIBILITY": {
         "EDIT": "Edit button",
-        "DATEPICKER": "Use the arrow keys to navigate between dates. Up and down move to the next or previous week but on the same day. Left and right move to the next or previous day. Press Enter or Return to select a date."
+        "DATEPICKER": "Use the arrow keys to navigate between dates. Up and down move to the next or previous week but on the same day. Left and right move to the next or previous day. Press Enter or Return to select a date.",
+        "COPY_TO_CLIPBOARD_MESSAGE": "Value copied to clipboard"
       }
     },
     "SEARCH": {