Skip to main content

getEditorItems

Description​

Returns the full default configuration of editor fields

Usage​

getEditorItems(config?: {
  unscheduledTasks?: boolean,
  rollups?: boolean,
  resources?: boolean,
  splitTask?: boolean,
  summary?: {
    autoProgress?: boolean,
    autoConvert?: boolean
  }
}): IEditorItem[];

Parameters​

  • config (optional) — an object with the next parameters:
    • unscheduledTasks — adds the "Unscheduled" toggle field | PRO feature
    • rollups (optional) — adds "Rollup" checkbox field to the editor | PRO feature
    • resources (optional) — adds "Resources" tab to the editor that allows assigning and unassigning resources for the task | PRO feature
    • splitTask (optional) — adds "Segments" tab to the editor that allows managing task segments | PRO feature
    • summary (optional) — configuration options for summary tasks | PRO feature
      • autoProgress (optional) — if false, disables the Progress field for summary tasks; if true, the progress is calculated automatically
      • autoConvert (optional) — if false, removes the option that allows converting a regular task into a summary task; if true, tasks with child items are automatically converted into summary tasks

Returns​

Returns an array of editor-form field configuration objects. Conditional fields are included only when their config property is provided. If no parameter is defined, only default config is returned.

[
  {
    key: "text",
    comp: "text",
    label: "Name",
    config: { placeholder: "Add task name" }
  },
  {
    key: "details",
    comp: "textarea",
    label: "Description",
    config: { placeholder: "Add description" }
  },
  { key: "type", comp: "select", label: "Type" },
  { key: "start", comp: "date", label: "Start date" },
  { key: "end", comp: "date", label: "End date" },

  {
    key: "duration",
    comp: "counter",
    label: "Duration",
    config: { min: 1 }
  },

  // appears only if config.unscheduledTasks is true
  {
    key: "unscheduled",
    comp: "twostate",
    label: "",
    config: {
      value: true,
      text: "Unschedule",
      textActive: "Schedule"
    }
  },
  // end

  {
    key: "progress",
    comp: "slider",
    label: "Progress",
    config: { min: 1, max: 100 }
  },

  { key: "links", comp: "links", label: "" }
]

Example​

import { useRef } from "react";
import { Gantt, Editor, getEditorItems } from "@svar-ui/react-gantt";

function App() {
  const api = useRef(null);

  const items = getEditorItems({
    resources: true,
    splitTask: true,
  });

  return (
    <>
      <Gantt ref={api} tasks={tasks} links={links} scales={scales} />
      <Editor api={api} items={items} />
    </>
  );
}

Related articles: