66 lines
1.5 KiB
JavaScript
66 lines
1.5 KiB
JavaScript
import { useState, useEffect, useCallback } from 'react';
|
|
import { Gantt, ContextMenu, Editor } from '../../src';
|
|
|
|
const parseDates = (data) => {
|
|
data.forEach((item) => {
|
|
item.start = new Date(item.start);
|
|
if (item.end) item.end = new Date(item.end);
|
|
});
|
|
return data;
|
|
};
|
|
|
|
|
|
export default function GanttBackend() {
|
|
const server = 'https://master--svar-gantt-go--dev.webix.io';
|
|
|
|
const [api, setApi] = useState();
|
|
const [tasks, setTasks] = useState([]);
|
|
const [links, setLinks] = useState([]);
|
|
|
|
useEffect(() => {
|
|
Promise.all([
|
|
fetch(server + '/tasks')
|
|
.then((res) => res.json())
|
|
.then((arr) => parseDates(arr)),
|
|
fetch(server + '/links').then((res) => res.json()),
|
|
]).then(([t, l]) => {
|
|
setTasks(t);
|
|
setLinks(l);
|
|
});
|
|
}, []);
|
|
|
|
const init = useCallback(
|
|
(api) => {
|
|
setApi(api);
|
|
|
|
api.on('request-data', (ev) => {
|
|
Promise.all([
|
|
fetch(server + `/tasks/${ev.id}`)
|
|
.then((res) => res.json())
|
|
.then((arr) => parseDates(arr)),
|
|
fetch(server + `/links/${ev.id}`).then((res) => res.json()),
|
|
]).then(([tasks, links]) => {
|
|
api.exec('provide-data', {
|
|
id: ev.id,
|
|
data: {
|
|
tasks,
|
|
links,
|
|
},
|
|
});
|
|
});
|
|
});
|
|
},
|
|
[],
|
|
);
|
|
|
|
|
|
return (
|
|
<>
|
|
<ContextMenu api={api}>
|
|
<Gantt init={init} tasks={tasks} links={links} />
|
|
</ContextMenu>
|
|
{api && <Editor api={api} />}
|
|
</>
|
|
);
|
|
}
|