Repository files navigation

Evolutility-UI-React is a set ofmodel-driven views toBrowse,Edit,List,Cards,Charts,Stats,Overview, andActivity.

With it you can easily build CRUD applications by writing models rather than code. It usesHasura GraphQL backend. No hand-coding is necessary!

Check out thelive demos.

1. Installation
2. Configuration
3. Views forOne,Many records, and forComfort
4. Models
5. Backend
6. License

Download orclone fromGitHub.

# To get the latest stable version, use git from the command line.git clone https://github.com/evoluteur/evolutility-ui-react

or use thenpm package:

# To get the latest stable version, use npm from the command line.npm install evolutility-ui-react

In the Evolutility-UI-React directory, use the command line to type the following:

# Install dependenciesnpm install# Run the node.js servernpm start

In a web browser, go to the url [http://localhost:3000/ the REST endpoints, you also need to install and runEvolutility-Server-Node which provides the matching REST endpoints based on the same metadata.

Configurations options are specified in the file/src/config.js. They apply to all apps (app specific options are specified in models).

For any object, a single model defines UI elements across views in a simple declarative way.

Evolutility-UI-React provides different types of view:

• Views for One - a single record:Browse,Edit.
• Views for Many - a collection of records:List,Cards,Charts,Stats.

Evolutility uses GraphQL withHasura.

Notes: Views for actions (search, filter, export) will come later.

Browse -Edit

Shows all fields for viewing (read only). Fields are grouped in panels.

Code:/src/components/views/one/Browse/Browse.jsx

Route: "/{entity}/browse/{id}"

This view shows all fields for edition to create or update records.It automatically performs validation based on the model.Fields are grouped in panels and tabs.

Code:/src/components/views/one/Edit/Edit.jsx

Route: "/{entity}/edit/{id}"

List -Cards -Charts -Stats

Gives a tabular view of a collection.

Code:/src/components/views/many/List/List.jsx

Route: "/{entity}/list"

Shows records side by side as cards.

Code:/src/components/views/many/Cards/Cards.jsx

Route: "/{entity}/cards"

Draws charts about the collection. Currently bars and pie charts are implemented, a list with count and percentages is also available. Only provided for fields of types like boolean, lov, integer, decimal, date... (not text or textmultilines).

Code:/src/components/views/analytics/Charts/Charts.jsx

Route: "/{entity}/charts"

Note: The "Charts" view is currently only implemented for REST, not available with GraphQL yet.

Display last update, number of updates in the last week, and for numeric fields the min, max, count, average.

Code:/src/components/views/analytics/Stats/Stats.jsx

Route: "/{entity}/stats"

Display a summary of the object and the latest activity on it.

Display a summary of the object and the latest activity on it.

Code:/src/components/views/comfort/Overview/Overview.jsx

Route: "/{entity}/"

Show list of "last visited" and "most visited" records for the object (stored in the browser's localStorage).

Code:/src/components/views/comfort/Activity/Activity.jsx

Route: "/{entity}/activity"

Each model describe an object and its list of fields. A single model is used for all views (Browse, Edit, List, Cards...).

For any object, all UI views (List, Cards, Edit, Charts...) share the same model.All Fields are present in the Edit and Browse views. Fields can be flagged with "inMany" to be included in the List and Cards views, or "noCharts" and "noStats" to be excluded from the Charts or Stats views.

Objects have fields.

Field Groups are used to separate Fields into panels in the Edit and Browse views.

Notes:

• Field Groups are optional. By default a single group holds all fields.
• Field Groups are positioned based on their "width" property the same way than fields are positioned inside groups.

Multiple details tables can be specified with "collections".

Sample model using collections:Wine Cellar.

The following example is the model for a simple graphic novels inventory app.

{id:"comics",title:"Graphic Novels",name:"graphic novel serie",namePlural:"graphic novel series",icon:"comics.png",titleField:"title",fields:[{id:"title",type:"text",label:"Title",required:true,maxLength:255,width:100,inMany:true,},{id:"authors",type:"text",label:"Authors",inMany:true,width:62,},{id:"genre",type:"lov",label:"Genre",width:38,inMany:true,list:[{id:1,text:"Adventure"},{id:2,text:"Fairy tale"},{id:3,text:"Erotic"},{id:4,text:"Fantastic"},{id:5,text:"Heroic Fantasy"},{id:6,text:"Historic"},{id:7,text:"Humor"},{id:8,text:"One of a kind"},{id:9,text:"Youth"},{id:10,text:"Thriller"},{id:11,text:"Science-fiction"},{id:12,text:"Super Heros"},{id:13,text:"Western"}]},{id:"serie_nb",type:"integer",label:"Albums",noCharts:true,width:15,inMany:false},{id:"have_nb",type:"integer",label:"Owned",width:15,inMany:false,noCharts:true},{id:"have",type:"text",label:"Have",width:15,inMany:false},{id:"language",type:"lov",label:"Language",width:17,inMany:true,lovIcon:true,list:[{id:2,text:'French',icon:'comics/flags/fr.png'},{id:1,text:'American',icon:'comics/flags/us.png'}]},{id:"complete",type:"boolean",label:"Complete",width:19,inMany:false},{id:"finished",type:"boolean",label:"Finished",width:19,inMany:false},{id:"pix",type:"image",label:"Cover",width:30,inMany:true},{id:"notes",type:"textmultiline",label:"Notes",width:70,height:7,maxLength:5000,inMany:false}],groups:[{id:"serie",type:"panel",label:"Serie",width:70,fields:["title","authors","genre","serie_nb","have_nb","have","language","complete","finished","notes"]},{id:"pix",type:"panel",label:"Cover",width:30,fields:["pix"]}]}

More sample models:To-do list,Address book,Restaurants list,Wine cellar.

You will need to setup the GraphQL backend onHasura with the Evolutility demo database.

1. You can signup for afree account or host it yourself (Quickstart Hasura CLI).
2. Add a Postgres database to your Hasura setup.
3. Add the demo tables by running the SQL scriptevol-db-schema.sql.
4. Populate your database with sample data by runningevol-db-data.sql
5. Add relationships in Hasura console.
   Relationships oncomics table:

   • genre (Object): comics / genre_id -> comics_genre / id
   • language (Object): comics / language_id -> comics_language / id

   Relationships oncomics_genre table:

   • comics (Array): comics_genre / id => comics / genre_id

   Relationships oncomics_language table:

   • comics (Array): comics_language / id => comics / language_id

   Relationships oncontact table:

   • category (Object): contact / category_id -> contact_category / id

   Relationships oncontact_category table:

   • contacts (Array): contact_category / id => contact / category_id

   Relationships onmusic_album table:

   • artist (Object): music_album / artist_id -> music_artist / id
   • tracks (Array): music_album / id -> music_track / album_id

   Relationships onmusic_artist table:

   • albums (Array): music_artist / id -> music_album / artist_id

   Relationships onmusic_genre table:

   • tracks (Array): music_genre / id -> music_track / genre_id

   Relationships onmusic_track table:

   • album (Object): music_track / album_id -> music_album / id
   • genre (Object): music_track / genre_id -> music_genre / id

   Relationships onrestaurant table:

   • cuisine (Object): restaurant / cuisine_id -> restaurant_cuisine / id
   • price (Object): restaurant / price_id -> restaurant_price / id

   Relationships onrestaurant_cuisine table:

   • restaurants (Array): restaurant_cuisine / id => restaurants / cuisine_id

   Relationships onrestaurant_price table:

   • restaurants (Array): restaurant_price / id => restaurants / price_id

   Relationships ontask table:

   • category (Object): task / category_id -> task_category / id
   • priority (Object): task / priority_id -> task_priority / id

   Relationships ontask_category table:

   • tasks (Array): task_category / id => task / category_id

   Relationships ontask_priority table:

   • tasks (Array): task_priority / id => task / priority_id

   Relationships onwine table:

   • wine_tastings (Array): wine / id -> wine_tasting / wine_id
   • bsize (Object): wine / bsize_id -> wine_bsize / id
   • country (Object): wine / country_id -> wine_country / id
   • grape (Object): wine / grape_id -> wine_grape / id
   • score (Object): wine / score_id -> wine_score / id
   • type (Object): wine / type_id -> wine_type / id

   Relationships onwine_bsize table:

   • wines (Array): wine_bsize / id => wine / bsize_id

   Relationships onwine_country table:

   • wines (Array): wine_country / id => wine / country_id

   Relationships onwine_grape table:

   • wines (Array): wine_grape / id => wine / grape_id

   Relationships onwine_score table:

   • wines (Array): wine_score / id => wine / score_id

   Relationships onwine_tasting table:

   • wine (Object): wine_tasting / wine_id -> wine / id

   Relationships onwine_type table:

   • wines (Array): wine_type / id => wine / type_id
6. In Evolutility, change the "apiPath" and "adminSecret" in the ./src/config.js file.

Copyright (c) 2023Olivier Giulieri.

Evolutility-UI-React is released under theAGPL-3.0 license.

To suggest a feature or report a bug:https://github.com/evoluteur/evolutility-ui-react/issues