Clément VERDOIRE 3 years ago
commit 5d3e63b8f7

@ -0,0 +1,12 @@
cd server-api
npm install --save body-parser
npm install --save cors
npm install --save mysql
npm install --save express
npm install -g nodemon
npm install --save-dev nodemon
npm install --save axios
npm install @mui/material @emotion/react @emotion/styled

210
package-lock.json generated

@ -15,7 +15,7 @@
"@fullcalendar/list": "^5.11.3",
"@fullcalendar/react": "^5.11.2",
"@fullcalendar/timegrid": "^5.11.3",
"@mui/material": "^5.10.13",
"@mui/material": "^5.10.15",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
@ -1812,11 +1812,11 @@
}
},
"node_modules/@babel/runtime": {
"version": "7.19.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
"integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
"version": "7.20.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
"integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
"regenerator-runtime": "^0.13.10"
},
"engines": {
"node": ">=6.9.0"
@ -3233,14 +3233,14 @@
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
},
"node_modules/@mui/base": {
"version": "5.0.0-alpha.105",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.105.tgz",
"integrity": "sha512-4IPBcJQIgVVXQvN6DQMoCHed52GBtwSqYs0jD0dDcMR3o76AodQtpEeWFz3p7mJoc6f/IHBl9U6jEfL1r/kM4g==",
"version": "5.0.0-alpha.107",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.107.tgz",
"integrity": "sha512-HX/BD8CSe+Y/dpbZ5aKJScJhKQ/Hw6du2yd68Upv2cO67bwixyZ64h3aNcdDu7RQzI7nrZQm0JykffP1Orgq0g==",
"dependencies": {
"@babel/runtime": "^7.19.0",
"@babel/runtime": "^7.20.1",
"@emotion/is-prop-valid": "^1.2.0",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.9",
"@mui/types": "^7.2.1",
"@mui/utils": "^5.10.15",
"@popperjs/core": "^2.11.6",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
@ -3270,25 +3270,25 @@
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/@mui/core-downloads-tracker": {
"version": "5.10.13",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.13.tgz",
"integrity": "sha512-zWkWPV/SaNdsIdxAWiuVGZ+Ue3BkfSIlU/BFIrJmuUcwiIa7gQsbI/DOpj1KzLvqZhdEe2wC1aG4nCHfzgc1Hg==",
"version": "5.10.15",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.15.tgz",
"integrity": "sha512-xFcS0LpdF0Q1qJrrNsYUv9PU+ovvhCEPTOMw2jcpEFtl3CA87dLpvztORR5oE2UBFjWF7qLQLOwboQU1+xC7Cw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui"
}
},
"node_modules/@mui/material": {
"version": "5.10.13",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.13.tgz",
"integrity": "sha512-TkkT1rNc0/hhL4/+zv4gYcA6egNWBH/1Tz+azoTnQIUdZ32fgwFI2pFX2KVJNTt30xnLznxDWtTv7ilmJQ52xw==",
"dependencies": {
"@babel/runtime": "^7.19.0",
"@mui/base": "5.0.0-alpha.105",
"@mui/core-downloads-tracker": "^5.10.13",
"@mui/system": "^5.10.13",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.9",
"version": "5.10.15",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.15.tgz",
"integrity": "sha512-OqoHfUtVMppFHgk2M95j+pR8MWfLKhzSdz4aKEfIpFrHIHbYang+oY7Iy/exX+vqpZSEGHgHQ0cGX0hGTGx9cg==",
"dependencies": {
"@babel/runtime": "^7.20.1",
"@mui/base": "5.0.0-alpha.107",
"@mui/core-downloads-tracker": "^5.10.15",
"@mui/system": "^5.10.15",
"@mui/types": "^7.2.1",
"@mui/utils": "^5.10.15",
"@types/react-transition-group": "^4.4.5",
"clsx": "^1.2.1",
"csstype": "^3.1.1",
@ -3328,12 +3328,12 @@
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"node_modules/@mui/private-theming": {
"version": "5.10.9",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.9.tgz",
"integrity": "sha512-BN7/CnsVPVyBaQpDTij4uV2xGYHHHhOgpdxeYLlIu+TqnsVM7wUeF+37kXvHovxM6xmL5qoaVUD98gDC0IZnHg==",
"version": "5.10.15",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.15.tgz",
"integrity": "sha512-l7CsUj5kYdYz118/JHSvZZTYE9WnIWwln0td5jYATnYw9cNX4ygD6AkKOUYZ1Jitp1YLJqcO8jCP9E5/Nql9IQ==",
"dependencies": {
"@babel/runtime": "^7.19.0",
"@mui/utils": "^5.10.9",
"@babel/runtime": "^7.20.1",
"@mui/utils": "^5.10.15",
"prop-types": "^15.8.1"
},
"engines": {
@ -3354,12 +3354,12 @@
}
},
"node_modules/@mui/styled-engine": {
"version": "5.10.8",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.8.tgz",
"integrity": "sha512-w+y8WI18EJV6zM/q41ug19cE70JTeO6sWFsQ7tgePQFpy6ToCVPh0YLrtqxUZXSoMStW5FMw0t9fHTFAqPbngw==",
"version": "5.10.14",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.14.tgz",
"integrity": "sha512-bgKdM57ExogWpIfhL/ngSlzF4FhbH00vYF+Y5VALTob4uslFqje0xzoWmbfcCn4cZt2NXxZJIwhsq4vzo5itlw==",
"dependencies": {
"@babel/runtime": "^7.19.0",
"@emotion/cache": "^11.10.3",
"@babel/runtime": "^7.20.1",
"@emotion/cache": "^11.10.5",
"csstype": "^3.1.1",
"prop-types": "^15.8.1"
},
@ -3385,15 +3385,15 @@
}
},
"node_modules/@mui/system": {
"version": "5.10.13",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.13.tgz",
"integrity": "sha512-Xzx26Asu5fVlm0ucm+gnJmeX4Y1isrpVDvqxX4yJaOT7Fzmd8Lfq9ih3QMfZajns5LMtUiOuCQlVFRtUG5IY7A==",
"dependencies": {
"@babel/runtime": "^7.19.0",
"@mui/private-theming": "^5.10.9",
"@mui/styled-engine": "^5.10.8",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.9",
"version": "5.10.15",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.15.tgz",
"integrity": "sha512-WZmgmpYTMXAaD++QetaaM/miwhNh1JJY1dH7MJH/3Fuv3r3gnhfzE6A55lDqWxkQmlWUO2DCn/cnNZ0FkSdZUg==",
"dependencies": {
"@babel/runtime": "^7.20.1",
"@mui/private-theming": "^5.10.15",
"@mui/styled-engine": "^5.10.14",
"@mui/types": "^7.2.1",
"@mui/utils": "^5.10.15",
"clsx": "^1.2.1",
"csstype": "^3.1.1",
"prop-types": "^15.8.1"
@ -3424,9 +3424,9 @@
}
},
"node_modules/@mui/types": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.0.tgz",
"integrity": "sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA==",
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.1.tgz",
"integrity": "sha512-c5mSM7ivD8EsqK6HUi9hQPr5V7TJ/IRThUQ9nWNYPdhCGriTSQV4vL6DflT99LkM+wLiIS1rVjphpEWxERep7A==",
"peerDependencies": {
"@types/react": "*"
},
@ -3437,11 +3437,11 @@
}
},
"node_modules/@mui/utils": {
"version": "5.10.9",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.9.tgz",
"integrity": "sha512-2tdHWrq3+WCy+G6TIIaFx3cg7PorXZ71P375ExuX61od1NOAJP1mK90VxQ8N4aqnj2vmO3AQDkV4oV2Ktvt4bA==",
"version": "5.10.15",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.15.tgz",
"integrity": "sha512-6AW4MLBUijJi31hxx+6utTJM2q/4hbO+QiMdtwM+f4Iy+BfFnh/elhb08apxNYLfuugPnXXpkDmzEjg+8uDU9g==",
"dependencies": {
"@babel/runtime": "^7.19.0",
"@babel/runtime": "^7.20.1",
"@types/prop-types": "^15.7.5",
"@types/react-is": "^16.7.1 || ^17.0.0",
"prop-types": "^15.8.1",
@ -15195,9 +15195,9 @@
}
},
"node_modules/regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"node_modules/regenerator-transform": {
"version": "0.15.0",
@ -19095,11 +19095,11 @@
}
},
"@babel/runtime": {
"version": "7.19.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.19.0.tgz",
"integrity": "sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==",
"version": "7.20.1",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.1.tgz",
"integrity": "sha512-mrzLkl6U9YLF8qpqI7TB82PESyEGjm/0Ly91jG575eVxMMlb8fYfOXFZIJ8XfLrJZQbm7dlKry2bJmXBUEkdFg==",
"requires": {
"regenerator-runtime": "^0.13.4"
"regenerator-runtime": "^0.13.10"
}
},
"@babel/runtime-corejs3": {
@ -20092,14 +20092,14 @@
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
},
"@mui/base": {
"version": "5.0.0-alpha.105",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.105.tgz",
"integrity": "sha512-4IPBcJQIgVVXQvN6DQMoCHed52GBtwSqYs0jD0dDcMR3o76AodQtpEeWFz3p7mJoc6f/IHBl9U6jEfL1r/kM4g==",
"version": "5.0.0-alpha.107",
"resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.107.tgz",
"integrity": "sha512-HX/BD8CSe+Y/dpbZ5aKJScJhKQ/Hw6du2yd68Upv2cO67bwixyZ64h3aNcdDu7RQzI7nrZQm0JykffP1Orgq0g==",
"requires": {
"@babel/runtime": "^7.19.0",
"@babel/runtime": "^7.20.1",
"@emotion/is-prop-valid": "^1.2.0",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.9",
"@mui/types": "^7.2.1",
"@mui/utils": "^5.10.15",
"@popperjs/core": "^2.11.6",
"clsx": "^1.2.1",
"prop-types": "^15.8.1",
@ -20114,21 +20114,21 @@
}
},
"@mui/core-downloads-tracker": {
"version": "5.10.13",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.13.tgz",
"integrity": "sha512-zWkWPV/SaNdsIdxAWiuVGZ+Ue3BkfSIlU/BFIrJmuUcwiIa7gQsbI/DOpj1KzLvqZhdEe2wC1aG4nCHfzgc1Hg=="
"version": "5.10.15",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.10.15.tgz",
"integrity": "sha512-xFcS0LpdF0Q1qJrrNsYUv9PU+ovvhCEPTOMw2jcpEFtl3CA87dLpvztORR5oE2UBFjWF7qLQLOwboQU1+xC7Cw=="
},
"@mui/material": {
"version": "5.10.13",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.13.tgz",
"integrity": "sha512-TkkT1rNc0/hhL4/+zv4gYcA6egNWBH/1Tz+azoTnQIUdZ32fgwFI2pFX2KVJNTt30xnLznxDWtTv7ilmJQ52xw==",
"requires": {
"@babel/runtime": "^7.19.0",
"@mui/base": "5.0.0-alpha.105",
"@mui/core-downloads-tracker": "^5.10.13",
"@mui/system": "^5.10.13",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.9",
"version": "5.10.15",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.10.15.tgz",
"integrity": "sha512-OqoHfUtVMppFHgk2M95j+pR8MWfLKhzSdz4aKEfIpFrHIHbYang+oY7Iy/exX+vqpZSEGHgHQ0cGX0hGTGx9cg==",
"requires": {
"@babel/runtime": "^7.20.1",
"@mui/base": "5.0.0-alpha.107",
"@mui/core-downloads-tracker": "^5.10.15",
"@mui/system": "^5.10.15",
"@mui/types": "^7.2.1",
"@mui/utils": "^5.10.15",
"@types/react-transition-group": "^4.4.5",
"clsx": "^1.2.1",
"csstype": "^3.1.1",
@ -20145,53 +20145,53 @@
}
},
"@mui/private-theming": {
"version": "5.10.9",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.9.tgz",
"integrity": "sha512-BN7/CnsVPVyBaQpDTij4uV2xGYHHHhOgpdxeYLlIu+TqnsVM7wUeF+37kXvHovxM6xmL5qoaVUD98gDC0IZnHg==",
"version": "5.10.15",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.15.tgz",
"integrity": "sha512-l7CsUj5kYdYz118/JHSvZZTYE9WnIWwln0td5jYATnYw9cNX4ygD6AkKOUYZ1Jitp1YLJqcO8jCP9E5/Nql9IQ==",
"requires": {
"@babel/runtime": "^7.19.0",
"@mui/utils": "^5.10.9",
"@babel/runtime": "^7.20.1",
"@mui/utils": "^5.10.15",
"prop-types": "^15.8.1"
}
},
"@mui/styled-engine": {
"version": "5.10.8",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.8.tgz",
"integrity": "sha512-w+y8WI18EJV6zM/q41ug19cE70JTeO6sWFsQ7tgePQFpy6ToCVPh0YLrtqxUZXSoMStW5FMw0t9fHTFAqPbngw==",
"version": "5.10.14",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.14.tgz",
"integrity": "sha512-bgKdM57ExogWpIfhL/ngSlzF4FhbH00vYF+Y5VALTob4uslFqje0xzoWmbfcCn4cZt2NXxZJIwhsq4vzo5itlw==",
"requires": {
"@babel/runtime": "^7.19.0",
"@emotion/cache": "^11.10.3",
"@babel/runtime": "^7.20.1",
"@emotion/cache": "^11.10.5",
"csstype": "^3.1.1",
"prop-types": "^15.8.1"
}
},
"@mui/system": {
"version": "5.10.13",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.13.tgz",
"integrity": "sha512-Xzx26Asu5fVlm0ucm+gnJmeX4Y1isrpVDvqxX4yJaOT7Fzmd8Lfq9ih3QMfZajns5LMtUiOuCQlVFRtUG5IY7A==",
"requires": {
"@babel/runtime": "^7.19.0",
"@mui/private-theming": "^5.10.9",
"@mui/styled-engine": "^5.10.8",
"@mui/types": "^7.2.0",
"@mui/utils": "^5.10.9",
"version": "5.10.15",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.15.tgz",
"integrity": "sha512-WZmgmpYTMXAaD++QetaaM/miwhNh1JJY1dH7MJH/3Fuv3r3gnhfzE6A55lDqWxkQmlWUO2DCn/cnNZ0FkSdZUg==",
"requires": {
"@babel/runtime": "^7.20.1",
"@mui/private-theming": "^5.10.15",
"@mui/styled-engine": "^5.10.14",
"@mui/types": "^7.2.1",
"@mui/utils": "^5.10.15",
"clsx": "^1.2.1",
"csstype": "^3.1.1",
"prop-types": "^15.8.1"
}
},
"@mui/types": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.0.tgz",
"integrity": "sha512-lGXtFKe5lp3UxTBGqKI1l7G8sE2xBik8qCfrLHD5olwP/YU0/ReWoWT7Lp1//ri32dK39oPMrJN8TgbkCSbsNA==",
"version": "7.2.1",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.1.tgz",
"integrity": "sha512-c5mSM7ivD8EsqK6HUi9hQPr5V7TJ/IRThUQ9nWNYPdhCGriTSQV4vL6DflT99LkM+wLiIS1rVjphpEWxERep7A==",
"requires": {}
},
"@mui/utils": {
"version": "5.10.9",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.9.tgz",
"integrity": "sha512-2tdHWrq3+WCy+G6TIIaFx3cg7PorXZ71P375ExuX61od1NOAJP1mK90VxQ8N4aqnj2vmO3AQDkV4oV2Ktvt4bA==",
"version": "5.10.15",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.15.tgz",
"integrity": "sha512-6AW4MLBUijJi31hxx+6utTJM2q/4hbO+QiMdtwM+f4Iy+BfFnh/elhb08apxNYLfuugPnXXpkDmzEjg+8uDU9g==",
"requires": {
"@babel/runtime": "^7.19.0",
"@babel/runtime": "^7.20.1",
"@types/prop-types": "^15.7.5",
"@types/react-is": "^16.7.1 || ^17.0.0",
"prop-types": "^15.8.1",
@ -28579,9 +28579,9 @@
}
},
"regenerator-runtime": {
"version": "0.13.9",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz",
"integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA=="
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"regenerator-transform": {
"version": "0.15.0",

@ -10,7 +10,7 @@
"@fullcalendar/list": "^5.11.3",
"@fullcalendar/react": "^5.11.2",
"@fullcalendar/timegrid": "^5.11.3",
"@mui/material": "^5.10.13",
"@mui/material": "^5.10.15",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",

@ -1,26 +1,17 @@
import NavigationDashboard from '../components/NavigationDashboard';
import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route, Routes } from 'react-router-dom';
import { v4 as uuid } from 'uuid';
import Header from '../components/Contact/Header';
import AddContact from '../components/Contact/AddContact'
import ContactList from '../components/Contact/ContactList';
import ContactDetail from '../components/Contact/ContactDetail';
import EditContact from '../components/Contact/EditContact';
import axios from 'axios';
import user from '../images/user.jpg';
import { Link, useLocation } from 'react-router-dom';
import { TableContainer, Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';
import { Paper } from '@mui/material';
const api = axios.create({
baseURL: 'http://localhost:8080'
})
function Repertoire() {
const [theme, setTheme] = useState("light");
if (localStorage.getItem('theme') && localStorage.getItem("theme") !== '' && localStorage.getItem("theme") !== theme) {
setTheme(localStorage.getItem("theme"))
@ -29,6 +20,7 @@ function Repertoire() {
const [contacts, setContacts] = useState([]);
const [SearchTerm, setSearchTerm] = useState("");
const [SearchResults, setSearchResults] = useState([]);
const [customers, setCustomers] = useState([]);
useEffect(() => {
api.get('/Contact/All').then((response) => {
@ -37,72 +29,91 @@ function Repertoire() {
});
}, []);
return (
<body className={theme}>
useEffect(() => {
api.get('/Customer/All').then((response) => {
setCustomers(response.data);
});
}, []);
return (
<div className={theme} id="page_repertoire">
{/* Create an account page */}
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css"></link>
<div className="page_Repertoire">
{/* Create an account page */}
<div className="haut_de_page">
<h2 className="titre">Repertoire</h2>
<div className="rechLogo">
<div className="haut_de_page">
<h2 className="titre">Repertoire</h2>
<div className="rechLogo">
<div className="input_box">
<input type="search" placeholder="Rechercher..." />
<span className="search">
<i class="uil uil-search search-icon"></i>
</span>
</div>
<img className="logo" srcSet="./LogoApp.svg" />
</div>
</div>
<div className="bas_de_page">
<NavigationDashboard />
<div className="contenu">
<span className="searchAndAddButton">
<div className="input_box">
<input type="search" placeholder="Rechercher..."/>
<input type="search" placeholder="Rechercher..." />
<span className="search">
<i class="uil uil-search search-icon"></i>
</span>
</div>
<img className="logo" srcSet="./LogoApp.svg"/>
</div>
<button className="boutonAddContact">Ajouter</button>
</span>
<TableContainer component={Paper} className="tabListContact">
<Table>
<TableHead>
<TableRow>
<TableCell>Photo</TableCell>
<TableCell>Nom</TableCell>
<TableCell>Prénom</TableCell>
</TableRow>
</TableHead>
<TableBody>
{contacts.map((contact) => (
<TableRow key={contact.idcontact}>
<TableCell><img className="photoContact" src={user} /></TableCell>
<TableCell>{contact.lastname}</TableCell>
<TableCell>{contact.firstname}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
<div className="bas_de_page">
<NavigationDashboard />
<div className="Repertoire">
<div className="Titre_Formulaire_Rech">
<p className="Titre">Repertoire</p>
<p className="Sous-titre">Liste des utilisateurs</p>
<div className="rechLogo">
<div className="input_box">
<input type="search" placeholder="Rechercher..." />
<span className="search">
<i class="uil uil-search search-icon"></i>
</span>
</div>
<TableContainer component={Paper} sx={{ maxHeight: 0.8 }}>
<Table aria-label="simple table" size="small" stickyHeader>
<TableHead >
<TableRow>
<TableCell sx={{ bgcolor: 'info.main' }} align="left">Nom</TableCell>
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Prénom</TableCell>
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Identifiant</TableCell>
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Téléphone</TableCell>
{/* <TableContainer component={Paper} sx={{ maxHeight: 0.8 }} className="tabListContact">
<Table aria-label="simple table" size="small" stickyHeader>
<TableHead >
<TableRow>
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Entreprise</TableCell>
<TableCell sx={{ bgcolor: 'info.main' }} align="left">Nom</TableCell>
<TableCell sx={{ bgcolor: 'info.main' }} align="center">Prénom</TableCell>
</TableRow>
</TableHead>
<TableBody >
{contacts.map((contact) => (
<TableRow
key={contact.idcontact}
hover
// onClick={(event) => handleClick(event, contact.idcontact)}
// selected={contact.idcontact === selectedIdcontact}
>
<TableCell align="center">{contact.idcustomer.name}</TableCell>
<TableCell align="left">{contact.lastname}</TableCell>
<TableCell align="center">{contact.firstname}</TableCell>
</TableRow>
</TableHead>
<TableBody >
{contacts.map((contact) => (
<TableRow
key={contact.idcontact}
hover
// onClick={(event) => handleClick(event, contact.idcontact)}
// selected={contact.idcontact === selectedIdcontact}
>
<TableCell align="left">{contact.lastname}</TableCell>
<TableCell align="center">{contact.firstname}</TableCell>
<TableCell align="center">{contact.phone}</TableCell>
<TableCell align="center">{contact.mail}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</div>
</div>
</div>
</div>
))}
</TableBody>
</Table>
</TableContainer> */}
</div>
</body>
</div>
);
};

@ -1,17 +1,12 @@
.dark{
background-color: $xiketic;
color: white;
}
body {
.page_Repertoire {
#page_repertoire {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: auto;
height: 100vh;
.haut_de_page {
display: flex;
flex-direction: row;
@ -21,7 +16,7 @@ body {
height: 10%;
align-items: center;
margin: 10px 10px 5px 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
@ -31,7 +26,7 @@ body {
.titre {
font-size: 40px;
}
.rechLogo {
display: flex;
flex-direction: row;
@ -85,9 +80,9 @@ body {
width: 100px;
height: 100px;
}
}
}
}
.bas_de_page {
display: flex;
flex-direction: row;
@ -98,7 +93,7 @@ body {
.nav_bar_verticale {
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: space-evenly;
align-items: center;
width: 5%;
margin: 5px 5px 10px 10px;
@ -153,7 +148,7 @@ body {
border: none;
cursor: pointer;
.logo_nav_bar{
.logo_nav_bar {
display: flex;
margin: 10px;
height: 50px;
@ -162,15 +157,105 @@ body {
}
}
.Repertoire {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 94.3%;
height: auto;
margin: 5px 10px 10px 5px;
.contenu {
width: 100%;
.searchAndAddButton {
height: 100px;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
justify-content: space-between;
.boutonAddContact {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
min-width: 150px;
margin: 30px 30px;
border-radius: 25px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.input_box {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 40px;
max-width: 350px;
width: 100%;
margin: 30px 30px;
border-radius: 25px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
input {
position: relative;
width: 100%;
height: 100%;
padding: 0 15px 0 65px;
outline: none;
border: none;
border-radius: 25px;
font-size: 16px;
font-weight: 400;
color: #333;
}
.search {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 60px;
border-radius: 25px 0 0 25px;
.search-icon {
font-size: 30px;
color: black;
}
}
}
}
.tabListContact {
margin-bottom: 20px;
padding-right: 10px;
height: 82%;
scroll-behavior: smooth;
overflow-y: scroll;
&::-webkit-scrollbar {
width: 15px;
}
&::-webkit-scrollbar-track {
background: #f1f1f1;
}
&::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb:hover {
background: #555;
}
.photoContact{
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 1px solid black;
}
}
}
}
}
}
}
Loading…
Cancel
Save