Chneemann/join
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add constants to SummaryComponent for improved readability and maintainability

Browse source
This commit is contained in:
Chneemann 2025-04-17 04:51:30 +02:00
parent 01afbe7926
commit a63e03ebc9
3 changed files with 57 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
src/app/components/summary/summary.component.html
View file

@ -3,41 +3,39 @@
[title]="'Join 360'"
[description]="'summary.headlineDescription' | translate"
></app-headline>
<!-- Show summary if not loading -->
@if (!isLoading) {
<div class="content">
<div class="summary-container">
<!-- Top Frame -->
<div class="top-frame">
<!-- TOP CONTAINER -->
<div class="top-container">
<!-- Loop through statuses -->
@for (status of UPPER_STATUSES; track status) {
<div class="todo-done" routerLink="/board">
<div class="circle">
<div class="inline">
<img src="./../../../assets/img/summary/pencil.svg" alt="" />
</div>
<!-- If the status is 'todo', display the 'pencil' icon, otherwise display the 'rake' icon -->
@if (status === 'todo') {
<img src="./../../../assets/img/summary/pencil.svg" alt="Todo" />
} @else {
<img src="./../../../assets/img/summary/rake.svg" alt="Done" />
}
</div>
<div class="details">
<span>{{ taskStatusCounts.get("todo") || 0 }}</span>
<p>{{ "summary.todo" | translate }}</p>
</div>
</div>
<div class="todo-done" routerLink="/board">
<div class="circle">
<img src="./../../../assets/img/summary/rake.svg" alt="" />
</div>
<div class="details">
<span>{{ taskStatusCounts.get("done") || 0 }}</span>
<p>{{ "summary.done" | translate }}</p>
<span>{{ taskStatusCounts.get(status) || 0 }}</span>
<p>{{ STATUS_LABELS[status] | translate }}</p>
</div>
</div>
}
</div>
<!-- Middle Frame -->
<div class="middle-frame">
<!-- MIDDLE CONTAINER -->
<div class="middle-container">
<div class="urgent" routerLink="/board">
<div class="left">
<img src="./../../../assets/img/summary/urgent.svg" alt="" />
<div class="details">
<span>{{ urgentTasks.length || 0 }}</span>
<p>{{ "summary.urgent" | translate }}</p>
<p>{{ PRIORITY_LABELS[PRIORITIES[2]] | translate }}</p>
</div>
</div>
<div class="line"></div>
@ -58,8 +56,8 @@
</div>
</div>
<!-- Bottom Frame -->
<div class="bottom-frame">
<!-- BOTTOM CONTAINER -->
<div class="bottom-container">
<div class="tasks" routerLink="/board">
<div class="details">
<span>{{ totalTasks || 0 }}</span>
@ -70,40 +68,32 @@
</p>
</div>
</div>
<div class="tasks" routerLink="/board">
<div class="details">
<span>{{ taskStatusCounts.get("inprogress") || 0 }}</span>
<p>
{{ "summary.taskProgress0" | translate }}<br />{{
"summary.taskProgress1" | translate
}}
</p>
</div>
</div>
<div class="tasks" routerLink="/board">
<div class="details">
<span>{{ taskStatusCounts.get("awaitfeedback") || 0 }}</span>
<p>
{{ "summary.taskAwaitingFeedback0" | translate }}<br />{{
"summary.taskAwaitingFeedback1" | translate
}}
</p>
</div>
</div>
</div>
</div>
<!-- Greeting -->
<div class="welcome-container">
<p>{{ greeting }},</p>
@if (currentUser) {
<span id="welcome-user">
{{ currentUser["firstName"] }}<br />
{{ currentUser["lastName"] }}
</span>
<!-- Loop through statuses -->
@for (status of LOWER_STATUSES; track status) {
<div class="tasks" routerLink="/board">
<div class="details">
<span>{{ taskStatusCounts.get(status) || 0 }}</span>
<p>
{{ STATUS_LABELS[status] | translate }}
</p>
</div>
</div>
}
</div>
</div>
<!-- GREETING CONTAINER -->
<div class="welcome-container">
<p>{{ greeting }},</p>
<span id="welcome-user">
{{ currentUser!.firstName }}<br />
{{ currentUser!.lastName }}
</span>
</div>
</div>
<!-- Show loading spinner if loading -->
} @else {
<div class="content">
<div class="summary-container">

4
src/app/components/summary/summary.component.scss
View file

@ -37,8 +37,8 @@
height: 562px;
}
.top-frame,
.bottom-frame {
.top-container,
.bottom-container {
display: flex;
justify-content: space-between;
}

29
src/app/components/summary/summary.component.ts
View file

@ -5,10 +5,17 @@ import { Task } from '../../interfaces/task.interface';
import { TaskService } from '../../services/task.service';
import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component';
import { finalize, Subject, takeUntil } from 'rxjs';
import { UserService } from '../../services/user.service';
import { User } from '../../interfaces/user.interface';
import { HeadlineComponent } from '../../shared/components/headline/headline.component';
import {
STATUS_LABELS,
TaskStatus,
} from '../../constants/task-status.constants';
import {
PRIORITIES,
PRIORITY_LABELS,
} from '../../constants/task-priority.constants';
@Component({
selector: 'app-summary',
@ -24,10 +31,15 @@ import { HeadlineComponent } from '../../shared/components/headline/headline.com
})
export class SummaryComponent implements OnInit, OnDestroy {
allTasks: Task[] = [];
nextUrgendTask: number[] = [];
currentUser: User | null = null;
isLoading = false;
readonly UPPER_STATUSES = [TaskStatus.TODO, TaskStatus.DONE];
readonly LOWER_STATUSES = [TaskStatus.IN_PROGRESS, TaskStatus.AWAIT_FEEDBACK];
readonly PRIORITIES = PRIORITIES;
readonly PRIORITY_LABELS = PRIORITY_LABELS;
readonly STATUS_LABELS = STATUS_LABELS;
private destroy$ = new Subject<void>();
constructor(
@ -37,20 +49,26 @@ export class SummaryComponent implements OnInit, OnDestroy {
) {}
/**
* This method loads all tasks from the TaskService.
* This method performs the following actions:
* - Calls the loadAllTasks method to load all tasks.
* - Calls the loadCurrentUser method to load the current user.
*/
ngOnInit(): void {
this.loadAllTasks();
this.loadCurrentUser();
}
/**
* Emits a value to the `destroy$` subject and completes it to clean up
* subscriptions and prevent memory leaks.
*/
ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
/**
* Loads all tasks from the TaskService.
* Loads all tasks from the TaskService and sets them to the `allTasks` property.
*/
loadAllTasks(): void {
this.isLoading = true;
@ -71,6 +89,9 @@ export class SummaryComponent implements OnInit, OnDestroy {
});
}
/**
* Loads the current user from the UserService and sets it to the `currentUser` property.
*/
loadCurrentUser(): void {
this.userService
.getCurrentUser()