This library contains few components to Create, Read, Update and Delete data.

Installing

npm i sm-react-crud

Then you have to connect reducer and saga from the package

import {reducer as crudReducers} from 'sm-react-crud'

...

const store = createStore(
	combineReducers({
		...reducers,
		...crudReducers
	}),
	composeEnhancers(applyMiddleware(...middlewares))
);

...

    ...
    
    import {saga as crudSagas} from 'sm-react-crud'
    
    ...
    
    export default function* devSaga() {
    	yield all([
    	    ...
            crudSagas(),
            ...
    	]);
    }

CrudFull

Renders a list of items with a button to create new one. Items can be sorted/filtred by the each sorted/filtred column.

FRONTEND API

crudCreate

an URL to make a creating item request.

crudRead

an URL to fetch items.

modelName

a name of model, unique identification key for this component.

customActionsFunc

provides a function to customazing action handling

createButtonTitle

create button label

createFormOptions:

options to create form - fields key is required

submitShape

provides a function to set a shape of submit payload form => {data: form, model: 'modelName'}

updateShape

provides a function to set shape of updating payload form => {data: form, model: 'updateModelName'}

createDisabled

disables create mode

iconsProvider

provides a function to choose an icon by id

(id) => {
    switch (id) {
        case 'update':
            return 'edit';
...

btnStyle

styles object for default button component

ButtonComponent

custom button component

tableStyle

style object for table

tableWrapper

component to wrap the table

fixActionColumn

bool prop to fix action column on the right side

iconTheme

antd icon theme (default: 'outline')

size

antd table size (default: 'default')

tdClass

specify class for td tag

initialModal

provides an object to initialize modal form

scrollX

scroll size whian actions column is fixed (default: 1300)

pageSize

items count on one page (default: 20)

getChildrenUrl

url to fetch children

Example

./createFormFields

export default [
{
	name: 'name',
	type: 'text',
	placeholder: 'Enter a name',
	label: <strong>Name</strong>,
	validateFunc: (values, errors) => {
		if(!values.name) errors.name = 'You shoul fill this field';
		return errors;
	},
}, {
	name: 'description',
	type: 'text',
	placeholder: 'Enter a description',
	label: <strong>Description</strong>,
}, {
	name: 'status_id',
	type: 'select',
	placeholder: 'Enter a status',
	label: <strong>Status</strong>,
	options: [
	    {id: 1, name: 'Да'},
	    {id: 2, name: 'Нет'}
	],
	component: props => <Status {...props} />
}]

Use case

import createFormFileds from './createFormFileds'
import {crudFull} from 'sm-react-crud'

const objects = <CrudFull
    crudRead={'https://api/object/list'}
    crudCreate={'https://api/object/create'}
    modelName={'objectsName'}
    createDisabled={false}
    createButtonTitle={"New object"}
    createFormOptions={{
        fields: createFormFileds,
        title: 'Create new',
        editTitle: 'Edit object',
    }}
    submitShape={form => ({
        name: form.name.toUpperCase(), 
        description: form.description.toLowerCase()
    })}
    updateShape={record => ({
        name: record.name, 
        description: record.description.toLowerCase()
    })}
    customActionsFunc={(action, object) => {
        switch(action.id) {
            case 'took':
                //some action
                break;
            case 'return':
                //some action
                break;
            default:
                return null;
        }
    }}
/>

requestSaga && apiAdress

You have to define apiAdress in your store to use requestSaga for requests. It can be used for fetching data or creating a new record.

Modal form logic

Field object

Field object may contains following

name: string - input name,

type: string - input type,

placeholder: string - placeholder text,

label: string or html - label,

component: react class or function - renderer for input,

dropdownRender: react class or function - antd dropdown for input,

optionsKey: string - key in store to get input options arr.

Available field types: text, textarea, number, date, select, checkbox

Redux Store Key

You can specify store key to set options property for select or another data for your field.

   ...
   {
   	name: 'status_id',
   	type: 'select',
   	placeholder: 'Enter a status',
   	label: <strong>Status</strong>,
   	component: props => <Status {...props} />
   	optionsKey: 'statusOptions'
   },
   ... 

Dynamics

Sometimes you need to change fields array dynamically depending on the usability logic.

To impliment it, use createFormOptions and provide modified fields array by the 'fields' key:

createFormOptions={{
    fields: modifiedCreateFormFileds,
    title: 'Create record',
    editTitle: 'Edit record',
}}

BACKEND API

Backend response must contains four fields at least:

• columns : array;
• count : number;
• filter : object;
• items : array.

Columns

Columns is an array of columns() you want to render into the table. Each column includes several fields:

• id : number, uniq identificator, which is matched with key in record;
• title: string, text you want to render as a column name;
• type: string, type of the data you send under the key;
• order: object, inlides fields 'can' (setting order available or not) and 'orders' (an array of available orders ).
• filter: object, inlides fields:
  • can (setting filter available or not),
  • type (type of filter input),
  • defaultValue (default filter input value)
  • query (url to fetch filter options)

Available filter types:

• input_number (input type 'number')
• input_text (input type 'text')
• date_picker ( antd date picker)
• select_one (select, can select one option)
• select (miltiple select)
• boolean (checkbox)

Items

It's an array of records and a main table info. It must includes keys that are matched with culumns ids and contains the same type of data that are specified in columns type. Example is below.

   {"response":
       {
           "items":[
               {
                   "objectType": 'room',
                   "object":{
                       "id":22,
                       "name":"Ул. Чапаевская 210 / Вилоновская 10, кв 3 (Квартира)"
                   },
                   "worker":{
                       "id":44,
                       "name":"var1232enik163_yandex_ru"
                   },
                   "description":"hh",
                   "action_date":1549224000,
                   "updated_at":1549280956,
               },
               {
                   "objectType": 'flat',
                   "object":{
                       "id":22,
                       "name":"Ул. Чапаевская 210 / Вилоновская 10, кв 3 (Квартира)"},
                       "worker":{
                           "id":25,
                           "name":"DSTS"
                       },
                   "description":"ghjgh",
                   "action_date":1549137600,
                   "updated_at":1549186595,
               }
           ],
           "columns":[
               {
                   "id":"objectType",
                   "title":"Тип",
                   "type":"string",
                   "filter": {
                       "can":true,
                       "type":"select_one",
                       "defaultValue":"",
                       "query":"/v1/owner/tenant/filter/action-types"
                   },
                   "order":{
                       "can":true,
                       "orders":[
                           "SORT_ASC",
                           "SORT_DESC"
                       ]
                   }
               },{
                   "id":"object",
                   "title":"Объект",
                   "type":"object",
                   "filter":{
                       "can":true,
                       "type":"select_one",
                       "defaultValue":"",
                       "query":"/v1/owner/tenant/filter/objects"
                   },
                   "order":{
                       "can":false,
                       "orders":[]
                   }
               }
           ],
           count: 2,
           filter: {}
       }
   }

You can see that column with id 'objectType' has field 'type' with value 'string'. In item object we have a field 'objectType' which is string, what is matched with column field 'type'. There is a ralation column id -> items key.

ArrayCell

You can specify 'array_ext' column type to render an array data as you wish using following parameters:

• "values", data you wont to render
• "type", data type ("text", "date", "array_ext"), default 'text'
• "isHtml", indicates whether the data is html, default 'false'
• "delimiter", separator for "values" item, default none
• "dateFormat", indicates format of rendering date, for example 'DD-MM-YYYY', default: 'DD.MM.YYYY'
• "style", style object for item

Example:

users: {
    values: ['<div><strong><a>Alex</a></strong></div>', '<div><em><a>Masha</a></em></div>'],
    isHtml: true,
    type: 'text',
    delimiter: '----'
}