Skip to content

A Material UI component that provides a Create, Retrieve, Update, Delete interface for @molaux/sequelize-graphql-schema-builder

Notifications You must be signed in to change notification settings

molaux/mui-crudf

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Material-UI CRUDF

This piece of code exposes CRUD interfaces built on top of MUI and Sequelize GraphQL Schema Builder.

To achieve this, it uses data exposed by the Sequelize GraphQL Schema Builder to build relationnships, types, fields, validators and default values from the server. At the present time the deifferent views (List, Create, Update, Show) are auto connected to GraphQL subscriptions exposed by the server that updates data in real time.

From the example (MUI App Biolerplate) :

import React from 'react'
import PropTypes from 'prop-types'

import {
  CRUDF
} from '@molaux/mui-crudf'

const BookmarkCRUDF = ({ className, initialView, onLink }) => (
  <CRUDF
    className={className}
    typeName="Bookmark"
    initialView={initialView?.view}
    initialValue={initialView?.value}
    translations={{
      fields: {
        createdAt: 'Creation date',
        updatedAt: 'Update date',
        url: 'Link',
        comment: 'Comment',
        visits: 'Visits',
        User: 'Creator'
      },
      type: {
        singular: 'Bookmark',
        plural: 'Bookmarks',
        'Bookmark creation': 'Add bookmark',
        'Bookmark edition': 'Edit bookmark'
      }
    }}
    listLayout={{
      order: [
        'url', 'visits', 'User', 'comment'
      ],
      hide: ['id', 'createdAt', 'updatedAt']
    }}
    editLayout={{
      layout: [
        ['url'],
        ['comment'],
        ['User']
      ],
      hide: [
        'id', 'createdAt', 'updatedAt'
      ]
    }}
    createLayout={{
      layout: [
        ['url'],
        ['comment'],
        ['User']
      ],
      hide: [
        'id', 'createdAt', 'updatedAt'
      ]
    }}
    showLayout={{
      layout: [
        ['url'],
        ['visits'],
        ['comment'],
        ['User'],
        ['createdAt', 'updatedAt']
      ],
      hide: [
        'id'
      ]
    }}
  />
)

BookmarkCRUDF.propTypes = {
  className: PropTypes.string,
  initialView: PropTypes.shape({
    view: PropTypes.string,
    value: PropTypes.shape({})
  }),
  onLink: PropTypes.func
}

BookmarkCRUDF.defaultProps = {
  className: null,
  initialView: null,
  onLink: () => null
}

export default BookmarkCRUDF

An example with embedded form :

import React from 'react'
import PropTypes from 'prop-types'

import {
  CRUDF,
  CreateTypeForm,
  EditTypeForm,
  TypeShow
} from '@molaux/mui-crudf'

const addressConfiguration = {
  translations: {
    fields: {
      label: 'Name',
      street: 'Street',
      zipCode: 'Zipcode',
      city: 'Town',
      country: 'Country',
      comment: 'Comment'
    }
  },
  layout: {
    hide: ['name', 'Suppliers', 'Users', 'id', 'createdAt', 'updatedAt', 'Customers'],
    layout: [
      ['label'],
      ['street'],
      ['zipCode', 'city'],
      ['country'],
      ['comment']
    ]
  }
}

const CreateAddressForm = CreateTypeForm({
  typeName: 'Address',
  ...addressConfiguration
})

const EditAddressForm = EditTypeForm({
  typeName: 'Address',
  ...addressConfiguration
})

const AddressShow = TypeShow({
  typeName: 'Address',
  ...addressConfiguration
})

const UsersConfiguration = ({
  className,
  initialView,
  onLink
}) => (
  <CRUDF
    className={className}
    typeName="User"
    initialView={initialView?.view}
    initialValue={initialView?.value}
    handles={{
      Group: (view, o) => onLink('Group', view, o)
    }}
    translations={{
      fields: {
        createdAt: 'Creation date',
        updatedAt: 'Last modification date',
        firstName: 'Firstname',
        lastName: 'Lastname',
        name: 'Complete name',
        comment: 'Comment',
        enabled: 'Active',
        password: 'Password',
        authenticationType: 'Authentication type',
        login: 'Login',
        phone: 'Phone',
        email: 'Mail',
        Address: 'Address',
        Groups: 'Groups',
        Permissions: 'Extra permissions'
      },
      type: {
        singular: 'User',
        plural: 'Users',
        'User creation': 'New user',
        'User edition': 'Update user'
      }
    }}
    listLayout={{
      order: [
        'name',
        'login',
        'enabled',
        'Address',
        'phone',
        'email',
        'Groups',
        'Permissions',
        'comment'
      ],
      layout: {
        Permissions: { maxLength: 8 }
      },
      hide: [
        'id', 'firstName', 'lastName', 'password', 'authenticationType',
        'createdAt', 'updatedAt'
      ]
    }}
    showLayout={{
      layout: [
        ['enabled'],
        ['name', 'login'],
        ['phone', 'email'],
        ['Groups', 'Permissions'],
        ['Address'],
        ['comment'],
        ['createdAt', 'updatedAt']
      ],
      hide: [
        'id', 'lastName', 'firstName', 'authenticationType',
        'password'
      ],
      components: {
        Address: AddressShow
      }
    }}
    editLayout={{
      layout: [
        ['enabled'],
        ['firstName', 'lastName'],
        ['login', 'password'],
        ['phone', 'email'],
        ['Groups', 'Permissions'],
        ['Address'],
        ['comment']
      ],
      hide: [
        'id', 'name', 'authenticationType',
        'addressId', 'createdAt', 'updatedAt'
      ],
      components: {
        Address: EditAddressForm
      }
    }}
    createLayout={{
      layout: [
        ['enabled'],
        ['firstName', 'lastName'],
        ['login', 'password'],
        ['phone', 'email'],
        ['Groups', 'Permissions'],
        ['Address'],
        ['comment']
      ],
      hide: [
        'id', 'name', 'authenticationType',
        'addressId', 'createdAt', 'updatedAt'
      ],
      components: {
        Address: CreateAddressForm
      }
    }}
  />
)

UsersConfiguration.propTypes = {
  className: PropTypes.string,
  initialView: PropTypes.shape({
    view: PropTypes.string,
    value: PropTypes.shape({})
  }),
  onLink: PropTypes.func
}

UsersConfiguration.defaultProps = {
  className: null,
  initialView: null,
  onLink: () => null
}

export default UsersConfiguration

About

A Material UI component that provides a Create, Retrieve, Update, Delete interface for @molaux/sequelize-graphql-schema-builder

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published