From 4406df563e59a7e17f151e1d3db6198bed203c63 Mon Sep 17 00:00:00 2001 From: Maxence Lanone Date: Tue, 22 Nov 2022 15:23:12 +0100 Subject: [PATCH] ajout liste repertoire avec css --- Doc/commande.txt | 12 ++ package-lock.json | 210 ++++++++++++------------- package.json | 2 +- src/pages/Repertoire.js | 143 +++++++++-------- src/styles/components/_repertoire.scss | 129 ++++++++++++--- 5 files changed, 302 insertions(+), 194 deletions(-) create mode 100644 Doc/commande.txt diff --git a/Doc/commande.txt b/Doc/commande.txt new file mode 100644 index 0000000..5e46291 --- /dev/null +++ b/Doc/commande.txt @@ -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 \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index c4893b7..dfa5645 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 1babbb6..6945ca0 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/pages/Repertoire.js b/src/pages/Repertoire.js index bd28525..5a20010 100644 --- a/src/pages/Repertoire.js +++ b/src/pages/Repertoire.js @@ -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 ( - - + useEffect(() => { + api.get('/Customer/All').then((response) => { + setCustomers(response.data); + }); + }, []); + return ( +
+ {/* Create an account page */} - -
- {/* Create an account page */} -
-

Repertoire

-
+
+

Repertoire

+
+
+ + + + +
+ +
+
+
+ +
+
- +
- -
+ + + + + + + Photo + Nom + Prénom + + + + + {contacts.map((contact) => ( + + + {contact.lastname} + {contact.firstname} + + ))} + +
+
-
- -
-
-

Repertoire

-

Liste des utilisateurs

-
-
- - - - -
- - - - - Nom - Prénom - Identifiant - Téléphone + {/* +
+ + + Entreprise + Nom + Prénom + + + + + {contacts.map((contact) => ( + handleClick(event, contact.idcontact)} + // selected={contact.idcontact === selectedIdcontact} + > + + {contact.idcustomer.name} + {contact.lastname} + {contact.firstname} - - - {contacts.map((contact) => ( - handleClick(event, contact.idcontact)} - // selected={contact.idcontact === selectedIdcontact} - > - {contact.lastname} - {contact.firstname} - {contact.phone} - {contact.mail} - - ))} - -
- -
-
-
-
+ ))} + + + */}
- +
); }; diff --git a/src/styles/components/_repertoire.scss b/src/styles/components/_repertoire.scss index b7b355f..7ed5f78 100644 --- a/src/styles/components/_repertoire.scss +++ b/src/styles/components/_repertoire.scss @@ -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; + } + } } } } -} +} \ No newline at end of file