diff --git a/content/fiche-personnel.mdx b/content/fiche-personnel.mdx new file mode 100644 index 0000000..3b17d83 --- /dev/null +++ b/content/fiche-personnel.mdx @@ -0,0 +1,12 @@ +--- +title: Fiche d'employé +slug: fiche-personnel +--- + +// import FichePersonnel from '@/components/personnel/FichePersonnel.jsx' + +# Fiche d'employé + +Voici un composant où on peut rechercher un employé et afficher sa fiche à partir d'un fichier `.csv`. + +{/* */} diff --git a/content/personnel.mdx b/content/personnel.mdx new file mode 100644 index 0000000..7b70a8c --- /dev/null +++ b/content/personnel.mdx @@ -0,0 +1,12 @@ +--- +title: Répertoire du personnel +slug: personnel +--- + +// import RepertoirePersonnel from '@/components/personnel/RepertoirePersonnel.jsx' + +# Liste du personnel + +Voici un composant qui affiche une liste du personnel à partir d'un fichier `.csv`. + +{/* */} diff --git a/data/personnel/liste-personnel.xlsx b/data/personnel/liste-personnel.xlsx new file mode 100644 index 0000000..9f62d7a Binary files /dev/null and b/data/personnel/liste-personnel.xlsx differ diff --git a/data/personnel/photos/_profile.jpg b/data/personnel/photos/_profile.jpg new file mode 100644 index 0000000..396021a Binary files /dev/null and b/data/personnel/photos/_profile.jpg differ diff --git a/data/personnel/photos/alexandre-amar-zifkin.jpg b/data/personnel/photos/alexandre-amar-zifkin.jpg new file mode 100644 index 0000000..92ee1c8 Binary files /dev/null and b/data/personnel/photos/alexandre-amar-zifkin.jpg differ diff --git a/data/personnel/photos/aminata-keita.jpg b/data/personnel/photos/aminata-keita.jpg new file mode 100644 index 0000000..f8ea73c Binary files /dev/null and b/data/personnel/photos/aminata-keita.jpg differ diff --git a/data/personnel/photos/amy-bergeron.jpg b/data/personnel/photos/amy-bergeron.jpg new file mode 100644 index 0000000..98b7786 Binary files /dev/null and b/data/personnel/photos/amy-bergeron.jpg differ diff --git a/data/personnel/photos/anne-hakier.jpg b/data/personnel/photos/anne-hakier.jpg new file mode 100644 index 0000000..b525609 Binary files /dev/null and b/data/personnel/photos/anne-hakier.jpg differ diff --git a/data/personnel/photos/assia-mourid.jpg b/data/personnel/photos/assia-mourid.jpg new file mode 100644 index 0000000..e9ae186 Binary files /dev/null and b/data/personnel/photos/assia-mourid.jpg differ diff --git a/data/personnel/photos/caroline-patenaude.jpg b/data/personnel/photos/caroline-patenaude.jpg new file mode 100644 index 0000000..59b3e69 Binary files /dev/null and b/data/personnel/photos/caroline-patenaude.jpg differ diff --git a/data/personnel/photos/christiane-melancon.jpg b/data/personnel/photos/christiane-melancon.jpg new file mode 100644 index 0000000..2e001f5 Binary files /dev/null and b/data/personnel/photos/christiane-melancon.jpg differ diff --git a/data/personnel/photos/cynthia-gagne.jpg b/data/personnel/photos/cynthia-gagne.jpg new file mode 100644 index 0000000..34a7ba5 Binary files /dev/null and b/data/personnel/photos/cynthia-gagne.jpg differ diff --git a/data/personnel/photos/david-patenaude.jpg b/data/personnel/photos/david-patenaude.jpg new file mode 100644 index 0000000..349fd0f Binary files /dev/null and b/data/personnel/photos/david-patenaude.jpg differ diff --git a/data/personnel/photos/denis-arvisais.jpg b/data/personnel/photos/denis-arvisais.jpg new file mode 100644 index 0000000..9479f9d Binary files /dev/null and b/data/personnel/photos/denis-arvisais.jpg differ diff --git a/data/personnel/photos/dominic-desaulniers.jpg b/data/personnel/photos/dominic-desaulniers.jpg new file mode 100644 index 0000000..3a5c678 Binary files /dev/null and b/data/personnel/photos/dominic-desaulniers.jpg differ diff --git a/data/personnel/photos/emilie-dalpe.jpg b/data/personnel/photos/emilie-dalpe.jpg new file mode 100644 index 0000000..86b29fa Binary files /dev/null and b/data/personnel/photos/emilie-dalpe.jpg differ diff --git a/data/personnel/photos/ginette-melancon-bolduc.jpg b/data/personnel/photos/ginette-melancon-bolduc.jpg new file mode 100644 index 0000000..9eca2ab Binary files /dev/null and b/data/personnel/photos/ginette-melancon-bolduc.jpg differ diff --git a/data/personnel/photos/graham-lavender.jpg b/data/personnel/photos/graham-lavender.jpg new file mode 100644 index 0000000..d0a1a0d Binary files /dev/null and b/data/personnel/photos/graham-lavender.jpg differ diff --git a/data/personnel/photos/indiana-delsart.jpg b/data/personnel/photos/indiana-delsart.jpg new file mode 100644 index 0000000..48558df Binary files /dev/null and b/data/personnel/photos/indiana-delsart.jpg differ diff --git a/data/personnel/photos/jeanfrancois-durnin.jpg b/data/personnel/photos/jeanfrancois-durnin.jpg new file mode 100644 index 0000000..47af81a Binary files /dev/null and b/data/personnel/photos/jeanfrancois-durnin.jpg differ diff --git a/data/personnel/photos/julia-genereux-randall.jpg b/data/personnel/photos/julia-genereux-randall.jpg new file mode 100644 index 0000000..90576d6 Binary files /dev/null and b/data/personnel/photos/julia-genereux-randall.jpg differ diff --git a/data/personnel/photos/marc-olivier-croteau.jpg b/data/personnel/photos/marc-olivier-croteau.jpg new file mode 100644 index 0000000..bc4f790 Binary files /dev/null and b/data/personnel/photos/marc-olivier-croteau.jpg differ diff --git a/data/personnel/photos/marie-claude-poirier.jpg b/data/personnel/photos/marie-claude-poirier.jpg new file mode 100644 index 0000000..b93f72c Binary files /dev/null and b/data/personnel/photos/marie-claude-poirier.jpg differ diff --git a/data/personnel/photos/melanie-masse.jpg b/data/personnel/photos/melanie-masse.jpg new file mode 100644 index 0000000..f68748e Binary files /dev/null and b/data/personnel/photos/melanie-masse.jpg differ diff --git a/data/personnel/photos/nadege-arsa.jpg b/data/personnel/photos/nadege-arsa.jpg new file mode 100644 index 0000000..1655bc5 Binary files /dev/null and b/data/personnel/photos/nadege-arsa.jpg differ diff --git a/data/personnel/photos/nino-gabrielli.jpg b/data/personnel/photos/nino-gabrielli.jpg new file mode 100644 index 0000000..bfc2feb Binary files /dev/null and b/data/personnel/photos/nino-gabrielli.jpg differ diff --git a/data/personnel/photos/pascal-martinolli.jpg b/data/personnel/photos/pascal-martinolli.jpg new file mode 100644 index 0000000..3ce81d2 Binary files /dev/null and b/data/personnel/photos/pascal-martinolli.jpg differ diff --git a/data/personnel/photos/sara-bouhlal.png b/data/personnel/photos/sara-bouhlal.png new file mode 100644 index 0000000..d71cd36 Binary files /dev/null and b/data/personnel/photos/sara-bouhlal.png differ diff --git a/data/personnel/photos/simon-blais-longtin.jpg b/data/personnel/photos/simon-blais-longtin.jpg new file mode 100644 index 0000000..322e230 Binary files /dev/null and b/data/personnel/photos/simon-blais-longtin.jpg differ diff --git a/data/personnel/photos/simon-pierre-crevier.jpg b/data/personnel/photos/simon-pierre-crevier.jpg new file mode 100644 index 0000000..396021a Binary files /dev/null and b/data/personnel/photos/simon-pierre-crevier.jpg differ diff --git a/data/personnel/photos/stephanie-lariviere-roberge.jpg b/data/personnel/photos/stephanie-lariviere-roberge.jpg new file mode 100644 index 0000000..baeeaa1 Binary files /dev/null and b/data/personnel/photos/stephanie-lariviere-roberge.jpg differ diff --git a/data/personnel/photos/stephanie-pham-dang.png b/data/personnel/photos/stephanie-pham-dang.png new file mode 100644 index 0000000..e8042ee Binary files /dev/null and b/data/personnel/photos/stephanie-pham-dang.png differ diff --git a/data/personnel/photos/tatiana-bobeica-talpa.jpg b/data/personnel/photos/tatiana-bobeica-talpa.jpg new file mode 100644 index 0000000..396021a Binary files /dev/null and b/data/personnel/photos/tatiana-bobeica-talpa.jpg differ diff --git a/data/personnel/photos/thien-sa-hoang.png b/data/personnel/photos/thien-sa-hoang.png new file mode 100644 index 0000000..96366d1 Binary files /dev/null and b/data/personnel/photos/thien-sa-hoang.png differ diff --git a/data/personnel/photos/valerie-bastien.jpg b/data/personnel/photos/valerie-bastien.jpg new file mode 100644 index 0000000..202b781 Binary files /dev/null and b/data/personnel/photos/valerie-bastien.jpg differ diff --git a/data/personnel/photos/valerie-rioux.jpg b/data/personnel/photos/valerie-rioux.jpg new file mode 100644 index 0000000..57a9ef7 Binary files /dev/null and b/data/personnel/photos/valerie-rioux.jpg differ diff --git a/data/personnel/photos/viviane-angers.jpg b/data/personnel/photos/viviane-angers.jpg new file mode 100644 index 0000000..c06ec4b Binary files /dev/null and b/data/personnel/photos/viviane-angers.jpg differ diff --git a/package-lock.json b/package-lock.json index 9f1dc7a..1ec00e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@mdx-js/react": "^3.0.1", "@mui/icons-material": "^5.15.14", "@mui/material": "^5.15.14", + "@mui/x-data-grid": "^7.1.0", "@sindresorhus/slugify": "^2.2.1", "gatsby": "^5.13.3", "gatsby-plugin-alias-imports": "^1.0.5", @@ -25,6 +26,7 @@ "gatsby-plugin-sitemap": "^6.13.1", "gatsby-plugin-webfonts": "^2.3.2", "gatsby-source-filesystem": "^5.13.1", + "gatsby-transformer-excel": "^5.13.1", "gatsby-transformer-sharp": "^5.13.1", "react": "^18.2.0", "react-dom": "^18.2.0" @@ -3209,6 +3211,31 @@ } } }, + "node_modules/@mui/x-data-grid": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-7.1.0.tgz", + "integrity": "sha512-VnvX6ZyVUw/cjosh6SvkPtTmukFIa587JHcnWDPnaOijSOg6Zq72xbzEqqwZn9oOZCj88FD7lEDVHUIjoncDvg==", + "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/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -10754,6 +10781,21 @@ "node": ">=18.0.0" } }, + "node_modules/gatsby-transformer-excel": { + "version": "5.13.1", + "resolved": "https://registry.npmjs.org/gatsby-transformer-excel/-/gatsby-transformer-excel-5.13.1.tgz", + "integrity": "sha512-fifbHc17sABX9ZtV8dhu93s7nZErwes3Ig7Rpli7t5GwO7LsdweYQgkmK24GWfMRwcKczWkTQO+xo0tq0dwkwA==", + "dependencies": { + "@babel/runtime": "^7.20.13", + "xlsx": "^0.18.3" + }, + "engines": { + "node": ">=18.0.0" + }, + "peerDependencies": { + "gatsby": "^5.0.0-next" + } + }, "node_modules/gatsby-transformer-sharp": { "version": "5.13.1", "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-5.13.1.tgz", @@ -15778,6 +15820,11 @@ "resolved": "https://registry.npmjs.org/require-package-name/-/require-package-name-2.0.1.tgz", "integrity": "sha512-uuoJ1hU/k6M0779t3VMVIYpb2VMJk05cehCaABFhXaibcbvfgR8wKiozLjVFSzJPmQMRqIcO0HMyTFqfV09V6Q==" }, + "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": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -18110,6 +18157,18 @@ "node": ">=8" } }, + "node_modules/xlsx": { + "version": "0.20.1", + "resolved": "https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz", + "integrity": "sha512-hA7SYmn/H3cJ1VGi7kmSKxbEXCEn5UVJlwYFSFXhLe54wPUvW+80TmR5l+TZh4nJCw8G/e0SuZUfvqlTIh40hw==", + "license": "Apache-2.0", + "bin": { + "xlsx": "bin/xlsx.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/xml2js": { "version": "0.4.17", "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.17.tgz", diff --git a/package.json b/package.json index 59f7811..0439af6 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@mdx-js/react": "^3.0.1", "@mui/icons-material": "^5.15.14", "@mui/material": "^5.15.14", + "@mui/x-data-grid": "^7.1.0", "@sindresorhus/slugify": "^2.2.1", "gatsby": "^5.13.3", "gatsby-plugin-alias-imports": "^1.0.5", @@ -30,8 +31,12 @@ "gatsby-plugin-sitemap": "^6.13.1", "gatsby-plugin-webfonts": "^2.3.2", "gatsby-source-filesystem": "^5.13.1", + "gatsby-transformer-excel": "^5.13.1", "gatsby-transformer-sharp": "^5.13.1", "react": "^18.2.0", "react-dom": "^18.2.0" + }, + "overrides": { + "xlsx": "https://cdn.sheetjs.com/xlsx-latest/xlsx-latest.tgz" } } diff --git a/plugins/gatsby-plugin-bib-theme/BibTheme.js b/plugins/gatsby-plugin-bib-theme/BibTheme.js index 588cfd2..6b3a393 100644 --- a/plugins/gatsby-plugin-bib-theme/BibTheme.js +++ b/plugins/gatsby-plugin-bib-theme/BibTheme.js @@ -4,7 +4,7 @@ import CssBaseline from '@mui/material/CssBaseline' import { responsiveFontSizes, experimental_extendTheme as extendTheme, Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles' import tokens from './tokens' -const theme = responsiveFontSizes(extendTheme(tokens)) +export const theme = responsiveFontSizes(extendTheme(tokens)) // const GlobalStyles = withStyles(theme => { // const isLight = theme.palette.mode === 'light' diff --git a/src/components/personnel/FichePersonnel.jsx b/src/components/personnel/FichePersonnel.jsx new file mode 100644 index 0000000..60f82ae --- /dev/null +++ b/src/components/personnel/FichePersonnel.jsx @@ -0,0 +1,166 @@ +import { useStaticQuery, graphql } from 'gatsby' +import { Box, Chip, Grid, Typography, IconButton, Stack, Autocomplete, TextField } from '@mui/material' +import { EmailRounded } from '@mui/icons-material' +import { createTheme, ThemeProvider } from '@mui/material/styles' +import { frFR } from '@mui/x-data-grid/locales' +import tokens from '../../../plugins/gatsby-plugin-bib-theme/tokens' +import { GatsbyImage, getImage, StaticImage } from 'gatsby-plugin-image' + +const theme = createTheme(tokens, frFR) + +const columns = [ + { + field: 'nomComplet', + headerName: 'Nom', + valueGetter: (_, row) => `${row.prenom} ${row.nom}`, + renderCell: ({ row, value }) => { + console.log('row: %o', row) + return ( + + + + + + + ) + }, + }, + // { + // field: 'prenom', + // headerName: 'Prénom', + // }, + // { + // field: 'nom', + // headerName: 'Nom', + // }, + // { + // field: 'courriel', + // headerName: 'Courriel' + // }, + // { + // field: 'fonction', + // headerName: 'Fonction', + // }, + { + field: 'disciplines', + headerName: 'Disciplines', + flex: 1, + renderCell: ({ value }) => ( + + {value.split('|').map((discipline) => ( + + ))} + + ), + }, + // { + // field: 'photo', + // headerName: 'Photo', + // }, +] + +function disciplinesSort(a, b) { + const nameA = a.discipline.toUpperCase() // ignore upper and lowercase + const nameB = b.discipline.toUpperCase() // ignore upper and lowercase + if (nameA < nameB) { + return -1 + } + if (nameA > nameB) { + return 1 + } + + // names must be equal + return 0 +} + +export default function ListePersonnel() { + const data = useStaticQuery(graphql` + query MyQuery { + allFile(filter: { sourceInstanceName: { eq: "personnel" }, relativeDirectory: { eq: "photos" } }) { + nodes { + name + extension + ext + childImageSharp { + gatsbyImageData(width: 50, formats: WEBP) + } + sourceInstanceName + id + relativePath + relativeDirectory + root + absolutePath + base + dir + } + } + allListePersonnelXlsxSheet1 { + nodes { + id + nom + photo + prenom + fonction + disciplines + courriel + } + } + } + `) + console.log('allFile: %o', data.allFile.nodes) + const disciplinesMap = new Map() + const fallbackPicture = data.allFile.nodes.find((node) => node.name === '_profile').childImageSharp.gatsbyImageData + + data.allListePersonnelXlsxSheet1.nodes.forEach(({ courriel, disciplines, fonction, id, nom, photo, prenom }) => { + const _disciplines = disciplines.split(/\s*\|\s*/) + + const photoId = photo.replace(/\.\w+$/, '') + const photoData = data.allFile.nodes.find((node) => node.name === photoId)?.childImageSharp.gatsbyImageData ?? fallbackPicture + + _disciplines.forEach((discipline) => { + if (!disciplinesMap.has(discipline)) { + disciplinesMap.set(discipline, []) + } + + disciplinesMap.get(discipline).push({ courriel, discipline, fonction, nom, photo: photoData, prenom }) + }) + }) + + const personnelByDiscipline = [...disciplinesMap.values()].flat().sort(disciplinesSort) + + return ( + option.discipline} + renderInput={(params) => } + renderOption={(props, option) => { + const matches = option.structured_formatting.main_text_matched_substrings || [] + + const parts = parse( + option.structured_formatting.main_text, + matches.map((match) => [match.offset, match.offset + match.length]) + ) + + return ( +
  • + + + {/* */}awef + + + {parts.map((part, index) => ( + + {part.text} + + ))} + + {option.structured_formatting.secondary_text} + + + +
    • + ) + }} + /> + ) +} diff --git a/src/components/personnel/RepertoirePersonnel.jsx b/src/components/personnel/RepertoirePersonnel.jsx new file mode 100644 index 0000000..2e0991c --- /dev/null +++ b/src/components/personnel/RepertoirePersonnel.jsx @@ -0,0 +1,118 @@ +import { useStaticQuery, graphql } from 'gatsby' +import { DataGrid } from '@mui/x-data-grid' +import { Box, Chip, IconButton, Stack } from '@mui/material' +import { EmailRounded } from '@mui/icons-material' +import { createTheme, ThemeProvider } from '@mui/material/styles' +import { frFR } from '@mui/x-data-grid/locales' +import tokens from '../../../plugins/gatsby-plugin-bib-theme/tokens' +import { GatsbyImage, getImage, StaticImage } from 'gatsby-plugin-image' + +const theme = createTheme(tokens, frFR) + +const columns = [ + { + field: 'nomComplet', + headerName: 'Nom', + valueGetter: (_, row) => `${row.prenom} ${row.nom}`, + renderCell: ({ row, value }) => { + console.log('row: %o', row) + return ( + + + + + + + ) + }, + }, + // { + // field: 'prenom', + // headerName: 'Prénom', + // }, + // { + // field: 'nom', + // headerName: 'Nom', + // }, + // { + // field: 'courriel', + // headerName: 'Courriel' + // }, + // { + // field: 'fonction', + // headerName: 'Fonction', + // }, + { + field: 'disciplines', + headerName: 'Disciplines', + flex: 1, + renderCell: ({ value }) => ( + + {value.split('|').map((discipline) => ( + + ))} + + ), + }, + // { + // field: 'photo', + // headerName: 'Photo', + // }, +] + +export default function RepertoirePersonnel() { + const data = useStaticQuery(graphql` + query MyQuery { + allFile(filter: { sourceInstanceName: { eq: "personnel" }, relativeDirectory: { eq: "photos" } }) { + nodes { + name + extension + ext + childImageSharp { + gatsbyImageData(width: 50, formats: WEBP) + } + sourceInstanceName + id + relativePath + relativeDirectory + root + absolutePath + base + dir + } + } + allListePersonnelXlsxSheet1 { + nodes { + id + nom + photo + prenom + fonction + disciplines + courriel + } + } + } + `) + console.log('allFile: %o', data.allFile.nodes) + const fallbackPicture = data.allFile.nodes.find((node) => node.name === '_profile').childImageSharp.gatsbyImageData + const rows = data.allListePersonnelXlsxSheet1.nodes.map(({ courriel, disciplines, fonction, id, nom, photo, prenom }) => { + console.log('photo: %s', photo) + const photoId = photo.replace(/\.\w+$/, '') + return { + id, + courriel, + disciplines, + fonction, + nom, + prenom, + photo: data.allFile.nodes.find((node) => node.name === photoId)?.childImageSharp.gatsbyImageData ?? fallbackPicture, + } + }) + + return ( + + + + ) +}