Create component for create / edit case (#760)

* Create component for create / edit case * Fix definition view using old case values * Update case table when project is set * Add production strategy overview * Make description a textarea * Add editmode for case modal * Remove unused code * Add menu button * Add created date * Remove old case table * Rename columns
equinor · Oct 5, 2022 · a9ea379 · a9ea379
1 parent 7e5dff3
commit a9ea379
Show file tree

Hide file tree

Showing 15 changed files with 1,265 additions and 753 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -23,17 +23,18 @@
         ]
     },
     "dependencies": {
-        "@equinor/eds-core-react": "^0.16.1",
-        "@equinor/eds-icons": "^0.10.0",
-        "@equinor/eds-tokens": "^0.7.0",
+        "@equinor/eds-core-react": "^0.21.0",
+        "@equinor/eds-icons": "^0.14.0",
+        "@equinor/eds-tokens": "^0.7.1",
         "@equinor/fusion": "^3.3.21",
         "@equinor/fusion-framework-module-ag-grid": "^1.0.2",
         "@equinor/fusion-framework-react-app": "^1.0.5",
         "@equinor/fusion-react-ag-grid-addons": "^0.3.2",
+        "@equinor/fusion-react-textarea": "^0.5.14",
         "@lit/reactive-element": "^1.3.0",
         "@material-ui/core": "^4.12.3",
-        "ag-grid-enterprise": "^28.1.0",
         "ag-grid-community": "^28.1.0",
+        "ag-grid-enterprise": "^28.1.0",
         "ag-grid-react": "^28.1.0",
         "axios": "^0.24.0",
         "chart.js": "^3.7.1",
@@ -109,4 +110,4 @@
         "react-scripts": "^5.0.0",
         "typescript": "^4.5.5"
     }
