Mooadmin Core UI is extended shared library for Core UI, focused on view such as Form, Table, Report & Chart.
- Getting Started
- Usage
- What's included
- Active Record
- Views
- Form View
- List View
- Table View
- Chart View
- Report View
- Creators
# clone the repo
$ git clone
https://github.com/afandylamusu/mooadmin-coreui-ngx.git
# go into app's directory
$ cd mooadmin-coreui-ngx
# install app's dependencies
$ npm install
# serve with hot reload at localhost:4200.
$ ng serve
# build for production with minification
$ ng build
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
mooadmin-coreui-ngx/
├── .vscode/
├── e2e/
├── FProject/
├── node_modules/
├── src/
│ ├── app
| ├── containers/
| ├── views
| ├── mooadmin
| ├── contact
| ├── contact.component.html
| ├── contact.component.ts
| ├── moo-demo-routing.module
| ├── moo-demo.module.ts
| └── ...
| └── ...
| ├── app.component.html
| ├── app.component.ts
| ├── app.component.css
| ├── app.module.ts
| ├── app.routing.ts
| └── ...
│ ├── assets/
│ ├── environments/
| ├── lib
| ├── mooadmin-ngx
| ├── moo-field
| ├── moo-field.component
| ├── moo-field-boolean.component.ts
| ├── moo-field-boolean.component.html
| ├── moo-field-string.component.ts
| ├── moo-field-string.component.html
| ├── moo-vchart/
| ├── moo-vchart.component.html
| ├── moo-vchart.component.ts
| ├── moo-vform/
| ├── moo-vform.component.html
| ├── moo-vform.component.ts
| ├── moo-vlist/
| ├── moo-vlist.component.html
| ├── moo-vlist.component.ts
| ├── moo-vtable/
| ├── moo-table.component.html
| ├── moo-vtable.component.ts
| ├── active-record
| ├── dictionary
| ├── field-types
| ├── mooadmin.module
│ ├── scss/
| ├── services
| ├── contact.service.ts
| ├── contact.ts
│ ├── index.html
│ └── ...
├── .angular.json
├── ...
├── package.json
└── ...
Active Record is a helper library for connect API in your client Angular 4 Application.
Class
A class that contains modelSchema, URL API and some methods of CRUD data.
Properties | Description |
---|---|
modelSchema | modelSchema: Dictionary = {} Schema for the input fields. You can set the input fields on Contact Service. |
api_url | URL for connect to API. You can set on Contact Service Type : String |
_config | Variable name of interface IBApiConfig. _config: IBApiConfig |
Methods | Description |
---|---|
findAll | findAll(params: any) Get all data Type: any |
findAllODataQuery | findAllODataQuery(params: ODataQuery):Observable<T[]> , Get all data Type: Observable |
search | search (data: any,api_search_name: string):Observable<T[]> Search Type: Observable |
find | find(id: any): Observable Get data by id Type: Observable |
update | update(id: any, data: any) Update data by id Type: any |
insert | insert(data: any) Insert data Type: any |
delete | delete(data: any) Delete data by id Type: any |
generateParam | generateParam(params: any) |
generateParamODataQuery | generateParamODataQuery(query: ODataQuery) |
processData | processData(res: Response) Create response instance from provided values to return body as parsed JSON object. |
handleError | handleError(error: any) Handle any error that occurred Type: any |
Class
A class that declare coonfig, urlAPI, and methodHttp.
Properties | Description |
---|---|
config | Variable name for configuration of API, headers and methods Type : any |
urlAPI | Variable name for configuration of URL API Type : String |
headers | Type : any |
methods | defaultMethods: MethodHttp |
query | Get all data by String 'get' Type : String |
update | Update data by String 'put' on API Type : String |
insert | Insert data String 'post' Type : String |
delete | Delete data by String 'delete' Type: String |
Methods | Description |
---|---|
getConfig | getConfig() Return configuration of URL API, headers and methods |
Interface
Properties | Description |
---|---|
urlAPI | Type : String |
headers | Type : any |
methods | methods: MethodHttp |
Interface
Properties | Description |
---|---|
query | Type : String |
update | Type : String |
insert | Type : String |
delete | Type : String |
method: String | Type : String |
Interface
Properties | Description |
---|---|
top | Type : number |
skip | Type : number |
filter | Type : String |
expand | Type : String |
Injectable
A service to set URL API and model schema of fields as needed.
Properties | Description |
---|---|
api_url | URL for connect to API Type : String |
modelSchema | modelSchema[] Schema for the input fields . |
A view of form for template Core UI.
How to use:
Add tag moo-vform
on template Core UI
Component Class
A component class that makes it easy to create form.
moo-vform
Input | Description |
---|---|
callback | callback :Function Function for bind the input from template for tag moo-vform to MoovformComponent. |
Properties | Description |
---|---|
modelSchema | modelSchema:Dictionary Schema for the input fields . |
@ViewChild(ngForm) | ngForm: NgForm Query for a VIEW child of type NgForm |
Methods | Description |
---|---|
formSubmit | formSubmit ( f: NgForm) A method that used on moo-vform.component.html for submit all value from form. |
postContact | postContact ( contact: Contact) A method to insert data contact. |
ngAfterViewInit | A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated. |
ngOnInit | A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated. |
Component Class
A component class that represents an individual field with variable name
as name of field.
moo-field
Input | Description |
---|---|
name | The name of field Type: String. |
Properties | Description |
---|---|
_stringFieldInputTypes | _stringFieldInputTypes: String[] Type of string input field in array. There are text, number, textarea, email, password. |
_boolFieldInputTypes | _boolFieldInputTypes: String[] Type of boolean input field . There are combobox, checkbox,radio. |
config | config: Field Variable name for interface Field |
form | form: MooVformComponent Initialize dependencies of MooVformComponent on property name form |
Methods | Description |
---|---|
isStringField | get isStringField(): boolean Return _stringFieldInputTypes |
isBoolField | get isStringField(): boolean Return _boolFieldInputTypes |
ngOnInit | A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated. Return modelSchema . |
Component Class
moo-field-string
Properties | Description |
---|---|
model | model: NgModel to get name of input field. |
value | to binding NgModel of text area. Type: String |
_config | Initialize variable name _config for interface StringField. |
_hasError | Whether Field has error Type: boolean |
_errorMessage | Initialize variable name _errorMessage for error message in input type such as required, minimal length of input, and email pattern. Type: any |
required | Whether Field is required. |
minlength | String has min length. |
emailPattern | Check email pattern in String input. |
Methods | Description |
---|---|
_istTextArea | get isTextArea() Check whether inputType is text area. Type: boolean |
ngOnInit | A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated. Return _config as StringField and return _hasError is false. |
ngAfterViewInit | A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated. Return model |
Class
A class that contain field types (texField, hiddenField, and radioField).
Methods | Description |
---|---|
textField | textField(c: Partial): StringField Return field types as StringField. Type: Partial |
hiddenField | hiddenField(c: Partial): HiddenField Return field types as HiddenField. Type: Partial |
boolField | boolField(c: Partial): BooleanField Return field types as BooleanField. Type: Partial |
Interface
Abstraction for hold configuration.
Properties | Description |
---|---|
inputType | Type of input. Type: String |
model | To get name of input field. Type: String |
required | Whether the Field is required. Type: boolean |
Interface
Set field for StringField.
Properties | Description |
---|---|
placeholder | Text in the input field Type: String |
label | Text. Type: String |
minlength | String Input has min length. Type: number |
maxlength | String Input has max length. Type: number |
pattern | String Input has pattern. Type: number |
row | Size of row on text area field. Type: number |
col | Size of col on text area field. Type: number |
Interface
Set field for BooleanField.
Properties | Description |
---|---|
checked | checked: true check the Booleanfield whether is true |
choices | choices: any choices of booleanfield |
label | label: string |
HiddenField
Interface
Set field for Hidden Field.
A view of list for template Core UI.
How to use:
Add tag moo-vlist
on template Core UI
Component Class
A component that makes it easy to create list.
moo-vlist
Properties | Description |
---|---|
listTemplate | listTemplate: TemplateRef<NgForOfContext> |
_dataSource$ | A variable to get the model of Contact Type Observable |
_modelSchema |
Methods | Description |
---|---|
setDataSource | setDataSource(data: Observable) Get the model of Contact Type: Observable |
setSchema | setSchema(schema: any) set modelSchema |
ngOnInit | ngOnInit() A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated. |
Directive
The NgTemplate directive represents an list
A view of table form for template Core UI.
How to use:
Add tag moo-vtable
on template Core UI
Component Class
A component that makes it easy to create table.
moo-vtable
Input | Description |
---|---|
callbackTable | callbackTable :Function, Function for bind the input from template for tag moo-vtable to MoovtableComponent. |
Properties | Description |
---|---|
columns | columns: Field [] variable name for interface Field in array |
_dataSource$ | _dataSource$: Observable A variable to get the model of Contact Type observable |
modelSchema | modelSchema:Dictionary Schema |
Methods | Description |
---|---|
setDataSource() | setDataSource(data: Observable) Get the model of Contact Type: Observable |
setSchema() | setSchema(schema: any) Set Schema |
ngOnInit() | A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated. |
delete() | delete(id) Delete data with callbackTable |
How to use:
Add tag moo-vchart
moo-vchart
How to use:
Add tag moo-vreport
moo-vreport
- Affandy Lamusu
https://github.com/afandylamusu
- Andrey
- Ronald
- Oriani
https://github.com/orianisihaloho
- Felix