├── .github
└── FUNDING.yml
├── public
├── favicon.png
├── pix
│ ├── bug.png
│ ├── cd.png
│ ├── comics.png
│ ├── music.png
│ ├── resto.gif
│ ├── resto.png
│ ├── star.png
│ ├── todo.gif
│ ├── todo.png
│ ├── user.png
│ ├── wine.gif
│ ├── contact.gif
│ ├── contact.png
│ ├── doc
│ │ ├── cog.png
│ │ ├── model.png
│ │ ├── object.png
│ │ ├── wrench.png
│ │ ├── metadata.png
│ │ └── tag_pink.png
│ ├── logos
│ │ ├── react.png
│ │ ├── graphql.png
│ │ └── hasura.png
│ ├── music
│ │ ├── moby.jpg
│ │ ├── sade.jpg
│ │ ├── ashana.jpg
│ │ ├── moby-18.jpg
│ │ ├── moby-play.jpg
│ │ ├── snatam_kaur.jpg
│ │ ├── ashana-beloved.jpg
│ │ ├── naid-varanasi.jpg
│ │ ├── sade-loversrock.jpg
│ │ ├── snatamkaur-beloved.jpg
│ │ └── snatamkaur-sacredchants.jpg
│ ├── wine-bottle.png
│ ├── wine-glass.png
│ ├── wine
│ │ ├── stjean.png
│ │ ├── wineno.png
│ │ ├── yquem.png
│ │ ├── flags
│ │ │ ├── ar.png
│ │ │ ├── at.png
│ │ │ ├── bg.png
│ │ │ ├── ca.png
│ │ │ ├── ch.png
│ │ │ ├── cl.png
│ │ │ ├── cy.png
│ │ │ ├── de.png
│ │ │ ├── es.png
│ │ │ ├── fr.png
│ │ │ ├── gr.png
│ │ │ ├── hu.png
│ │ │ ├── it.png
│ │ │ ├── lu.png
│ │ │ ├── nz.png
│ │ │ ├── pt.png
│ │ │ ├── us.png
│ │ │ └── za.png
│ │ ├── winered.png
│ │ ├── winerose.png
│ │ ├── macrostie.png
│ │ ├── montelena.png
│ │ ├── vinecliff.png
│ │ ├── winespark.png
│ │ ├── winesweet.png
│ │ └── winewhite.png
│ ├── comics
│ │ ├── alim1.jpg
│ │ ├── incal1.jpg
│ │ ├── lama1.jpg
│ │ ├── quete1.jpg
│ │ ├── ronin.jpg
│ │ ├── saga1.jpg
│ │ ├── surfer.jpg
│ │ ├── carmenmc1.jpg
│ │ ├── codemc1.jpg
│ │ ├── flags
│ │ │ ├── fr.png
│ │ │ └── us.png
│ │ ├── garulfo1.jpg
│ │ ├── lanfeust1.jpg
│ │ ├── neffous1.jpg
│ │ ├── salammbo1.jpg
│ │ ├── skydoll1.jpg
│ │ ├── fleaudieux1.jpg
│ │ ├── metabaron1.jpg
│ │ ├── androidssheep.jpg
│ │ ├── imperfect-future.jpg
│ │ └── ghost-in-the-shell.jpg
│ └── screenshots
│ │ ├── many-list.png
│ │ ├── one-edit.png
│ │ ├── many-cards.png
│ │ ├── one-browse.png
│ │ ├── analytics-charts.png
│ │ ├── analytics-stats.png
│ │ ├── comfort-activity.png
│ │ └── comfort-overview.png
├── manifest.json
└── index.html
├── src
├── pages
│ ├── Demos
│ │ ├── Demos.scss
│ │ └── Demos.jsx
│ ├── PageNotFound
│ │ ├── PageNotFound.scss
│ │ └── PageNotFound.jsx
│ ├── Home
│ │ ├── Gallery.scss
│ │ ├── Gallery.jsx
│ │ └── Home.scss
│ └── Docs
│ │ ├── components
│ │ ├── ProjectBadges.jsx
│ │ ├── PrettyJSON.scss
│ │ └── SampleModel.jsx
│ │ ├── Doc.scss
│ │ ├── SampleModels.jsx
│ │ ├── Views.scss
│ │ ├── docConfig.js
│ │ ├── Configuration.jsx
│ │ ├── Views.jsx
│ │ └── Doc.jsx
├── components
│ ├── shell
│ │ ├── SideBar
│ │ │ ├── spirals.png
│ │ │ ├── svg
│ │ │ │ ├── eye.svg
│ │ │ │ ├── book.svg
│ │ │ │ └── cogs.svg
│ │ │ ├── SideBar.test.js
│ │ │ ├── appMenus.js
│ │ │ └── SideBar.jsx
│ │ ├── TopBar
│ │ │ ├── evologo.png
│ │ │ ├── GitHubLink.jsx
│ │ │ ├── TopBar.scss
│ │ │ └── TopBar.jsx
│ │ └── Footer
│ │ │ ├── Footer.test.js
│ │ │ ├── Footer.jsx
│ │ │ └── Footer.scss
│ ├── views
│ │ ├── one
│ │ │ ├── shared
│ │ │ │ ├── Collection
│ │ │ │ │ ├── Collection.scss
│ │ │ │ │ └── Collection.jsx
│ │ │ │ └── Timestamps
│ │ │ │ │ ├── Timestamps.scss
│ │ │ │ │ ├── Timestamps.jsx
│ │ │ │ │ └── Timestamps.test.js
│ │ │ ├── One.scss
│ │ │ └── Card.jsx
│ │ ├── analytics
│ │ │ ├── Charts
│ │ │ │ ├── chartOptions.js
│ │ │ │ ├── ChartTable.scss
│ │ │ │ ├── chartProps.js
│ │ │ │ ├── Pie.jsx
│ │ │ │ ├── Bars.jsx
│ │ │ │ ├── ChartTable.jsx
│ │ │ │ └── Charts.scss
│ │ │ └── Stats
│ │ │ │ ├── PercentBar.jsx
│ │ │ │ ├── PercentBar.scss
│ │ │ │ └── Stats.scss
│ │ ├── many
│ │ │ ├── shared
│ │ │ │ ├── EmptyState
│ │ │ │ │ ├── EmptyState.scss
│ │ │ │ │ ├── EmptyState.test.js
│ │ │ │ │ └── EmptyState.jsx
│ │ │ │ ├── Pagination
│ │ │ │ │ ├── Pagination.test.js
│ │ │ │ │ ├── Pagination.scss
│ │ │ │ │ └── Pagination.jsx
│ │ │ │ └── TableBody
│ │ │ │ │ ├── TableBody.test.js
│ │ │ │ │ └── TableBody.jsx
│ │ │ ├── Many.scss
│ │ │ ├── List
│ │ │ │ ├── List.scss
│ │ │ │ └── List.jsx
│ │ │ └── Cards
│ │ │ │ ├── Cards.jsx
│ │ │ │ └── Cards.scss
│ │ ├── comfort
│ │ │ ├── ModelLinks.scss
│ │ │ ├── Overview
│ │ │ │ ├── SearchBox.scss
│ │ │ │ ├── InvalidRoute.jsx
│ │ │ │ ├── Activity.scss
│ │ │ │ ├── Overview.scss
│ │ │ │ ├── SearchBox.jsx
│ │ │ │ └── Activity.jsx
│ │ │ ├── Activity
│ │ │ │ ├── Activity.scss
│ │ │ │ └── Activity.jsx
│ │ │ └── ModelLinks.jsx
│ │ ├── ViewHeader
│ │ │ ├── ViewHeader.test.js
│ │ │ ├── FilterTags.jsx
│ │ │ ├── ViewHeader.scss
│ │ │ ├── ViewsNavIcons.jsx
│ │ │ └── ViewHeader.jsx
│ │ └── modelPropTypes.js
│ ├── widgets
│ │ ├── Badge
│ │ │ ├── Badge.scss
│ │ │ ├── Badge.jsx
│ │ │ └── Badge.test.js
│ │ ├── Spinner
│ │ │ ├── Spinner.test.js
│ │ │ ├── Spinner.jsx
│ │ │ └── Spinner.scss
│ │ ├── Alert
│ │ │ ├── Alert.jsx
│ │ │ ├── Alert.scss
│ │ │ └── Alert.test.js
│ │ ├── global.scss
│ │ ├── Panel
│ │ │ ├── Panel.scss
│ │ │ ├── Panel.test.js
│ │ │ └── Panel.jsx
│ │ └── Button
│ │ │ ├── Button.jsx
│ │ │ ├── Button.scss
│ │ │ └── Button.test.js
│ ├── Field
│ │ ├── FieldLabel.scss
│ │ ├── edit
│ │ │ ├── FieldUpload.scss
│ │ │ ├── FieldDate.scss
│ │ │ ├── FieldDate.jsx
│ │ │ └── FieldObject.jsx
│ │ ├── FieldLabel.test.js
│ │ ├── Field.test.js
│ │ ├── FieldLabel.jsx
│ │ ├── Field.scss
│ │ ├── browse
│ │ │ ├── FieldValue.jsx
│ │ │ └── FieldElemBrowse.jsx
│ │ └── Field.jsx
│ └── ErrorBoundary.jsx
├── App-custom.scss
├── utils
│ ├── localStorage.js
│ ├── moMa.js
│ ├── url.js
│ ├── dicoViews.js
│ ├── activity.js
│ ├── format.test.js
│ └── dico.js
├── index.js
├── setupTests.js
├── routes
│ ├── DemoRoutes.jsx
│ ├── DocRoutes.jsx
│ └── EvolRoutes.jsx
├── dao
│ └── cache.js
├── index.scss
├── i18n
│ └── i18n.js
├── config.js
├── models
│ ├── all_models.js
│ ├── music
│ │ ├── artist.js
│ │ ├── album.js
│ │ └── track.js
│ └── organizer
│ │ ├── winetasting.js
│ │ └── todo.js
├── variables.scss
├── App.jsx
└── App.scss
├── .gitignore
├── jsconfig.json
├── sql
└── README.md
├── ascii-art.js
├── .eslintrc.json
└── TODO.md
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: evoluteur
4 |
--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/favicon.png
--------------------------------------------------------------------------------
/public/pix/bug.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/bug.png
--------------------------------------------------------------------------------
/public/pix/cd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/cd.png
--------------------------------------------------------------------------------
/public/pix/comics.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics.png
--------------------------------------------------------------------------------
/public/pix/music.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music.png
--------------------------------------------------------------------------------
/public/pix/resto.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/resto.gif
--------------------------------------------------------------------------------
/public/pix/resto.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/resto.png
--------------------------------------------------------------------------------
/public/pix/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/star.png
--------------------------------------------------------------------------------
/public/pix/todo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/todo.gif
--------------------------------------------------------------------------------
/public/pix/todo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/todo.png
--------------------------------------------------------------------------------
/public/pix/user.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/user.png
--------------------------------------------------------------------------------
/public/pix/wine.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine.gif
--------------------------------------------------------------------------------
/src/pages/Demos/Demos.scss:
--------------------------------------------------------------------------------
1 | .evo-demos {
2 | .evo-models-list {
3 | margin-top: 20px;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/public/pix/contact.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/contact.gif
--------------------------------------------------------------------------------
/public/pix/contact.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/contact.png
--------------------------------------------------------------------------------
/public/pix/doc/cog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/doc/cog.png
--------------------------------------------------------------------------------
/public/pix/doc/model.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/doc/model.png
--------------------------------------------------------------------------------
/public/pix/doc/object.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/doc/object.png
--------------------------------------------------------------------------------
/public/pix/doc/wrench.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/doc/wrench.png
--------------------------------------------------------------------------------
/public/pix/logos/react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/logos/react.png
--------------------------------------------------------------------------------
/public/pix/music/moby.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/moby.jpg
--------------------------------------------------------------------------------
/public/pix/music/sade.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/sade.jpg
--------------------------------------------------------------------------------
/public/pix/wine-bottle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine-bottle.png
--------------------------------------------------------------------------------
/public/pix/wine-glass.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine-glass.png
--------------------------------------------------------------------------------
/public/pix/wine/stjean.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/stjean.png
--------------------------------------------------------------------------------
/public/pix/wine/wineno.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/wineno.png
--------------------------------------------------------------------------------
/public/pix/wine/yquem.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/yquem.png
--------------------------------------------------------------------------------
/public/pix/comics/alim1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/alim1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/incal1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/incal1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/lama1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/lama1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/quete1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/quete1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/ronin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/ronin.jpg
--------------------------------------------------------------------------------
/public/pix/comics/saga1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/saga1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/surfer.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/surfer.jpg
--------------------------------------------------------------------------------
/public/pix/doc/metadata.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/doc/metadata.png
--------------------------------------------------------------------------------
/public/pix/doc/tag_pink.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/doc/tag_pink.png
--------------------------------------------------------------------------------
/public/pix/logos/graphql.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/logos/graphql.png
--------------------------------------------------------------------------------
/public/pix/logos/hasura.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/logos/hasura.png
--------------------------------------------------------------------------------
/public/pix/music/ashana.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/ashana.jpg
--------------------------------------------------------------------------------
/public/pix/music/moby-18.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/moby-18.jpg
--------------------------------------------------------------------------------
/public/pix/wine/flags/ar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/ar.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/at.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/at.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/bg.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/ca.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/ca.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/ch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/ch.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/cl.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/cl.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/cy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/cy.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/de.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/de.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/es.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/es.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/fr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/fr.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/gr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/gr.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/hu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/hu.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/it.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/it.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/lu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/lu.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/nz.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/nz.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/pt.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/pt.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/us.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/us.png
--------------------------------------------------------------------------------
/public/pix/wine/flags/za.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/flags/za.png
--------------------------------------------------------------------------------
/public/pix/wine/winered.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/winered.png
--------------------------------------------------------------------------------
/public/pix/wine/winerose.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/winerose.png
--------------------------------------------------------------------------------
/public/pix/comics/carmenmc1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/carmenmc1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/codemc1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/codemc1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/flags/fr.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/flags/fr.png
--------------------------------------------------------------------------------
/public/pix/comics/flags/us.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/flags/us.png
--------------------------------------------------------------------------------
/public/pix/comics/garulfo1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/garulfo1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/lanfeust1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/lanfeust1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/neffous1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/neffous1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/salammbo1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/salammbo1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/skydoll1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/skydoll1.jpg
--------------------------------------------------------------------------------
/public/pix/music/moby-play.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/moby-play.jpg
--------------------------------------------------------------------------------
/public/pix/wine/macrostie.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/macrostie.png
--------------------------------------------------------------------------------
/public/pix/wine/montelena.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/montelena.png
--------------------------------------------------------------------------------
/public/pix/wine/vinecliff.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/vinecliff.png
--------------------------------------------------------------------------------
/public/pix/wine/winespark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/winespark.png
--------------------------------------------------------------------------------
/public/pix/wine/winesweet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/winesweet.png
--------------------------------------------------------------------------------
/public/pix/wine/winewhite.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/wine/winewhite.png
--------------------------------------------------------------------------------
/public/pix/comics/fleaudieux1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/fleaudieux1.jpg
--------------------------------------------------------------------------------
/public/pix/comics/metabaron1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/metabaron1.jpg
--------------------------------------------------------------------------------
/public/pix/music/snatam_kaur.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/snatam_kaur.jpg
--------------------------------------------------------------------------------
/public/pix/comics/androidssheep.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/androidssheep.jpg
--------------------------------------------------------------------------------
/public/pix/music/ashana-beloved.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/ashana-beloved.jpg
--------------------------------------------------------------------------------
/public/pix/music/naid-varanasi.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/naid-varanasi.jpg
--------------------------------------------------------------------------------
/public/pix/music/sade-loversrock.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/sade-loversrock.jpg
--------------------------------------------------------------------------------
/public/pix/screenshots/many-list.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/screenshots/many-list.png
--------------------------------------------------------------------------------
/public/pix/screenshots/one-edit.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/screenshots/one-edit.png
--------------------------------------------------------------------------------
/public/pix/comics/imperfect-future.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/imperfect-future.jpg
--------------------------------------------------------------------------------
/public/pix/screenshots/many-cards.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/screenshots/many-cards.png
--------------------------------------------------------------------------------
/public/pix/screenshots/one-browse.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/screenshots/one-browse.png
--------------------------------------------------------------------------------
/public/pix/comics/ghost-in-the-shell.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/comics/ghost-in-the-shell.jpg
--------------------------------------------------------------------------------
/public/pix/music/snatamkaur-beloved.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/snatamkaur-beloved.jpg
--------------------------------------------------------------------------------
/src/components/shell/SideBar/spirals.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/src/components/shell/SideBar/spirals.png
--------------------------------------------------------------------------------
/src/components/shell/TopBar/evologo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/src/components/shell/TopBar/evologo.png
--------------------------------------------------------------------------------
/public/pix/screenshots/analytics-charts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/screenshots/analytics-charts.png
--------------------------------------------------------------------------------
/public/pix/screenshots/analytics-stats.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/screenshots/analytics-stats.png
--------------------------------------------------------------------------------
/public/pix/screenshots/comfort-activity.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/screenshots/comfort-activity.png
--------------------------------------------------------------------------------
/public/pix/screenshots/comfort-overview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/screenshots/comfort-overview.png
--------------------------------------------------------------------------------
/public/pix/music/snatamkaur-sacredchants.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/evoluteur/evolutility-ui-react/HEAD/public/pix/music/snatamkaur-sacredchants.jpg
--------------------------------------------------------------------------------
/src/components/views/one/shared/Collection/Collection.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .evo-collec {
4 | padding: 0 10px 6px 10px;
5 | > .empty-collec {
6 | margin: 10px 10px 20px;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | build
4 | coverage
5 |
6 | public/bundle.js
7 |
8 | *.zip
9 |
10 | *-nogit/
11 | *-nogit.*
12 | *copy.*
13 |
14 | Thumbs.db
15 | Desktop.ini
16 | .DS_Store
17 | .idea
18 |
--------------------------------------------------------------------------------
/src/App-custom.scss:
--------------------------------------------------------------------------------
1 | // CSS exceptions for specific models thanks to ".model_X" selector
2 |
3 | .evol-many {
4 | &.model_contact,
5 | &.model_winetasting {
6 | td:first-child {
7 | min-width: 130px;
8 | }
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "ES6",
4 | "baseUrl": "./src",
5 | "target": "es6",
6 | "jsx": "react",
7 | "moduleResolution": "node"
8 | },
9 | "include": ["src"],
10 | "exclude": ["node_modules", "dist", "coverage"]
11 | }
12 |
--------------------------------------------------------------------------------
/src/components/views/analytics/Charts/chartOptions.js:
--------------------------------------------------------------------------------
1 | export const colors = { scheme: "category10" };
2 |
3 | export const labelColor = "#333333";
4 | export const innerLabelColor = "white";
5 |
6 | const chartOptions = {
7 | colors,
8 | };
9 |
10 | export default chartOptions;
11 |
--------------------------------------------------------------------------------
/src/components/views/many/shared/EmptyState/EmptyState.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .empty-state {
4 | > a > span {
5 | position: relative;
6 | top: -8px;
7 | }
8 | .btn {
9 | margin-top: 20px;
10 | }
11 | .too-much {
12 | margin-top: $gap;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/views/comfort/ModelLinks.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .evo-models-list {
4 | padding-left: 20px;
5 | > div {
6 | display: inline-block;
7 | width: 200px;
8 | white-space: nowrap;
9 | overflow-x: hidden;
10 | text-overflow: ellipsis;
11 | margin: 2px 10px 5px;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/pages/PageNotFound/PageNotFound.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .err404 {
4 | position: relative;
5 | }
6 |
7 | .center404 {
8 | position: relative;
9 | margin: 40px;
10 | text-align: center;
11 | }
12 | .center404 > p {
13 | margin: 10px;
14 | }
15 | .bad-route {
16 | color: $color-text-secondary;
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/views/analytics/Stats/PercentBar.jsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from "react";
2 |
3 | import "./PercentBar.scss";
4 |
5 | const PercentBar = memo(({ percent }) => (
6 |
9 | ));
10 |
11 | export default PercentBar;
12 |
--------------------------------------------------------------------------------
/src/pages/Home/Gallery.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .alice-carousel {
4 | margin: 30px 0;
5 | .item {
6 | max-height: 240px;
7 | width: 250px;
8 | padding: 10px;
9 | > div {
10 | max-height: 239px;
11 | margin-top: 5px;
12 | border: $border;
13 | overflow-y: hidden;
14 | }
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/src/utils/localStorage.js:
--------------------------------------------------------------------------------
1 | // Wrapper for localStorage
2 | const prefix = "evol-";
3 |
4 | export const lcWrite = (key, value) =>
5 | localStorage.setItem(prefix + key, value);
6 |
7 | export const lcRead = (key) => localStorage.getItem(prefix + key) || null;
8 |
9 | export const lcRemove = (key) => localStorage.removeItem(prefix + key);
10 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { createRoot } from "react-dom/client";
3 | import App from "./App";
4 |
5 | import "./index.scss";
6 |
7 | const container = document.getElementById("root");
8 | const root = createRoot(container);
9 | root.render(
10 |
11 |
13 | );
14 |
--------------------------------------------------------------------------------
/src/components/views/many/Many.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .evol-many {
4 | .evol-loading {
5 | margin: 10% auto 20% auto;
6 | }
7 | }
8 | .e-icon {
9 | position: relative;
10 | top: -2px;
11 | margin-right: 6px !important;
12 | height: $icon-size;
13 | width: $icon-size;
14 | }
15 | .lov-icon {
16 | margin-right: 5px;
17 | }
18 |
--------------------------------------------------------------------------------
/sql/README.md:
--------------------------------------------------------------------------------
1 | # Evolutility-UI-React demo database
2 |
3 | This folder contains the SQL scripts to setup the demo database on Postgres.
4 |
5 | Run evol-db-schema.sql to create the database structure, then run evol-db-data.sql to populated it w/ sample data.
6 |
7 | This SQL scripts were generated using Evolutility-Models (https://github.com/evoluteur/evolutility-models).
--------------------------------------------------------------------------------
/src/components/views/one/shared/Timestamps/Timestamps.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .timestamps {
4 | display: block;
5 | width: 100%;
6 | margin: 20px 0 0 10px;
7 | color: $color-label;
8 | font-size: $label-font-size;
9 | > div {
10 | > label {
11 | margin-right: 5px;
12 | &:after {
13 | content: ":";
14 | }
15 | }
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/views/analytics/Stats/PercentBar.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .pc-bar {
4 | position: relative;
5 | height: 7px;
6 | width: 100%;
7 | background-color: rgb(30, 142, 62);
8 | margin-bottom: 10px;
9 | .pcb-red {
10 | position: absolute;
11 | top: 0;
12 | right: 0;
13 | height: 7px;
14 | background-color: rgb(217, 48, 37);
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Evolutility-UI-React",
3 | "name": "Evolutility-UI-React",
4 | "icons": [
5 | {
6 | "src": "favicon.png",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-extraneous-dependencies */
2 |
3 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
4 | // allows you to do things like:
5 | // expect(element).toHaveTextContent(/react/i)
6 | // learn more: https://github.com/testing-library/jest-dom
7 | import "@testing-library/jest-dom";
8 |
9 | global.structuredClone = (v) => JSON.parse(JSON.stringify(v));
10 |
--------------------------------------------------------------------------------
/src/routes/DemoRoutes.jsx:
--------------------------------------------------------------------------------
1 | // Routes for Evolutility views
2 | import React from "react";
3 | import { Routes, Route } from "react-router-dom";
4 |
5 | import Demos from "pages/Demos/Demos";
6 | import EvolRoutes from "./EvolRoutes";
7 |
8 | const DocsRoutes = () => (
9 |
10 |
13 | );
14 |
15 | export default DocsRoutes;
16 |
--------------------------------------------------------------------------------
/src/components/widgets/Badge/Badge.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .evo-badge {
4 | display: inline-block;
5 | min-width: 28px;
6 | padding: 5px 10px;
7 | border-radius: 14px;
8 | font-size: 14px;
9 | font-weight: 400;
10 | margin: 0 5px;
11 | text-align: center;
12 | border-style: solid;
13 | border-width: 1px;
14 | }
15 |
16 | .alert-default {
17 | color: $color-almostblack;
18 | background-color: $bgcolor-badge;
19 | border-color: silver;
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/views/comfort/Overview/SearchBox.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .evo-search-box {
4 | > div {
5 | display: flex;
6 | width: 140px;
7 | > button {
8 | position: relative;
9 | height: 38px;
10 | width: 40px;
11 | border-top-left-radius: 0;
12 | border-bottom-left-radius: 0;
13 | padding: 0 5px;
14 | border-left: none;
15 | > svg {
16 | height: 24px;
17 | width: 24px;
18 | }
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/shell/SideBar/svg/eye.svg:
--------------------------------------------------------------------------------
1 |
9 |
11 | );
12 | const sidebar = screen.getByTestId("sidebar");
13 | expect(sidebar).toHaveTextContent("Documentation");
14 | expect(sidebar).toHaveTextContent("Demos");
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/components/views/comfort/Overview/InvalidRoute.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { i18n_errors } from "i18n/i18n";
3 | import ModelLinks from "components/views/comfort/ModelLinks";
4 | import Alert from "components/widgets/Alert/Alert";
5 |
6 | const InvalidRoute = ({ entity }) => {
7 | const msg = i18n_errors.badEntity.replace("{0}", entity);
8 | return (
9 |
14 | );
15 | };
16 |
17 | export default InvalidRoute;
18 |
--------------------------------------------------------------------------------
/src/components/shell/Footer/Footer.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from "@testing-library/react";
2 | import packageInfo from "package.json";
3 | import Footer from "./Footer";
4 |
5 | const { version } = packageInfo;
6 |
7 | describe("footer widget tests", () => {
8 | it("footer shows version and author", async () => {
9 | render();
10 | const footer = screen.getByTestId("footer");
11 | expect(footer).toHaveTextContent("Olivier Giulieri");
12 | expect(footer).toHaveTextContent("Evolutility-UI-React");
13 | expect(footer).toHaveTextContent(version);
14 | });
15 | });
16 |
--------------------------------------------------------------------------------
/src/components/views/comfort/Activity/Activity.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .evol-activity {
4 | > section > div {
5 | display: flex;
6 | > a {
7 | min-width: 120px;
8 | width: 220px;
9 | white-space: nowrap;
10 | overflow-x: hidden;
11 | text-overflow: ellipsis;
12 | }
13 | > div {
14 | display: inline-block;
15 | margin-left: 20px;
16 | color: silver;
17 | &.visits {
18 | color: $color-text-secondary;
19 | min-width: 70px;
20 | }
21 | }
22 | }
23 | button {
24 | margin: 10px 20px;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/src/components/views/analytics/Charts/ChartTable.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .chartTable {
4 | padding: 0 10px;
5 | height: 100%;
6 | overflow-y: scroll;
7 | .align-right {
8 | text-align: right;
9 | }
10 | .table {
11 | text-align: left;
12 | th {
13 | cursor: pointer;
14 | &:nth-child(2) {
15 | width: 90px;
16 | }
17 | }
18 | }
19 | .footer,
20 | .footer:hover {
21 | background-color: $bgcolor-header;
22 | }
23 | }
24 | .chart-card.size-tiny .chartTable {
25 | font-size: 0.8em;
26 | padding: 5px 8px;
27 | height: 230px;
28 | overflow-y: scroll;
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/views/analytics/Charts/chartProps.js:
--------------------------------------------------------------------------------
1 | import PropTypes from "prop-types";
2 |
3 | export const chartTypes = ["bars", "pie", "table"];
4 |
5 | export const chartSizes = ["tiny", "small", "large"];
6 |
7 | export const chartDataPropType = PropTypes.arrayOf(
8 | PropTypes.shape({
9 | id: PropTypes.number.isRequired,
10 | label: PropTypes.string.isRequired,
11 | value: PropTypes.number.isRequired,
12 | })
13 | );
14 |
15 | const chartPropTypes = {
16 | data: chartDataPropType,
17 | size: PropTypes.oneOf(chartSizes),
18 | showLegend: PropTypes.bool,
19 | };
20 |
21 | export default chartPropTypes;
22 |
--------------------------------------------------------------------------------
/src/components/widgets/Spinner/Spinner.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from "@testing-library/react";
2 | import Spinner from "./Spinner";
3 | import { i18n_nav } from "i18n/i18n";
4 |
5 | describe("Spinner widget tests", () => {
6 | it("check default text", () => {
7 | render(
10 | {modelsArray?.map((m) => (
11 |
12 |
13 |
14 | {m.title}
15 |
16 |
17 | ))}
18 |
9 | {text}
10 |
11 | );
12 |
13 | export default Badge;
14 |
15 | Badge.propTypes = {
16 | text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
17 | type: PropTypes.oneOf([
18 | "default", // - light grey
19 | "info", // - blue
20 | "success", // - green
21 | "warning", // - yellow
22 | "danger", // - red
23 | ]),
24 | };
25 |
26 | Badge.defaultProps = {
27 | type: "default",
28 | };
29 |
--------------------------------------------------------------------------------
/ascii-art.js:
--------------------------------------------------------------------------------
1 | var pkg = require("./package.json");
2 |
3 | const splash = `
4 | ______ _ _ _ _ _ _
5 | | ____| | | | | (_) (_) |
6 | | |____ _____ | |_ _| |_ _| |_| |_ _ _
7 | | __\\ \\ / / _ \\| | | | | __| | | | __| | | |
8 | | |___\\ V / (_) | | |_| | |_| | | | |_| |_| |
9 | |______\\_/ \\___/|_|\\__,_|\\__|_|_|_|\\__|\\__, |
10 | _ _ _____ _____ __/ |
11 | | | | |_ _| | __ \\ |___/ |
12 | | | | | | |______| |__) |___ __ _ ___| |_
13 | | | | | | |______| _ // _ \\/ _\` |/ __| __|
14 | | |__| |_| |_ | | \\ \\ __/ (_| | (__| |_
15 | \\____/|_____| |_| \\_\\___|\\__,_|\\___|\\__|
16 | v.${pkg.version}
17 | `;
18 |
19 | console.log(splash);
20 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["react-app", "react-app/jest", "prettier"],
3 | "plugins": ["prettier"],
4 | "parser":"@babel/eslint-parser",
5 | "settings": {
6 | "import/resolver": {
7 | "node": {
8 | "paths": ["src"]
9 | }
10 | }
11 | },
12 | "parserOptions": {
13 | "babelOptions": {
14 | "presets": [
15 | ["babel-preset-react-app", false],
16 | "babel-preset-react-app/prod"
17 | ]
18 | }
19 | },
20 | "rules": {
21 | "react/jsx-props-no-spreading": "off",
22 | "camelcase": 0,
23 | "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
24 | "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
25 | "react/no-unescaped-entities": "off"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/widgets/Spinner/Spinner.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { i18n_nav } from "i18n/i18n";
4 |
5 | import "./Spinner.scss";
6 |
7 | // Credits: HTML & CSS from http://tobiasahlin.com/spinkit/
8 |
9 | const Spinner = ({ message }) => (
10 |
18 | );
19 |
20 | export default Spinner;
21 |
22 | Spinner.propTypes = {
23 | message: PropTypes.string,
24 | };
25 |
26 | Spinner.defaultProps = {
27 | message: i18n_nav.loading,
28 | };
29 |
--------------------------------------------------------------------------------
/src/pages/Docs/Doc.scss:
--------------------------------------------------------------------------------
1 | .evo-doc {
2 | position: relative;
3 | .lic-npm {
4 | margin-bottom: 10px;
5 | .anchor {
6 | display: block;
7 | height: 40px;
8 | }
9 | }
10 | .cols-2 > div {
11 | text-align: right;
12 | }
13 | }
14 | .anchor {
15 | position: relative;
16 | top: -70px;
17 | }
18 | .code {
19 | margin: 20px 0;
20 | padding: 10px;
21 | font-size: 14px;
22 | line-height: 20px;
23 | font-family: monospace, monospace;
24 | background-color: #f5f5f5;
25 | border: solid 1px #b0bec5;
26 | border-radius: 4px;
27 | }
28 | .samples {
29 | > label {
30 | margin-right: 5px;
31 | }
32 | .pretty-json {
33 | margin-top: 10px;
34 | }
35 | }
36 | .evo-doc-setup {
37 | ol,
38 | ul {
39 | line-height: 32px;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/shell/SideBar/svg/book.svg:
--------------------------------------------------------------------------------
1 |
22 |
Sample Models
23 |
24 |
25 | Here are the models behind the demos on this site.
26 |
27 |
29 |
17 |
{i18n.title}
18 |
19 |
20 |
23 |
24 | {i18n.badRoute}: "{url}"
25 |
26 |
27 |
28 |
31 |
14 |
21 | );
22 |
23 | export default DocRoutes;
24 |
--------------------------------------------------------------------------------
/src/dao/cache.js:
--------------------------------------------------------------------------------
1 | import config from "config";
2 |
3 | const { useCache, cacheDuration } = config;
4 |
5 | let cacheObj = {};
6 |
7 | export const setCache = (key, value, seconds = cacheDuration) => {
8 | if (useCache) {
9 | cacheObj[key] = value;
10 | setTimeout(() => {
11 | delCache(key);
12 | }, seconds * 1000);
13 | }
14 | };
15 |
16 | export const getCache = (key) => cacheObj[key];
17 |
18 | export const delCache = (key) => delete cacheObj[key];
19 |
20 | export const clearCache = (prefix) => {
21 | if (prefix) {
22 | cacheKeys().forEach((k) => {
23 | if (k.startsWith(prefix)) {
24 | delCache(k);
25 | }
26 | });
27 | } else {
28 | cacheObj = {};
29 | }
30 | };
31 |
32 | export const cacheKeys = () => Object.keys(cacheObj);
33 |
34 | const cache = {
35 | setCache,
36 | getCache,
37 | delCache,
38 | clearCache,
39 | cacheKeys,
40 | };
41 |
42 | export default cache;
43 |
--------------------------------------------------------------------------------
/src/components/Field/edit/FieldUpload.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .evol-fld {
4 | .filename {
5 | margin: 10px 0;
6 | > .file-name {
7 | margin-right: $gap;
8 | }
9 | > .file-size {
10 | color: $color-text-secondary;
11 | white-space: nowrap;
12 | }
13 | }
14 | }
15 |
16 | .doc-drop {
17 | margin-top: 7px;
18 | width: 100%;
19 | min-height: 100px;
20 | border: 2px dashed $color-border;
21 | border-radius: 5px;
22 | padding: 10px;
23 | cursor: pointer;
24 | &:hover {
25 | border-color: grey;
26 | }
27 | &.dropzone--isActive {
28 | border-color: $color-blue1;
29 | background-color: #fcf4dc;
30 | }
31 | > p {
32 | font-style: italic;
33 | font-size: 0.9em;
34 | }
35 | }
36 |
37 | .btn-remove {
38 | margin: 5px 5px 0 $gap;
39 | svg {
40 | position: relative;
41 | top: 2px;
42 | height: $icon-size;
43 | margin-right: 5px;
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | html {
4 | height: 100%; // IE
5 | font-size: 14px; // datepicker
6 | }
7 | body {
8 | margin: 0;
9 | padding: 0;
10 | width: 100%; // IE
11 | height: 100%; // IE
12 | font-size: $text-font-size;
13 | font-family: "Open Sans", sans-serif;
14 | color: $color-almostblack;
15 | }
16 | p {
17 | font-size: $text-font-size;
18 | }
19 | h1 {
20 | margin-bottom: 30px;
21 | }
22 | h2,
23 | h3 {
24 | margin-bottom: 20px;
25 | }
26 | h3 {
27 | margin-bottom: 16px;
28 | }
29 |
30 | /* TODO: for now here */
31 |
32 | .black {
33 | color: $color-almostblack !important;
34 | }
35 | .grey {
36 | color: silver;
37 | }
38 |
39 | .extlink:after {
40 | content: " "
41 | url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=);
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/views/one/One.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | /* --- panels --- */
4 | .evol-pnls {
5 | @include flex-holder();
6 | margin-left: -10px;
7 |
8 | .panel {
9 | height: calc(100% - 20px);
10 | margin-bottom: 10px;
11 | }
12 | .evol-pnl {
13 | @include flex-item();
14 | padding-left: 10px !important;
15 | min-width: 150px;
16 | margin-bottom: -10px;
17 | fieldset {
18 | padding: 0;
19 | margin: 0;
20 | border: 0;
21 | }
22 | .table {
23 | img {
24 | max-height: 60px;
25 | }
26 | .evol-money {
27 | //TODO: better fix
28 | width: 200px;
29 | }
30 | }
31 | }
32 | }
33 |
34 | /* --- fields --- */
35 | .evol-fset {
36 | @include flex-holder();
37 | padding: 16px $field-h-spacing 16px 0;
38 | }
39 | .form-buttons {
40 | width: 100%;
41 | > button,
42 | > a {
43 | margin: 10px;
44 | > i {
45 | margin-right: 5px;
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/i18n/i18n.js:
--------------------------------------------------------------------------------
1 | /*
2 | Evolutility-UI-React Localized strings in ENGLISH
3 | (c) 2023 Olivier Giulieri
4 | https://github.com/evoluteur/evolutility-ui-react
5 | */
6 |
7 | import allStrings from "./en";
8 |
9 | export default allStrings;
10 |
11 | export const id = allStrings.id;
12 | export const locale = allStrings.name;
13 | export const i18n_nav = allStrings.i18n_nav;
14 | export const i18n_actions = allStrings.i18n_actions;
15 | export const i18n_msg = allStrings.i18n_msg;
16 | export const i18n_validation = allStrings.i18n_validation;
17 | export const i18n_charts = allStrings.i18n_charts;
18 | export const i18n_comments = allStrings.i18n_comments;
19 | export const i18n_stats = allStrings.i18n_stats;
20 | export const i18n_activity = allStrings.i18n_activity;
21 | export const i18n_upload = allStrings.i18n_upload;
22 | export const i18n_errors = allStrings.i18n_errors;
23 | export const i18n_404 = allStrings.i18n_404;
24 |
25 | // export const i18n_login = allStrings. ;
26 |
--------------------------------------------------------------------------------
/src/components/views/one/shared/Timestamps/Timestamps.jsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from "react";
2 | import PropTypes from "prop-types";
3 | import config from "config";
4 | import { datetimeString } from "utils/format";
5 | import { i18n_activity } from "i18n/i18n";
6 |
7 | import "./Timestamps.scss";
8 |
9 | const showTimestamp = config.withTimestamp;
10 |
11 | const Timestamps = memo(({ updated, created }) => {
12 | if (!showTimestamp) {
13 | return null;
14 | }
15 | return (
16 |
17 |
18 | {i18n_activity.updated}
19 | {datetimeString(updated)}
20 |
21 |
22 | {i18n_activity.created}
23 | {datetimeString(created)}
24 |
25 |
9 |
16 |
18 |
19 | );
20 |
21 | export default GitHubLink;
22 |
--------------------------------------------------------------------------------
/src/routes/EvolRoutes.jsx:
--------------------------------------------------------------------------------
1 | // Routes for Evolutility views
2 | import React from "react";
3 | import { Routes, Route } from "react-router-dom";
4 | import config from "config";
5 |
6 | import One from "components/views/one/One";
7 | import Many from "components/views/many/Many";
8 | import Stats from "components/views/analytics/Stats/Stats";
9 | import Charts from "components/views/analytics/Charts/Charts";
10 | import Overview from "components/views/comfort/Overview/Overview";
11 | import Activity from "components/views/comfort/Activity/Activity";
12 |
13 | const EvolRoutes = () => (
14 |
15 |
24 | );
25 |
26 | export default EvolRoutes;
27 |
--------------------------------------------------------------------------------
/src/components/views/comfort/Overview/Overview.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .evol-overview {
4 | .evo-search-box {
5 | margin: 20px 10px 20px 0;
6 | input {
7 | width: 220px;
8 | }
9 | }
10 | .panel {
11 | margin-bottom: 10px;
12 | }
13 | .ovw-actions {
14 | margin-bottom: 20px;
15 | width: 100%;
16 | @include flex-holder();
17 | gap: $gap;
18 | > div {
19 | flex: 1 1 0px;
20 | flex-grow: 1;
21 | display: inline-block;
22 | margin-right: 20px;
23 | > a {
24 | @include link-focus;
25 | display: block;
26 | > i {
27 | position: relative;
28 | top: 6px;
29 | }
30 | }
31 | }
32 | }
33 | .ovw-chart {
34 | position: relative;
35 | min-width: 400px;
36 | select {
37 | position: absolute;
38 | top: 10px;
39 | left: 15px;
40 | width: auto;
41 | }
42 | .table {
43 | margin-top: 20px;
44 | }
45 | .chart-pie {
46 | position: relative;
47 | top: 20px;
48 | }
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/ErrorBoundary.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Alert from "components/widgets/Alert/Alert";
3 |
4 | export default class ErrorBoundary extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = { hasError: false };
8 | }
9 |
10 | static getDerivedStateFromError(error) {
11 | // Update state so the next render will show the fallback UI.
12 | return { hasError: true };
13 | }
14 |
15 | componentDidCatch(error, errorInfo) {
16 | // You can also log the error to an error reporting service
17 | // logErrorToMyService(error, errorInfo);
18 | console.error(error, errorInfo);
19 | }
20 |
21 | render() {
22 | if (this.state.hasError) {
23 | // You can render any custom fallback UI
24 | const msg = (
25 | <>
26 | Oops! Something went wrong.
27 | Please refresh the browser window.
28 |
29 | );
30 | return
13 |
23 | );
24 | const vh = screen.queryByTestId("viewheader");
25 | expect(vh).toHaveTextContent("title-test");
26 | expect(vh).toHaveTextContent("50");
27 | if (withComments) {
28 | expect(vh).toHaveTextContent("2");
29 | } else {
30 | expect(vh).not.toHaveTextContent("2");
31 | }
32 |
33 | expect(vh).toHaveTextContent("text-test");
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/src/components/widgets/Alert/Alert.jsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from "react";
2 | import PropTypes from "prop-types";
3 | import Icon from "react-crud-icons";
4 |
5 | import "./Alert.scss";
6 |
7 | const icons = {
8 | info: "info",
9 | success: "check",
10 | warning: "alert",
11 | danger: "error",
12 | };
13 |
14 | const icon = (name) =>
18 |
19 | {title && icon(type)}
20 | {title}
21 |
22 |
{message}
23 |
Evolutility
19 | You need to enable JavaScript to run this app.
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/src/components/views/many/shared/Pagination/Pagination.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from "@testing-library/react";
2 | import Pagination from "./Pagination";
3 | import config from "config";
4 |
5 | const { pageSize = 50 } = config;
6 | const noOp = () => {};
7 |
8 | describe("Pagination tests", () => {
9 | it("Pagination shows if fullCount > pageSize", async () => {
10 | render(
11 |
14 | {v.name}
15 |
16 |
22 |
23 |
13 |
15 | );
16 | const component = screen.queryByTestId("emptystate");
17 | expect(component).toHaveTextContent(i18n.noResults);
18 | const msg = i18n.empty.replaceAll("{0}", model.namePlural);
19 | expect(component).toHaveTextContent(msg);
20 | });
21 | it("EmptyState shows message w/ filters", async () => {
22 | render(
23 |
24 |
26 | );
27 | const component = screen.queryByTestId("emptystate");
28 | expect(component).toHaveTextContent(i18n.noResults);
29 | const msg = i18n.noData.replaceAll("{0}", model.namePlural);
30 | expect(component).toHaveTextContent(msg);
31 | });
32 | });
33 |
--------------------------------------------------------------------------------
/src/config.js:
--------------------------------------------------------------------------------
1 | /* Evolutility config options */
2 |
3 | const config = {
4 | // - Path to GraphQL API
5 | apiPath: "TODO: ENTER GRAPHQL API PATH HERE",
6 | adminSecret: "TODO: ENTER ADMIN SECRET HERE",
7 |
8 | // - prefix run app in sub-directory (also define as "homepage" in package.json)
9 | // baseName: "/evodemo/",
10 |
11 | // - Path to uploaded files
12 | filesUrl: "/pix/",
13 |
14 | // - get models from server at startup (and add/replace json models)
15 | queryModels: false,
16 |
17 | // - Pagination
18 | pageSize: 50,
19 |
20 | // - Language
21 | locale: "en",
22 |
23 | // - Data Caching
24 | useCache: true,
25 | cacheDuration: 180, // time in seconds
26 |
27 | // - Timestamp columns updated_at and created_at w/ date of record creation and last update
28 | withTimestamp: true,
29 | // - "WhoIs" columns updated_by and created_by w/ userid of creator and last modifier
30 | withWhoIs: false,
31 | // - Track last viewed record names in localstorage
32 | withActivity: false,
33 | // max number of activity records tracked
34 | activityListSize: 50,
35 |
36 | // - Comments & Ratings (community feature)
37 | withComments: false, // not implemented yet
38 | withRating: false, // not implemented yet
39 | };
40 |
41 | export default config;
42 |
--------------------------------------------------------------------------------
/src/components/views/many/List/List.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .evol-many-list {
4 | .align-right {
5 | text-align: right;
6 | }
7 | > div {
8 | overflow-x: auto;
9 | overflow-y: hidden;
10 | }
11 | .table {
12 | margin-bottom: 0;
13 | th {
14 | position: sticky;
15 | top: 49px;
16 | z-index: 2;
17 | white-space: nowrap;
18 | transition: border-color $ease-time;
19 | &:first-child {
20 | min-width: 100px;
21 | }
22 | svg {
23 | position: relative;
24 | top: 2px;
25 | fill: $color-almostblack;
26 | height: $icon-size;
27 | width: $icon-size;
28 | }
29 | }
30 | td {
31 | position: relative;
32 | }
33 | img {
34 | max-height: 60px;
35 | padding: 0;
36 | }
37 | }
38 | .sortable {
39 | th {
40 | cursor: pointer;
41 | &:hover {
42 | color: $color-icon-hover;
43 | border-bottom-color: grey;
44 | }
45 | }
46 | }
47 | .td-check {
48 | padding-top: 0;
49 | padding-bottom: 0;
50 | > svg {
51 | height: $icon-size;
52 | width: $icon-size;
53 | }
54 | }
55 | .td-url {
56 | max-width: 200px;
57 | > a {
58 | word-wrap: break-word;
59 | }
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/src/components/widgets/global.scss:
--------------------------------------------------------------------------------
1 | // copied and modified from bootstrap-sass v3.4.1
2 |
3 | * {
4 | box-sizing: border-box;
5 | &:before,
6 | &:after {
7 | box-sizing: border-box;
8 | }
9 | }
10 | input,
11 | button,
12 | select,
13 | textarea {
14 | font-family: inherit;
15 | font-size: inherit;
16 | line-height: inherit;
17 | }
18 | img {
19 | vertical-align: middle;
20 | }
21 | .img-thumbnail {
22 | padding: 0;
23 | line-height: 1.428571429;
24 | background-color: #fff;
25 | border: 1px solid #ddd;
26 | border-radius: 4px;
27 | display: inline-block;
28 | max-width: 100%;
29 | height: auto;
30 | }
31 | h1,
32 | h2,
33 | h3,
34 | h4 {
35 | font-family: inherit;
36 | font-weight: 500;
37 | line-height: 1.1;
38 | color: inherit;
39 | }
40 | h1,
41 | h2,
42 | h3 {
43 | margin-top: 20px;
44 | margin-bottom: 10px;
45 | }
46 | h4 {
47 | font-size: 1.2em;
48 | margin-top: 10px;
49 | margin-bottom: 10px;
50 | }
51 | p {
52 | margin: 0 0 10px;
53 | }
54 | ul,
55 | ol {
56 | margin-top: 0;
57 | margin-bottom: 10px;
58 | }
59 | ul ul,
60 | ul ol,
61 | ol ul,
62 | ol ol {
63 | margin-bottom: 0;
64 | }
65 |
66 | // React-Tooltip customizations
67 | .rc-tooltip,
68 | .rc-tooltip-inner {
69 | max-width: 180px;
70 | border-radius: 10px !important;
71 | }
72 |
--------------------------------------------------------------------------------
/src/components/Field/edit/FieldDate.jsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, memo } from "react";
2 | import PropTypes from "prop-types";
3 | import Datepicker from "react-datepicker";
4 | import { trueDate } from "utils/format";
5 |
6 | import "react-datepicker/dist/react-datepicker.css";
7 | import "./FieldDate.scss";
8 |
9 | // TODO: set maxDate and minDate (not urgent if caught w/ validation)
10 |
11 | const FieldDate = memo(({ id, value, onChange }) => {
12 | const onDateChange = useCallback(
13 | (value) =>
14 | onChange({
15 | target: {
16 | id,
17 | value,
18 | },
19 | }),
20 | [id, onChange]
21 | );
22 |
23 | return (
24 | {msg}
16 |
17 | {hasFilters && {i18n.newCriteria}
}
18 |
19 | {!hasFilters && (
20 |
19 | {content}
20 |
21 | ) : (
22 |
42 |
Model:
43 |
44 | {modelsArray.map((m) => (
45 |
46 | {m.title}
47 |
48 | ))}
49 |
50 |
51 |
23 |
24 | {data?.map((d) => (
25 |
28 |
31 |
39 |
40 | );
41 | const component = screen.queryByTestId("tbody");
42 | ["abc", "5", "xyz", "12", "http://evolutility.com"].forEach((v) =>
43 | expect(component).toHaveTextContent(v)
44 | );
45 | expect(component).toHaveTextContent("(12)");
46 | });
47 | });
48 |
--------------------------------------------------------------------------------
/src/pages/Docs/Configuration.jsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable jsx-a11y/anchor-is-valid */
2 | /* eslint-disable jsx-a11y/anchor-has-content */
3 | import React, { useEffect } from "react";
4 | import configOptions from "./docConfig";
5 |
6 | import "./Doc.scss";
7 |
8 | const Configuration = () => {
9 | useEffect(() => {
10 | document.title = "Doc > Configuration";
11 | window.scrollTo(0, 0);
12 | });
13 |
14 | return (
15 |
16 |
Configuration
17 |
18 |
19 | Configurations options are specified in the{" "}
20 |
26 | /src/config.js
27 | {" "}
28 | file. They apply to all apps (app specific options are specified in
29 | models).
30 |
31 |
32 |
33 |
34 | Option
35 | Description
36 | Example
37 |
38 |
39 |
40 | {configOptions.map((c) => (
41 |
42 | {c.name}
43 | {c.description}
44 | {c.example}
45 |
46 | ))}
47 |
48 |
49 |
14 |
Evolutility Demos
15 |
16 |
These are a few sample apps built with Evolutility.
17 |
18 |
19 |
20 |
21 | these demo apps are built with models rather than code ... and you
25 | can easily make more apps simply by making new{" "}
26 |
32 | models
33 |
34 | .
35 |
36 |
37 |
38 | These demos use a{" "}
39 |
45 | GraphQL API
46 |
47 | {" of "}
48 |
54 | Hasura
55 |
56 | .
57 |
58 |
30 |
31 |
39 |
41 |
42 |
22 |
27 |
28 |
37 |
38 |
42 | );
43 | };
44 |
45 | export default TopBar;
46 |
--------------------------------------------------------------------------------
/src/components/views/ViewHeader/ViewHeader.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .evo-page-header {
4 | position: relative;
5 | display: block;
6 | width: 100%;
7 | margin: 0 0 30px;
8 | .page-title {
9 | width: 100%;
10 | width: calc(100% - 90px);
11 | min-height: 40px;
12 | @include ellipsis();
13 | > .title-txt {
14 | margin-right: 5px;
15 | }
16 | .evo-badge {
17 | position: relative;
18 | top: -4px;
19 | }
20 | .h-txt {
21 | margin-left: 5px;
22 | font-size: $text-font-size;
23 | font-weight: normal;
24 | color: $color-text-secondary;
25 | }
26 | }
27 | .title-icons {
28 | position: absolute;
29 | top: 0;
30 | right: 0;
31 | display: inline-block;
32 | background-color: $bgcolor-background;
33 | > a {
34 | display: inline-block;
35 | border-radius: 50%;
36 | > .crud-icon {
37 | border: solid 1px transparent;
38 | > svg {
39 | fill: $color-icon;
40 | }
41 | > div {
42 | display: none;
43 | }
44 | }
45 | &.active > .crud-icon {
46 | border-color: $color-icon-active;
47 | cursor: default !important;
48 | > svg {
49 | fill: $color-text;
50 | }
51 | }
52 | &:hover {
53 | .crud-icon {
54 | > svg {
55 | fill: $color-icon-hover;
56 | }
57 | > div {
58 | display: block;
59 | }
60 | }
61 | }
62 | }
63 | }
64 |
65 | @media (max-width: $media-small) {
66 | .title-icons {
67 | display: none !important;
68 | }
69 | .page-title {
70 | width: 100%;
71 | }
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/src/components/Field/FieldLabel.jsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from "react";
2 | import PropTypes from "prop-types";
3 | import { fieldPropTypes } from "components/views/modelPropTypes";
4 | import Tooltip from "rc-tooltip";
5 | import Icon from "react-crud-icons";
6 |
7 | import "./FieldLabel.scss";
8 |
9 | const FieldLabel = memo(({ field, label, required, readOnly }) => {
10 | const isRequired =
11 | (field.required || required) && !(field.readOnly || readOnly);
12 |
13 | return (
14 |
15 |
16 | {label || field.label}
17 | {isRequired && (
18 |
19 | *
20 |
21 | )}
22 | {field.help && (
23 | {field.help}}
27 | >
28 |
29 |
31 |
32 | )}
33 |
34 |
35 | );
36 | });
37 |
38 | export default FieldLabel;
39 |
40 | FieldLabel.propTypes = {
41 | /** Field metadata w/ label, required, readOnly, help props */
42 | field: fieldPropTypes.isRequired,
43 | /** Override for field.label */
44 | label: PropTypes.string,
45 | /** Override for field.required */
46 | required: PropTypes.bool,
47 | /** Override for field.readOnly */
48 | readOnly: PropTypes.bool,
49 | };
50 |
51 | FieldLabel.defaultProps = {
52 | label: null,
53 | required: false,
54 | readOnly: false,
55 | };
56 |
--------------------------------------------------------------------------------
/src/components/widgets/Panel/Panel.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable testing-library/await-async-query */
2 | /* eslint-disable testing-library/no-node-access */
3 | import { render, screen } from "@testing-library/react";
4 | import Panel from "./Panel";
5 | import renderer from "react-test-renderer";
6 |
7 | describe("panel props test", () => {
8 | let panelToTest;
9 | const props = {
10 | title: "my panel",
11 | collapsible: true,
12 | width: 120,
13 | header: null,
14 | footer: null,
15 | children: null,
16 | className: null,
17 | };
18 | beforeEach(() => {
19 | const testInstance = renderer.create(children );
39 | const panel = screen.getByTestId("panel");
40 | expect(panel).toHaveTextContent("children");
41 | });
42 | });
43 |
44 | describe("panel widget shows header and footer", () => {
45 | it("test default props", () => {
46 | render({v.label}
29 |
30 | );
31 | const activityLink = ({ id, title }) => (
32 |
40 |
{viewLink(views.activity)}
41 |
{i18n_activity.mostViewed.replace("{0}", m.namePlural)}:
42 |
43 | {activityData?.mostViewed?.map(activityLink)}
44 |
45 |
46 |
{i18n_activity.lastViewed.replace("{0}", m.namePlural)}:
47 |
48 | {activityData?.lastViewed?.slice(0, 10).map(activityLink)}
49 |
50 |
{iconViews?.map(iconLink)}
;
40 | };
41 |
42 | ViewsNavIcons.propTypes = {
43 | /** Model id */
44 | entity: PropTypes.string.isRequired,
45 | /** Active view */
46 | view: PropTypes.string,
47 | /** Record id */
48 | id: PropTypes.string,
49 | // Extra parameters (url search)
50 | params: PropTypes.string,
51 | };
52 |
53 | ViewsNavIcons.defaultProps = {
54 | view: null,
55 | id: null,
56 | params: "",
57 | };
58 |
59 | export default ViewsNavIcons;
60 |
--------------------------------------------------------------------------------
/src/components/views/one/shared/Collection/Collection.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 |
4 | import TableBody from "components/views/many/shared/TableBody/TableBody";
5 | // import EmptyState from "components/views/many/EmptyState";
6 |
7 | import "./Collection.scss";
8 |
9 | const Collection = ({ collecModel, collecData }) => {
10 | const isEmpty = !(collecData && collecData?.length > 0);
11 | if (isEmpty) {
12 | return (
13 |
16 | );
17 | // return
22 |
23 | {collecModel.fields.map((f) => (
24 | {f.labelShort || f.label}
25 | ))}
26 |
27 |
28 | );
29 |
30 | return (
31 |
32 |
33 | {tableHeader}
34 |
41 |
{value} ;
28 | }
29 | if (fType === ft.json && value) {
30 | return jsonString(value);
31 | }
32 | if (fType === ft.lov) {
33 | return (
34 |
35 | {f.lovIcon && value?.icon && (
36 |
40 | );
41 | }
42 | if (fType === ft.date) {
43 | return dateString(value);
44 | }
45 | if (fType === ft.time) {
46 | return timeString(value);
47 | }
48 | if (fType === ft.color) {
49 | return (
50 |
51 |
57 | {!compact && value && {value} }
58 |
59 |
68 | {value}
69 |
70 | );
71 | }
72 | return value;
73 | });
74 |
75 | export default FieldValue;
76 |
--------------------------------------------------------------------------------
/src/components/views/analytics/Charts/Pie.jsx:
--------------------------------------------------------------------------------
1 | // - Wrapper for @nivo ResponsivePie
2 |
3 | import React from "react";
4 | import { ResponsivePie } from "@nivo/pie";
5 | import chartPropTypes from "./chartProps";
6 | import { colors, labelColor, innerLabelColor } from "./chartOptions";
7 |
8 | const Pie = ({ data, showLegend = true }) => {
9 | const pData = data?.map((d) => ({
10 | id: d.label,
11 | _id: d.id,
12 | value: d.value,
13 | }));
14 | return (
15 |
16 |
57 | );
58 | };
59 |
60 | export default Pie;
61 |
62 | Pie.propTypes = chartPropTypes;
63 |
--------------------------------------------------------------------------------
/src/components/Field/Field.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import classnames from "classnames";
4 | import { fieldPropTypes } from "components/views/modelPropTypes";
5 | import FieldLabel from "./FieldLabel";
6 | import FieldElemEdit from "./edit/FieldElemEdit";
7 | import FieldElemBrowse from "./browse/FieldElemBrowse";
8 |
9 | import "./Field.scss";
10 |
11 | const Field = ({
12 | fieldDef,
13 | onChange,
14 | label,
15 | readOnly,
16 | icon,
17 | value,
18 | invalid,
19 | message,
20 | }) => {
21 | const fReadOnly = readOnly || fieldDef.readOnly;
22 |
23 | return (
24 |
28 |
33 | {fReadOnly ? (
34 |
35 | ) : (
36 |
37 | )}
38 | {invalid && message &&
{message}
}
39 |
17 |
18 | {title}
19 | {count !== null && {text} }
27 |
28 |
29 |
31 |
13 |
16 |
17 |
18 | {
21 |
{v.description}
22 |
Route: "{v.route}"
23 |
24 |
25 |
30 |
31 |
32 |
48 |
Views
49 |
50 | Evolutility-UI-React provides different types of model-driven view (as
51 | React components).
52 |
53 |
54 |
55 | For each object, all views are defined by a single UI model in a simple
56 | declarative way.
57 |
58 |
59 |
60 |
61 | Views for One object
62 |
63 | {viewsSet("one")}
64 |
65 |
66 |
67 |
68 | Views for Many objects
69 |
70 | {viewsSet("many")}
71 |
72 |
73 |
74 | "Comfort" Views
75 | {viewsSet("comfort")}
76 |
77 |
24 |
25 |
Documentation
26 |
27 |
28 |
29 |
30 |
31 | Evolutility is a model-driven UI for GraphQL. With it you can easily
32 | build modern SPAs by writing models rather than code.
33 |
34 | Table of Contents
35 |
36 | {docMenus.map((m) => (
37 |
38 |
40 | ))}
41 |
42 |
43 |
45 |
46 | It's still a work in progress. To suggest a feature or report a bug:{" "}
47 |
53 | https://github.com/evoluteur/evolutility-ui-react/issues
54 |
55 |
56 |
57 | Evolutility-UI-React is released under the{" "}
58 |
64 | AGPL license
65 |
66 | .
67 |
68 |
69 |
37 |
38 | {title && (
39 |
40 | {collapsible && (
41 |
{title}
49 |
50 | )}
51 | {header &&
{header}
}
52 | {children}
53 | {footer &&
{footer}
}
54 |
55 |
34 |
39 | );
40 |
41 | const App = () => {
42 | const [isCollapsed, setIsCollapsed] = useState(false);
43 |
44 | const onClickToggle = () => {
45 | setIsCollapsed(!isCollapsed);
46 | };
47 |
48 | const css = classnames("app", { "side-collapsed": isCollapsed });
49 |
50 | return (
51 |
52 |
53 |
54 |
58 |
64 |
69 |
70 |
71 |
72 |
37 |
39 | );
40 | // user.click(link);
41 | const hello = await screen.getByText("Submit");
42 | expect(hello).toHaveTextContent("Submit");
43 | });
44 | it("Button property test add type", async () => {
45 | render(
20 |
21 | {fields.map((f) => (
22 |
23 | {f.labelShort || f.label}
24 | {f.id === sortFieldId && (
25 |
31 | ))}
32 |
33 |
34 | );
35 |
36 | const List = ({
37 | entity,
38 | model,
39 | data,
40 | sortField,
41 | sortDirection,
42 | onClickSort,
43 | }) => {
44 | let body;
45 | const fields = useMemo(() => model?.fields.filter((f) => f.inMany), [entity]);
46 | if (!fields.length) {
47 | body = (
48 |
57 | {tableHeader(fields, onClickSort, sortField, sortDirection)}
58 |
65 | );
66 | }
67 | return (
68 |
69 | {body}
70 |
71 | );
72 | };
73 |
74 | export default List;
75 |
76 | List.propTypes = {
77 | entity: PropTypes.string.isRequired,
78 | model: modelPropType.isRequired,
79 | data: PropTypes.oneOfType([
80 | PropTypes.arrayOf(
81 | PropTypes.shape({
82 | id: PropTypes.number.isRequired,
83 | })
84 | ),
85 | PropTypes.shape({
86 | errors: PropTypes.arrayOf(PropTypes.shape()),
87 | }),
88 | ]),
89 | onClickSort: PropTypes.func.isRequired,
90 | };
91 |
--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .app {
4 | position: relative;
5 | min-height: 100vh;
6 | display: flex;
7 | flex-direction: column;
8 | background-color: $bgcolor-main;
9 | }
10 |
11 | img {
12 | border: 0;
13 | max-width: 100%;
14 | }
15 | a {
16 | text-decoration: none;
17 | color: $color-link;
18 | &:hover,
19 | &:focus {
20 | color: $color-link-hover;
21 | text-decoration: underline;
22 | }
23 | }
24 | table {
25 | border-spacing: 0;
26 | }
27 | tr,
28 | img {
29 | page-break-inside: avoid;
30 | }
31 | .list-tags {
32 | > div {
33 | border: $border;
34 | border-radius: 8px;
35 | padding: 2px 7px;
36 | margin: 0 5px 0 0;
37 | width: auto !important;
38 | display: inline-block;
39 | }
40 | }
41 | label {
42 | color: $color-label;
43 | font-size: $label-font-size;
44 | }
45 |
46 | .cols-2 {
47 | @include flex-holder();
48 | > div {
49 | margin-right: 10px;
50 | @include flex-item();
51 | flex: 1 1 0px;
52 | }
53 | }
54 |
55 | .table {
56 | background-color: $bgcolor-background;
57 | border-bottom: $border;
58 | width: 100%;
59 | max-width: 100%;
60 | margin-bottom: 20px;
61 | > thead > tr > th,
62 | > tbody > tr > td {
63 | padding: 8px;
64 | line-height: 1.428571429;
65 | vertical-align: top;
66 | border-top: $border;
67 | }
68 | > thead > tr > th {
69 | text-align: left;
70 | background-color: $bgcolor-header;
71 | border-bottom: $border;
72 | }
73 | > tbody > tr:first-child > td {
74 | border-top: none;
75 | }
76 | }
77 | .table-hover > tbody > tr:hover {
78 | background-color: #f5f5f5;
79 | }
80 |
81 | @media print {
82 | a,
83 | a:visited {
84 | text-decoration: underline;
85 | }
86 | a[href]:after {
87 | content: " (" attr(href) ")";
88 | }
89 | a[href^="/"]:after,
90 | a[href^="#"]:after,
91 | a[href^="javascript:"]:after {
92 | content: "";
93 | }
94 | pre,
95 | blockquote {
96 | border: 1px solid #999;
97 | page-break-inside: avoid;
98 | }
99 | thead {
100 | display: table-header-group;
101 | }
102 | tr,
103 | img {
104 | page-break-inside: avoid;
105 | }
106 | img {
107 | max-width: 100% !important;
108 | }
109 | .table {
110 | border-collapse: collapse !important;
111 | td,
112 | th {
113 | background-color: #fff !important;
114 | }
115 | }
116 | .noprint {
117 | display: none !important;
118 | }
119 | }
120 |
121 | .Toastify__toast {
122 | margin-bottom: 4px !important;
123 | min-height: 42px !important;
124 | }
125 | .Toastify__toast-container {
126 | width: 260px !important;
127 | }
128 |
--------------------------------------------------------------------------------
/src/components/views/comfort/Activity/Activity.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { Link, useParams } from "react-router-dom";
3 |
4 | import { i18n_activity as i18n } from "i18n/i18n";
5 | import { getActivity, clearActivity } from "utils/activity";
6 | import { getModel } from "utils/moMa";
7 | import { capitalize, pixPath } from "utils/format";
8 | import Button from "components/widgets/Button/Button";
9 | import ViewHeader from "components/views/ViewHeader/ViewHeader";
10 |
11 | import "./Activity.scss";
12 |
13 | const visitsCount = (n) => {
14 | if (n === 1) {
15 | return i18n.views1;
16 | }
17 | if (n === 0) {
18 | // should never happen
19 | return i18n.views1;
20 | }
21 | return i18n.viewsN?.replace("{0}", n);
22 | };
23 |
24 | const Activity = () => {
25 | const { entity } = useParams();
26 | const [act, setFullActivity] = useState(getActivity(entity));
27 | const m = getModel(entity);
28 | const title = capitalize(m.namePlural) + " Activity";
29 |
30 | useEffect(() => {
31 | window.scrollTo(0, 0);
32 | document.title = title;
33 | }, [title]);
34 |
35 | const activityItem = (act) => {
36 | return (
37 | act && (
38 |
39 |
40 |
41 | {act.title}
42 |
43 |
{visitsCount(act.visits)}
44 |
{act.date}
45 |
52 | {title.replace("{0}", m.namePlural)}
53 | {items.map(activityItem)}
54 |
55 | );
56 |
57 | const onClearActivity = () => {
58 | // TODO: confirmation
59 | clearActivity(entity);
60 | setFullActivity(null);
61 | };
62 |
63 | return (
64 |
65 |
66 | {act?.lastViewed?.length > 0 && (
67 |
68 | {i18n.activitySince
69 | ?.replace("{0}", m.namePlural)
70 | .replace("{1}", act.firstActivityDate)}
71 |
77 | )}
78 | {act?.mostViewed.length > 0 &&
79 | activityList(i18n.mostViewed, act?.mostViewed)}
80 | {act?.lastViewed.length ? (
81 | activityList(i18n.lastViewed, act?.lastViewed)
82 | ) : (
83 |
{i18n.noActivity}
84 | )}
85 |
option.name}
55 | onSearch={handleSearch}
56 | onChange={handleChange}
57 | onInputChange={onInputChange || noOp}
58 | selectHint={noOp}
59 | selected={value ? [value] : []}
60 | />
61 | );
62 | }
63 | );
64 |
65 | export default FieldObject;
66 |
67 | FieldObject.propTypes = {
68 | /** Model id */
69 | entity: PropTypes.string.isRequired,
70 | /** Element id */
71 | id: PropTypes.string.isRequired,
72 | /** Callback function triggered on selection */
73 | onChange: PropTypes.func.isRequired,
74 | /** Callback function triggered on value change */
75 | onInputChange: PropTypes.func,
76 | /** Field value (object w/ id and name props) */
77 | value: PropTypes.shape({
78 | id: PropTypes.number.isRequired,
79 | name: PropTypes.string.isRequired,
80 | }),
81 | /** Placeholder text */
82 | placeHolder: PropTypes.string,
83 | };
84 |
85 | FieldObject.defaultProps = {
86 | id: "tphd",
87 | value: null,
88 | placeHolder: i18n_actions.search,
89 | onInputChange: null,
90 | };
91 |
--------------------------------------------------------------------------------
/src/components/views/analytics/Charts/ChartTable.jsx:
--------------------------------------------------------------------------------
1 | // Evolutility-UI-React :: /views/Charts/Chart_Table.js
2 |
3 | // Shows a table with the chart data
4 |
5 | import React from "react";
6 | import PropTypes from "prop-types";
7 | import { Link } from "react-router-dom";
8 | import { chartDataPropType } from "./chartProps";
9 | import { i18n_charts } from "i18n/i18n";
10 |
11 | import "./ChartTable.scss";
12 |
13 | const percent = (value, total) =>
14 | `${parseInt((10000 * value) / total, 10) / 100}%`;
15 |
16 | const ChartTable = ({ entity, field, sortTable, data, showTotal }) => {
17 | const sLink = `../${entity}/list?${field.id}=`;
18 | const makeLink = (d) => {
19 | let param = "" + (d.id || d.label);
20 | param = param === "null" ? "null" : "eq." + param;
21 | return sLink + param;
22 | };
23 | let totalCount = 0;
24 | if (showTotal) {
25 | data?.forEach((d) => (totalCount += d.value));
26 | }
27 |
28 | return (
29 |
30 |
31 |
32 |
33 |
34 | {field.label}
35 |
36 |
37 | {i18n_charts.count}
38 |
39 |
40 | {i18n_charts.percentage}
41 |
42 |
43 |
44 |
45 | {data?.map((d) => (
46 |
47 |
48 |
50 | {d.value}
51 | {percent(d.value, totalCount)}
52 |
53 | ))}
54 | {showTotal && totalCount && (
55 |
56 | {i18n_charts.total}
57 | {totalCount}
58 | 100%
59 |
60 | )}
61 |
62 |
63 |
26 | {fields?.map((f, idx) => {
27 | const fv =
;
28 | if (idx === 0) {
29 | return (
30 |
31 |
32 |
39 |
40 |
44 |
45 | );
46 | }
47 | if (f.type === ft.image) {
48 | return (
49 |
50 |
54 | );
55 | }
56 | const icon = f.type === ft.lov && f.lovIcon ? d[`${f.id}_icon`] : "";
57 | const rfid = f.id + d.id;
58 | return (
59 |
60 |
{f.labelShort || f.label}:
61 |
62 | {icon &&
}
63 | {fv}
64 |
65 |
66 | );
67 | })}
68 |
38 | {d}
39 |
40 | );
41 | };
42 |
43 | const FieldElemBrowse = memo(({ fieldDef, value, icon }) => {
44 | // - return the formatted field value
45 | const f = fieldDef;
46 | const fType = f.type;
47 | let fw;
48 |
49 | if (fType === ft.textml) {
50 | const height = `${emHeight(f)}em`;
51 | return (
52 |
57 | );
58 | }
59 | if (fType === ft.image && value) {
60 | fw = image(filesUrl + value);
61 | } else if (fType === ft.doc) {
62 | fw = doc(value, filesUrl);
63 | } else if (fType === ft.lov) {
64 | if (f.object) {
65 | fw = (
66 |
73 |
77 | );
78 | // } else if (fType === ft.list) {
79 | // if (f.list) {
80 | // fw = (
81 | //
82 | // {value?.map((itemid) => (
83 | //
{itemInList(itemid, f.list)}
84 | // ))}
85 | //
{jsonString(value)} ;
93 | } else {
94 | fw = {fw}
;
97 | });
98 |
99 | export default FieldElemBrowse;
100 |
--------------------------------------------------------------------------------
/src/models/organizer/todo.js:
--------------------------------------------------------------------------------
1 | /*
2 | Evolutility UI model for To-Do List
3 | https://github.com/evoluteur/evolutility-ui-react
4 | */
5 |
6 | const model = {
7 | id: "todo",
8 | qid: "task",
9 | title: "To-Do List",
10 | world: "demos",
11 | name: "task",
12 | namePlural: "tasks",
13 | icon: "todo.png",
14 | active: true,
15 | position: 1,
16 | titleField: "title",
17 | fields: [
18 | {
19 | id: "title",
20 | type: "text",
21 | label: "Title",
22 | required: true,
23 | maxLength: 255,
24 | inMany: true,
25 | inSearch: true,
26 | width: 100,
27 | },
28 | {
29 | id: "duedate",
30 | type: "date",
31 | label: "Due Date",
32 | inMany: true,
33 | width: 38,
34 | },
35 | {
36 | id: "category",
37 | type: "lov",
38 | label: "Category",
39 | list: [
40 | {
41 | id: 1,
42 | text: "Home",
43 | },
44 | {
45 | id: 2,
46 | text: "Work",
47 | },
48 | {
49 | id: 3,
50 | text: "Fun",
51 | },
52 | {
53 | id: 4,
54 | text: "Others",
55 | },
56 | {
57 | id: 5,
58 | text: "Misc.",
59 | },
60 | ],
61 | inMany: true,
62 | width: 62,
63 | },
64 | {
65 | id: "priority",
66 | type: "lov",
67 | label: "Priority",
68 | required: true,
69 | list: [
70 | {
71 | id: 1,
72 | text: "1 - ASAP",
73 | },
74 | {
75 | id: 2,
76 | text: "2 - Urgent",
77 | },
78 | {
79 | id: 3,
80 | text: "3 - Important",
81 | },
82 | {
83 | id: 4,
84 | text: "4 - Medium",
85 | },
86 | {
87 | id: 5,
88 | text: "5 - Low",
89 | },
90 | ],
91 | defaultValue: 4,
92 | inMany: true,
93 | width: 100,
94 | },
95 | {
96 | id: "complete",
97 | type: "boolean",
98 | label: "Complete",
99 | inMany: true,
100 | width: 100,
101 | },
102 | {
103 | id: "description",
104 | type: "textmultiline",
105 | label: "Description",
106 | maxLength: 1000,
107 | inMany: false,
108 | inSearch: true,
109 | height: 3,
110 | },
111 | ],
112 | groups: [
113 | {
114 | id: "p1",
115 | type: "panel",
116 | label: "Task",
117 | width: 62,
118 | fields: ["title", "duedate", "category"],
119 | },
120 | {
121 | id: "p2",
122 | type: "panel",
123 | label: "Status",
124 | width: 38,
125 | fields: ["priority", "complete"],
126 | },
127 | {
128 | id: "p3",
129 | type: "panel",
130 | label: "Task Description",
131 | width: 100,
132 | fields: ["description"],
133 | },
134 | ],
135 | };
136 |
137 | export default model;
138 |
--------------------------------------------------------------------------------
/src/components/shell/SideBar/SideBar.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Link, useLocation } from "react-router-dom";
3 | import classnames from "classnames";
4 | import Icon from "react-crud-icons";
5 | import { i18n_nav } from "i18n/i18n";
6 | import { demosMenu, docMenus } from "./appMenus";
7 | import { evoPath, pixPath } from "utils/format";
8 |
9 | import demoSVG from "./svg/eye.svg";
10 | import docSVG from "./svg/book.svg";
11 |
12 | import "./SideBar.scss";
13 |
14 | // #region ------- Helpers ---------
15 | const ShortCuts = ({ entity }) => (
16 |
17 |
24 | );
25 |
26 | const sLink = (label, url, icon, css) => (
27 | {label}
30 |
31 | );
32 | const hDemos = sLink("Demos", evoPath, demoSVG);
33 | const hDocs = sLink("Documentation", "docs", docSVG);
34 | //#endregion
35 |
36 | const SideBar = ({ onClickToggle }) => {
37 | // const { entity, view } = useParams(); // not outside of evolutility routes
38 | const [entity, view] = useLocation().pathname.slice(1).split("/");
39 | const menuLinkDemo = (menu) => (
40 |
41 | {sLink(
42 | menu.text,
43 | `/${evoPath}/${menu.id}/${menu.defaultViewMany || "list"}`,
44 | pixPath + menu.icon,
45 | "e-icon"
46 | )}
47 |
49 | );
50 |
51 | const menuLinkDoc = (menu) => (
52 |
53 | {menu.text}
56 |
57 |
58 | );
59 |
60 | let title, links, menus;
61 | if (!entity) {
62 | links = [hDemos, hDocs];
63 | } else if (entity === "docs") {
64 | title = hDocs;
65 | menus = docMenus.map(menuLinkDoc);
66 | links = hDemos;
67 | } else {
68 | title = hDemos;
69 | menus = demosMenu.map(menuLinkDemo);
70 | links = hDocs;
71 | }
72 |
73 | return (
74 |
75 |
76 | {i18n_nav.skip}
77 |
78 |
79 |
81 | {title && (
82 | <>
83 | {title}
84 |
85 | {links}
89 |
90 |
91 | );
92 | };
93 |
94 | export default SideBar;
95 |
--------------------------------------------------------------------------------
/src/components/views/many/shared/Pagination/Pagination.jsx:
--------------------------------------------------------------------------------
1 | import React, { memo } from "react";
2 | import PropTypes from "prop-types";
3 | import config from "config";
4 |
5 | import "./Pagination.scss";
6 |
7 | const { pageSize = 50 } = config;
8 |
9 | const Pagination = memo(({ count, fullCount, pageIndex, onClick }) => {
10 | if (fullCount > pageSize) {
11 | let gapIdx = 0;
12 | const paginationBody = [];
13 |
14 | if (fullCount > count && !(pageIndex === 0 && count < pageSize)) {
15 | const nbPages = Math.ceil(fullCount / pageSize);
16 | const wPrev = pageIndex > 0;
17 | const wNext = nbPages > pageIndex + 1;
18 | const pId = pageIndex + 1;
19 | const bPage = (id) => {
20 | paginationBody.push(
21 |
26 | {id}
27 |
28 | );
29 | };
30 | const bPageRange = (pStart, pEnd) => {
31 | for (let i = pStart; i <= pEnd; i++) {
32 | bPage(i);
33 | }
34 | };
35 | const bGap = (idx) => {
36 | paginationBody.push(
37 |
38 | ...
39 |
40 | );
41 | };
42 |
43 | paginationBody.push(
44 |
49 | <
50 |
51 | );
52 | bPage(1);
53 |
54 | if (nbPages < 17) {
55 | bPageRange(2, nbPages);
56 | } else if (pId < 5) {
57 | bPageRange(2, 5);
58 | if (nbPages > 5) {
59 | bGap(gapIdx++);
60 | bPage(nbPages);
61 | }
62 | } else {
63 | bGap(gapIdx++);
64 | bPageRange(pId - 2, Math.min(pId + 2, nbPages));
65 | if (nbPages > pId + 2) {
66 | if (nbPages > pId + 3) {
67 | bGap(gapIdx++);
68 | }
69 | bPage(nbPages);
70 | }
71 | }
72 |
73 | paginationBody.push(
74 |
79 | >
80 |
81 | );
82 | }
83 |
84 | return (
85 |
86 | {paginationBody}
87 |
88 | );
89 | }
90 | return null;
91 | });
92 |
93 | export default Pagination;
94 |
95 | Pagination.propTypes = {
96 | /** Page index (default 0) */
97 | pageIndex: PropTypes.number,
98 | /** Number of records in the page */
99 | count: PropTypes.number.isRequired,
100 | /** Total number of records */
101 | fullCount: PropTypes.number.isRequired,
102 | /** Callback function for pagination click */
103 | onClick: PropTypes.func.isRequired,
104 | };
105 |
106 | Pagination.defaultProps = {
107 | pageIndex: 0,
108 | };
109 |
--------------------------------------------------------------------------------
/src/components/views/many/shared/TableBody/TableBody.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { Link } from "react-router-dom";
4 | import { fieldIsNumber, fieldTypes as ft } from "utils/dico";
5 | import { pixPath } from "utils/format";
6 | import FieldValue from "components/Field/browse/FieldValue";
7 | import { fieldPropTypes } from "components/views/modelPropTypes";
8 |
9 | const TableBody = ({ fields, data, iconPath, link }) => {
10 | const icon = iconPath && (
11 |
20 |
30 | );
31 | }
32 | if (f.type === ft.image) {
33 | return (
34 |
35 | {value && (
36 |
41 | );
42 | }
43 | if (f.type === ft.color) {
44 | return (
45 |
46 |
52 |
53 | );
54 | }
55 | // } else if (f.type === ft.list) {
56 | // const lovMap = getLovMap(f);
57 | // return (
58 | //
59 | //
60 | // {(value || []).map((v) => (
61 | //
{lovMap[v] || "N/A"}
62 | // ))}
63 | //
65 | // );
66 | // }
67 | let css;
68 | if (fieldIsNumber(f)) {
69 | css = "align-right";
70 | } else if (f.type === ft.bool) {
71 | css = "td-check";
72 | } else if (f.type === ft.url) {
73 | css = "td-url";
74 | }
75 | return (
76 |
77 |
79 | );
80 | };
81 |
82 | return (
83 |
84 | {data?.map((d) => (
85 | {fields.map((f, idx) => tableCell(d, f, idx))}
86 | ))}
87 |
88 | );
89 | };
90 |
91 | export default TableBody;
92 |
93 | TableBody.propTypes = {
94 | /** Array of field definitions */
95 | fields: PropTypes.arrayOf(fieldPropTypes).isRequired,
96 | /** Table data */
97 | data: PropTypes.arrayOf(
98 | PropTypes.shape({
99 | id: PropTypes.number.isRequired,
100 | })
101 | ).isRequired,
102 | /** Link for first column (rowid added at the end of it) */
103 | link: PropTypes.string.isRequired,
104 | /** Path to images (image value added at the end of it) */
105 | iconPath: PropTypes.string.isRequired,
106 | };
107 |
--------------------------------------------------------------------------------
8 | {" "}
9 |
10 | 
14 |
15 |