ucpaging
v2.0.10
Published
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.
Downloads
99
Readme
Ucpaging
This library was generated with Angular CLI version 7.2.0.
Version
Version 2.0.10
- Fix response model
Version 2.0.9
- Fix response model
Version 2.0.8
- ubah response model
Version 2.0.6
- add dependencies
Version 2.0.5
- add Error Message if search No Data
Version 2.0.4
- error additional Criteria missing
Version 2.0.3
- ucgridfooter hide when no resultData
Version 2.0.2
- Update ReadMe
Version 2.0.1
- Update ReadMe
Version 2.0.0
- Update ReadMe
Version 1.0.4
- Update ReadMe
Version 1.0.3
- tambah output type link
Version 1.0.2
- Error Typo import
Version 1.0.1
- Added ReadMe
Dependency Module
import this module :
- UCSearchModule
npm i @adins/ucsearch - UcgridviewModule
npm i @adins/ucgridview - UcgridfooterModule
npm i @adins/ucgridfooter
Selector
lib-ucpaging
Input
- searchObj : UcPagingObj (object) *mandatory
Output
- select : return selected row object
Object property & JSON property
UcPagingObj :
- _url : search.json
- enviromentUrl : enviroment path (foundation, setting, vendor)
- apiQryPaging : search paging API path
- deleteUrl : delete paging API path
- pagingJson : gridView.json
search.json :
{
"title" : "title", // Title paging
"exportExcel" : "false", // boolean: true|false
"component" : [ // search criteria property
{
"type" : "textbox", // type input
"label" : "search id", // label criteria name
"name" : "searchId", // property search to backend
"id" : "uniqueId", // bound the label with the input, when click label *optional
"value" : "", // default value of input *optional
"placeholder" : "placeholder", // *optional
"datatype" : "text" // data type of input (text, numeric, date)
},
{
"type" : "textarea",
"label" : "textarea",
"name" : "textareaId",
"id" : "uniqueId",
"value" : "",
"placeholder" : "",
"datatype" : "text"
},
{
"type" : "numeric",
"label" : "numeric <=",
"name" : "numericId",
"id" : "uniqueId",
"value" : "1",
"restriction" : "lte", // restriction criteria for backend (lte, gte)
"placeholder" : "",
"datatype" : "numeric"
},
{
"type" : "datepicker",
"label" : "Date From",
"name" : "dateDt",
"id" : "uniqueId",
"value" : "",
"restriction" : "gte",
"datatype" : "date"
},
{
"type" : "dropdown",
"label" : "dropdown",
"name" : "dropdownId",
"id" : "uniqueId",
"value" : "",
"datatype" : "date",
"isSelectOne" : "false", // boolean: true|false, dropdown select all option
"items" : [ // hardcode the option list
{
"key" : "1",
"value" : "Yes"
},
{
"key" : "0",
"value" : "No"
}
],
"isFromURL" : "true", // boolean: true|false, if true get the option list from backend
"url" : "", // full path get keyValue API *mandatory, if isFromUrl true
"itemsUrl" : [], // *mandatory if isFromUrl true, property to store option list from backend
"criteriaPropName" : "typeCode", // additional criteria property *optional
"criteriaPropValue" : "TYPE_CODE" // additional criteria value *optional
},
{
"type" : "dropdown",
"label" : "dropdown",
"name" : "dropdownId",
"id" : "uniqueId",
"value" : "",
"datatype" : "date",
"isSelectOne" : "true",
"items" : [],
"isEvent" : "true", // boolean: true|false, if true dropdown criteria affect other dropdown criteria
"affectedFilter" : ["dropdownId", "searchId"], // affected filter check by name
"isFromURL" : "true",
"url" : "",
"itemsUrl" : [],
}
],
"querystring": { // query data by sql
"select": "", // ex: "SELECT APP_ID AS appId, IS_ACTIVE AS isActive" *must use alias
"from": "" // ex: "FROM APP WITH(NOLOCK)" *don't forget WITH(NOLOCK)
}
}gridView.json :
{
"isSeq" : true, // show sequence no at table, MUST *boolean
"headerList" : [ // Header & Body position matching
{
"type" : "sort", // header with click pointer to sort
"position" : "left", // header text position (left, center, right | default center) *optional
"label" : "name", // header name
"name" : "sortId", // property name for sort criteria *mandatory for type sort
"width": "width-50-per" // set width with percent, multiplier 5, default 100%
},
{
"type" : "label", // header text only
"position" : "center",
"label" : "Action"
}
],
"bodyList" : [
{
"type" : "text", // text only
"position" : "left", // body text position (left, center, right | default center) *optional
"property" : "bodyId" // property resultData from search paging
},
{
"type" : "decimal", // decimal formatter with 1000 separator
"position" : "left",
"property" : "bodyId"
},
{
"type" : "date", // date formatter dd-MMM-yyyy
"position" : "left",
"property" : "bodyId"
},
{
"type" : "boolean", // text convert 0|1 = No|Yes
"position" : "center",
"property" : "isActive"
},
{
"type" : "link", // text with link url
"position" : "left",
"property" : "bodyId",
"path" : "/test/paging", // router path
"param" : [ // passing optional parameters
{
"type" : "refBodyId", // key parameter
"property" : "refBodyId" // property of row object
}
]
},
{
"type" : "action", // icon link button
"position" : "center",
"action" : [ // type of icon
{
"type" : "edit", // pencil icon with url path
"path" : "/test/paging", // router path
"param" : [ // passing optional parameters
{
"type" : "refBodyId", // key parameter
"property" : "refBodyId" // property of row object
}
],
"icon" : "ft-edit-2" // set class icon from feather icon
},
{
"type" : "delete", // trashbin icon with delete method
"property" : "refBodyId" // property for delete method
},
{
"type" : "select", // return selected row object
"property" : "refBodyId" // property for delete method
}
{
"type" : "switch", // switch case condition
"case" : [ // list of case
{
"conditions" : [ // list of conditions
{
"property" : "isActive", // property for condition checking
"value" : "0" // value to check
},
{
"property" : "type",
"value" : "EXE"
}
],
"result" : { // result of this case
"path" : "/test/paging",
"param" : [
{
"type" : "refBodyId",
"property" : "refBodyId"
}
]
},
"isHide" : true // hide icon if condition true, MUST *boolean
}
]
},
]
}
]
}Code scaffolding
Run ng generate component component-name --project ucpaging to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project ucpaging.
Note: Don't forget to add
--project ucpagingor else it will be added to the default project in yourangular.jsonfile.
Build
Run ng build ucpaging to build the project. The build artifacts will be stored in the dist/ directory.
Publishing
After building your library with ng build ucpaging, go to the dist folder cd dist/ucpaging and run npm publish.
Running unit tests
Run ng test ucpaging to execute the unit tests via Karma.
Further help
To get more help on the Angular CLI use ng help or go check out the Angular CLI README.