Merge pull request #107 from szymonpoltorak/DEV-186-BoardsTaskTypeIcon

added task type icons and user avaters
szymonpoltorak · May 6, 2024 · dc284d9 · dc284d9
2 parents 5c2de72 + ba9b3ab
commit dc284d9
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 16 deletions.
diff --git a/corn-frontend/src/app/core/interfaces/boards/board/task.interface.ts b/corn-frontend/src/app/core/interfaces/boards/board/task.interface.ts
@@ -1,8 +1,10 @@
+import { BacklogItemType } from "@core/enum/BacklogItemType";
 import { Assignee } from "./assignee.interface";
 
 export interface Task {
     associatedBacklogItemId: number;
     taskTag: string;
     content: string;
-    assignee: Assignee
+    assignee: Assignee;
+    taskType: BacklogItemType;
 }
diff --git a/corn-frontend/src/app/pages/boards/board/board.component.ts b/corn-frontend/src/app/pages/boards/board/board.component.ts
@@ -32,6 +32,7 @@ import { BacklogItemResponse } from '@core/services/api/v1/backlog/item/data/bac
 import { UsernameToAssigneeMapper } from '@core/types/board/boards/UsernameToAssigneeMapper';
 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';
 
 @Component({
     selector: 'app-board',
@@ -91,10 +92,10 @@ export class BoardComponent implements OnInit {
     }
 
     private async loadSprintInfo(sprint: SimpleSprint): Promise<void> {
-        const [nextSprint, previousSprint] = [
+        const [nextSprint, previousSprint] = (await Promise.all([
             await firstValueFrom(this.sprintApi.getSprintsAfterSprint(sprint.sprintId, Pageable.of(0, 1, "startDate", "ASC"))),
             await firstValueFrom(this.sprintApi.getSprintsBeforeSprint(sprint.sprintId, Pageable.of(0, 1, "startDate", "DESC"))),
-        ].map(page => page.numberOfElements > 0 ? this.toSimpleSprint(page.content[0]) : null);
+        ])).map(page => page.numberOfElements > 0 ? this.toSimpleSprint(page.content[0]) : null);
         this.nextSprint = nextSprint;
         this.previousSprint = previousSprint;
 
@@ -258,9 +259,20 @@ export class BoardComponent implements OnInit {
             taskTag: item.itemType + "-" + item.backlogItemId,
             content: item.title,
             assignee: mapper(item.assignee.username),
+            taskType: this.mapStringToBacklogItemType(item.itemType)!,
         };
     }
 
+    private mapStringToBacklogItemType(str: string): BacklogItemType | undefined {
+        switch (str.toUpperCase()) {
+            case 'BUG': return BacklogItemType.BUG;
+            case 'TASK': return BacklogItemType.TASK;
+            case 'STORY': return BacklogItemType.STORY;
+            case 'EPIC': return BacklogItemType.EPIC;
+            default: return undefined;
+        }
+    }
+
     protected formatDate(date: Date): string {
         return date.toISOString().split('T')[0].replaceAll("-", "/");
     }

diff --git a/...ntend/src/app/pages/boards/board/change_assignee_menu/change_assignee_menu.component.html b/...ntend/src/app/pages/boards/board/change_assignee_menu/change_assignee_menu.component.html
@@ -14,12 +14,8 @@
         <button mat-menu-item (click)="assigneeChanged(item)">
             <div class="flex items-center space-x-3">
                 <ng-container *ngTemplateOutlet="zerowidthspace"></ng-container>
-                <img
-                    class="w-6 h-6 rounded-full"
-                    src="{{ item.avatarUrl }}"
-                    title="{{ item.firstName + ' ' + item.familyName }}"
-                    alt="{{ item.firstName + ' ' + item.familyName }}"
-                />
+                <app-user-avatar class="block w-[35px] h-[35px] rounded-full cursor-pointer" 
+                    [user]="assigneeToUser(item)" [isEmpty]="!item"></app-user-avatar>
                 <span>
                     {{ item.firstName + " " + item.familyName }}
                 </span>

diff --git a/...rontend/src/app/pages/boards/board/change_assignee_menu/change_assignee_menu.component.ts b/...rontend/src/app/pages/boards/board/change_assignee_menu/change_assignee_menu.component.ts
@@ -8,6 +8,8 @@ import { BoardModelService } from '@core/services/boards/board/model.service';
 import { Assignee } from '@core/interfaces/boards/board/assignee.interface';
 import { Task } from '@core/interfaces/boards/board/task.interface';
 import { TaskChangedGroupEvent } from '@core/interfaces/boards/board/task_changed_group_event.interface';
+import { User } from '@core/interfaces/boards/user';
+import { UserAvatarComponent } from '@pages/utils/user-avatar/user-avatar.component';
 
 @Component({
     selector: 'change-assignee-menu',
@@ -18,6 +20,7 @@ import { TaskChangedGroupEvent } from '@core/interfaces/boards/board/task_change
         MatInputModule,
         MatButtonModule,
         MatDividerModule,
+        UserAvatarComponent,
     ],
     templateUrl: './change_assignee_menu.component.html',
 })
@@ -56,4 +59,13 @@ export class ChangeAssigneeMenuComponent {
         });
     }
 
