From dd0fda51f8ada14e340ae6e821e153aeac42ad7a Mon Sep 17 00:00:00 2001
From: Adrian Egli <adrian.egli@sbb.ch>
Date: Tue, 20 Aug 2024 13:18:46 +0200
Subject: [PATCH] Long email addresses cause incorrect formatting of the left
 sidebar change history - resolved (#254)

* issue resolved

* comments removed

* Overworked - now the email address gets copied and the log service shows a toast to inform the user that the email address was copied.

* margin is not 0px - just 0
---
 .../variant-history.component.scss            |  4 +++
 .../version-entry-layout.component.html       |  7 ++++-
 .../version-entry-layout.component.scss       | 15 +++++++++--
 .../version-entry-layout.component.ts         | 27 ++++++++++++++++++-
 src/assets/i18n/de.json                       |  3 +++
 src/assets/i18n/en.json                       |  3 +++
 src/assets/i18n/fr.json                       |  3 +++
 src/assets/i18n/it.json                       |  3 +++
 8 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/src/app/view/variant/variant-view/variant-history/variant-history.component.scss b/src/app/view/variant/variant-view/variant-history/variant-history.component.scss
index e3ebfa50..c0de0897 100644
--- a/src/app/view/variant/variant-view/variant-history/variant-history.component.scss
+++ b/src/app/view/variant/variant-view/variant-history/variant-history.component.scss
@@ -37,3 +37,7 @@
   display: flex;
   flex-direction: row;
 }
+
+div {
+  user-select: none;
+}
diff --git a/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.html b/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.html
index a4855a43..71846e9b 100644
--- a/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.html
+++ b/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.html
@@ -8,7 +8,10 @@
     <div class="info-field title-field" *ngIf="getTitle(); let title">
       {{ title }}
     </div>
-    <div class="info-field title-field" *ngIf="getUserId(); let userId">
+    <div class="info-field title-field user-id"
+         *ngIf="getUserId(); let userId"
+         [attr.title]="getUserId()"
+          (click)="copyUserId()">
       {{ userId }}
     </div>
     <div class="info-field date-field">
@@ -19,7 +22,9 @@
     <div
       class="info-field comment-field"
       *ngIf="commentField && commentField !== ''"
+      (click)="copyComment()"
     >
+      <br>
       «{{ commentField }}»
     </div>
   </div>
diff --git a/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.scss b/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.scss
index c9e86d87..1ce59d47 100644
--- a/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.scss
+++ b/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.scss
@@ -20,8 +20,8 @@
   }
 }
 
-.comment {
-  font-style: italic;
+.comment-field {
+  cursor: pointer;
 }
 
 .title-field {
@@ -41,6 +41,7 @@
   grid-column-start: 1;
   grid-column-end: span 2;
   grid-row: 2;
+  margin-right: 0;
 }
 
 .in-conflict {
@@ -70,3 +71,13 @@
     border: none;
   }
 }
+
+
+.user-id {
+  width: 140px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+}
diff --git a/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.ts b/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.ts
index 616a7aee..5f3fbd91 100644
--- a/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.ts
+++ b/src/app/view/variant/variant-view/variant-history/version-entry-layout/version-entry-layout.component.ts
@@ -1,4 +1,5 @@
 import {Component, Input} from "@angular/core";
+import {LogService} from "../../../../../logger/log.service";
 
 @Component({
   selector: "sbb-version-entry-layout",
@@ -13,6 +14,9 @@ export class VersionEntryLayoutComponent {
   @Input() dateField: Date;
   @Input() commentField?: string;
 
+  constructor(private readonly logService: LogService) {
+  }
+
   isInConflictState(): boolean {
     return this.state === "conflict";
   }
@@ -35,6 +39,26 @@ export class VersionEntryLayoutComponent {
     return undefined;
   }
 
+  copyComment() {
+    const comment = this.commentField;
+    if (!comment) {
+      return;
+    }
+    navigator.clipboard.writeText(comment);
+    const msg = $localize`:@@app.view.variant.variant-view.variant-history.version-entry-layout.user-id-copied:copied ${comment}:msg:`;
+    this.logService.info(msg);
+  }
+
+  copyUserId() {
+    const userId = this.getUserId();
+    if (!userId) {
+      return;
+    }
+    navigator.clipboard.writeText(userId);
+    const msg = $localize`:@@app.view.variant.variant-view.variant-history.version-entry-layout.user-id-copied:copied ${userId}:msg:`;
+    this.logService.info(msg);
+  }
+
   getTitle(): string | undefined {
     if (typeof this.titleField === "string") {
       return this.titleField;
@@ -44,5 +68,6 @@ export class VersionEntryLayoutComponent {
 }
 
 export class UserId {
-  constructor(readonly value: string) {}
+  constructor(readonly value: string) {
+  }
 }
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 5a88788a..776617ce 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -560,6 +560,9 @@
               "version-already-available": "Version bereits vorhanden",
               "successfully-published": "Erfolgreich publiziert"
             },
+            "version-entry-layout": {
+              "user-id-copied": "In die Zwischenablage kopiert: {$msg}"
+            },
             "snapshot-entry": {
               "download": "Herunterladen",
               "restore": "Wiederherstellen",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 8066d137..dbb0ab77 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -560,6 +560,9 @@
               "version-already-available": "Version already available",
               "successfully-published": "Successfully published"
             },
+            "version-entry-layout": {
+              "user-id-copied": "Copied to clipboard: {$msg}"
+            },
             "snapshot-entry": {
               "download": "Download",
               "restore": "Restore",
diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json
index 8066d137..dbb0ab77 100644
--- a/src/assets/i18n/fr.json
+++ b/src/assets/i18n/fr.json
@@ -560,6 +560,9 @@
               "version-already-available": "Version already available",
               "successfully-published": "Successfully published"
             },
+            "version-entry-layout": {
+              "user-id-copied": "Copied to clipboard: {$msg}"
+            },
             "snapshot-entry": {
               "download": "Download",
               "restore": "Restore",
diff --git a/src/assets/i18n/it.json b/src/assets/i18n/it.json
index 8066d137..dbb0ab77 100644
--- a/src/assets/i18n/it.json
+++ b/src/assets/i18n/it.json
@@ -560,6 +560,9 @@
               "version-already-available": "Version already available",
               "successfully-published": "Successfully published"
             },
+            "version-entry-layout": {
+              "user-id-copied": "Copied to clipboard: {$msg}"
+            },
             "snapshot-entry": {
               "download": "Download",
               "restore": "Restore",