A tool uses npm to generate CRUD screens in VTS Kit FE project.

Prerequisites

This project requires NodeJS (version 16 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
8.19.4
v16.20.2

Usage

1. Place (gencode.json) at your root folder

{   
    "workspace": "qtht-fe",
    "listFeatureGroups": [
        {
            "featureGroup": "quan-ly-nguoi-dung",
            "featureGroupExistAlready": false,
            "breadcrumbs": ["Quản trị hệ thống"],
            "listFeatures": [
                {
                    "name": "Người dùng hệ thống",
                    "feature": "nguoi-dung",
                    "apiUri": {
                        "getList": "/v1/nguoiDung",
                        "getDetail": "/v1/nguoiDung/:id",
                        "create": "/v1/nguoiDung",
                        "update": "/v1/nguoiDung",
                        "lock": "/v1/nguoiDung/lock?id=:id",
                        "delete": "/v1/nguoiDung/:id",
                        "export": "/v1/nguoiDung/xuatDuLieu"
                    },
                    "properties": [
                        {
                            "name": "Mã quyền người dùng",
                            "field": "code",
                            "dataType": "string",
                            "inputType": "text"
                        },
                        {
                            "name": "Tên quyền người dùng",
                            "field": "name",
                            "dataType": "string",
                            "inputType": "text"
                        },
                        {
                            "name": "Số tuổi",
                            "field": "age",
                            "dataType": "number",
                            "inputType": "number"
                        },
                        {
                            "name": "Thể loại phim yêu thích",
                            "field": "favouriteFilm",
                            "dataType": "string",
                            "inputType": "select",
                            "inputMapping": [
                                { "value": "CARTOON", "display": "Hoạt hình"},
                                { "value": "COMEDY", "display": "Hài kịch"},
                                { "value": "HORROR", "display": "Kinh dị"},
                                { "value": "ACTION", "display": "Hành động"}
                            ]
                        },
                        {
                            "name": "Trạng thái",
                            "field": "status",
                            "dataType": "string",
                            "inputType": "radio",
                            "inputMapping": [
                                { "value": "ACTIVE", "display": "Hoạt động"},
                                { "value": "INACTIVE", "display": "Không hoạt động"}
                            ]
                        },
                        {
                            "name": "Ăn trái cây",
                            "field": "fruit",
                            "dataType": "boolean",
                            "inputType": "checkbox"
                        },
                        {
                            "name": "Ngày bắt đầu",
                            "field": "startDate",
                            "dataType": "Date",
                            "inputType": "date-picker"
                        },
                        {
                            "name": "Mô tả",
                            "field": "description",
                            "dataType": "string",
                            "inputType": "textarea"
                        }
                    ]
                }
            ]
        }
    ]
}

Explain

• workspace Root folder name which will be used like @workspace reference
• featureGroup Feature group is a group of relatated features
• featureGroupExistAlready whether to generate new or use existed feature group. false = generate new

2. Run command gencode

npx gen-fe-d2@latest

Output

TODO: Output