go.charczuk.com@v0.0.0-20240327042549-bc490516bd1a/projects/nodes/static/_nextjs/src/components/dialogManageGraphs.tsx (about) 1 /** 2 * Copyright (c) 2024 - Present. Will Charczuk. All rights reserved. 3 * Use of this source code is governed by a MIT license that can be found in the LICENSE file at the root of the repository. 4 */ 5 import { Button, Dialog, DialogBody, DialogFooter, HTMLTable, Icon, Intent, Tooltip } from "@blueprintjs/core"; 6 import { useEffect, useState } from "react"; 7 import * as graphApi from '../api/graphs'; 8 9 export interface DialogManageGraphsProps { 10 isOpen: boolean; 11 graphs: graphApi.Graph[]; 12 onClose: () => void; 13 onEdit: (graphId: string) => void; 14 onDelete: (graphId: string) => void; 15 } 16 17 export function DialogManageGraphs(props: DialogManageGraphsProps) { 18 const [graphs, setGraphs] = useState<graphApi.Graph[]>(props.graphs); 19 20 useEffect(() => { 21 setGraphs(props.graphs) 22 }, [props.graphs]); 23 24 return ( 25 <Dialog title={`Manage Graphs`} 26 autoFocus={false} 27 isOpen={props.isOpen} 28 onClose={props.onClose} 29 icon="cog" 30 isCloseButtonShown={true} 31 style={{ minWidth: "1024px" }} 32 > 33 <DialogBody> 34 <table className="bp5-html-table bp5-html-table-striped bp5-interactive bp5-compact" style={{ width: '100%' }}> 35 <thead> 36 <tr> 37 <th>Name</th> 38 <th>Stabilizations</th> 39 <th>Last Updated</th> 40 <th colSpan={3}>Actions</th> 41 </tr> 42 </thead> 43 <tbody> 44 {graphs.map((g, i) => 45 <tr key={i}> 46 <td>{g.label}</td> 47 <td>{g.stabilization_num}</td> 48 <td>{`${g.metadata.updated_utc}`}</td> 49 <td><a role="button" className="bp5-button bp5-minimal" href={`/?graph_id=${g.id}`}><span className="bp5-icon-standard bp5-icon-document-open" style={{ marginRight: "5px" }} />Open</a></td> 50 <td><a role="button" className="bp5-button bp5-minimal" href={`/api/v1/graph/${g.id}/save`}><span className="bp5-icon-standard bp5-icon-cloud-download" style={{ marginRight: "5px" }} />Download</a></td> 51 <td><Button icon="edit" minimal={true} text="Edit" onClick={() => props.onEdit(g.id)} /></td> 52 <td><Button icon="delete" minimal={true} text="Delete" intent={Intent.DANGER} onClick={() => props.onDelete(g.id)} /></td> 53 </tr> 54 )} 55 </tbody> 56 </table> 57 </DialogBody> 58 <DialogFooter actions={<> 59 <Tooltip content="Close the dialog"> 60 <Button onClick={props.onClose} icon="cross">Close</Button> 61 </Tooltip> 62 </>}> 63 </DialogFooter> 64 </Dialog > 65 ) 66 }