initial

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#ide
+.idea

package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "material-table": "^1.69.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",

src/App.js

@@ -1,23 +1,13 @@
 import logo from './logo.svg';
 import './App.css';
+import {Table} from './Table'
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+        <main>
+            <Table />
+        </main>
     </div>
   );
 }

src/Pert.js

@@ -0,0 +1,8 @@
+
+export function expected(o, n, p) {
+    return (o + 4 * n + p) / 6
+}
+
+export function square(o, p) {
+    return (p - o) / 6
+}

src/Table.js

@@ -0,0 +1,104 @@
+import React from 'react';
+import MaterialTable from "material-table";
+import {expected, square} from "./Pert";
+
+import { forwardRef } from 'react';
+
+import AddBox from '@material-ui/icons/AddBox';
+import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import Check from '@material-ui/icons/Check';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import DeleteOutline from '@material-ui/icons/DeleteOutline';
+import Edit from '@material-ui/icons/Edit';
+import FilterList from '@material-ui/icons/FilterList';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Remove from '@material-ui/icons/Remove';
+import SaveAlt from '@material-ui/icons/SaveAlt';
+import Search from '@material-ui/icons/Search';
+import ViewColumn from '@material-ui/icons/ViewColumn';
+
+export function Table() {
+    const { useState } = React;
+
+    const tableIcons = {
+        Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
+        Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
+        Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+        Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
+        DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+        Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
+        Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
+        Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
+        FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
+        LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
+        NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
+        PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
+        ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
+        Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
+        SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
+        ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
+        ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
+    };
+
+    const [columns, setColumns] = useState([
+        { title: 'Name', field: 'name'},
+        { title: 'Optimistic', field: 'optimistic', type: 'numeric'},
+        { title: 'Nominal', field: 'nominal', type: 'numeric' },
+        { title: 'Pessimistic', field: 'pessimistic', type: 'numeric' },
+        { title: 'μ', field: 'expected', type: 'numeric', readonly: true },
+        { title: 'σ', field: 'square', type: 'numeric', readonly: true },
+    ]);
+
+    const [data, setData] = useState([]);
+
+    return (
+        <MaterialTable
+            icons={tableIcons}
+            title="PERT"
+            columns={columns}
+            data={data}
+            editable={{
+                onRowAdd: newData =>
+                    new Promise((resolve, reject) => {
+                        setTimeout(() => {
+                            newData.expected = expected(newData.optimistic, newData.nominal, newData.pessimistic);
+                            newData.square = square(newData.optimistic, newData.pessimistic);
+
+                            setData([...data, newData]);
+
+                            resolve();
+                        }, 1000)
+                    }),
+                onRowUpdate: (newData, oldData) =>
+                    new Promise((resolve, reject) => {
+                        setTimeout(() => {
+                            const dataUpdate = [...data];
+                            const index = oldData.tableData.id;
+
+                            newData.expected = expected(newData.optimistic, newData.nominal, newData.pessimistic);
+                            newData.square = square(newData.optimistic, newData.pessimistic);
+
+                            dataUpdate[index] = newData;
+                            setData([...dataUpdate]);
+
+                            resolve();
+                        }, 1000)
+                    }),
+                onRowDelete: oldData =>
+                    new Promise((resolve, reject) => {
+                        setTimeout(() => {
+                            const dataDelete = [...data];
+                            const index = oldData.tableData.id;
+                            dataDelete.splice(index, 1);
+                            setData([...dataDelete]);
+
+                            resolve()
+                        }, 1000)
+                    }),
+            }}
+        />
+    )
+}