diff options
Diffstat (limited to 'src/tools/emcoui/src/admin/projects/ProjectsTable.jsx')
| -rw-r--r-- | src/tools/emcoui/src/admin/projects/ProjectsTable.jsx | 218 |
1 files changed, 121 insertions, 97 deletions
diff --git a/src/tools/emcoui/src/admin/projects/ProjectsTable.jsx b/src/tools/emcoui/src/admin/projects/ProjectsTable.jsx index d96d44fa..fb03155d 100644 --- a/src/tools/emcoui/src/admin/projects/ProjectsTable.jsx +++ b/src/tools/emcoui/src/admin/projects/ProjectsTable.jsx @@ -11,7 +11,7 @@ // 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"; @@ -24,118 +24,142 @@ 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 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, - }, + body: { + fontSize: 14, + }, }))(TableCell); const StyledTableRow = withStyles((theme) => ({ - root: { - "&:nth-of-type(odd)": { - backgroundColor: theme.palette.action.hover, - }, + root: { + "&:nth-of-type(odd)": { + backgroundColor: theme.palette.action.hover, }, + }, }))(TableRow); const useStyles = makeStyles({ - table: { - minWidth: 350, - }, - cell: { - color: "grey", - }, + 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); + 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); + 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]); }) - 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> - </> - } + .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); + }; - </React.Fragment> - ); + 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> + ); } |