From 13a458cf4368ddbffdd19b232e41c84d9e78acbd Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 8 May 2024 14:50:11 -0700 Subject: [PATCH 1/4] Add DataGrid --- Client/package-lock.json | 31 ++++ Client/package.json | 1 + Client/src/App.jsx | 29 ++-- Client/src/Components/Label/BaseLabel.css | 1 + Client/src/Pages/Demo/Demo.css | 0 Client/src/Pages/Demo/Demo.jsx | 182 ++++++++++++++++++++++ Client/src/Pages/Home/index.jsx | 58 ------- 7 files changed, 229 insertions(+), 73 deletions(-) create mode 100644 Client/src/Pages/Demo/Demo.css create mode 100644 Client/src/Pages/Demo/Demo.jsx diff --git a/Client/package-lock.json b/Client/package-lock.json index 454b381c9..1ca169357 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -13,6 +13,7 @@ "@fontsource/roboto": "^5.0.13", "@mui/icons-material": "^5.15.16", "@mui/material": "^5.15.16", + "@mui/x-data-grid": "7.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.23.0", @@ -1338,6 +1339,31 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" }, + "node_modules/@mui/x-data-grid": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.3.2.tgz", + "integrity": "sha512-seuRiZ2yyhzeUa7Thzap0xvvizGPSEwJRNOjY9kffjUr+0iXGF3PZGEsMoJ7jCjZ2peHX7FjfqBdssDvizxIDQ==", + "dependencies": { + "@babel/runtime": "^7.24.0", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", + "clsx": "^2.1.0", + "prop-types": "^15.8.1", + "reselect": "^4.1.8" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^5.15.14", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4213,6 +4239,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/reselect": { + "version": "4.1.8", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz", + "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==" + }, "node_modules/resolve": { "version": "2.0.0-next.5", "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.5.tgz", diff --git a/Client/package.json b/Client/package.json index f8025f1de..b03852b78 100644 --- a/Client/package.json +++ b/Client/package.json @@ -15,6 +15,7 @@ "@fontsource/roboto": "^5.0.13", "@mui/icons-material": "^5.15.16", "@mui/material": "^5.15.16", + "@mui/x-data-grid": "7.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.23.0", diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 1c388ab5d..b47c3082e 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,24 +1,23 @@ - -import { Routes, Route } from 'react-router-dom' -import './App.css' -import NotFound from './Pages/NotFound' -import Login from './Pages/Login' -import Register from './Pages/Register' -import HomeLayout from './Layouts/HomeLayout' - +import { Routes, Route } from "react-router-dom"; +import "./App.css"; +import NotFound from "./Pages/NotFound"; +import Login from "./Pages/Login"; +import Register from "./Pages/Register"; +import HomeLayout from "./Layouts/HomeLayout"; +import Demo from "./Pages/Demo/Demo"; function App() { return ( <> - } /> - } /> - } /> - } /> + } /> + } /> + } /> + } /> + } /> - ) + ); } -export default App - +export default App; diff --git a/Client/src/Components/Label/BaseLabel.css b/Client/src/Components/Label/BaseLabel.css index 6aed6326d..961e6c128 100644 --- a/Client/src/Components/Label/BaseLabel.css +++ b/Client/src/Components/Label/BaseLabel.css @@ -3,4 +3,5 @@ display: inline-flex; justify-content: center; align-items: center; + line-height: normal; } diff --git a/Client/src/Pages/Demo/Demo.css b/Client/src/Pages/Demo/Demo.css new file mode 100644 index 000000000..e69de29bb diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx new file mode 100644 index 000000000..7d26b8724 --- /dev/null +++ b/Client/src/Pages/Demo/Demo.jsx @@ -0,0 +1,182 @@ +import React from "react"; +import Button from "../../Components/Button"; +import Link from "../../Components/Link"; +import ColoredLabel from "../../Components/Label/ColoredLabel"; +import { + useTheme, + Switch, + Checkbox, + FormControl, + FormLabel, + FormControlLabel, + Radio, + RadioGroup, +} from "@mui/material"; +import StatusLabel from "../../Components/Label/StautsLabel"; +import Avatar from "../../Components/Avatar/Avatar"; +import avatarImage from "../../assets/Images/avatar_placeholder.png"; +import { DataGrid } from "@mui/x-data-grid"; + +const cols = [ + { + field: "name", + headerName: "Name", + renderCell: (params) => { + return ( +
+ +
+ {params.value.firstName} {params.value.lastName} +
+
+ ); + }, + flex: 1, + }, + { + field: "status", + headerName: "Status", + renderCell: (params) => { + return ; + }, + flex: 1, + }, + { field: "role", headerName: "Role", flex: 1 }, + { field: "team", headerName: "Team", flex: 1 }, + { field: "hireDate", headerName: "Hire date", flex: 1 }, +]; + +const rows = ((count) => { + const arr = []; + for (let i = 0; i < count; i++) { + let row = { + id: i, + name: { + avatarImage: i % 2 === 0 ? avatarImage : null, + firstName: "Placeholder Name", + lastName: i, + }, + status: "Active", + role: "Product Designer", + team: "Marketing", + hireDate: new Date().toLocaleDateString(), + }; + arr.push(row); + } + return arr; +})(100); + +const Demo = () => { + const [radio, setRadio] = React.useState(1); + + const handleRadio = (event) => { + setRadio(event.target.value); + }; + + const change = (event, type) => { + alert(event.target.checked ? `${type} checked` : `${type} unchecked`); + }; + + const theme = useTheme(); + return ( +
+

Buttons

+
+
+

Disabled Buttons

+
+
+
+ +
+

Labels

+
+ + + + +
+ +

Status Lables

+
+ + + + +
+

Avatar

+
+ + + + +
+

Switches

+
+ change(event, "Switch")} /> + + + +
+

Checkboxes

+
+ change(event, "Checkbox")} /> + + + +
+

