Dev 199 misc UI changes

corn-frontend/src/app/pages/boards/board/board.component.html

@@ -59,11 +59,11 @@ <h2 done class="font-bold m-auto p-1">DONE ({{ modelService.doneSize() }}/{{ mod
                                 {{ isHidden(sliceWrapper) ? "chevron_right" : "expand_more" }}
                             </mat-icon>
                             <div class="flex items-center space-x-1">
-                                <img
-                                    class="w-5 h-5 rounded-full"
-                                    src="{{ slice.metadata.avatarUrl }}"
-                                    alt="slice.metadata.firstName + ' ' + slice.metadata.familyName"
-                                />
+                                <app-user-avatar
+                                    class="block w-5 h-5 rounded-full text-[12px]"
+                                    [user]="assigneeAsUser(slice.metadata)"
+                                    [isEmpty]="false"
+                                ></app-user-avatar>
                                 <span>
                                     {{ slice.metadata.firstName + " " + slice.metadata.familyName }}
                                 </span>

corn-frontend/src/app/pages/boards/board/board.component.ts

@@ -33,6 +33,8 @@ import { UsernameToAssigneeMapper } from '@core/types/board/boards/UsernameToAss
 import { SimpleSprint } from '@core/interfaces/boards/board/simple_sprint.interface';
 import { Pageable } from '@core/services/api/utils/pageable.interface';
 import { BacklogItemType } from '@core/enum/BacklogItemType';
+import { UserAvatarComponent } from '@pages/utils/user-avatar/user-avatar.component';
+import { User } from '@core/interfaces/boards/user';
 
 @Component({
     selector: 'app-board',
@@ -45,6 +47,7 @@ import { BacklogItemType } from '@core/enum/BacklogItemType';
         SliceComponent,
         MatIconModule,
         ColumnSetLayout,
+        UserAvatarComponent,
     ],
     providers: [
         BoardModelService,
@@ -281,6 +284,15 @@ export class BoardComponent implements OnInit {
         return date.toISOString().split('T')[0].replaceAll("-", "/");
     }
 
+    protected assigneeAsUser(assignee: Assignee): User {
+        return {
+            userId: assignee.associatedUserId,
+            name: assignee.firstName,
+            surname: assignee.familyName,
+            username: assignee.associatedUsername,
+        };
+    }
+
     protected readonly TaskGroupingEnum: typeof TaskGrouping = TaskGrouping;
     protected readonly TASK_GROUPINGS: TaskGrouping[] = Object.values(TaskGrouping);
     protected readonly GROUPERS: { [key in TaskGrouping]: TaskGrouper<GroupingMetadata>; } = {

corn-frontend/src/app/pages/boards/boards.component.html

@@ -26,14 +26,6 @@
                                     [selected]="selected === 'reports'">
                     </sidebar-button>
 
-                    <sidebar-button (click)="{}" [iconName]="'octGoal'" [label]="'Goals'"
-                                    [selected]="selected === 'goals'">
-                    </sidebar-button>
-
-                    <sidebar-button (click)="{}" [iconName]="'matError'" [label]="'Issues'"
-                                    [selected]="selected === 'issues'">
-                    </sidebar-button>
-
                 </div>
 
                 <div class="p-[6px]">

corn-frontend/src/app/pages/boards/userinfo/userinfo.component.html

@@ -1,16 +1,24 @@
-<img class="object-cover rounded-full cursor-pointer" [ngSrc]="avatarUrl" width="48" height="48" [matMenuTriggerFor]="menu">
+<app-user-avatar
+    class="block w-[48px] h-[48px] rounded-full cursor-pointer"
+    [user]="taskAssigneeAsUser()"
+    [isEmpty]="false"
+    [matMenuTriggerFor]="menu"
+></app-user-avatar>
 
 <mat-menu #menu="matMenu">
-
     <div mat-menu-item (click)="profileClicked.emit()">
         <div class="grid grid-cols-[36px,1fr] gap-2 mb-3">
             <div class="flex items-center">
-                <img class="object-cover rounded-full cursor-pointer" [ngSrc]="avatarUrl" width="36" height="36">
+                <app-user-avatar
+                    class="block w-[36px] h-[36px] rounded-full cursor-pointer"
+                    [user]="taskAssigneeAsUser()"
+                    [isEmpty]="false"
+                ></app-user-avatar>
             </div>
             <div class="items-center overflow-hidden">
-                <span class="cursor-pointer text-base">{{fullName}}</span>
-                <br>
-                <span class="cursor-pointer text-xs break-all">{{username}}</span>
+                <span class="cursor-pointer text-base">{{ fullName }}</span>
+                <br />
+                <span class="cursor-pointer text-xs break-all">{{ username }}</span>
             </div>
         </div>
     </div>
@@ -21,6 +29,4 @@
         <mat-icon>logout</mat-icon>
         <span>Logout</span>
     </button>
-
 </mat-menu>
-

corn-frontend/src/app/pages/boards/userinfo/userinfo.component.ts

@@ -4,6 +4,8 @@ import { MatButtonModule } from '@angular/material/button';
 import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
+import { User } from '@core/interfaces/boards/user';
+import { UserAvatarComponent } from '@pages/utils/user-avatar/user-avatar.component';
 
 @Component({
     selector: 'userinfo',
@@ -16,15 +18,27 @@ import { MatListModule } from '@angular/material/list';
         MatIconModule,
         MatListModule,
         NgOptimizedImage,
+        UserAvatarComponent,
     ]
 })
 export class UserinfoComponent {
 
-    @Input() avatarUrl: string = 'https://icons.iconarchive.com/icons/papirus-team/papirus-status/512/avatar-default-icon.png';
     @Input() fullName: string = '';
     @Input() username: string = '';
 
     @Output() logout = new EventEmitter<void>();
     @Output() profileClicked = new EventEmitter<void>();
 
+    protected taskAssigneeAsUser(): User | undefined {
+        if (!this.fullName || !this.username) {
+            return undefined;
+        }
+        return {
+            userId: -1,
+            name: this.fullName.split(" ")[0],
+            surname: this.fullName.split(" ")[1],
+            username: this.username,
+        };
+    }
+
 }

corn-frontend/src/app/shared/toolbar/toolbar.component.html

@@ -22,6 +22,7 @@
                 [routerLink]="RouterPaths.PROJECT_LIST_DIRECT_PATH"
                 class="center"
                 matTooltip="Settings"
+                (click)="profileClicked()"
                 aria-label="Settings">
             <mat-icon>settings</mat-icon>
         </button>
@@ -30,7 +31,6 @@
     @if (isLoggedIn && userProfile) {
         <userinfo [username]="userProfile!.username || ''"
                   [fullName]="userProfile!.firstName + ' ' + userProfile!.lastName"
-                  (profileClicked)="profileClicked()"
                   (logout)="logout()">
         </userinfo>
     }