diff options
Diffstat (limited to 'src/tools/emcoui/src/admin/projects/ProjectsTable.jsx')
-rw-r--r-- | src/tools/emcoui/src/admin/projects/ProjectsTable.jsx | 141 |
1 files changed, 141 insertions, 0 deletions
diff --git a/src/tools/emcoui/src/admin/projects/ProjectsTable.jsx b/src/tools/emcoui/src/admin/projects/ProjectsTable.jsx new file mode 100644 index 00000000..d96d44fa --- /dev/null +++ b/src/tools/emcoui/src/admin/projects/ProjectsTable.jsx @@ -0,0 +1,141 @@ +//======================================================================= +// Copyright (c) 2017-2020 Aarna Networks, Inc. +// All rights reserved. +// ====================================================================== +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// http://www.apache.org/licenses/LICENSE-2.0 +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ======================================================================== +import React from "react"; +import { withStyles, makeStyles } from "@material-ui/core/styles"; +import Table from "@material-ui/core/Table"; +import TableBody from "@material-ui/core/TableBody"; +import TableCell from "@material-ui/core/TableCell"; +import TableContainer from "@material-ui/core/TableContainer"; +import TableHead from "@material-ui/core/TableHead"; +import TableRow from "@material-ui/core/TableRow"; +import Paper from "@material-ui/core/Paper"; +import { Link } from "react-router-dom"; +import IconButton from "@material-ui/core/IconButton"; +import EditIcon from "@material-ui/icons/Edit"; +import DeleteDialog from "../../common/Dialogue" +import DeleteIcon from "@material-ui/icons/Delete"; +import ProjectForm from "./ProjectForm"; +import apiService from "../../services/apiService"; + +const StyledTableCell = withStyles((theme) => ({ + body: { + fontSize: 14, + }, +}))(TableCell); + +const StyledTableRow = withStyles((theme) => ({ + root: { + "&:nth-of-type(odd)": { + backgroundColor: theme.palette.action.hover, + }, + }, +}))(TableRow); + +const useStyles = makeStyles({ + table: { + minWidth: 350, + }, + cell: { + color: "grey", + }, +}); + +export default function ProjectsTable(props) { + const classes = useStyles(); + const [open, setOpen] = React.useState(false); + const [openForm, setOpenForm] = React.useState(false); + const [index, setIndex] = React.useState(0); + + let handleEdit = index => { + setIndex(index); + setOpenForm(true); + } + const handleClose = el => { + if (el.target.innerText === "Delete") { + apiService.deleteProject(props.data[index].metadata.name).then(() => { + console.log("project deleted"); + props.data.splice(index, 1); + props.setProjectsData([...props.data]); + }).catch(err => { + console.log("Error deleting project : ", err) + }) + } + setOpen(false); + setIndex(0); + }; + const handleFormClose = () => { + setIndex(0); + setOpenForm(false); + }; + const handleDelete = (index) => { + setIndex(index); + setOpen(true); + } + const handleSubmit = (data) => { + let payload = { "metadata": data } + apiService.updateProject(payload).then(res => { + props.data[index] = res; + props.setProjectsData([...props.data]); + }).catch(err => { + console.log("Error updating project : ", err); + }) + setOpenForm(false); + }; + + return ( + <React.Fragment> + {(props.data && props.data.length > 0) && + <> + <ProjectForm open={openForm} onClose={handleFormClose} item={props.data[index]} onSubmit={handleSubmit} /> + <DeleteDialog open={open} onClose={handleClose} title={"Delete Project"} + content={`Are you sure you want to delete "${props.data[index] ? props.data[index].metadata.name : ""}" ?`} /> + <TableContainer component={Paper}> + <Table className={classes.table} size="small"> + <TableHead> + <TableRow> + <StyledTableCell>Name</StyledTableCell> + <StyledTableCell>Description</StyledTableCell> + <StyledTableCell>Actions</StyledTableCell> + </TableRow> + </TableHead> + <TableBody> + {props.data.map((row, index) => ( + <StyledTableRow key={row.metadata.name + "" + index}> + <StyledTableCell> + {" "} + <Link to={`/app/projects/${row.metadata.name}`}>{row.metadata.name}</Link> + </StyledTableCell> + <StyledTableCell className={classes.cell}> + {row.metadata.description} + </StyledTableCell> + <StyledTableCell className={classes.cell}> + <IconButton onClick={(e) => handleEdit(index)} title="Edit" > + <EditIcon color="primary" /> + </IconButton> + <IconButton onClick={(e) => handleDelete(index)} title="Delete" > + <DeleteIcon color="secondary" /> + </IconButton> + </StyledTableCell> + </StyledTableRow> + ))} + </TableBody> + </Table> + </TableContainer> + </> + } + + </React.Fragment> + ); +} |