Bryntum Support Forums

import React, { Fragment, useRef, useEffect } from "react";

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

const BryntumTrial = (props: any) => {
  const { reportData } = props;
  const taskBoardRef = useRef<BryntumTaskBoard>(null);
  const taskBoardInstance = () => taskBoardRef.current?.instance as TaskBoard;

  let newCols = reportData.serverData.columns.map((item) => {
    if (item.id === "Backlog") {
      return {
        ...item,
        collapsed: "true",
      };
    }
    return item;
  });

  let newTasks = reportData.serverData.initialData.map((item, i) => {
    return {
      ...item,
      // description: "Try it on any demo, reproduces easily",
      prio: "critical",
      id: i + 1,
    };
  });

  const kanbanConfig: BryntumTaskBoardProps = {
    // Url for resource avatar images
    resourceImagePath: "data/TaskBoard/images/users/",

// Experimental, transition moving cards using the editor
useDomTransition: true,

// Columns to display
// columns: reportData.serverData.columns,
columns: newCols,

// Field used to pair a task to a column
columnField: "state",

tasksPerRow: 1,

features: {
  columnDrag: true,
  columnHeaderMenu: true,
},

listeners: {
  async beforeTaskDrop({ taskRecords, targetColumn }) {
    // Show confirmation dialog
    if (targetColumn.id === "Done") {
      return false;
    }
  },

  taskDrag({ taskRecords, targetColumn }) {
    return targetColumn.id !== "Backlog";
  },
},

headerItems: {
  menu: { type: "taskMenu", order: 200 },
  resourceAvatars: null,
},

footerItems: {
  resourceAvatars: { type: "resourceAvatars" },
},

// Project using inline data
project: {
  // tasks: reportData.serverData.initialData,
  tasks: newTasks,

  resources: [
    { id: 1, name: "Angelo" },
    { id: 2, name: "Celia" },
    { id: 3, name: "Suhas" },
  ],

  assignments: [
    { id: 1, event: 1, resource: 1 },
    { id: 2, event: 15, resource: 2 },
    { id: 3, event: 22, resource: 3 },
  ],

  autoLoad: true,
  // loadUrl: "data/data.json",
},

tbar: [
  // Button for picking which columns to show
  { type: "columnpickerbutton" },
  { type: "zoomslider" },
],
  };

  return (
    <Fragment>
      <BryntumTaskBoard ref={taskBoardRef} {...kanbanConfig} />
    </Fragment>
  );
};

export default BryntumTrial;

@import '~@bryntum/taskboard/taskboard.material.css';