Package Exports

react-collection-manager

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-collection-manager) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-collection-manager

react-collection-manager is a manager to list, add, edit, delete documents in mongo collection automaticaly:

Installation

$ npm i --save react-collection-manager

Props

	Format	Required	What it does ?
material	`boolean`	YES	If true. display with material-ui instead semantic-ui
title	`string`	YES	The title of the list
loading	`boolean`	YES	Useless for the moment
columns	`array`	YES	An array to initialize the table
entries	`array`	NO	An array to fill the table
formModel	`array`	NO	An array to display the add and update form: (See react-form-manager)
insertMethod	`function`	YES	A callback when add form was submit. Must return a promise
updateMethod	`function`	YES	A callback when update form was submit. Must return a promise
deleteMethod	`function`	YES	A callback when delete action was submit. Must return a promise
manager	`function`	YES	A function which return the doc by id
canAdd	`boolean`	YES	Can this user add a document in this list ?
canEdit	`boolean`	YES	Can this user edit a document in this list ?
canDelete	`boolean`	YES	Can this user delete a document in this list ?
moreActions	`[object]`	NO	An array of object `{ button: <ReactElement />, onClick: (_id) => { doSomething(_id); } }` to add more actions in the last column

Example

import React from 'react';
import List from 'react-collection-manager';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { FlatButton } from 'material-ui';
import LogsIcon from 'material-ui/svg-icons/editor/show-chart';

const entries =  [
    { _id:0, name:"Test 1", description:"desciption" },
    { _id:1, name:"Test 2", description:"desciption" }
];

const columns = [
    { name: 'Name', property:'name' },
    { name: 'Description', property:'description' },
    { name: 'Etat', property:'status' },
];

const callMethod = (method, values) => {
    return new Promise((resolve, reject) => {
        console.log(method, values);
        
        resolve();
    });
}

const insertMethod = (values) => callMethod('insertProject', values);
const updateMethod = (values) => callMethod('updateProject', values);
const deleteMethod = (values) => callMethod('deleteProject', values);

const formModel = [
    { name: "name", type: "Text", label: "Name", required: true, minLength: 3 },
    { name: "description", type: "TextArea", label: "Description", required: true },
    { name: "submit", type: "Submit", label: "Submit", textAlign:"center" }
];

const manager = (myid) => {
    return entries[myid];
};

const onClickButton = (_id) => {
    console.log(_id);
}

const moreActions = [
    { button: <FlatButton label="Monitor" labelPosition="after" icon={<LogsIcon />} />, onClick: onClickButton }
];

class App extends Component {
    render() {
      return ( <MuiThemeProvider>
            <List
                material={true}
                title="Example"
                columns={columns}
                entries={entries}
                insertMethod={insertMethod}
                updateMethod={updateMethod}
                deleteMethod={deleteMethod}
                formModel={formModel}
                canAdd={true}
                canEdit={true}
                canDelete={true}
                moreActions={moreActions}
                manager={manager}
            />
        </MuiThemeProvider>
        );
    }
}