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

bugfixes & added task service

Browse source
This commit is contained in:
Chneemann 2024-03-25 00:41:52 +01:00
parent 3337482415
commit 44c618d1f5
8 changed files with 126 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
src/app/components/board/board.component.html
View file

@ -1,13 +1,3 @@
<div
id="task-overlay-cart"
class="dialog-bg d-none"
onclick="closeCart(event)"
></div>
<div
id="add-task-dialog"
class="dialog-bg d-none"
onclick="closeAddTask(event)"
></div>
<section>
<div class="header">
<div class="title">Board</div>
@ -15,13 +5,14 @@
<div>
<input
#searchField
id="search-task"
type="text"
placeholder="Find Task"
(input)="searchTask()"
/>
<span class="line"></span>
</div>
<button class="btn" type="submit" onclick="openAddTaskPage()">
<button class="btn" type="submit">
<div class="btn-inside">
<span>Add Task</span>
<img src="./../../../assets/img/board/add_white.svg" alt="check" />
@ -38,23 +29,10 @@
>
<div class="headline">
<span>To do</span
><img
src="./../../../assets/img/board/add.svg"
alt="add"
onclick="openAddTaskPage('todo')"
/>
><img src="./../../../assets/img/board/add.svg" alt="add" />
</div>
<div id="todo">
<ng-container *ngIf="!isTaskRendered('todo')">
<app-task [index]="undefined"></app-task>
</ng-container>
<ng-container
*ngFor="let task of firebaseService.filteredTasks; index as i"
>
<ng-container *ngIf="task.status === 'todo'">
<app-task [index]="i"></app-task>
</ng-container>
</ng-container>
<app-task *ngFor="let task of getTask()" [task]="task"></app-task>
</div>
</div>
<div
@ -64,23 +42,10 @@
>
<div class="headline">
<span>In progress</span
><img
src="./../../../assets/img/board/add.svg"
alt="add"
onclick="openAddTaskPage('inprogress')"
/>
><img src="./../../../assets/img/board/add.svg" alt="add" />
</div>
<div id="inprogress">
<ng-container *ngIf="!isTaskRendered('inprogress')">
<app-task [index]="undefined"></app-task>
</ng-container>
<ng-container
*ngFor="let task of firebaseService.filteredTasks; index as i"
>
<ng-container *ngIf="task.status === 'inprogress'">
<app-task [index]="i"></app-task>
</ng-container>
</ng-container>
<app-task *ngFor="let task of getTask()" [task]="task"></app-task>
</div>
</div>
<div
@ -90,23 +55,10 @@
>
<div class="headline">
<span>Await feedback</span
><img
src="./../../../assets/img/board/add.svg"
alt="add"
onclick="openAddTaskPage('awaitfeedback')"
/>
><img src="./../../../assets/img/board/add.svg" alt="add" />
</div>
<div id="awaitfeedback">
<ng-container *ngIf="!isTaskRendered('awaitfeedback')">
<app-task [index]="undefined"></app-task>
</ng-container>
<ng-container
*ngFor="let task of firebaseService.filteredTasks; index as i"
>
<ng-container *ngIf="task.status === 'awaitfeedback'">
<app-task [index]="i"></app-task>
</ng-container>
</ng-container>
<app-task *ngFor="let task of getTask()" [task]="task"></app-task>
</div>
</div>
<div
@ -116,23 +68,10 @@
>
<div class="headline">
<span>Done</span
><img
src="./../../../assets/img/board/add.svg"
alt="add"
onclick="openAddTaskPage('done')"
/>
><img src="./../../../assets/img/board/add.svg" alt="add" />
</div>
<div id="done">
<ng-container *ngIf="!isTaskRendered('done')">
<app-task [index]="undefined"></app-task>
</ng-container>
<ng-container
*ngFor="let task of firebaseService.filteredTasks; index as i"
>
<ng-container *ngIf="task.status === 'done'">
<app-task [index]="i"></app-task>
</ng-container>
</ng-container>
<div id="todo">
<app-task *ngFor="let task of getTask()" [task]="task"></app-task>
</div>
</div>
</div>

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

