Evolutility-UI-React ·

Evolutility-UI-React is a set of model-driven views to Browse, Edit, List, Cards, Charts, Stats, Overview, and Activity.

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

Check out the live demos.

Table of Contents

1. Installation
2. Configuration
3. Views for One, Many records, and for Comfort
4. Models
5. Backend
6. License

Installation

Download or clone from GitHub.

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

or use the npm 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 dependencies
npm install

# Run the node.js server
npm start

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

Configuration

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

Views

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 with Hasura.

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

Views for One object

Browse - Edit

Browse

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

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

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

Edit

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}"

Views for Many objects

List - Cards - Charts - Stats

List

Gives a tabular view of a collection.

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

Route: "/{entity}/list"

Cards

Shows records side by side as cards.

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

Route: "/{entity}/cards"

Charts

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.

Stats

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"

"Comfort" views

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

Overview

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

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

Route: "/{entity}/"

Activity

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"

Models

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.

Object

Field

Objects have fields.

Field Group

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.

Collection

Multiple details tables can be specified with "collections".

Sample model using collections: Wine Cellar.

Sample model

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.

Backend

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

1. You can signup for a free 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 script evol-db-schema.sql.
4. Populate your database with sample data by running evol-db-data.sql
5. Add relationships in Hasura console.
   Relationships on comics table:

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

   Relationships on comics_genre table:

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

   Relationships on comics_language table:

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

   Relationships on contact table:

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

   Relationships on contact_category table:

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

   Relationships on music_album table:

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

   Relationships on music_artist table:

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

   Relationships on music_genre table:

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

   Relationships on music_track table:

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

   Relationships on restaurant table:

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

   Relationships on restaurant_cuisine table:

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

   Relationships on restaurant_price table:

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

   Relationships on task table:

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

   Relationships on task_category table:

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

   Relationships on task_priority table:

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

   Relationships on wine 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 on wine_bsize table:

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

   Relationships on wine_country table:

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

   Relationships on wine_grape table:

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

   Relationships on wine_score table:

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

   Relationships on wine_tasting table:

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

   Relationships on wine_type table:

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

License

Copyright (c) 2023 Olivier Giulieri.

Evolutility-UI-React is released under the AGPL-3.0 license.

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