feature: TRACEFOSS-1091 Rework notification detail page (#90)

* feature: TRACEFOSS-1091 Rework notification detail page

* feature: TRACEFOSS-1091 Changes after the review

Author: ds-ext-dskrzypczak

frontend/src/app/modules/shared/components/notification-overview/notification-overview.component.html

@@ -26,7 +26,9 @@
   </div>
   <div *ngIf="showNotification">
     <span class="detail--text detail--text__bold">{{ 'table.column.description' | i18n }}</span>
-    <span class="detail--text">{{ notification?.description }}</span>
+    <div>
+      <span class="detail--text detail--text__description">{{ notification?.description }}</span>
+    </div>
   </div>
   <div>
     <span class="detail--text detail--text__bold">{{ 'table.column.status' | i18n }}</span>
@@ -41,13 +43,13 @@
   <div>
     <span class="detail--text detail--text__bold">{{ 'table.column.createdBy' | i18n }}</span>
     <span class="detail--text">
-      <app-notification-user [user]="notification.createdBy"></app-notification-user>
+      <app-notification-user [user]="notification.createdBy" mode="sup"></app-notification-user>
     </span>
   </div>
   <div>
     <span class="detail--text detail--text__bold">{{ 'table.column.sendTo' | i18n }}</span>
     <span class="detail--text">
-      <app-notification-user [user]="notification.sendTo"></app-notification-user>
+      <app-notification-user [user]="notification.sendTo" mode="sup"></app-notification-user>
     </span>
   </div>
 

frontend/src/app/modules/shared/components/notification-overview/notification-overview.component.scss

@@ -40,4 +40,11 @@
     font-weight: bold;
     padding-right: 1rem;
   }
+
+  &__description {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 275px;
+  }
 }

frontend/src/app/modules/shared/components/notification-user/notification-user.component.html

@@ -19,5 +19,13 @@
 SPDX-License-Identifier: Apache-2.0
 -->
 
-<strong style="font-weight: bold">{{ user.bpn }}</strong> <br />
-{{ user.name }}
+<ng-container *ngIf="mode == 'normal'">
+  <strong style="font-weight: bold">{{ user.bpn }}</strong> <br />
+  {{ user.name }}
+</ng-container>
+
+<ng-container *ngIf="mode == 'sup'">
+  <span
+    >{{ user.bpn }} <sup>{{ user.name }}</sup></span
+  >
+</ng-container>

frontend/src/app/modules/shared/components/notification-user/notification-user.component.spec.ts

@@ -30,7 +30,7 @@ import { NotificationUserComponent } from './notification-user.component';
 describe('NotificationUserComponent', () => {
   const defaultNotification = Object.assign({ ...notificationTemplate });
   const renderUser = (user: NotificationUser = defaultNotification.createdBy) => {
-    return renderComponent(`<app-notification-user [user]='user'></app-notification-user>`, {
+    return renderComponent(`<app-notification-user [user]='user' mode="normal"></app-notification-user>`, {
       imports: [SharedModule],
       componentProperties: { user: user },
     });

frontend/src/app/modules/shared/components/notification-user/notification-user.component.ts

@@ -29,4 +29,6 @@ import { NotificationUser } from '@shared/model/notification.model';
 export class NotificationUserComponent {
   @Input()
   user: NotificationUser;
+  @Input()
+  mode: 'normal' | 'sup';
 }

frontend/src/app/modules/shared/modules/notification/notification-tab/notification-tab.component.html

@@ -62,6 +62,6 @@
 
 <ng-template #userTmp let-text="value">
   <p class="notification--table__description">
-    <app-notification-user [user]="text"></app-notification-user>
+    <app-notification-user [user]="text" mode="normal"></app-notification-user>
   </p>
 </ng-template>