Всем привет!) Пишу task manager на Angular. Необходимо реализовать функционал, при котором цвет поставленной задачи будет изменяться в зависимости от даты.
Например:
- если до истечения срока задачи осталось три дня, нужно поменять цвет задачи;
- если срок исполнения истек, то задача загорается красным.
Сначала написал свою директиву, но при ее использовании меняется цвет всех задач, причем цвет определяется по последней добавленной. Например, у двух задач еще есть срок на их выполнение, то если добавить еще одну задачу с заведомо истекшим сроком, то все задачи в списке окрасятся в красный цвет.
Далее попробовал использовать ngClass, но результат ровно такой же. Все задачи окрашиваются по условию последней добавленной задачи.
Может кто знает, как реализовать данный функционал, либо место где можно посмотреть решение.
Большое спасибо!
HTML:
<div class="container">
<div class="row" cdkDropList (cdkDropListDropped)="drop($event)">
<div class="mx-auto col-md-8" >
<div *ngFor="let task of allTasks" class="mt-3 p-3 d-flex justify-content-between shadow border rounded" cdkDrag appDate>
<div class="col-md-9">
<p class="text-dark h5">{{task.title}}</p>
<p class="text-dark h6">{{task.descr}}</p>
<p class="text-dark h6">{{task.date}}</p>
<button class="btn btn-outline-dark btn-sm">Подробнее</button>
</div>
<div class="d-flex flex-column justify-content-between">
<button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal" (click)="editChosenTask(task)">Изменить</button>
<button class="btn btn-outline-success btn-sm">Завершить</button>
<button class="btn btn-outline-danger btn-sm" (click)="deleteTask(task)">Удалить</button>
</div>
</div>
</div>
</div>
</div>
Директива
@Directive({
selector: '[appDate]'
})
export class DateDirective {
constructor(public el: ElementRef, public r: Renderer2, public dataService: DataService) {
this.dataService.getAllTasks().subscribe(res => {
res.map((task: any) => {
if(Date.now() >= Date.parse(task.date)) {
this.r.setStyle(el.nativeElement, 'background-color', '#cb8777')
this.r.setStyle(el.nativeElement, 'color', 'black')
} else if((Date.parse(task.date) - Date.now()) / 86400000 <= 3) {
this.r.setStyle(el.nativeElement, 'background-color', '#f8d1f0')
this.r.setStyle(el.nativeElement, 'color', 'black')
} else {
this.r.setStyle(el.nativeElement, 'background-color', '#e9e9e9')
this.r.setStyle(el.nativeElement, 'color', 'black')
}
})
})
}
}
Использование ngClass:
<div class="container">
<div class="row" cdkDropList (cdkDropListDropped)="drop($event)">
<div class="mx-auto col-md-8" >
<div *ngFor="let task of allTasks" class="mt-3 p-3 d-flex justify-content-between shadow border rounded" cdkDrag appDate>
<div class="col-md-9">
<p class="text-dark h5">{{task.title}}</p>
<p class="text-dark h6">{{task.descr}}</p>
<p class="text-dark h6">{{task.date}}</p>
<button class="btn btn-outline-dark btn-sm">Подробнее</button>
</div>
<div class="d-flex flex-column justify-content-between">
<button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal" (click)="editChosenTask(task)">Изменить</button>
<button class="btn btn-outline-success btn-sm">Завершить</button>
<button class="btn btn-outline-danger btn-sm" (click)="deleteTask(task)">Удалить</button>
</div>
</div>
</div>
</div>
</div>