v2.4.3

2025-12-22 20:22:30 +00:00
parent d4429300aa
commit bb81e7a336
90 changed files with 3676 additions and 1828 deletions
@@ -0,0 +1,160 @@
+import { useState, useMemo } from 'react';
+import { getData } from '../data';
+import { Gantt, Editor, ContextMenu } from '../../src';
+import { DatePicker, Field, Checkbox } from '@svar-ui/react-core';
+import { Calendar } from '@svar-ui/gantt-store';
+import './ProScheduleAll.css';
+
+function ProScheduleAll({ skinSettings }) {
+  const data = useMemo(
+    () =>
+      getData('calendar', {
+        splitTasks: true,
+        unscheduledTasks: true,
+      }),
+    [],
+  );
+
+  const [api, setApi] = useState();
+  const [tasks, setTasks] = useState(data.tasks);
+
+  const calendar = useMemo(() => new Calendar(), []);
+  const [projectStart, setProjectStart] = useState(new Date(2026, 3, 2));
+  const [projectEnd, setProjectEnd] = useState(new Date(2026, 4, 20));
+
+  const [criticalPath, setCriticalPath] = useState({ type: 'flexible' });
+  const [baselines, setBaselines] = useState(true);
+  const [unscheduledTasks, setUnscheduledTasks] = useState(true);
+  const [splitTasks, setSplitTasks] = useState(true);
+
+  const [cellHeight, setCellHeight] = useState(44);
+
+  const markers = useMemo(
+    () =>
+      projectStart
+        ? [
+            {
+              text: 'Start',
+              start: projectStart,
+            },
+          ]
+        : [],
+    [projectStart],
+  );
+
+  function onCriticalPathChange() {
+    setCriticalPath(
+      criticalPath?.type === 'flexible' ? null : { type: 'flexible' },
+    );
+  }
+
+  function onBaselinesChange(ev) {
+    setBaselines(ev.value);
+    setCellHeight(ev.value ? 44 : 38);
+  }
+
+  function onSplitChange() {
+    setTasks(
+      api.serialize().map((t) => {
+        //recalculate duration
+        if (t.segments) delete t.duration;
+        return t;
+      }),
+    );
+  }
+
+  //calculate baselines after summary dates are set
+  function init(ganttApi) {
+    setApi(ganttApi);
+    setTasks(
+      ganttApi.serialize().map((t) => {
+        return {
+          ...t,
+          base_start: t.start,
+          base_end: t.end,
+          base_duration: t.segments ? 0 : t.duration,
+        };
+      }),
+    );
+  }
+
+  /*data.links.push({
+		source: 2,
+		target: 3,
+		type: "e2s",
+		id: 100,
+	});
+	data.links.push({
+		source: 30,
+		target: 4,
+		type: "e2s",
+		id: 101,
+	});*/
+
+  return (
+    <div className="demo wx-D71fWZ7y">
+      <div className="bar wx-D71fWZ7y">
+        <Field label="Project start" position="left" width="250px">
+          <DatePicker
+            value={projectStart}
+            onChange={({ value }) => setProjectStart(value)}
+          />
+        </Field>
+        <Field label="Project end" position="left" width="250px">
+          <DatePicker
+            value={projectEnd}
+            onChange={({ value }) => setProjectEnd(value)}
+          />
+        </Field>
+        <Checkbox
+          value={!!criticalPath}
+          label="Critical path"
+          onChange={onCriticalPathChange}
+        />
+        <Checkbox
+          value={baselines}
+          label="Baselines"
+          onChange={onBaselinesChange}
+        />
+        <Checkbox
+          value={unscheduledTasks}
+          label="Unscheduled tasks"
+          onChange={({ value }) => setUnscheduledTasks(value)}
+        />
+        <Checkbox
+          value={splitTasks}
+          label="Split tasks"
+          onChange={(ev) => {
+            setSplitTasks(ev.value);
+            onSplitChange();
+          }}
+        />
+      </div>
+      <div className="gantt wx-D71fWZ7y">
+        {api && <Editor api={api} />}
+        <ContextMenu api={api}>
+          <Gantt
+            init={init}
+            {...skinSettings}
+            cellWidth={50}
+            cellHeight={cellHeight}
+            tasks={tasks}
+            links={data.links}
+            scales={data.scales}
+            calendar={calendar}
+            schedule={{ auto: true }}
+            criticalPath={criticalPath}
+            projectStart={projectStart}
+            projectEnd={projectEnd}
+            markers={markers}
+            baselines={baselines}
+            unscheduledTasks={unscheduledTasks}
+            splitTasks={splitTasks}
+          />
+        </ContextMenu>
+      </div>
+    </div>
+  );
+}
+
+export default ProScheduleAll;