reusable console data widgets

[jsvde]

Topic Basic PostgreSQL types (Int, BigInt, Text, Date, Timestamp, etc.) are available when defining and editing columns of a given database table. When editing a specific row the majority of types are rendered as <input type="text" />.

Idea The simplest version of a console data widget would be a date picker widget on all columns of type timestamp. The idea is to have a few default widget like the date picker but keep the system pluggable. Let users define custom schema types on top of existing base type. This custom type can then be associated with an ui widget based on react components and use custom validation if needed. Custom types could be rendered in a separate optgroup inside the select tag and have the corresponding base type in parenthesis, see example.

Simple example User defined type: email References postgres type: text Render Widget: <input type="email" />

Advanced example User defined type: location References postgres type: point. Render Widget:

          <LocationPicker
            containerElement={ <div style={ {height: '100%'} } /> }
            mapElement={ <div style={ {height: '400px'} } /> }
            defaultPosition={defaultPosition}
            onChange={this.handleLocationChange}
          />

from react location picker

Why

• Makes inserting/editing data way easier and more pleaseant (built in validation is useful for admins too).
• Opt-in, so people can use/define widgets useful to their schema.
• Always liked the approach of ACF when modeling/editing data in WordPress projects
• Look at Airtable, GraphCMS or Contentful

No changes to actual API/Engine just an extension to the frontend. All custom types boil down to base types. All widgets are used by admins and should be seen as help to edit data rather than an assurance of valid data in the db, so no server side validation required. Would need a common interface how to deal with current data of a field and how to update it.

This is just a rough sketch that instantly came to mind when using grahql-engine for the first time. Feedback is greatly appreciated and thank you @coco98 for creating the ideas label 👍

[praveenweb]

@jsvde - Thanks for the suggestions. Reusable widgets would be nice to have.

For starters, we will add the date picker widget for timestamp/date fields as its trivial.

For user defined widgets, we need to store the state somewhere in the db. The idea is to make the UX of data management better and probably get in some features that a CMS would have. We can do this incrementally too.

Will think through this and come up with a plan in sometime.

[lucarestagno]

in the meantime, we significantly improved the data entry in Insert / Edit Row with custom components according to the column data type. we will definitely continue to improve it over time. feel free to reopen this issue if anything specific is needed, thanks.