0.1.0 • Published 5 years ago

ngx-starter-crud v0.1.0

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

ngx-starter-crud

Crud generator for ngx-starter - Angular project starter

Installation

$ npm install ngx-starter-crud

Usage

  1. Clone the following repo https://github.com/mandhu/ngx-starter
    git clone https://github.com/mandhu/ngx-starter
    cd ngx-starter && npm i ngx-starter-crud
    NOTE: You can use this package any angular project, but decorators are not available
  2. Create folder and files

    • Create schemas folder inside project root
    • Create all model inside schemas folder
  3. Model File sample model file: Bank.json

{
  "title": "Bank",           // required
  "api": "/api/banks",       // required
  "fields": [
    {
      "name": "name",
      "dbType": "string",
      "htmlType": "text",
      "placeholder": "Name",
      "sort": true
    },
    {
      "name": "country_id",
      "dbType": "string",
      "htmlType": "select-auto",
      "validates": [
        "required"
      ]
    },
    {
      "name": "age",
      "dbType": "integer",
      "htmlType": "number",
      "placeholder": "Age",
      "sort": true,
      "validates": [
        "required",
        "email"
      ]
    },
    {
      "name": "description",
      "dbType": "string",
      "htmlType": "text",
      "placeholder": "Description",
      "sort": false
    },
    {
      "name": "expired_at",
      "dbType": "date",
      "htmlType": "date",
      "sort": false
    },{
      "name": "status",
      "dbType": "integer",
      "htmlType": "select",
      "options": [
        {"1":  "Active"},
        {"2":  "Suspended"},
        {"3":  "Out of town"}
      ],
      "sort": false
    },
    {
      "name": "remarks",
      "dbType": "text",
      "htmlType": "textarea",
      "sort": false
    }
  ]
} 
  1. Create CRUD
ng g ngx-starter-crud:ngx [component-name] OR
ng g ngx-starter-crud:ngx [component-name] --file=[model file name without .json]

Example

if model file name and component name are same

ng g ngx-starter-crud:ngx Bank

if model file name and component name are different

ng g ngx-starter-crud:ngx banks --file="Bank"

NOTE: For now you need update manualy parent model declerations, imports and other array and routing modele file. ;)

Fields

FieldRequiredTypeDefaultDescription
nameYesstringnullName of the field. Use for form control name
dbTypeNostringnullDB field type
htmlTypeYesstringnullSupport type: text,number,textarea,date,select,select-auto(auto compete)
optionsNostring[]emplty optionIf htmlType is 'select' provide options array
placeholderNostringnullIf not prove name cover to humanize form and considered as place holder, Eg. name: 'full_name' conver to palceholder:'Full Name'
sortNobooleannullListing table column header sortable or not
validatesNostring []nullFormControll valitors, support angular form validators, Eg .requires, email, max(8), min(8)

TODO

  • Update Parent model declarations, imports, entryComponents array automatically
  • Update parent routing module file automatically