@ -1,7 +1,6 @@
section {
margin: 0;
background-color: var(--very-light-gray);
padding-right: 24px;
}
.title {
@ -23,6 +22,7 @@ section {
display: flex;
align-items: center;
position: relative;
padding-right: 32px;
input {
width: 312px;
padding: 8px 16px;
@ -41,7 +41,7 @@ section {
.line {
position: absolute;
top: 8px;
right: 215px;
right: 250px;
height: 18px;
width: 1px;
background-color: var(--gray);

26
src/app/components/board/board.component.ts
View file

@ -1,40 +1,46 @@
import { Component, ElementRef, ViewChild } from '@angular/core';
import { TaskComponent } from './task/task.component';
import { DragDropService } from '../../services/drag-drop.service';
import { CommonModule } from '@angular/common';
import { FirebaseService } from '../../services/firebase.service';
import { Task } from '../../interfaces/task.interface';
import { TaskService } from '../../services/task.service';
import { TaskComponent } from './task/task.component';
@Component({
selector: 'app-board',
standalone: true,
imports: [TaskComponent, CommonModule],
imports: [CommonModule, TaskComponent],
templateUrl: './board.component.html',
styleUrl: './board.component.scss',
})
export class BoardComponent {
@ViewChild('searchField') searchField!: ElementRef;
allTasks: Task[] = [];
constructor(
public dragDropService: DragDropService,
public firebaseService: FirebaseService
private taskService: TaskService
) {}
ngOnInit() {
this.firebaseService.updateAllTasks();
this.dragDropService.itemDropped.subscribe(({ index, status }) => {
this.handleItemDropped(index, status);
});
}
getTask() {
return this.taskService.allTasks;
}
handleItemDropped(index: number, status: string): void {
let firebaseId = this.firebaseService.allTasks[index].id;
this.firebaseService.allTasks[index].status = status;
this.firebaseService.updateTask(firebaseId, index);
let firebaseId = this.taskService.allTasks[index].id;
this.taskService.allTasks[index].status = status;
this.taskService.updateTask(firebaseId, index);
this.searchField.nativeElement.value = '';
}
isTaskRendered(taskColumn: string): boolean {
for (let task of this.firebaseService.filteredTasks) {
for (let task of this.taskService.filteredTasks) {
if (task.status === taskColumn) {
return true;
}
@ -44,7 +50,7 @@ export class BoardComponent {
searchTask(): void {
const search = this.searchField.nativeElement.value.toLowerCase();
this.firebaseService.filteredTasks = this.firebaseService.allTasks.filter(
this.taskService.filteredTasks = this.taskService.allTasks.filter(
(task) =>
task.title.toLowerCase().includes(search) ||
task.description.toLowerCase().includes(search) ||

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

@ -1,4 +1,10 @@
<section>
{{ task }}
</section>
<!--
<section *ngIf="index !== undefined">
{{ task.title }}
<div
class="content"
draggable="true"
@ -6,7 +12,9 @@
>
<div
class="category"
[style.background-color]="generateCategoryColor(index)"
[style.background-color]="
categoryColors.get(firebaseService.allTasks[index].category)
"
>
{{ firebaseService.allTasks[index].category }}
</div>
@ -14,12 +22,41 @@
<div class="description">
{{ firebaseService.allTasks[index].description }}
</div>
checkSubtasks(tasks[id].id)
<ng-container *ngIf="firebaseService.allTasks[index].subtasksTitle > ''">
<div class="subtask">
<div class="subtask-line">
<span
class="filler-full"
[style.width.%]="completedSubtasksPercent(index)"
></span>
</div>
<div class="subtask-text">
{{ completedSubtasks(index) }} /
{{ firebaseService.allTasks[index].subtasksTitle.length }} Subtasks
</div>
</div>
</ng-container>
<div class="footer">
<div class="footer-badge"></div>
<div class="footer-priority"></div>
<div class="footer-badge">
<ng-container *ngIf="firebaseService.allTasks[index].assigned">
<div
*ngFor="
let assigned of firebaseService.allTasks[index].assigned;
index as i
"
>
<span class="footer-badged"></span>
</div>
</ng-container>
</div>
<div
class="footer-priority prio-{{
firebaseService.allTasks[index].priority
}}"
></div>
</div>
</div>
</section>
<div *ngIf="index === undefined" class="empty-task">No tasks</div>
-->

11
src/app/components/board/task/task.component.scss
View file

@ -81,13 +81,13 @@ section {
justify-content: center;
align-items: flex-start;
border-radius: 8px;
background-color: var(--very-light-gray3);
background-color: var(--very-light-gray);
margin-right: 11px;
}
.filler-full {
border-radius: 16px;
background-color: var(--medium-blue);
background-color: var(--light-blue);
height: 8px;
}
@ -104,7 +104,7 @@ section {
width: 100%;
}
#footer-badge {
.footer-badge {
display: flex;
width: 170px;
overflow: auto;
@ -118,17 +118,18 @@ section {
min-height: 32px;
border-radius: 45px;
border: 1px solid var(--white);
background-color: red;
color: var(--white);
font-size: 12px;
font-weight: 400;
}
#footer-badge span {
.footer-badge span {
margin-right: 4px;
text-shadow: 1px 1px 2px var(--black);
}
#footer-badge span:first-child {
.footer-badge span:first-child {
margin-left: 0 !important;
}

39
src/app/components/board/task/task.component.ts
View file

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { DragDropService } from '../../../services/drag-drop.service';
import { FirebaseService } from '../../../services/firebase.service';
import { TaskService } from '../../../services/task.service';
@Component({
selector: 'app-task',
@ -12,24 +12,33 @@ import { FirebaseService } from '../../../services/firebase.service';
})
export class TaskComponent {
@Input() index: number | undefined;
@Input() task: any;
categoryColors = new Map<string, string>([
['HTML', '#E54B20'],
['CSS', '#214CE4'],
['JavaScript', '#D5BA32'],
['Angular', '#DD002D'],
]);
constructor(
public dragDropService: DragDropService,
public firebaseService: FirebaseService
private taskService: TaskService
) {}
generateCategoryColor(index: number) {
const task = this.firebaseService.allTasks[index];
if (task.category === 'HTML') {
return '#E54B20';
} else if (task.category === 'CSS') {
return '#214CE4';
} else if (task.category === 'JavaScript') {
return '#D5BA32';
} else if (task.category === 'Angular') {
return '#DD002D';
} else {
return '';
}
// Subtasks
completedSubtasks(index: number) {
const subtasks = this.taskService.allTasks[index].subtasksDone;
return subtasks.filter((subtask: boolean) => subtask === true).length;
}
completedSubtasksPercent(index: number): number {
const subtasks = this.taskService.allTasks[index].subtasksDone;
const completedSubtasksCount = subtasks.filter(
(subtask: boolean) => subtask === true
).length;
return (completedSubtasksCount / subtasks.length) * 100;
}
}

9
src/app/interfaces/task.interface.ts Normal file
View file

@ -0,0 +1,9 @@
export interface Task {
title: string;
description: string;
category: string;
status: string;
subtasksTitle: string;
subtasksDone: boolean;
assigned: number;
}

30
src/app/services/firebase.service.ts → src/app/services/task.service.ts
View file

@ -10,27 +10,29 @@ import {
@Injectable({
providedIn: 'root',
})
export class FirebaseService {
export class TaskService {
firestore: Firestore = inject(Firestore);
allTasks: any[] = [];
filteredTasks: any[] = [];
updateAllTasks() {
onSnapshot(collection(this.firestore, 'tasks'), (list) => {
if (!list.empty) {
this.allTasks = [];
this.filteredTasks = [];
list.forEach((doc) => {
const taskData = doc.data();
taskData['id'] = doc.id;
this.allTasks.push(taskData);
this.filteredTasks.push(taskData);
});
} else {
console.info('No such document!');
unsubTask;
constructor() {
this.unsubTask = this.subTaskList();
}
subTaskList() {
return onSnapshot(this.getTaskRef(), (list) => {
this.allTasks = [];
list.forEach((element) => {
this.allTasks.push(element.data());
});
});
}
getTaskRef() {
return collection(this.firestore, 'tasks');
}
async updateTask(taskId: any, index: number) {