Hi Team,
I want to call the API in the Bryntum TaskBoard (Angular version) on the initial load.
API Endpoint:
https://4014cb28-75f5-47dd-a319-b2121529886c.mock.pstmn.io/getTasks
API response format: {
"success": true,
"tasks": {
"rows": [
{
"id": 1,
"name": "Book flight",
"description": "Booking flight using APP",
"resourceId": "Dave"
},
{
"id": 2,
"name": "Book hotel",
"description": "Booking Hotel using APP",
"resourceId": "Celia"
},
{
"id": 3,
"name": "Pack bags",
"description": "Need to pack bags for vacation",
"resourceId": "Angelo"
},
{
"id": 4,
"name": "Get visa",
"description": "Immediate Visa Need for us",
"resourceId": "Celia"
},
{
"id": 5,
"name": "Book train",
"description": "Booking Train using APP",
"resourceId": "Angelo"
},
{
"id": 6,
"name": "Book Movie Ticket",
"description": "Booking movie ticket using APP",
"resourceId": ""
},
{
"id": 7,
"name": "Get Passport",
"description": "Apply new passport",
"resourceId": ""
}
]
},
"resources": {
"rows": [
{
"id": 1,
"name": "Angelo"
},
{
"id": 2,
"name": "Celia"
},
{
"id": 3,
"name": "Dave"
}
]
}
}
Requirements:
- Fetch tasks and resources from the API when the taskboard loads.
- Dynamically add a new column labeled "UnAssigned" at the end of the taskboard.
- If a task's
resourceIdis empty, it should be automatically assigned to the "UnAssigned" column.
app.component.html
<!-- BryntumDemoHeader component is used for Bryntum example styling only and can be removed -->
<bryntum-demo-header></bryntum-demo-header>
<bryntum-task-board-project-model
#project
[tasksData] = "projectProps.tasks!"
[resourcesData] = "projectProps.resourcesData!"
</bryntum-task-board-project-model>
<bryntum-task-board
#taskboard
[project] = "project"
[resourceImagePath] = "taskBoardProps.resourceImagePath!"
[useDomTransition] = "taskBoardProps.useDomTransition!"
[autoGenerateColumns] = "taskBoardProps.autoGenerateColumns!"
[columnField] = "taskBoardProps.columnField!"
</bryntum-task-board>
app.component.ts
import { AfterViewInit, Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { TaskBoard } from '@bryntum/taskboard-thin';
import { BryntumTaskBoardComponent, BryntumTaskBoardProjectModelComponent } from '@bryntum/taskboard-angular-thin';
import { projectProps, taskBoardProps } from './app.config';
import {ApiService} from './app.service'
@Component({
selector : 'app-root',
templateUrl : './app.component.html',
styleUrls : ['./app.component.scss'],
encapsulation : ViewEncapsulation.None,
standalone : false
})
export class AppComponent implements AfterViewInit {
taskBoardProps = taskBoardProps;
projectProps = projectProps;
// Bryntum TaskBoard Angular wrapper reference
@ViewChild(BryntumTaskBoardComponent, { static : false }) taskBoardComponent!: BryntumTaskBoardComponent;
@ViewChild(BryntumTaskBoardProjectModelComponent, { static : true }) project!: BryntumTaskBoardProjectModelComponent;
private taskBoard! : TaskBoard;
constructor(private ApiService: ApiService) {}
ngAfterViewInit(): void {
this.taskBoard = this.taskBoardComponent.instance;
this.ApiService.fetchTasks().subscribe({
next: (data) => {
console.log("res",data);
this.projectProps.tasks = data.tasks;
this.projectProps.resources = data.resources;
},
error: (error) => {
console.log("error", error);
}
});
}
}
app.config.ts
import { type BryntumTaskBoardProps, type BryntumTaskBoardProjectModelProps } from '@bryntum/taskboard-angular-thin';
export const projectProps : BryntumTaskBoardProjectModelProps = {
// transport : {
// load : {
// url : 'https://4014cb28-75f5-47dd-a319-b2121529886c.mock.pstmn.io/getTasks',
// }
// },
//autoLoad : true
};
export const taskBoardProps : BryntumTaskBoardProps = {
resourceImagePath : 'assets/users/',
// Experimental, transition moving cards using the editor
useDomTransition : true,
autoGenerateColumns : true,
// Field used to pair a task to a column
columnField : 'resourceId'
};
How can this be achieved in Angular? 
