Mooadmin-coreui-ngx

Mooadmin Core UI is extended shared library for Core UI, focused on view such as Form, Table, Report & Chart.

Table of Contents

• Getting Started
• Usage
• What's included
• Active Record
• Views
• Form View
• List View
• Table View
• Chart View
• Report View
• Creators

Getting Started

Installation

# 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

Usage

# serve with hot reload at localhost:4200.
$ ng serve

# build for production with minification
$ ng build

What's included

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

Active Record is a helper library for connect API in your client Angular 4 Application.

Active Record

Class
A class that contains modelSchema, URL API and some methods of CRUD data.

Properties

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

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

ApiConfig

Class
A class that declare coonfig, urlAPI, and methodHttp.

Properties

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

Methods	Description
getConfig	getConfig() Return configuration of URL API, headers and methods

IBAConfig

Interface

Properties

Properties	Description
urlAPI	Type : String
headers	Type : any
methods	methods: MethodHttp

MethodHttp

Interface

Properties

Properties	Description
query	Type : String
update	Type : String
insert	Type : String
delete	Type : String
method: String	Type : String

ODataQuery

Interface

Properties

Properties	Description
top	Type : number
skip	Type : number
filter	Type : String
expand	Type : String

Contact Service

Injectable
A service to set URL API and model schema of fields as needed.

Properties

Properties	Description
api_url	URL for connect to API Type : String
modelSchema	modelSchema[] Schema for the input fields .

Views

Form View

A view of form for template Core UI.
How to use:
Add tag moo-vform on template Core UI

MooVForm

Component Class
A component class that makes it easy to create form.

Selector

moo-vform

Input

Input	Description
callback	callback :Function Function for bind the input from template for tag moo-vform to MoovformComponent.

Properties

Properties	Description
modelSchema	modelSchema:Dictionary Schema for the input fields .
@ViewChild(ngForm)	ngForm: NgForm Query for a VIEW child of type NgForm

Methods

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.

MooField

Component Class
A component class that represents an individual field with variable nameas name of field.

Selector

moo-field

Inputs

Input	Description
name	The name of field Type: String.

Properties

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

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 .

MooFieldStringComponent

Component Class

Selector

moo-field-string

Properties

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

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

Fields

Class A class that contain field types (texField, hiddenField, and radioField).

Methods

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

Field

Interface
Abstraction for hold configuration.

Properties

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

StringField

Interface Set field for StringField.

Properties

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

BooleanField

Interface Set field for BooleanField.

Properties

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.

List View

A view of list for template Core UI.
How to use:
Add tag moo-vlist on template Core UI

MooVList

Component Class A component that makes it easy to create list.

Selector

moo-vlist

Properties

Properties	Description
listTemplate	listTemplate: TemplateRef<NgForOfContext>
_dataSource$	A variable to get the model of Contact Type Observable
_modelSchema

Methods

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.

NgTemplate

Directive The NgTemplate directive represents an list

Table View

A view of table form for template Core UI.
How to use:
Add tag moo-vtable on template Core UI

MooVTable

Component Class A component that makes it easy to create table.

Selector

moo-vtable

Input

Input	Description
callbackTable	callbackTable :Function, Function for bind the input from template for tag moo-vtable to MoovtableComponent.

Properties

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

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

Chart View

How to use:
Add tag moo-vchart

MooVChart

Selector

moo-vchart

Report View

How to use:
Add tag moo-vreport

MooVReport

Selector

moo-vreport

Creators

• Affandy Lamusu

https://github.com/afandylamusu

• Andrey

https://github.com/andreycls

• Ronald

https://github.com/ronald1402

• Oriani

https://github.com/orianisihaloho

• Felix

https://github.com/felixsiburian