stackblitz: https://stackblitz.com/edit/angular-xk9nw6?file=src%2Fapp%2Ftable%2Ftable.component.html
I have a json file with tasks that have a property of subtasks that have the same properties types as their parent tasks. when a parent task is clicked, the child subtasks need to be appended to the bottom of their parent. I'm trying to make a custom tree-grid without using these rigid libraries
You can see in my stackblitz that the subtasks are being populated under the all the parent tasks and not just the parent task they belong to. if I move the it inside the parent *ngfor, my subtask will be appended to the bottom of every parent task and not just the parent task it belongs to.
Bonus points for figuring out why subtasks.taskName won't show, while subtasks.taskID does.(Bonus solved by Julien Bertacco). thanks, bud.
my code so far:
sample data:
/**
* Test cases data source
*/
export let sampleData: Object[] = [
{
taskID: 1,
taskName: 'Planning',
startDate: new Date('02/03/2017'),
endDate: new Date('02/07/2017'),
progress: 100,
duration: 5,
priority: 'Normal',
approved: false,
isInExpandState: true,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, approved: true },
{ taskID: 4, taskName: 'Allocate resources', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Critical', approved: false },
{ taskID: 5, taskName: 'Planning complete', startDate: new Date('02/07/2017'), endDate: new Date('02/07/2017'), duration: 0, progress: 0, priority: 'Low', approved: true }
]
},
{
taskID: 6,
taskName: 'Design',
startDate: new Date('02/10/2017'),
endDate: new Date('02/14/2017'),
duration: 3,
progress: 86,
priority: 'High',
isInExpandState: false,
approved: false,
subtasks: [
{ taskID: 7, taskName: 'Software Specification', startDate: new Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
{ taskID: 8, taskName: 'Develop prototype', startDate: new Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
{ taskID: 9, taskName: 'Get approval from customer', startDate: new Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress: 100, approved: true },
{ taskID: 10, taskName: 'Design Documentation', startDate: new Date('02/13/2017'), endDate: new Date('02/14/2017'), duration: 2, progress: 100, approved: true },
{ taskID: 11, taskName: 'Design complete', startDate: new Date('02/14/2017'), endDate: new Date('02/14/2017'), duration: 0, progress: 0, priority: 'Normal', approved: true }
]
},
{
taskID: 12,
taskName: 'Implementation Phase',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
subtasks: [
{
taskID: 13,
taskName: 'Phase 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
subtasks: [{
taskID: 14,
taskName: 'Implementation Module 1',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
duration: 11,
approved: false,
subtasks: [
{ taskID: 15, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'High', approved: false },
{ taskID: 16, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
{ taskID: 17, taskName: 'Testing', startDate: new Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 18, taskName: 'Bug fix', startDate: new Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'Critical', approved: false },
{ taskID: 19, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 20, taskName: 'Phase 1 complete', startDate: new Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0, priority: 'Low', approved: true }
]
}]
},
{
taskID: 21,
taskName: 'Phase 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'High',
approved: false,
duration: 12,
subtasks: [{
taskID: 22,
taskName: 'Implementation Module 2',
startDate: new Date('02/17/2017'),
endDate: new Date('02/28/2017'),
priority: 'Critical',
approved: false,
duration: 12,
subtasks: [
{ taskID: 23, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Normal', approved: true },
{ taskID: 24, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), endDate: new Date('02/20/2017'), duration: 4, progress: '50', priority: 'Critical', approved: true },
{ taskID: 25, taskName: 'Testing', startDate: new Date('02/21/2017'), endDate: new Date('02/24/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 26, taskName: 'Bug fix', startDate: new Date('02/25/2017'), endDate: new Date('02/26/2017'), duration: 2, progress: '0', priority: 'Low', approved: false },
{ taskID: 27, taskName: 'Customer review meeting', startDate: new Date('02/27/2017'), endDate: new Date('02/28/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 28, taskName: 'Phase 2 complete', startDate: new Date('02/28/2017'), endDate: new Date('02/28/2017'), duration: 0, priority: 'Normal', approved: false }
]
}]
},
{
taskID: 29,
taskName: 'Phase 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'Normal',
approved: false,
duration: 11,
subtasks: [{
taskID: 30,
taskName: 'Implementation Module 3',
startDate: new Date('02/17/2017'),
endDate: new Date('02/27/2017'),
priority: 'High',
approved: false,
duration: 11,
subtasks: [
{ taskID: 31, taskName: 'Development Task 1', startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Low', approved: true },
{ taskID: 32, taskName: 'Development Task 2', startDate: new Date('02/17/2017'), endDate: new Date('02/19/2017'), duration: 3, progress: '50', priority: 'Normal', approved: false },
{ taskID: 33, taskName: 'Testing', startDate: new Date('02/20/2017'), endDate: new Date('02/21/2017'), duration: 2, progress: '0', priority: 'Critical', approved: true },
{ taskID: 34, taskName: 'Bug fix', startDate: new Date('02/24/2017'), endDate: new Date('02/25/2017'), duration: 2, progress: '0', priority: 'High', approved: false },
{ taskID: 35, taskName: 'Customer review meeting', startDate: new Date('02/26/2017'), endDate: new Date('02/27/2017'), duration: 2, progress: '0', priority: 'Normal', approved: true },
{ taskID: 36, taskName: 'Phase 3 complete', startDate: new Date('02/27/2017'), endDate: new Date('02/27/2017'), duration: 0, priority: 'Critical', approved: false },
]
}]
}
]
}
];
My Markup:
<!-- <H1>Table</H1>
<table class="table">
<thead>
<tr>
<th>expand</th>
<th>task id</th>
<th>task name</th>
<th>button</th>
</tr>
</thead>
<tbody *ngFor="let datum of data">
<tr>
<td class="" (click)="subtask(datum); $event.stopPropagation()" >> </td>
<td class="">{{datum.taskID}}</td>
<td class="">{{datum.taskName}}</td>
<td class="btn btn.primary" (click)="dropdown(datum)">...</td>
</tr>
</tbody>
<tbody>
<tr [hidden]="!foo" *ngFor="let subtask of subtaskArray" >
<td class="">> </td>
<td class="">{{subtask?.taskID}}</td>
<td class="">{{subtask?.taskName}}</td>
<td class=" btn btn.primary" (click)="dropdown(subtask)">...</td>
</tr>
</tbody>
</table> -->
<H1>Table</H1>
<table class="table">
<thead>
<tr>
<th>expand</th>
<th>task id</th>
<th>task name</th>
<th>button</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let datum of data">
<td class="" (click)="subtask(datum); $event.stopPropagation()" >> </td>
<td class="">{{datum.taskID}}</td>
<td class="">{{datum.taskName}}</td>
<td class="btn btn.primary" (click)="dropdown(datum)">...</td>
</tr>
<tr [hidden]="!foo" *ngFor="let subtask of subtaskArray" >
<td class="">> </td>
<td class="">{{subtask?.taskID}}</td>
<td class="">{{subtask?.taskName}}</td>
<td class=" btn btn.primary" (click)="dropdown(subtask)">...</td>
</tr>
</tbody>
</table>
My logic:
import { Component, OnInit,ViewChild } from '@angular/core';
import { sampleData } from '../datasource';
@Component({
selector: 'app-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
constructor() { }
@ViewChild('treegrid')
public data: Object[];
public foo: boolean;
public subtaskArray: any;
public index: number;
dropdown(e){
console.log(e);
}
subtask(e){
console.log(e);
this.subtaskArray = e.subtasks
this.index = e.taskID;
this.foo == false ? this.foo = true : this.foo = false;
}
ngOnInit(): void {
this.data = sampleData;
}
}
For populate subtasks under the parent task you need to loop this way
<tbody *ngFor="let datum of data; index as i">
<tr>
<td class="" (click)="subtask(datum, i); $event.stopPropagation()" >> </td>
<td class="">{{datum.taskID}}</td>
<td class="">{{datum.taskName}}</td>
<td class="btn btn.primary" (click)="dropdown(datum)">...</td>
</tr>
<tr [hidden]="index != i" *ngFor="let subtask of datum.subtasks" >
<td class="">> </td>
<td class="">{{subtask?.taskID}}</td>
<td class="">{{subtask?.taskName}}</td>
<td class=" btn btn.primary" (click)="dropdown(subtask)">...</td>
</tr>
</tbody>
And change your table.component.ts file subtask function by
subtask(e,i){
this.subtaskArray = e.subtasks
this.index = i;
this.foo == false ? this.foo = true : this.foo = false;
}