From 518a688272a004a11fb6a08ab680349202ccc05c Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sat, 22 Mar 2025 20:35:47 +0100 Subject: [PATCH] feat: create, design and integrate LoadingSpinnerComponent --- src/app/components/board/board.component.html | 24 +++++++++++++++---- src/app/components/board/board.component.ts | 9 ++++++- .../components/board/task/task.component.scss | 3 +-- .../loading-spinner.component.html | 3 +++ .../loading-spinner.component.scss | 22 +++++++++++++++++ .../loading-spinner.component.spec.ts | 23 ++++++++++++++++++ .../loading-spinner.component.ts | 12 ++++++++++ src/assets/img/sync.svg | 1 + 8 files changed, 90 insertions(+), 7 deletions(-) create mode 100644 src/app/shared/components/loading-spinner/loading-spinner.component.html create mode 100644 src/app/shared/components/loading-spinner/loading-spinner.component.scss create mode 100644 src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts create mode 100644 src/app/shared/components/loading-spinner/loading-spinner.component.ts create mode 100644 src/assets/img/sync.svg diff --git a/src/app/components/board/board.component.html b/src/app/components/board/board.component.html index e959dbb..e0166a4 100644 --- a/src/app/components/board/board.component.html +++ b/src/app/components/board/board.component.html @@ -61,8 +61,12 @@ } @empty { + + @if (isLoading) { + + } @else { {{ "board.noTasks" | translate }} - } + } } @if (taskMovedTo === TODO && taskMovedFrom !== TODO) { @@ -90,8 +94,12 @@ } @empty { + + @if (isLoading) { + + } @else { {{ "board.noTasks" | translate }} - } + } } @if (taskMovedTo === IN_PROGRESS && taskMovedFrom !== IN_PROGRESS) { @@ -119,8 +127,12 @@ } @empty { + + @if (isLoading) { + + } @else { {{ "board.noTasks" | translate }} - } + } } @if (taskMovedTo === AWAIT_FEEDBACK && taskMovedFrom !== @@ -149,8 +161,12 @@ } @empty { + + @if (isLoading) { + + } @else { {{ "board.noTasks" | translate }} - } + } } @if (taskMovedTo === DONE && taskMovedFrom !== DONE) { diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts index cc2bd21..90f019d 100644 --- a/src/app/components/board/board.component.ts +++ b/src/app/components/board/board.component.ts @@ -12,6 +12,7 @@ import { TaskHighlightedComponent } from './task/task-highlighted/task-highlight import { ApiService } from '../../services/api.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-board', @@ -23,6 +24,7 @@ import { TaskService } from '../../services/task.service'; FormsModule, TranslateModule, TaskHighlightedComponent, + LoadingSpinnerComponent, ], templateUrl: './board.component.html', styleUrl: './board.component.scss', @@ -49,6 +51,7 @@ export class BoardComponent { searchInput: boolean = false; taskMovedTo: string = ''; taskMovedFrom: string = ''; + isLoading = false; /** * Is called when the component is initialized. @@ -62,15 +65,19 @@ export class BoardComponent { /** * Retrieves all tasks from the API and initializes the `allTasks` and `filteredTasks` properties. */ + loadTasks(): void { + this.isLoading = true; + this.taskService.loadAllTasks().subscribe({ next: (result) => { this.allTasks = result.allTasks; this.filteredTasks = result.filteredTasks; + this.isLoading = false; }, - error: (err) => { console.error('Error loading the tasks:', err); + this.isLoading = false; }, }); } diff --git a/src/app/components/board/task/task.component.scss b/src/app/components/board/task/task.component.scss index 21e8af7..472f7d7 100644 --- a/src/app/components/board/task/task.component.scss +++ b/src/app/components/board/task/task.component.scss @@ -92,7 +92,7 @@ section { .subtask-line { display: flex; - width: 120px; + width: 144px; height: 8px; padding-right: 0px; flex-direction: column; @@ -100,7 +100,6 @@ section { align-items: flex-start; border-radius: 8px; background-color: var(--very-light-gray); - margin-right: 11px; } .filler-full { diff --git a/src/app/shared/components/loading-spinner/loading-spinner.component.html b/src/app/shared/components/loading-spinner/loading-spinner.component.html new file mode 100644 index 0000000..6bfbfb0 --- /dev/null +++ b/src/app/shared/components/loading-spinner/loading-spinner.component.html @@ -0,0 +1,3 @@ + diff --git a/src/app/shared/components/loading-spinner/loading-spinner.component.scss b/src/app/shared/components/loading-spinner/loading-spinner.component.scss new file mode 100644 index 0000000..b473b2c --- /dev/null +++ b/src/app/shared/components/loading-spinner/loading-spinner.component.scss @@ -0,0 +1,22 @@ +.loading-spinner { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 120px; + + img { + height: 100px; + width: 100px; + animation: spin 2s linear infinite; + } +} + +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts b/src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts new file mode 100644 index 0000000..73017f8 --- /dev/null +++ b/src/app/shared/components/loading-spinner/loading-spinner.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoadingSpinnerComponent } from './loading-spinner.component'; + +describe('LoadingSpinnerComponent', () => { + let component: LoadingSpinnerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LoadingSpinnerComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LoadingSpinnerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/shared/components/loading-spinner/loading-spinner.component.ts b/src/app/shared/components/loading-spinner/loading-spinner.component.ts new file mode 100644 index 0000000..3ed163d --- /dev/null +++ b/src/app/shared/components/loading-spinner/loading-spinner.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-loading-spinner', + standalone: true, + imports: [], + templateUrl: './loading-spinner.component.html', + styleUrl: './loading-spinner.component.scss' +}) +export class LoadingSpinnerComponent { + +} diff --git a/src/assets/img/sync.svg b/src/assets/img/sync.svg new file mode 100644 index 0000000..14da1b3 --- /dev/null +++ b/src/assets/img/sync.svg @@ -0,0 +1 @@ + \ No newline at end of file