Как отфильтровать список по датам угловых 6 - PullRequest
Новая
       41

Как отфильтровать список по датам угловых 6

0 голосов
/ 27 марта 2019

Я разрабатываю один инструмент под углом 6, где у каждого вошедшего в систему пользователя есть определенные задачи. В настоящее время я получаю все задачи в одном массиве. Я сделал некоторые манипуляции на стороне клиента, такие как добавление времени начала и окончания и сохранение всего в локальном хранилище. Я хочу фильтровать задачи по датам, потому что сегодняшние задачи отображаются в списке сегодняшних завтрашних задач отображаются в списке завтрашних дней и одинаковы для всей недели. all tasks

// response
[{
	"id": "5c9a108aab16141aca472980",
	"idBoard": "5c7cf3d22c86ae1f9a210571",
	"idList": "5c7cf40cb8f22b26862602aa",
	"name": "Newest Card 1",
	"due": "2019-03-27T06:30:00.000Z",
  "time": "2019-03-25T18:30:12.000Z"
}, 
{
	"id": "5c9a108aab16141aca472950",
	"idBoard": "5c7cf3d22c86ae1f9a210571",
	"idList": "5c7cf40cb8f22b26862602aa",
	"name": "Newest Card 2",
	"due": "2019-03-27T06:30:00.000Z"
},
 {
	"id": "5c9a108aab16141aca472960",
	"idBoard": "5c7cf3d22c86ae1f9a210571",
	"idList": "5c7cf40cb8f22b26862602aa",
	"name": "Newest Card 3",
	"due": "2019-03-27T06:30:00.000Z"
},
 {
	"id": "5c9a108aab16141aca472970",
	"idBoard": "5c7cf3d22c86ae1f9a210571",
	"idList": "5c7cf40cb8f22b26862602aa",
	"name": "Newest Card 4",
	"due": "2019-03-27T06:30:00.000Z",
   "time": "2019-03-25T18:30:50.000Z"

}
]
<div class="card width hr" *ngFor="let item of allUserTaskArr;let i = index">
      <div class="card-header">
        <span class="due" [ngClass]="{'text-orange': (item.due | date) == (today | date), 'text-red': (item.due | date) < (today | date), 'text-default': (item.due | date) > (today | date)}" ><i class="fa fa-calendar"></i>&nbsp; {{item.due | date}}</span>
        <span class="float-right font-weight-bold pad-top-05" [class.due-time] = "(item.time | date:'HH:mm:ss') != undefined" [class.text-default] = "(item.time | date:'HH:mm:ss') != undefined" *ngIf="(item.time | date:'HH:mm:ss') != '00:00:00'">
          <i class="fa fa-clock-o" *ngIf="(item.time | date:'HH:mm:ss') != undefined"></i>&nbsp; {{item.time | date:'HH:mm:ss'}}
        </span>
        <a class="link mar-l-r-1 float-right pad-top-05" ><i class="fa fa-check-square-o" aria-hidden="true"></i>&nbsp; Create Checklist</a>
        <a class="link mar-l-r-1 float-right pad-top-05" *ngIf="item.timeEntries != undefined" (click)="hideme[i] = !hideme[i]"><i class="fa fa-calendar-check-o"></i>&nbsp; Time Entries</a>

      </div>
      <div class="card-body pad-125">
        <div class="row no-gutters">
          <div class="col-md-12">
            <span *ngIf="role === 'tl' || role === 'tm'">
              <input type="checkbox" class="" (change)="finsishTask(item)">
            </span>&nbsp; 
            <h6 class="display-inline-block pad-t-075 mar-btm-05">{{item.name}}</h6>
         
            <div class="float-right">
              <button class="btn btn-info mar-l-r-0-5 box-shadow" *ngIf="item.start" (click)="startTask(item);setStartTime(item)"><i class="fa fa-clock-o"></i>&nbsp; Start</button>
              <button class="btn btn-danger mar-l-r-0-5 box-shadow" *ngIf="item.end" (click)="EndTask(item);setEndTime(item)"><i class="fa fa-stop-circle"></i>&nbsp; End</button>
            </div>
          </div>

          <div class="col-md-12" *ngIf="hideme[i]"  [@enterAnimation]>
            <hr class="hr"> 
            <h6 class="mar-btm-05">Time Entries</h6>
            <div class="row no-gutters">
              <div class="col-md-4" *ngFor="let time of item.timeEntries">
                <i class="fa fa-calendar"></i>&nbsp; 
                <span *ngIf="time.startTime != 'null'">{{time.startTime | date: 'dd/MM, (h:mm a)'}}</span>&nbsp; -&nbsp;
                <span *ngIf="time.endTime != 'null'">{{time.endTime | date: 'dd/MM, (h:mm a)'}}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

В приведенном выше коде я получаю такой ответ, я хочу отфильтровать задачи на стороне клиента в установленный срок. Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 27 марта 2019

это на самом деле довольно просто. Позвольте мне немного изменить ваши примерные данные, чтобы последний элемент в arr имел другую дату. 

const arr = [{
    "id": "5c9a108aab16141aca472980",
    "idBoard": "5c7cf3d22c86ae1f9a210571",
    "idList": "5c7cf40cb8f22b26862602aa",
    "name": "Newest Card 1",
    "due": "2019-03-27T06:30:00.000Z",
  "time": "2019-03-25T18:30:12.000Z"
}, 
{
    "id": "5c9a108aab16141aca472950",
    "idBoard": "5c7cf3d22c86ae1f9a210571",
    "idList": "5c7cf40cb8f22b26862602aa",
    "name": "Newest Card 2",
    "due": "2019-03-27T06:30:00.000Z"
},
 {
    "id": "5c9a108aab16141aca472960",
    "idBoard": "5c7cf3d22c86ae1f9a210571",
    "idList": "5c7cf40cb8f22b26862602aa",
    "name": "Newest Card 3",
    "due": "2019-03-27T06:30:00.000Z"
},
 {
    "id": "5c9a108aab16141aca472970",
    "idBoard": "5c7cf3d22c86ae1f9a210571",
    "idList": "5c7cf40cb8f22b26862602aa",
    "name": "Newest Card 4",
    "due": "2019-03-28T06:30:00.000Z",
   "time": "2019-03-25T18:30:50.000Z"

}
]

Вот как мы можем отсортировать ваш массив: 

const sortedArr = [...arr].sort((a,b)=> a.due - b.due);

Если вы хотите отфильтровать данные так, чтобы возвращались только те задачи, которые должны быть выполнены сегодня, 

const today = new Date().setHours(0,0,0,0);
const filterToday = arr.filter(obj => new Date(obj['due']).setHours(0,0,0,0) === today);

console.log(filterToday);

Мы установили часы на (0,0,0,0), чтобы в функции фильтра учитывалась только дата / месяц / год.

Аналогично, если вы хотите получить задания, которые должны быть выполнены завтра, 

const tomorrow = new Date();
tomorrow.setDate(new Date().getDate() + 1);

const filterTomorrow = arr.filter(obj => new Date(obj['due']).setHours(0,0,0,0) === tomorrow.setHours(0,0,0,0));

console.log(filterTomorrow);
0 голосов
/ 27 марта 2019

Вам просто нужно отсортировать allUserTaskArr по срокам с помощью функции сортировки. 

allUserTaskArr.sort((a,b)=>a.due - b.due);

teuxdeux.com также находит все задачи в соответствии с датой исполнения. Для этого вам нужно уменьшить массив до объекта с датой исполнения в качестве ключа и задачами в качестве его значения.

Затем сначала будет показана ближайшая дата.

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

...