joi-auto-admin

Automatically create a full-featured web admin UI for CRUD operations using only a few react props.

Installation

npm install joi-auto-admin

Overview

As a developer in a company, we spend a lot of time writing web-based tools for our staffs and back office usage. This package aims to automate such work completely on the front-end side.

The idea is to provide a react component called AutoAdmin which take minimal output and automatically render a complete UI. It's mainly composed of 2 components:

1. A table for GET operation with the following features:
   • sort, filter, pagination
   • export data to excel format
   • select rows for DELETE operation
   • responsive
   • support customizable button for each row
   • expandable row
2. A form for CREATE and UPDATE operation with the following features:
   • render automatically from specified Joi Object.
   • import excel data
   • automatically validate form data and excel data before sending it to server
     • all errors are pre-translated into Thai language
   • support multiple pre-configured inputs such as image uploader, address input, heirarchical dropdown, ajax dropdown, and date picker
   • support custom react input

Example

import {Joi, AutoAdmin} from 'joi-auto-admin'

const wait = (ms) => new Promise((res) => setTimeout(res, ms));

const App = () => {
  const props = {
    name: "ลูกค้า",
    getMany: async () => {
      const data = [];
      for (let i = 0; i < 100; i++)
        data.push({
          name: `Edward King ${i}`,
          purchased_value: 3000 + Math.round(10 * Math.random()),
          district: ["กรุงเทพมหานคร", "ยานนาวา"],
          create_date: new Date(),
        });
      return data;
    },
    createMany: async (a) => {
      await wait(1000);
    },
    updateOne: async (a) => {
      await wait(1000);
    },
    deleteMany: async (a) => {
      await wait(1000);
    },
    schema: Joi.object({
      name: Joi.string()
        .min(3)
        .max(30)
        .required()
        .label("ชื่อ")
        .meta({ placeholder: "ชื่อภาษาไทย" }),

      purchased_value: Joi.number().integer().label("เงิน"),
      district: Joi.array()
        .label("เขต")
        .meta({ fieldType: "AddressDistrict" }),
      create_date: Joi.date()
        .default(Date.now)
        .label("วันสมัคร")
        .meta({ disabled: true }),
    }),
  };

  return (
    <center style={{ maxWidth: 800, margin: "auto", marginTop: 40 }}>
      <AutoAdmin {...props} />
    </center>
  );
};

export default App;

Joi Object Explanation

• .label(str)
  • Required. Label is used as table header, excel header, and form label.
• .meta(obj)
  • The meta function allows you to customize each data field.
  • Object are parsed directly as a prop to input. Some of the most popular ones inlcude:
    • .meta({ placeholder })
    • .meta({ disabled })
    • .meta({ defaultValue })
    • The rest of the props can be found here.
  • There are certain keys you can use to customize AutoAdmin itself
    • .meta({ fieldType: string | ReactComponent })
    • .meta({ fieldValidation: ()=> string|null })
    • .meta({ twoColumn: boolean })
      • Show the form input in half size, so you can stack 2 fields in the same line.
    • .meta({ cellEllipsis: boolean })
    • .meta({ cellTextFormat: (rowData)=>string })
    • .meta({ cellWidth: number })
    • .meta({ tableHide: boolean })
    • .meta({ formHide: boolean })
    • .meta({ cascader: { labels, options, loadData, fieldNames } })
      • Required for <Cascader> type. It's a wrapper for Ant Design component with the same name. There is one difference is that the state data is backed by multiple fields instead of a single array field. reference
    • .meta({ validLabel: [string] })
      • Required for <Select> type. The array length must be equal to input of .valid([any]) as they will be rendered as key and value of <Option>
• .valid([any])
  • For making <Select> input.
• .required()
• .default(value | ()=>value)

Props API

Cascader Example

//TODO