add display table

qccoders · Dec 7, 2019 · f064f4a · f064f4a
1 parent bafe5a4
commit f064f4a
Show file tree

Hide file tree

Showing 5 changed files with 260 additions and 156 deletions.
diff --git a/web/package.json b/web/package.json
@@ -8,6 +8,7 @@
     "@material-ui/icons": "^3.0.1",
     "ajv": "^6.5.4",
     "axios": "^0.18.0",
+    "clsx": "^1.0.4",
     "material-ui-pickers": "^2.2.1",
     "moment": "^2.22.2",
     "proptypes": "^1.1.0",

diff --git a/web/src/reports/EventReport.js b/web/src/reports/EventReport.js
@@ -3,172 +3,194 @@
     in the project root for full license information.
 */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import { withStyles } from '@material-ui/core/styles';
-import { 
-    Card, 
-    CardContent, 
-    Typography, 
-    CircularProgress, 
-    ListSubheader, 
-    Button,
-    Fab,
-} from '@material-ui/core';
-import { Add, EventAvailable, Event, Today } from '@material-ui/icons';
-
-import { withContext } from '../shared/ContextProvider';
-import { userCanView } from '../util';
-import ContentWrapper from '../shared/ContentWrapper';
-import EventList from '../events/EventList';
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { withStyles } from "@material-ui/core/styles";
+import {
+  Card,
+  CardContent,
+  Typography,
+  CircularProgress,
+  ListSubheader,
+  Button,
+  Fab
+} from "@material-ui/core";
+import { Add, EventAvailable, Event, Today } from "@material-ui/icons";
+
+import { withContext } from "../shared/ContextProvider";
+import { userCanView } from "../util";
+import ContentWrapper from "../shared/ContentWrapper";
+import EventList from "../events/EventList";
+import ReportTable from "./ReportTable";
 
 const styles = {
-    fab: {
-        margin: 0,
-        top: 'auto',
-        right: 20,
-        bottom: 20,
-        left: 'auto',
-        position: 'fixed',
-        zIndex: 1000,
-    },
-    card: {
-        minHeight: 273,
-        maxWidth: 800,
-        margin: 'auto',
-    },
-    refreshSpinner: {
-        position: 'fixed',
-        left: 0,
-        right: 0,
-        marginLeft: 'auto',
-        marginRight: 'auto',
-        marginTop: 80,
-    },
+  fab: {
+    margin: 0,
+    top: "auto",
+    right: 20,
+    bottom: 20,
+    left: "auto",
+    position: "fixed",
+    zIndex: 1000
+  },
+  card: {
+    minHeight: 273,
+    maxWidth: 800,
+    margin: "auto"
+  },
+  refreshSpinner: {
+    position: "fixed",
+    left: 0,
+    right: 0,
+    marginLeft: "auto",
+    marginRight: "auto",
+    marginTop: 80
+  }
 };
 
 const showCount = 3;
 
 class EventReport extends Component {
-    state = {
-        events: [],
-        loadApi: {
-            isExecuting: false,
-            isErrored: false,
-        },
-        refreshApi: {
-            isExecuting: false,
-            isErrored: false,
-        },
+  state = {
+    events: [],
+    loadApi: {
+      isExecuting: false,
+      isErrored: false
+    },
+    refreshApi: {
+      isExecuting: false,
+      isErrored: false
+    },
+    eventDialog: {
+      open: false,
+      intent: "add",
+      event: undefined
+    },
+    show: showCount
+  };
+
+  componentWillMount = () => {
+    this.refresh("refreshApi");
+  };
+
+  handleEditClick = event => {
+    this.setState({
+      eventDialog: {
+        open: true,
+        intent: "update",
+        event: event
+      }
+    });
+  };
+
+  handleAddClick = () => {
+    this.setState({
+      eventDialog: {
+        open: true,
+        intent: "add",
+        event: undefined
+      }
+    });
+  };
+
+  handleShowMoreClick = () => {
+    this.setState({ show: this.state.show + showCount });
+  };
+
+  handleEventDialogClose = result => {
+    this.setState(
+      {
         eventDialog: {
-            open: false,
-            intent: 'add',
-            event: undefined,
-        },
-        show: showCount,
-    }
-
-    componentWillMount = () => {
-        this.refresh('refreshApi');
-    }
-
-    handleEditClick = (event) => {
-        this.setState({
-            eventDialog: {
-                open: true,
-                intent: 'update',
-                event: event,
-            },
-        });
-    }
-
-    handleAddClick = () => {
-        this.setState({
-            eventDialog: {
-                open: true,
-                intent: 'add',
-                event: undefined,
-            },
-        });
-    }
-
-    handleShowMoreClick = () => {
-        this.setState({ show: this.state.show + showCount });
-    }
-
-    handleEventDialogClose = (result) => {
-        this.setState({
-            eventDialog: {
-                ...this.state.eventDialog,
-                open: false,
+          ...this.state.eventDialog,
+          open: false
+        }
+      },
+      () => {
+        if (!result) return;
+        this.props.context.showMessage(result);
+        this.refresh("refreshApi");
+      }
+    );
+  };
+
+  refresh = apiType => {
+    this.setState(
+      { [apiType]: { ...this.state[apiType], isExecuting: true } },
+      () => {
+        this.props.context.api
+          .get("/v1/events?offset=0&limit=100&orderBy=DESC")
+          .then(
+            response => {
+              this.setState({
+                events: response.data,
+                [apiType]: { isExecuting: false, isErrored: false }
+              });
             },
-        }, () => {
-            if (!result) return;
-            this.props.context.showMessage(result);
-            this.refresh('refreshApi');
-        });
-    }
-
-    refresh = (apiType) => {
-        this.setState({ [apiType]: { ...this.state[apiType], isExecuting: true }}, () => {
-            this.props.context.api.get('/v1/events?offset=0&limit=100&orderBy=DESC')
-            .then(response => {
-                this.setState({ 
-                    events: response.data,
-                    [apiType]: { isExecuting: false, isErrored: false },
-                });
-            }, error => {
-                this.setState({ [apiType]: { isExecuting: false, isErrored: true } });
-            });
-        });
-    }
-
-    render() {
-        let classes = this.props.classes;
-        let { events, loadApi, refreshApi, show, eventDialog } = this.state;
-
-        events = events.map(e => ({ ...e, startDate: new Date(e.startDate).getTime(), endDate: new Date(e.endDate).getTime() }));
-
-        let now = new Date().getTime();
-
-        let current = events.filter(e => e.startDate <= now && e.endDate >= now);
-        let upcoming = events.filter(e => e.startDate > now);
-
-        let past = events.filter(e => e.endDate < now);
-        let shownPastList = past.slice(0, show);
-
-        return (
-            <div className={classes.root}>
-                <ContentWrapper api={loadApi}>
-                    <Card className={classes.card}>
-                        <CardContent>
-                            <Typography gutterBottom variant="h5">
-                                Event Report
-                            </Typography>
-                            {refreshApi.isExecuting ?
-                                <CircularProgress size={30} color={'secondary'} className={classes.refreshSpinner}/> :
-                                <span>hello world</span>
-                            }
-                        </CardContent>
-                    </Card>
-                    { userCanView() &&
-                        <Fab
-                            color="secondary" 
-                            className={classes.fab}
-                            onClick={this.handleAddClick}
-                        >
-                            <Add/>
-                        </Fab>
-                    }
-                </ContentWrapper>
-            </div>
-        );
-    }
+            error => {
+              this.setState({
+                [apiType]: { isExecuting: false, isErrored: true }
+              });
+            }
+          );
+      }
+    );
+  };
+
+  render() {
+    let classes = this.props.classes;
+    let { events, loadApi, refreshApi, show, eventDialog } = this.state;
+
+    events = events.map(e => ({
+      ...e,
+      startDate: new Date(e.startDate).getTime(),
+      endDate: new Date(e.endDate).getTime()
+    }));
+
+    let now = new Date().getTime();
+
+    let current = events.filter(e => e.startDate <= now && e.endDate >= now);
+    let upcoming = events.filter(e => e.startDate > now);
+
+    let past = events.filter(e => e.endDate < now);
+    let shownPastList = past.slice(0, show);
+
+    return (
+      <div className={classes.root}>
+        <ContentWrapper api={loadApi}>
+          <Card className={classes.card}>
+            <CardContent>
+              <Typography gutterBottom variant="h5">
+                Event Report
+              </Typography>
+              {refreshApi.isExecuting ? (
+                <CircularProgress
+                  size={30}
+                  color={"secondary"}
+                  className={classes.refreshSpinner}
+                />
+              ) : (
+                <ReportTable />
+              )}
+            </CardContent>
+          </Card>
+          {userCanView() && (
+            <Fab
+              color="secondary"
+              className={classes.fab}
+              onClick={this.handleAddClick}
+            >
+              <Add />
+            </Fab>
+          )}
+        </ContentWrapper>
+      </div>
+    );
+  }
 }
 
 EventReport.propTypes = {
-    classes: PropTypes.object.isRequired,
+  classes: PropTypes.object.isRequired
 };
 
-export default withStyles(styles)(withContext(EventReport)); 
+export default withStyles(styles)(withContext(EventReport));