diff options
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | src/App.js | 3 | ||||
| -rw-r--r-- | src/pages/NewSurvey/index.js | 3 | ||||
| -rw-r--r-- | src/pages/Surveys/SurveysList.js | 50 | ||||
| -rw-r--r-- | src/pages/Surveys/index.js | 10 |
5 files changed, 65 insertions, 3 deletions
diff --git a/package.json b/package.json index 72a5caa..dd2f6b1 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.6", "@mui/material": "^5.14.6", + "@mui/x-data-grid": "^6.12.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -41,6 +42,7 @@ ] }, "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "eslint": "^8.48.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-prettier": "^5.0.0", @@ -12,6 +12,7 @@ import SurveyAssignees from "./pages/SurveyAssignees"; import Users from "./pages/Users"; import NavBar from "./components/NavBar"; import useLoginState from "./hooks/useLoginState"; +import Container from "@mui/material/Container"; import CssBaseline from "@mui/material/CssBaseline"; import CustomThemeProvider from "./CustomThemeProvider"; @@ -25,7 +26,7 @@ function routes({ login, logout, isLoggedIn }) { return ( <> <NavBar isLoggedIn={isLoggedIn} pages={navbarLinks} logout={logout} /> - {component} + <Container>{component}</Container> </> ); } diff --git a/src/pages/NewSurvey/index.js b/src/pages/NewSurvey/index.js index a4b711a..f1d4b89 100644 --- a/src/pages/NewSurvey/index.js +++ b/src/pages/NewSurvey/index.js @@ -1,3 +1,4 @@ +import FormBuilder from "../../components/FormBuilder"; export default function NewSurvey() { - return <>NewSurvey</>; + return <FormBuilder />; } diff --git a/src/pages/Surveys/SurveysList.js b/src/pages/Surveys/SurveysList.js new file mode 100644 index 0000000..c9c5b90 --- /dev/null +++ b/src/pages/Surveys/SurveysList.js @@ -0,0 +1,50 @@ +import React from "react"; +import Box from "@mui/material/Box"; +import { DataGrid } from "@mui/x-data-grid"; + +const columns = [ + { field: "id", headerName: "ID", width: 90 }, + { + field: "name", + headerName: "Name", + width: 150, + }, + { + field: "next_run_at", + headerName: "Next Run", + width: 150, + }, +]; + +const rows = [ + { id: 1, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" }, + { id: 2, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" }, + { id: 3, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" }, + { id: 4, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" }, + { id: 5, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" }, + { id: 6, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" }, + { id: 7, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" }, + { id: 8, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" }, + { id: 9, name: "survey", next_run_at: "Mon 28 Aug 16:35:36 EDT 2023" }, +]; + +export default function SurveysList() { + return ( + <Box sx={{ minHeight: "100%", width: "100%" }}> + <DataGrid + rows={rows} + columns={columns} + initialState={{ + pagination: { + paginationModel: { + pageSize: 25, + }, + }, + }} + pageSizeOptions={[25, 50, 100]} + checkboxSelection + disableRowSelectionOnClick + /> + </Box> + ); +} diff --git a/src/pages/Surveys/index.js b/src/pages/Surveys/index.js index 69e854f..558dc06 100644 --- a/src/pages/Surveys/index.js +++ b/src/pages/Surveys/index.js @@ -1,3 +1,11 @@ +import { Stack } from "@mui/material"; +import SurveysList from "./SurveysList"; + export default function Surveys() { - return <>Surveys</>; + return ( + <Stack direction={"column"} sx={{ height: "100%" }}> + <h2>Surveys</h2> + <SurveysList /> + </Stack> + ); } |