[REACT] TaskBoard Ajax loading

[damir]

I am trying to figure out how to load TaskBoard data using Ajax, by appending and/or replacing data already loaded.

Below is a simple base code, can you please show me how to complete the config part and click event logic?

Thanks!

import React, { Fragment, FunctionComponent, useRef } from 'react';

import {BryntumDemoHeader, BryntumTaskBoard, BryntumTaskBoardProps} from '@bryntum/taskboard-react';
import { ProjectModel } from '@bryntum/taskboard';
import './App.scss';

const taskBoardConfig: BryntumTaskBoardProps = {
    resourceImagePath : 'users/',
    useDomTransition : true,
    columns : [
        'todo',
        'doing',
        'done'
    ],
    columnField : 'status',
    headerItems : {
        menu : { type : 'taskMenu' }
    },
    project : {
        // TODO
    },
};

const App: FunctionComponent = () => {
    const taskBoardRef = useRef<BryntumTaskBoard>(null);
    const taskBoardInstance = () => taskBoardRef.current?.instance;

const handleLoadMore = () => {
    const project = taskBoardInstance()?.project as ProjectModel;

    // TODO
    project.load({
        request: {
            from : 1,
            to : 1000
        }
    });
}

return (
    <Fragment>
        <BryntumDemoHeader />
        <BryntumTaskBoard
            ref={taskBoardRef}
            {...taskBoardConfig}
        />

        <div>
            <button onClick={handleLoadMore}>
                Load more
            </button>
        </div>
    </Fragment>
);
};

export default App;

[marcio]

Hey damir,

Please check this guide, it contains a basic configuration for CRUD Manager and the missing parts of your code https://bryntum.com/products/taskboard/docs/guide/TaskBoard/data/crud_manager

You can also check a demo that we have integration with the backend that you can check in the package that you download with demos located at

examples/backend-sync

[damir]

Hi Marcio,

Thanks for your reply.

I check the guide you sent me but it's not so clear to me, as I am still new with Bryntum ecosystem.

For example the very first code example doesn't explain what is "myTaskStore":

const taskBoard = new TaskBoard({
    project : {
        autoLoad : true,
        // We want to provide an already existing TaskStore instance
        taskStore : myTaskStore,
        // And use a custom config object for the ResourceStore
        resourceStore : {
            fields : ['address', /*...*/]
        },
        loadUrl : 'php/read.php',
        syncUrl : 'php/save.php'
    }
});

I will try to setup the PHP example but after quickly checking into it seem that is doing much more compared with what I want to archive with React.

Can you please just let me know if below updated react code is the right direction or if I am missing something, even if you didn't test it any pseudo code will be helpful.

import React, { Fragment, FunctionComponent, useRef, useState } from 'react';

import {BryntumDemoHeader, BryntumTaskBoard, BryntumTaskBoardProps} from '@bryntum/taskboard-react';
import { ProjectModel } from '@bryntum/taskboard';
import './App.scss';

const initialPage= new URLSearchParams(window.location.search).get('page') || '1'

const taskBoardConfig: BryntumTaskBoardProps = {
    resourceImagePath : 'users/',
    useDomTransition : true,
    columns : [
        'todo',
        'doing',
        'done'
    ],
    columnField : 'status',
    headerItems : {
        menu : { type : 'taskMenu' }
    },
    project : {
        loadUrl: `page.php?page=${initialPage}`
    },
};

const App: FunctionComponent = () => {
    const taskBoardRef = useRef<BryntumTaskBoard>(null);
    const taskBoardInstance = () => taskBoardRef.current?.instance;
    const [page, setPage] = useState(initialPage)

const handleLoadMore = () => {
    setPage(page + 1)
}

useEffect(() => {
    const project = taskBoardInstance()?.project as ProjectModel;

// TODO
project.load({});
}, [page])

return (
    <Fragment>
        <BryntumDemoHeader />
        <BryntumTaskBoard
            ref={taskBoardRef}
            {...taskBoardConfig}
        />

    <div>
        <button onClick={handleLoadMore}>
            Load more
        </button>
    </div>
</Fragment>
);
};

export default App;

In case I am far from a working code, I will try to see how PHP example works. I see there is also a syncUrl and a autoSync, but not sure why there are both, until I see the demo in action.

Thanks

[marcio]

Hey,

myTaskStore is just a custom store example, but it's not necessary for implementing CRUD manager.

The code that you shared looks like in the right path, but if you just want to go to the next page, you should consider using https://bryntum.com/products/gantt/docs/api/Core/data/AjaxStore#function-nextPage and https://bryntum.com/products/gantt/docs/api/Core/data/AjaxStore#function-previousPage

If you need more clarification don't hesitate to contact us.