chore: add @syncfusion/ej2-react-gantt

Signed-off-by: Logan McAnsh <logan@mcan.sh>
mcansh · Aug 3, 2022 · 5847d74 · 5847d74
1 parent 6422fc4
commit 5847d74
Show file tree

Hide file tree

Showing 3 changed files with 389 additions and 3 deletions.
diff --git a/apps/remix-app/app/routes/index.tsx b/apps/remix-app/app/routes/index.tsx
@@ -1,7 +1,49 @@
+import {
+  ColumnDirective,
+  ColumnsDirective,
+  Edit,
+  GanttComponent,
+  Inject,
+  Selection,
+  Toolbar,
+} from "@syncfusion/ej2-react-gantt";
 import { Horse, Heart, Cube } from "phosphor-react";
 import { Button } from "ui";
 
 export default function Index() {
+  let taskFields = {
+    id: "TaskID",
+    name: "TaskName",
+    startDate: "StartDate",
+    duration: "Duration",
+    progress: "Progress",
+    resourceInfo: "resources",
+    work: "Work",
+    child: "subtasks",
+  };
+  let resourceFields = {
+    id: "resourceId",
+    name: "resourceName",
+    unit: "Unit",
+  };
+  let editSettings = {
+    allowAdding: true,
+    allowEditing: true,
+    allowDeleting: true,
+    allowTaskbarEditing: true,
+    showDeleteConfirmDialog: true,
+  };
+  let workUnit = "Hour";
+  let toolbar = [
+    "Add",
+    "Edit",
+    "Update",
+    "Delete",
+    "Cancel",
+    "ExpandAll",
+    "CollapseAll",
+  ];
+
   return (
     <div
       style={{
@@ -15,9 +57,148 @@ export default function Index() {
       </h1>
       <Button text="booper" />
 
-      <Horse size={32} />
-      <Heart color="#AE2983" weight="fill" size={32} />
-      <Cube color="teal" weight="duotone" size={32} />
+      <div>
+        <Horse size={32} />
+        <Heart color="#AE2983" weight="fill" size={32} />
+        <Cube color="teal" weight="duotone" size={32} />
+      </div>
+
+      <div>
+        <GanttComponent
+          id="root"
+          dataSource={data}
+          treeColumnIndex={1}
+          allowSelection={true}
+          allowResizing={true}
+          highlightWeekends={true}
+          toolbar={toolbar}
+          editSettings={editSettings}
+          resourceFields={resourceFields}
+          taskFields={taskFields}
+          height="410px"
+          resources={ProjectResources}
+        >
+          <ColumnsDirective>
+            <ColumnDirective field="TaskID" visible={false}>
+              {" "}
+            </ColumnDirective>
+            <ColumnDirective
+              field="TaskName"
+              headerText="Task Name"
+              width="180"
+            >
+              {" "}
+            </ColumnDirective>
+            <ColumnDirective
+              field="resources"
+              headerText="Resources"
+              width="160"
+            >
+              {" "}
+            </ColumnDirective>
+            <ColumnDirective field="Work" width="110">
+              {" "}
+            </ColumnDirective>
+            <ColumnDirective field="Duration" width="100">
+              {" "}
+            </ColumnDirective>
+          </ColumnsDirective>
+          <Inject services={[Toolbar, Edit, Selection]} />
+        </GanttComponent>
+      </div>
     </div>
   );
 }
+
+let ProjectResources = [
+  { resourceId: 1, resourceName: "Martin Tamer" },
+  { resourceId: 2, resourceName: "Rose Fuller" },
+  { resourceId: 3, resourceName: "Margaret Buchanan" },
+  { resourceId: 4, resourceName: "Fuller King" },
+  { resourceId: 5, resourceName: "Davolio Fuller" },
+  { resourceId: 6, resourceName: "Van Jack" },
+  { resourceId: 7, resourceName: "Fuller Buchanan" },
+  { resourceId: 8, resourceName: "Jack Davolio" },
+  { resourceId: 9, resourceName: "Tamer Vinet" },
+  { resourceId: 10, resourceName: "Vinet Fuller" },
+  { resourceId: 11, resourceName: "Bergs Anton" },
+  { resourceId: 12, resourceName: "Construction Supervisor" },
+];
+let data = [
+  {
+    TaskID: 1,
+    TaskName: "Project initiation",
+    StartDate: new Date("03/29/2019"),
+    EndDate: new Date("04/21/2019"),
+    subtasks: [
+      {
+        TaskID: 2,
+        TaskName: "Identify site location",
+        StartDate: new Date("03/29/2019"),
+        Duration: 2,
+        Progress: 30,
+        Work: 16,
+        resources: [{ resourceId: 1, Unit: 70 }, 6],
+      },
+      {
+        TaskID: 3,
+        TaskName: "Perform soil test",
+        StartDate: new Date("03/29/2019"),
+        Duration: 4,
+        resources: [2, 3, 5],
+        Work: 96,
+      },
+      {
+        TaskID: 4,
+        TaskName: "Soil test approval",
+        StartDate: new Date("03/29/2019"),
+        Duration: 1,
+        Work: 16,
+        resources: [8, { resourceId: 9, Unit: 50 }],
+        Progress: 30,
+      },
+    ],
+  },
+  {
+    TaskID: 5,
+    TaskName: "Project estimation",
+    StartDate: new Date("03/29/2019"),
+    EndDate: new Date("04/21/2019"),
+    subtasks: [
+      {
+        TaskID: 6,
+        TaskName: "Develop floor plan for estimation",
+        StartDate: new Date("03/29/2019"),
+        Duration: 3,
+        Progress: 30,
+        resources: [{ resourceId: 4, Unit: 50 }],
+        Work: 30,
+      },
+      {
+        TaskID: 7,
+        TaskName: "List materials",
+        StartDate: new Date("04/01/2019"),
+        Duration: 3,
+        Work: 48,
+        resources: [4, 8],
+      },
+      {
+        TaskID: 8,
+        TaskName: "Estimation approval",
+        StartDate: new Date("04/01/2019"),
+        Duration: 2,
+        Work: 60,
+        resources: [12, { resourceId: 5, Unit: 70 }],
+      },
+    ],
+  },
+  {
+    TaskID: 9,
+    TaskName: "Sign contract",
+    StartDate: new Date("04/01/2019"),
+    Duration: 1,
+    Progress: 30,
+    resources: [12],
+    Work: 24,
+  },
+];
diff --git a/apps/remix-app/package.json b/apps/remix-app/package.json
@@ -13,6 +13,7 @@
     "@remix-run/node": "0.0.0-experimental-ea38b6458",
     "@remix-run/react": "0.0.0-experimental-ea38b6458",
     "@remix-run/vercel": "0.0.0-experimental-ea38b6458",
+    "@syncfusion/ej2-react-gantt": "20.2.39",
     "phosphor-react": "1.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",