+    protected assigneeToUser(assignee: Assignee): User {
+        return {
+            userId: assignee.associatedUserId,
+            name: assignee.firstName,
+            surname: assignee.familyName,
+            username: assignee.associatedUsername,
+        };
+    }
+
 }
diff --git a/corn-frontend/src/app/pages/boards/board/task_card/task_card.component.html b/corn-frontend/src/app/pages/boards/board/task_card/task_card.component.html
@@ -2,14 +2,13 @@
     <mat-card class="flex flex-col gap-[6px] shadow-md pt-1 pb-1 pl-2 pr-2">
         <h1 class="font-bold">{{ task.content }}</h1>
         <div class="flex items-center justify-between">
-            <span class="text-gray-300 text-sm font-bold">{{ task.taskTag }}</span>
+            <div class="flex items-center space-x-2">
+                <app-backlog-type [backlogItemType]="task.taskType"></app-backlog-type>
+                <span class="text-gray-300 text-sm font-bold">{{ task.taskTag }}</span>
+            </div>
             <change-assignee-menu [associatedTask]="task" [assigneeChangedHandler]="assigneeChangedHandler">
-                <img
-                    class="w-7 h-7 rounded-full cursor-pointer"
-                    src="{{ task.assignee.avatarUrl }}"
-                    title="{{ task.assignee.firstName + ' ' + task.assignee.familyName }}"
-                    alt="{{ task.assignee.firstName + ' ' + task.assignee.familyName }}"
-                />
+                <app-user-avatar class="block w-[35px] h-[35px] rounded-full cursor-pointer" 
+                    [user]="taskAssigneeAsUser()" [isEmpty]="!task"></app-user-avatar>
             </change-assignee-menu>
         </div>
     </mat-card>

diff --git a/corn-frontend/src/app/pages/boards/board/task_card/task_card.component.ts b/corn-frontend/src/app/pages/boards/board/task_card/task_card.component.ts
@@ -4,13 +4,18 @@ import { ChangeAssigneeMenuComponent } from '../change_assignee_menu/change_assi
 import { Task } from '@core/interfaces/boards/board/task.interface';
 import { TaskChangedGroupEvent } from '@core/interfaces/boards/board/task_changed_group_event.interface';
 import { Assignee } from '@core/interfaces/boards/board/assignee.interface';
+import { BacklogTypeComponent } from '@pages/boards/backlog/backlog-item-table/backlog-type/backlog-type.component';
+import { UserAvatarComponent } from '@pages/utils/user-avatar/user-avatar.component';
+import { User } from '@core/interfaces/boards/user';
 
 @Component({
     selector: 'taskcard',
     standalone: true,
     imports: [
         MatCardModule,
         ChangeAssigneeMenuComponent,
+        BacklogTypeComponent,
+        UserAvatarComponent,
     ],
     templateUrl: './task_card.component.html',
 })
@@ -20,4 +25,16 @@ export class TaskCardComponent {
 
     @Input() assigneeChangedHandler?: (event: TaskChangedGroupEvent<Assignee>) => void;
 
+    protected taskAssigneeAsUser(): User | undefined {
+        if (!this.task) {
+            return undefined;
+        }
+        return {
+            userId: this.task.assignee.associatedUserId,
+            name: this.task.assignee.firstName,
+            surname: this.task.assignee.familyName,
+            username: this.task.assignee.associatedUsername,
+        };
+    }
+
 }