boost-crud

Create, update, read and delete UI utilities for the web.

To Do

• [ ] Static data source
• [ ] Enable disabling sort on certain columns
• [ ] Unit tests
  • [x] Forms Utils
  • [ ] Form reducers
  • [ ] DataTable reducers
• [ ] Strip out unnecessary stuff from form utils and models
  • [ ] Submit
• [x] Integrate form library
  • [x] Type detection
  • [x] Human friendly column titles
  • [ ]
• [ ] Support for filter form
• [ ] CRUD UI service
  • [x] List service
  • [ ] Details
  • [ ] Edit
  • [ ] Create
  • [ ] Delete
• [ ] Documentation

Getting Started

Install boost-crud using npm or yarn as:

npm i boost-crud

Using Form Utilities

First, setup a javascript object representing a form as:

const forObj = {
    email: "",
    password: "",
    confirmPassword: "",
    rememberMe: true
}

Then, get your form state as:

import {getFormService} from "boost-crud";

const formService = getFormService()
const formState = formService.getInitialState(forObj)

Then you can use your form state in any framework (react, svelte, vue, etc.).

In react:

const [formState, setFormState] = useState(formService.getInitialState(forObj))

function onFieldChange(e) {
    const newState = formService.hangeFieldValue(formState, e.target.name, e.target.value)
    setFormState(newState)
}

const MyForm = () => {
  return <form>
    <label>Email:
      <input name="password" onChange={onFieldChange}/></label>
    <label>Password:
      <input name="password" onChange={onFieldChange}/></label>
    <label>Confim Password:
      <input name="confirmPassword" onChange={onFieldChange}/></label>
    <label>
      <input type="checkbox" name="rememberMe" value={true} onChange={onFieldChange} />Remember Me?</label>
  </form>
}