-}
+}
diff --git a/frontend/src/Components/Case/CasesTable.tsx b/frontend/src/Components/Case/CasesTable.tsx
@@ -0,0 +1,228 @@
+/* eslint-disable camelcase */
+import {
+    Button,
+    Menu,
+    Icon,
+    Typography,
+} from "@equinor/eds-core-react"
+import {
+    useState,
+    Dispatch,
+    SetStateAction,
+    useEffect,
+    useMemo,
+    useRef,
+} from "react"
+import { useHistory, useParams } from "react-router-dom"
+import { AgGridReact } from "ag-grid-react"
+import { useAgGridStyles } from "@equinor/fusion-react-ag-grid-addons"
+import {
+    delete_to_trash, edit, folder, library_add, more_vertical,
+} from "@equinor/eds-icons"
+import { Project } from "../../models/Project"
+import { CasePath, ProductionStrategyOverviewToString } from "../../Utils/common"
+import { GetCaseService } from "../../Services/CaseService"
+import "ag-grid-enterprise"
+import EditCaseModal from "./EditCaseModal"
+
+interface Props {
+    project: Project
+    setProject: Dispatch<SetStateAction<Project | undefined>>
+}
+
+interface TableCase {
+    id: string,
+    name: string,
+    description: string,
+    productionStrategyOverview: Components.Schemas.ProductionStrategyOverview,
+    producerCount: number,
+    gasInjectorCount: number,
+    waterInjectorCount: number,
+    createdAt?: string
+}
+
+const CasesTable = ({ project, setProject }: Props) => {
+    const gridRef = useRef(null)
+    const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null)
+    const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)
+    const [editCaseModalIsOpen, setEditCaseModalIsOpen] = useState<boolean>(false)
+    const [selectedCaseId, setSelectedCaseId] = useState<string>()
+
+    const history = useHistory()
+    const { fusionContextId } = useParams<Record<string, string | undefined>>()
+
+    useAgGridStyles()
+
+    const toggleEditCaseModal = () => setEditCaseModalIsOpen(!editCaseModalIsOpen)
+
+    const productionStrategyToString = (p: any) => {
+        const stringValue = ProductionStrategyOverviewToString(p.value)
+        return <div>{stringValue}</div>
+    }
+
+    const onMoreClick = (data: any, target: HTMLElement) => {
+        setSelectedCaseId(data.id)
+        setMenuAnchorEl(target)
+        setIsMenuOpen(!isMenuOpen)
+    }
+
+    const menuButton = (p: any) => (
+        <Button
+            color="primary"
+            onClick={(e) => { if (e.target instanceof HTMLElement) { onMoreClick(p.data, e.target) } }}
+        >
+            <Icon data={more_vertical} />
+        </Button>
+    )
+
+    type SortOrder = "desc" | "asc" | null
+    const order: SortOrder = "desc"
+
+    const [columnDefs] = useState([
+        { field: "name", sort: order },
+        {
+            field: "productionStrategyOverview",
+            cellRenderer: productionStrategyToString,
+            autoHeight: true,
+            wrapText: true,
+            width: 205,
+        },
+        { field: "producerCount", headerName: "Producers", width: 90 },
+        { field: "gasInjectorCount", headerName: "Gas injectors", width: 110 },
+        { field: "waterInjectorCount", headerName: "Water injectors", width: 120 },
+        { field: "createdAt", headerName: "Created", width: 130 },
+        { field: "", cellRenderer: menuButton, width: 95 },
+    ])
+
+    const [rowData, setRowData] = useState<TableCase[]>()
+
+    const casesToRowData = () => {
+        if (project.cases) {
+            const tableCases: TableCase[] = []
+            project.cases.forEach((c) => {
+                const tableCase: TableCase = {
+                    id: c.id!,
+                    name: c.name ?? "",
+                    description: c.description ?? "",
+                    productionStrategyOverview: c.productionStrategyOverview,
+                    producerCount: c.producerCount ?? 0,
+                    waterInjectorCount: c.waterInjectorCount ?? 0,
+                    gasInjectorCount: c.gasInjectorCount ?? 0,
+                    createdAt: c.createdAt?.toISOString().substring(0, 10),
+                }
+                tableCases.push(tableCase)
+            })
+            setRowData(tableCases)
+        }
+    }
+
+    useEffect(() => {
+        casesToRowData()
+    }, project.cases)
+
+    const defaultColDef = useMemo(() => ({
+        sortable: true,
+        filter: true,
+        resizable: true,
+    }), [])
+
+    const duplicateCase = async () => {
+        try {
+            if (selectedCaseId) {
+                const newProject = await (await GetCaseService()).duplicateCase(selectedCaseId, {})
+                setProject(newProject)
+            }
+        } catch (error) {
+            console.error("[ProjectView] error while submitting form data", error)
+        }
+    }
+
+    const deleteCase = async () => {
+        try {
+            if (selectedCaseId) {
+                const newProject = await (await GetCaseService()).deleteCase(selectedCaseId)
+                setProject(newProject)
+            }
+        } catch (error) {
+            console.error("[ProjectView] error while submitting form data", error)
+        }
+    }
+
+    const openCase = async () => {
+        try {
+            if (selectedCaseId) {
+                history.push(CasePath(fusionContextId!, selectedCaseId))
+            }
+        } catch (error) {
+            console.error("[ProjectView] error while submitting form data", error)
+        }
+    }
+
+    return (
+        <div
+            style={{
+                display: "flex", flexDirection: "column", width: "65%",
+            }}
+            className="ag-theme-alpine"
+        >
+            <AgGridReact
+                ref={gridRef}
+                rowData={rowData}
+                columnDefs={columnDefs}
+                defaultColDef={defaultColDef}
+                animateRows
+                domLayout="autoHeight"
+            />
+            <Menu
+                id="menu-complex"
+                open={isMenuOpen}
+                anchorEl={menuAnchorEl}
+                onClose={() => setIsMenuOpen(false)}
+                placement="right"
+            >
+                <Menu.Item
+                    onClick={openCase}
+                >
+                    <Icon data={folder} size={16} />
+                    <Typography group="navigation" variant="menu_title" as="span">
+                        Open
+                    </Typography>
+                </Menu.Item>
+                <Menu.Item
+                    onClick={duplicateCase}
+                >
+                    <Icon data={library_add} size={16} />
+                    <Typography group="navigation" variant="menu_title" as="span">
+                        Duplicate
+                    </Typography>
+                </Menu.Item>
+                <Menu.Item
+                    onClick={toggleEditCaseModal}
+                >
+                    <Icon data={edit} size={16} />
+                    <Typography group="navigation" variant="menu_title" as="span">
+                        Edit
+                    </Typography>
+                </Menu.Item>
+                <Menu.Item
+                    onClick={deleteCase}
+                >
+                    <Icon data={delete_to_trash} size={16} />
+                    <Typography group="navigation" variant="menu_title" as="span">
+                        Delete
+                    </Typography>
+                </Menu.Item>
+            </Menu>
+            <EditCaseModal
+                setProject={setProject}
+                project={project}
+                caseId={selectedCaseId}
+                isOpen={editCaseModalIsOpen}
+                toggleModal={toggleEditCaseModal}
+                editMode
+            />
+        </div>
+    )
+}
+
+export default CasesTable