1

Всем привет!) Пишу 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>

1 ответ 1

0

Подход с директивой - хорошее решение, но вы не совсем правильно понимаете саму концепцию директив в Angular. Вам не нужно обращаться к сервису, чтобы получить все таски c датами и покрасить их в соответствующие цвета, достаточно будет повесить директиву на блок с датой и создать односторонний бинд @Input() с помошью которой мы будем передавать дату в директиву.

В самой директиве мы будем только проверять нашу дату на просроченность или ее близость к этому и красить элемент в нужный цвет.

date.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[highlightDate]',
})
export class DateDirective {
  @Input('date') set date(date: string) { // Используем сеттер, чтобы применить функцию _highligthDate
    this._higlightDate(date);
  }

  constructor(private _el: ElementRef) {}

  private _higlightDate(date: string): void {
    if (Date.now() >= Date.parse(date)) {
      this._el.nativeElement.classList.add('red');
      return;
    }
    if ((Date.parse(date) - Date.now()) / 86400000 <= 3) {
      this._el.nativeElement.classList.add('pink');
      return;
    }
    this._el.nativeElement.classList.add('default');
  }
}
Почему мы используем сеттер для @Input()?

Дело в том, что функция конструктор срабатывает до того как в бинд придет строка с датой и если мы звпустим функцию this._highlightDate(this.date) в конструкторе, то this.date в это вермя все еще будет undefined. А с сеттером фукция тработает только тогда, когда в @Input() придет строка с датой.

app.component.html

<div class="container">
  <div class="row">
    <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>
        <div class="col-md-9">
          <p class="text-dark h5">{{ task.title }}</p>
          <p class="text-dark h6">{{ task.descr }}</p>
          <p highlightDate [date]="task.date" 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">
            Изменить
          </button>
          <button class="btn btn-outline-success btn-sm">Завершить</button>
          <button class="btn btn-outline-danger btn-sm">Удалить</button>
        </div>
      </div>
    </div>
  </div>
</div>

Директиву(аттрибут highlightDate) мы вешаем не на весь таск-лист, а только на элемент с датой и добавляем соответствующий бинд [date], который объявлен в директиве DateDirective.

Изучите подробнее документацию по директивам, там все подробно описано.

Как это все выглядит: демо на StackBlitz

2
  • Большое спасибо! Вы мне очень помогли!) Не до конца освоил, вот и возникают трудности. 16 июл 2022 в 18:17
  • @ИльяМизонов если ответ был полезен, то можете проголосовать за него и отметить как верный.
    – Neverm1ndo
    16 июл 2022 в 18:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.