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

feat: migrate SummaryComponent to Django Rest and replace user with userId

Browse source
This commit is contained in:
Chneemann 2025-03-23 15:10:39 +01:00
parent 518a688272
commit 876aadcd05
6 changed files with 116 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/components/board/task/task.component.html
View file

@ -50,9 +50,9 @@
(mouseleave)="closeDialog()"
[style.background-color]="user.color"
>{{ user.initials }}</span
>
} @for (assigned of task.assignees; track assigned.id) { @if
(assigned.user === user.id) {
>} } @for (user of task.userData; track user) { @for (assigned of
task.assignees; track assigned.id) { @if (assigned.userId === user.id)
{
<span
class="footer-badged"
(mousemove)="openDialog(user.id, $event)"

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

@ -6,9 +6,10 @@
{{ "summary.headlineDescription" | translate }}
</div>
</div>
@if (!isLoading) {
<div class="content">
<div class="left-container">
<!-- TOP -->
<!-- Top Frame -->
<div class="top-frame">
<div class="todo-done" routerLink="/board">
<div class="circle">
@ -17,7 +18,7 @@
</div>
</div>
<div class="details">
<span>{{ displayNumberOfTaskStatus("todo") }}</span>
<span>{{ taskStatusCounts.get("todo") || 0 }}</span>
<p>{{ "summary.todo" | translate }}</p>
</div>
</div>
@ -26,18 +27,19 @@
<img src="./../../../assets/img/summary/rake.svg" alt="" />
</div>
<div class="details">
<span>{{ displayNumberOfTaskStatus("done") }}</span>
<span>{{ taskStatusCounts.get("done") || 0 }}</span>
<p>{{ "summary.done" | translate }}</p>
</div>
</div>
</div>
<!-- MIDDLE -->
<!-- Middle Frame -->
<div class="middle-frame">
<div class="urgent" routerLink="/board">
<div class="left">
<img src="./../../../assets/img/summary/urgent.svg" alt="" />
<div class="details">
<span>{{ displayNumberOfTaskStatusUrgent().length }}</span>
<span>{{ urgentTasks.length || 0 }}</span>
<p>{{ "summary.urgent" | translate }}</p>
</div>
</div>
@ -45,8 +47,8 @@
<div class="right">
<div class="date">
<div>
@if (displayNumberOfTaskStatusUrgent().length) {
<span>{{ nextUrgentTask() }}</span>
@if (urgentTasks.length) {
<span>{{ nextUrgentTask }}</span>
<p class="spacer">
{{ "summary.upcomingDeadline" | translate }}
</p>
@ -58,11 +60,12 @@
</div>
</div>
</div>
<!-- BOTTOM -->
<!-- Bottom Frame -->
<div class="bottom-frame">
<div class="tasks" routerLink="/board">
<div class="details">
<span>{{ displayNumberOfAllTasks() }}</span>
<span>{{ totalTasks || 0 }}</span>
<p>
{{ "summary.taskBoard0" | translate }}<br />{{
"summary.taskBoard1" | translate
@ -72,7 +75,7 @@
</div>
<div class="tasks" routerLink="/board">
<div class="details">
<span>{{ displayNumberOfTaskStatus("inprogress") }}</span>
<span>{{ taskStatusCounts.get("inprogress") || 0 }}</span>
<p>
{{ "summary.taskProgress0" | translate }}<br />{{
"summary.taskProgress1" | translate
@ -82,7 +85,7 @@
</div>
<div class="tasks" routerLink="/board">
<div class="details">
<span>{{ displayNumberOfTaskStatus("awaitfeedback") }}</span>
<span>{{ taskStatusCounts.get("awaitfeedback") || 0 }}</span>
<p>
{{ "summary.taskAwaitingFeedback0" | translate }}<br />{{
"summary.taskAwaitingFeedback1" | translate
@ -92,22 +95,22 @@
</div>
</div>
</div>
<!-- Greeting -->
<div class="right-container">
<p>{{ displayGreeting() }},</p>
<p>{{ greeting }},</p>
<!-- TODO -->
<span id="welcome-user"
>{{
this.firebaseService.getUserDetails(
firebaseService.getCurrentUserId(),
"firstName"
)
}}<br />
{{
this.firebaseService.getUserDetails(
firebaseService.getCurrentUserId(),
"lastName"
)
}}</span
>{{ "firstName" }}<br />
{{ "lastName" }}</span
>
</div>
</div>
} @else {
<div class="content">
<div class="left-container">
<app-loading-spinner></app-loading-spinner>
</div>
</div>
}
</section>

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

@ -2,124 +2,125 @@ import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import { FirebaseService } from '../../services/firebase.service';
import { Task } from '../../interfaces/task.interface';
import { TaskService } from '../../services/task.service';
import { LoadingSpinnerComponent } from '../../shared/components/loading-spinner/loading-spinner.component';
@Component({
selector: 'app-summary',
standalone: true,
imports: [RouterModule, TranslateModule],
imports: [RouterModule, TranslateModule, LoadingSpinnerComponent],
templateUrl: './summary.component.html',
styleUrl: './summary.component.scss',
})
export class SummaryComponent {
nextUrgendTask: number[] = [];
allTasks: Task[] = [];
isLoading = false;
constructor(
public firebaseService: FirebaseService,
private translateService: TranslateService
private translateService: TranslateService,
private taskService: TaskService
) {}
/**
* Return the total number of tasks.
*
* @returns The number of total tasks.
* This method loads all tasks from the TaskService.
*/
displayNumberOfAllTasks() {
return this.firebaseService.getAllTasks().length;
ngOnInit() {
this.loadTasks();
}
/**
* Returns the number of tasks with the given status.
*
* @param query The task status to query for.
* @returns The number of tasks with the given status.
* Loads all tasks from the TaskService.
*/
displayNumberOfTaskStatus(query: string) {
const filteredTasks = this.firebaseService
.getAllTasks()
.filter((task) => task.status === query);
return filteredTasks.length;
loadTasks(): void {
this.isLoading = true;
this.taskService.loadAllTasks().subscribe({
next: (result) => {
this.allTasks = result.allTasks;
this.isLoading = false;
},
error: (err) => {
console.error('Error loading the tasks:', err);
this.isLoading = false;
},
});
}
/**
* Returns the number of tasks with the "urgent" priority.
*
* @returns The number of tasks with the "urgent" priority.
* Gets the total number of tasks.
* @returns The total count of tasks.
*/
displayNumberOfTaskStatusUrgent() {
return this.firebaseService
.getAllTasks()
.filter((task) => task.priority === 'urgent');
get totalTasks(): number {
return this.allTasks.length;
}
/**
* Return the next task with the "urgent" priority or null if none
* exist.
*
* @returns The next task with the "urgent" priority or null.
* A map of task statuses to their respective counts.
* @returns A Map where each key is a task status and each value is the count of tasks with that status.
*/
nextUrgentTask() {
const urgentTasks = this.displayNumberOfTaskStatusUrgent();
if (urgentTasks.length > 0) {
const nextTask = urgentTasks.reduce((earliest, current) => {
const currentDate = Date.parse(current.date);
const earliestDate = Date.parse(earliest.date);
return currentDate < earliestDate ? current : earliest;
});
return this.timeConverter(nextTask.date);
}
return null;
get taskStatusCounts(): Map<string, number> {
return this.allTasks.reduce((acc, task) => {
acc.set(task.status, (acc.get(task.status) || 0) + 1);
return acc;
}, new Map<string, number>());
}
/**
* A list of tasks with the priority set to "urgent".
* @returns An array of tasks with the priority of "urgent".
*/
get urgentTasks(): any[] {
return this.allTasks.filter((task) => task.priority === 'urgent');
}
/**
* Retrieves the date of the next urgent task.
* @returns {string | null} The date of the next urgent task formatted as a string, or null if no urgent tasks exist.
*/
get nextUrgentTask(): string | null {
if (this.urgentTasks.length === 0) return null;
const nextTask = this.urgentTasks.reduce((earliest, current) => {
return Date.parse(current.date) < Date.parse(earliest.date)
? current
: earliest;
});
return this.timeConverter(nextTask.date);
}
/**
* Converts a date string to a human-readable format.
*
* @param dateString The date string to convert.
* @returns A string in the format "Month DD, YYYY".
* @param dateString - The date string to convert.
* @returns A string representing the date in the format "MMM. DD, YYYY".
*/
timeConverter(dateString: string) {
var a = new Date(dateString);
var months = [
'Jan.',
'Feb.',
'Mar.',
'Apr.',
'May.',
'Jun.',
'Jul.',
'Aug.',
'Sep.',
'Oct.',
'Nov.',
'Dec.',
];
var year = a.getFullYear();
var month = months[a.getMonth()];
var date = a.getDate();
var time = month + ' ' + date + ', ' + year;
return time;
timeConverter(dateString: string): string {
const date = new Date(dateString);
return date.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric',
});
}
/**
* Displays a greeting message based on the current time of day.
*
* The time is converted to the user's local time and then compared to the
* following ranges to determine the greeting message:
* - Before 12pm: "Good morning"
* - 12pm to 6pm: "Good afternoon"
* - After 6pm: "Good evening"
*
* @returns The greeting message.
* Returns a greeting based on the current time of day.
* @returns a localized greeting string.
*/
displayGreeting() {
let currentTime = new Date();
let localTime = new Date(currentTime.getTime() + 3600000);
let currentHour = localTime.getHours();
get greeting(): string {
const currentHour = new Date().getHours();
if (currentHour >= 5 && currentHour < 12) {
return this.translateService.instant('summary.morning');
} else if (currentHour >= 12 && currentHour < 18) {
return this.translateService.instant('summary.afternoon');
} else {
return this.translateService.instant('summary.evening');
}
if (currentHour >= 12 && currentHour < 18) {
return this.translateService.instant('summary.afternoon');
}
return this.translateService.instant('summary.evening');
}
}

3
src/app/interfaces/task.interface.ts
View file

@ -25,6 +25,5 @@ export interface Subtask {
export interface Assignee {
id: string;
user: string;
task: string;
userId: string;
}

8
src/app/services/task.service.ts
View file

@ -60,7 +60,7 @@ export class TaskService {
const userIds = new Set(
tasks.flatMap((task) => [
task.creator,
...task.assignees.map((a) => a.user),
...task.assignees.map((a) => a.userId),
])
);
@ -74,7 +74,7 @@ export class TaskService {
return tasks.map((task) => ({
...task,
userData: [
...task.assignees.map((a) => userMap[a.user] || null),
...task.assignees.map((a) => userMap[a.userId] || null),
userMap[task.creator] || null,
].filter(Boolean),
}));
@ -86,7 +86,7 @@ export class TaskService {
return this.apiService.getTaskById(taskId).pipe(
switchMap((task) => {
if (!task) return of(null);
const userIds = [task.creator, ...task.assignees.map((a) => a.user)];
const userIds = [task.creator, ...task.assignees.map((a) => a.userId)];
return this.apiService.getUsersByIds(userIds).pipe(
map((users) => ({
@ -123,7 +123,7 @@ export class TaskService {
private mapTaskUsers(task: Task, users: UserSummary[]): UserSummary[] {
const userMap = this.createUserMap(users);
return [
...task.assignees.map((a) => userMap[a.user] || null),
...task.assignees.map((a) => userMap[a.userId] || null),
userMap[task.creator] || null,
].filter(Boolean);
}

2
src/app/shared/components/overlay/task-overlay/task-overlay.component.html
View file

@ -71,7 +71,7 @@
<div class="assigned">
<p>{{ "addTask.assigned" | translate }}:</p>
@for (assigned of task.assignees; track assigned.id) { @for (user of
task.userData; track user) { @if (assigned.user === user.id) {
task.userData; track user) { @if (assigned.userId === user.id) {
<div class="users">
<div
class="circle"