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

added empty task component

Browse source
This commit is contained in:
Chneemann 2024-03-26 09:44:03 +01:00
parent f8240e1004
commit ce37e7ebae
8 changed files with 81 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -32,13 +32,10 @@
><img src="./../../../assets/img/board/add.svg" alt="add" />
</div>
<div id="todo" class="details">
@if(getTask('todo').length > 0) {
<app-task
*ngFor="let task of getTask('todo')"
[task]="task"
></app-task>
} @else {
<div class="empty-task">No tasks</div>
@for(task of getTask('todo'); track task) {
<app-task [task]="task"></app-task>
} @empty {
<app-task-empty>No tasks</app-task-empty>
}
</div>
</div>
@ -52,13 +49,10 @@
><img src="./../../../assets/img/board/add.svg" alt="add" />
</div>
<div id="inprogress" class="details">
@if(getTask('inprogress').length > 0) {
<app-task
*ngFor="let task of getTask('inprogress')"
[task]="task"
></app-task>
} @else {
<div class="empty-task">No tasks</div>
@for(task of getTask('inprogress'); track task) {
<app-task [task]="task"></app-task>
} @empty {
<app-task-empty>No tasks</app-task-empty>
}
</div>
</div>
@ -72,13 +66,10 @@
><img src="./../../../assets/img/board/add.svg" alt="add" />
</div>
<div id="awaitfeedback" class="details">
@if(getTask('awaitfeedback').length > 0) {
<app-task
*ngFor="let task of getTask('awaitfeedback')"
[task]="task"
></app-task>
} @else {
<div class="empty-task">No tasks</div>
@for(task of getTask('awaitfeedback'); track task) {
<app-task [task]="task"></app-task>
} @empty {
<app-task-empty>No tasks</app-task-empty>
}
</div>
</div>
@ -92,13 +83,10 @@
><img src="./../../../assets/img/board/add.svg" alt="add" />
</div>
<div id="done" class="details">
@if(getTask('done').length > 0) {
<app-task
*ngFor="let task of getTask('done')"
[task]="task"
></app-task>
} @else {
<div class="empty-task">No tasks</div>
@for(task of getTask('done'); track task) {
<app-task [task]="task"></app-task>
} @empty {
<app-task-empty>No tasks</app-task-empty>
}
</div>
</div>

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

@ -122,25 +122,6 @@ section {
}
}
/*------------- EMPTY TASK -------------*/
.empty-task {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 243px;
height: 48px;
border-radius: 10px;
border: 1px dashed var(--gray);
background-color: var(--very-light-gray2);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
font-size: 16px;
font-weight: 400;
color: var(--gray);
margin: 15.5px 0;
}
/*------------- RESPONSIVE -------------*/
@media screen and (max-width: 1100px) {
@ -213,7 +194,7 @@ section {
padding-right: 0;
}
.empty-task {
app-task-empty {
width: 100%;
max-width: 100%;
}

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

@ -5,11 +5,12 @@ import { Task } from '../../interfaces/task.interface';
import { TaskService } from '../../services/task.service';
import { TaskComponent } from './task/task.component';
import { EMPTY, isEmpty } from 'rxjs';
import { TaskEmptyComponent } from './task/task-empty/task-empty.component';
@Component({
selector: 'app-board',
standalone: true,
imports: [CommonModule, TaskComponent],
imports: [CommonModule, TaskComponent, TaskEmptyComponent],
templateUrl: './board.component.html',
styleUrl: './board.component.scss',
})

1
src/app/components/board/task/task-empty/task-empty.component.html Normal file
View file

@ -0,0 +1 @@
<div class="empty">No tasks</div>

23
src/app/components/board/task/task-empty/task-empty.component.scss Normal file
View file

@ -0,0 +1,23 @@
.empty {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 243px;
height: 48px;
border-radius: 10px;
border: 1px dashed var(--gray);
background-color: var(--very-light-gray2);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
font-size: 16px;
font-weight: 400;
color: var(--gray);
margin: 15.5px 0;
}
@media screen and (max-width: 635px) {
.empty {
width: 100%;
max-width: 100%;
}
}

23
src/app/components/board/task/task-empty/task-empty.component.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TaskEmptyComponent } from './task-empty.component';
describe('TaskEmptyComponent', () => {
let component: TaskEmptyComponent;
let fixture: ComponentFixture<TaskEmptyComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [TaskEmptyComponent]
})
.compileComponents();
fixture = TestBed.createComponent(TaskEmptyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

12
src/app/components/board/task/task-empty/task-empty.component.ts Normal file
View file

@ -0,0 +1,12 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-task-empty',
standalone: true,
imports: [],
templateUrl: './task-empty.component.html',
styleUrl: './task-empty.component.scss'
})
export class TaskEmptyComponent {
}

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

@ -1,4 +1,4 @@
<section *ngIf="task.id">
<section>
<div
class="content"
draggable="true"
@ -29,10 +29,9 @@
}
<div class="footer">
<div class="footer-badge">
@if (task.assigned.length > 0) { @for (assigned of task.assigned; track
assigned) {
@for (assigned of task.assigned; track assigned) {
<span class="footer-badged">{{ userBadged(assigned) }}</span>
} }
}
</div>
<div class="footer-priority prio-{{ task.priority }}"></div>
</div>