Radio

+
+ + Demo Radio + +
+ } label="1" /> + } label="2" /> + } + label="3" + /> + } + label="4" + /> +
+ + +
+

Table

+
+ +
+
+ ); +}; +export default Demo; diff --git a/Client/src/Pages/Home/index.jsx b/Client/src/Pages/Home/index.jsx index 604051995..28d7d6ac4 100644 --- a/Client/src/Pages/Home/index.jsx +++ b/Client/src/Pages/Home/index.jsx @@ -1,69 +1,11 @@ import DropdownTeamMember from "../../Components/DropdownTeamMember"; import "./index.css"; -import Button from "../../Components/Button"; -import Link from "../../Components/Link"; -import ColoredLabel from "../../Components/Label/ColoredLabel"; -import { useTheme } from "@mui/material"; -import StatusLabel from "../../Components/Label/StautsLabel"; -import Avatar from "../../Components/Avatar/Avatar"; -import avatarImage from "../../assets/Images/avatar_placeholder.png"; const Home = () => { - const theme = useTheme(); return ( <>
Home
-
-

Buttons

-
-
-

Disabled Buttons

-
-
-
- -
-

Labels

-
- - - - -
- -

Status Lables

-
- - - - -
-

Avatar

-
- - - - -
-
); }; From efc97d4a6e5df8b433c0ce12604697d5e538fc9e Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 8 May 2024 15:03:04 -0700 Subject: [PATCH 2/4] Added tabs --- Client/src/Pages/Demo/Demo.jsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index 7d26b8724..71b48ad49 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -11,6 +11,8 @@ import { FormControlLabel, Radio, RadioGroup, + Tab, + Tabs, } from "@mui/material"; import StatusLabel from "../../Components/Label/StautsLabel"; import Avatar from "../../Components/Avatar/Avatar"; @@ -72,11 +74,16 @@ const rows = ((count) => { const Demo = () => { const [radio, setRadio] = React.useState(1); + const [tab, setTab] = React.useState("departments"); const handleRadio = (event) => { setRadio(event.target.value); }; + const handleTab = (event, newValue) => { + setTab(newValue); + }; + const change = (event, type) => { alert(event.target.checked ? `${type} checked` : `${type} unchecked`); }; @@ -164,7 +171,7 @@ const Demo = () => {

Table

-
+
{ }} />
+

Tabs

+ + + + + +
); }; From 488c1cdb2a7717fc07ace743397aeccc3b445273 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 8 May 2024 15:18:00 -0700 Subject: [PATCH 3/4] Add date picker and dependencies --- Client/package-lock.json | 72 ++++++++++++++++++++++++++++++++++ Client/package.json | 2 + Client/src/Pages/Demo/Demo.jsx | 32 ++++++++++++--- 3 files changed, 100 insertions(+), 6 deletions(-) diff --git a/Client/package-lock.json b/Client/package-lock.json index 1ca169357..79ac309a3 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -14,6 +14,8 @@ "@mui/icons-material": "^5.15.16", "@mui/material": "^5.15.16", "@mui/x-data-grid": "7.3.2", + "@mui/x-date-pickers": "7.3.2", + "dayjs": "1.11.11", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.23.0", @@ -1364,6 +1366,71 @@ "react-dom": "^17.0.0 || ^18.0.0" } }, + "node_modules/@mui/x-date-pickers": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.3.2.tgz", + "integrity": "sha512-i7JaDs1eXSZWyJihfszUHVV0t/C2HvtdMv5tHwv3E3enMx5Hup1vkJ64vZAH2fgGrTHQH8mjxvVsmI6jhDXIUg==", + "dependencies": { + "@babel/runtime": "^7.24.0", + "@mui/base": "^5.0.0-beta.40", + "@mui/system": "^5.15.14", + "@mui/utils": "^5.15.14", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", + "prop-types": "^15.8.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.9.0", + "@emotion/styled": "^11.8.1", + "@mui/material": "^5.15.14", + "date-fns": "^2.25.0 || ^3.2.0", + "date-fns-jalali": "^2.13.0-0", + "dayjs": "^1.10.7", + "luxon": "^3.0.2", + "moment": "^2.29.4", + "moment-hijri": "^2.1.2", + "moment-jalaali": "^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "date-fns": { + "optional": true + }, + "date-fns-jalali": { + "optional": true + }, + "dayjs": { + "optional": true + }, + "luxon": { + "optional": true + }, + "moment": { + "optional": true + }, + "moment-hijri": { + "optional": true + }, + "moment-jalaali": { + "optional": true + } + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2205,6 +2272,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/dayjs": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz", + "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/Client/package.json b/Client/package.json index b03852b78..7d5c47a8d 100644 --- a/Client/package.json +++ b/Client/package.json @@ -16,6 +16,8 @@ "@mui/icons-material": "^5.15.16", "@mui/material": "^5.15.16", "@mui/x-data-grid": "7.3.2", + "@mui/x-date-pickers": "7.3.2", + "dayjs": "1.11.11", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.23.0", diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index 71b48ad49..a9c5ab5c6 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -19,6 +19,10 @@ import Avatar from "../../Components/Avatar/Avatar"; import avatarImage from "../../assets/Images/avatar_placeholder.png"; import { DataGrid } from "@mui/x-data-grid"; +import { DatePicker } from "@mui/x-date-pickers/DatePicker"; +import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider"; +import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; + const cols = [ { field: "name", @@ -75,6 +79,7 @@ const rows = ((count) => { const Demo = () => { const [radio, setRadio] = React.useState(1); const [tab, setTab] = React.useState("departments"); + const [date, setDate] = React.useState("Pick a date!"); const handleRadio = (event) => { setRadio(event.target.value); @@ -84,6 +89,10 @@ const Demo = () => { setTab(newValue); }; + const handleDate = (newValue) => { + setDate(newValue.toString()); + }; + const change = (event, type) => { alert(event.target.checked ? `${type} checked` : `${type} unchecked`); }; @@ -184,12 +193,23 @@ const Demo = () => { />

Tabs

- - - - - - +
+ {" "} + + + + + + +
+ +

Date Picker

+
+ + + +

{date}

+
); }; From 30181908eebbc2bcf5fb32d24f93f75a385b0d19 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Wed, 8 May 2024 15:25:43 -0700 Subject: [PATCH 4/4] Fixed missing pageSizeOptions prop for data grid --- Client/src/Pages/Demo/Demo.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Client/src/Pages/Demo/Demo.jsx b/Client/src/Pages/Demo/Demo.jsx index a9c5ab5c6..d810efd54 100644 --- a/Client/src/Pages/Demo/Demo.jsx +++ b/Client/src/Pages/Demo/Demo.jsx @@ -64,7 +64,7 @@ const rows = ((count) => { name: { avatarImage: i % 2 === 0 ? avatarImage : null, firstName: "Placeholder Name", - lastName: i, + lastName: i.toString(), }, status: "Active", role: "Product Designer", @@ -180,7 +180,7 @@ const Demo = () => {

Table

-
+
{ paginationModel: { page: 0, pageSize: 10 }, }, }} + pageSizeOptions={[5, 10]} />

Tabs