import {TaskModel} from '@bryntum/taskboard';
class CustomTask extends TaskModel {
static fields = [
'team',
'progress',
'image',
'rating'
];
}
/**
* Application configuration
*/
const taskBoardConfig = {
// Url for resource avatar images
resourceImagePath : 'users/',
// Columns to display
columns : [
'todo',
'doing',
'done'
],
// Field used to pair a task to a column
columnField : 'status',
// Project using inline data
project : {
taskModelClass : CustomTask,
tasksData : [
{ id : 1, name : 'Book flight', status : 'done', prio : 'medium', image : 'drawing.png' },
{ id : 2, name : 'Book hotel', status : 'done', prio : 'medium', image : 'drawing.png' },
{ id : 3, name : 'Pack bags', status : 'doing', prio : 'low', image : 'drawing.png' },
{ id : 4, name : 'Get visa', status : 'doing', prio : 'high' },
{ id : 5, name : 'Book train', status : 'done', prio : 'medium' },
{ id : 6, name : 'Go to airport', status : 'todo', prio : 'low' },
{ id : 7, name : 'Renew passport', status : 'todo', prio : 'high' },
{ id : 8, name : 'Swim in pool', status : 'todo', prio : 'medium' },
{ id : 9, name : 'Scuba diving', status : 'todo', prio : 'medium' },
{ id : 10, name : 'Canyoning', status : 'todo', prio : 'low' },
{ id : 11, name : 'Snorkeling', status : 'doing', prio : 'medium' },
{ id : 12, name : 'Diving license', status : 'todo', prio : 'medium' },
{ id : 13, name : 'Book cab', status : 'done', prio : 'low' },
{ id : 14, name : 'Write postcards', status : 'todo', prio : 'medium' },
{ id : 15, name : 'Take pictures', status : 'todo', prio : 'low' },
{ id : 16, name : 'Take selfies', status : 'todo', prio : 'high' },
{ id : 17, name : 'Post on instagram', status : 'todo', prio : 'medium' },
{ id : 18, name : 'Call grandma', status : 'todo', prio : 'medium' },
{ id : 19, name : 'Buy swimming ring', status : 'done', prio : 'high' },
{ id : 20, name : 'Get in shape', status : 'doing', prio : 'medium' },
{ id : 21, name : 'Iron shirts', status : 'done', prio : 'low' }
],
resourcesData : [
{ id : 1, name : 'Angelo', image : 'angelo.jpg' },
{ id : 2, name : 'Celia', image : 'celia.jpg' },
{ id : 3, name : 'Dave', image : 'dave.jpg' },
{ id : 4, name : 'Emilia', image : 'emilia.jpg' },
{ id : 5, name : 'Gloria', image : 'gloria.jpg' },
{ id : 6, name : 'Henrik', image : 'henrik.jpg' },
{ id : 7, name : 'Kate', image : 'kate.jpg' },
{ id : 8, name : 'Lee', image : 'lee.jpg' },
{ id : 9, name : 'Lisa', image : 'lisa.jpg' },
{ id : 10, name : 'Mark', image : 'mark.jpg' },
{ id : 11, name : 'Steve', image : 'steve.jpg' }
],
assignmentsData : [
{ id : 1, event : 7, resource : 1 },
{ id : 2, event : 7, resource : 2 },
{ id : 3, event : 8, resource : 2 },
{ id : 4, event : 4, resource : 3 },
{ id : 5, event : 7, resource : 3 },
{ id : 6, event : 7, resource : 4 },
{ id : 7, event : 7, resource : 5 },
{ id : 8, event : 7, resource : 6 },
{ id : 9, event : 7, resource : 7 },
{ id : 10, event : 7, resource : 8 },
{ id : 11, event : 7, resource : 9 },
{ id : 12, event : 7, resource : 10 },
{ id : 13, event : 7, resource : 11 },
{ id : 14, event : 16, resource : 7 },
{ id : 15, event : 16, resource : 8 },
{ id : 16, event : 16, resource : 9 },
{ id : 17, event : 16, resource : 10 },
{ id : 18, event : 16, resource : 11 },
{ id : 19, event : 19, resource : 10 },
{ id : 20, event : 9, resource : 7 },
{ id : 21, event : 12, resource : 8 },
{ id : 22, event : 14, resource : 9 },
{ id : 23, event : 17, resource : 10 },
{ id : 24, event : 18, resource : 10 },
{ id : 25, event : 11, resource : 9 },
{ id : 26, event : 20, resource : 8 },
{ id : 27, event : 1, resource : 7 },
{ id : 28, event : 2, resource : 6 },
{ id : 29, event : 5, resource : 5 },
{ id : 30, event : 6, resource : 4 },
{ id : 31, event : 10, resource : 3 },
{ id : 32, event : 15, resource : 2 },
{ id : 33, event : 3, resource : 1 },
{ id : 34, event : 13, resource : 2 },
{ id : 35, event : 21, resource : 3 },
{ id : 36, event : 8, resource : 3 },
{ id : 37, event : 17, resource : 9 },
{ id : 38, event : 17, resource : 8 },
{ id : 39, event : 17, resource : 7 },
{ id : 40, event : 17, resource : 6 }
]
},
bodyItems : {
// Image
image : { type : 'image', baseUrl : 'images/' },
}
};
export { taskBoardConfig };
Also, I added a screenshot about how the folders should be organized and the demo with the images being loaded.