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  }