# Ucgridview This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.0. ## Bootstrap 5 Compatibility ✅ **Fully Compatible with Bootstrap 5** This component has been migrated from Bootstrap 3 to Bootstrap 5 and includes: - Updated CSS classes: `panel` → `card` for grid container - Modern responsive design with Bootstrap 5 grid system - Enhanced table styling using Bootstrap 5 `.table` component - Improved pagination with Bootstrap 5 pagination component - Better button styling with `btn` variants and utilities - Enhanced accessibility with ARIA attributes and screen reader support ### Migration Summary - **Bootstrap 3 Patterns Migrated**: 5 patterns including tables, pagination, buttons, and grid layout - **Bootstrap 5 Features Added**: Modern tables, pagination, cards, responsive design - **Migration Priority**: MEDIUM (completed) ## Version notes: new ui under canary.x tags Version 3.8.5 1. support fallbackString for body type text, link, callback, function, and http 2. add body type conditional with result type text and date with fallbackString support for result type text Version 3.8.4 1. support flag color for icon Version 3.8.3 1. fix pipe when precision is '0' Version 3.8.2 1. add action and switch result type printReport Version 3.8.1 1. add guard for \_property. make sure its type of string to perform .startWith operation Version 3.8.0 1. support reorder data (drag n drop) using `isCanReorder` property Version 3.7.25 1. support read data from `dicts.` for switchcase Version 3.7.24 1. Added support for icons on the left side of text. Use `body.property+'Icon'` with value true to show a green check mark (V) or false to show a red cross mark (X). For example, the response must return `AssetCode` for the text and `AssetCodeIcon` for the green check mark or red cross mark. Version 3.7.23 1. support custom payload for action delete using deleteReqObj Version 3.7.22 1. fix current index position in paging data Version 3.7.21 1. add inline style "text-transform: none !important" for text Version 3.7.20 1. add support to read value condition from row if value starts with "row." Version 3.7.19 1. show 0 (zero) if value on type decimal is null Version 3.7.18 1. fallback property to hardcode if undefined on switchCase function Version 3.7.17 1. emit a callback after every deleted row Version 3.7.16 1. on/off safe url with useSafeUrl property Version 3.7.14 1. fix switch condition - "false" will treated as false (boolean) 2. fix switch condition - "true" will treated as true (boolean) Version 3.7.13 1. fix defaultChecked for header type `checkBox` Version 3.7.12 1. add defaultChecked Input props for header type `checkBox` value Version 3.7.11 1. add header type `checkBox` - enable to select all Version 3.7.10 1. add text type for callback (TEXT, DATE, DECIMAL) 2. fix switch condition - "null" will treated as null Version 3.7.9 1. fix issue startwith if value is typeof boolean Version 3.7.8 1. add support to read value condition from UserAccess if value starts with "useraccess." Version 3.7.7 1. add index to RowObj item Version 3.7.6 1. add shadow to flagged text Version 3.7.5 1. update ui border table and color Version 3.7.4 1. add class `align-middle` for column name (``) Version 3.7.3 1. Enhance delete action local data Version 3.7.2 1. fix footer isSeq appear when footer list is 0 Version 3.7.1 1. add conditions for body type checkBox, now can set conditions for checkBox when to appear Version 3.7.0 1. add footer data for gridview (specific use for uctable) Version 3.6.4 1. fix support dot annotation to get data from dict to generate action param Version 3.6.3 1. fix param input action type edit Version 3.6.2 1. fix delete function Version 3.6.1 1. fix param input action type edit Version 3.6.0 1. Fix versioning 2. Update delete parameter in new ui Version 3.5.4 1. Support delete local data table row Version 3.5.3 1. revert font family Version 3.5.2 1. add support styled text with isFlagColor options Version 3.5.1 1. fix issue no data Version 3.5.0 1. update UI 2. Add class padding for custom class 3. add text no data if row empty Version 3.4.1 1. Fix Callback function handler Version 3.4.0 1. Add support Grid Button Action Http Request 2. Add support Grid Button Action Function 3. Add support Text type Http Request 4. Update Grid Text type Link support data dictionary 5. Add support data dictionary in grid params Version 3.3.0 1. Add button action type link 2. Add button action type modal 3. Add support data dictionary Version 3.2.1 1. Add support string manipulation for callback, link, etc Version 3.2.0 1. Add string manipulation for string value Version 3.1.3 1. Fix switch type callback result Version 3.1.2 1. fix switch type decimal IsPrcnt and link-decimal Version 3.1.1 1. Fix isHttpRequest property ignored when undefined Version 3.1.0 1. Add support callback action Version 3.0.5 1. fix action type callback - add isText option Version 3.0.3 1. fix dataInput undefined Version 3.0.2 1. fix dataInput Version 3.0.1 1. update readme Version 3.0.0 1. Fix versioning for angular 13 2. support data input Version 2.3.7 1. Fix bug ketika melakukan sort, hasil table berubah sesuai dengan crit. hasil table berubah jika hanya tombol search diklik Version 2.3.6 1. add type link-decimal Version 2.3.0 1. add inputObj, addGridList Version 2.2.3 1. fix css icon centered Version 2.2.2 1. add class table-striped Version 2.2.1 1. add class table-bordered Version 2.0.84 1. comment checkboxall function call at initiate form Version 2.0.83 1. add index param to callback checkbox Version 2.0.82 1. update folder/file name to lower-case Version 2.0.81 1. add Output isRefresh Version 2.0.80 1. Bug Fixing Translate select Version 2.0.79 1. tambah precision di type decimal. Version 2.0.78 1. using UcUpperCase Version 2.0.77 1. localStorage => Cookie Version 2.0.75 1. Bug Fixing Version 2.0.74 1. dateFormat Version 2.0.73 1. update package Version 2.0.72 1. translate Version 2.0.71 1. delete request generic DTO, Id Version 2.0.70 1. Bug navigationconstant jika undefined Version 2.0.69 1. Menambahkan switch untuk header 2. Add SwitchValue Version 2.0.62 1. Menambahkan Navigation Constant untuk link Version 2.0.56 1. Menambahkan tooltip pada icon Version 2.0.47 1. Menghapus No Data Available Version 2.0.46 1. Merapikan Version 2.0.45 1. Tambah checklist di body grid, setiap di checked/unchecked value di output. 2. Header grid ada optional bisa Check All. Version 2.0.42 1. type concat Version 2.0.39 1. hapus skiplocationchange lol Version 2.0.38 1. jika date nya null tampilin - Version 2.0.37 1. tambah input additionalObj 2. tambah param baca property dari additionalObj Version 2.0.35 1. Add skipLocationChange for URL Masking when cliking action button Version 2.0.34 1. able to change icon color in using anchor Version 2.0.29 1. type switch case -> callback bisa text Version 2.0.28 1. type sla Version 2.0.27 1. type select -> Select Version 2.0.26 1. remove select output Version 2.0.25 1. tooltip Version 2.0.24 1. genAction liat dri type & property Version 2.0.23 1. genAction liat dri property Version 2.0.22 1. Jika grid lebih dari 8, maka datatable overflow 2. Jika grid kurang dari 8, maka datatable fixed & text Version 2.0.21 1. Fix Overflow & width tidak 100% Version 2.0.20 1. rollback overflow Version 2.0.19 1. overflow Version 2.0.18 1. color Version 2.0.17 1. Type grid -> callback Version 2.0.16 1. Type switch case -> callback kirim Key Version 2.0.15 1. Fix pipe number Version 2.0.14 1. type callback tambah Key Version 2.0.13 1. switch case check ke localstorage username, pakai parameter isUser Version 2.0.12 1. tambah resultData Version 2.0.11 1. buang resultData Version 2.0.10 1. Kurang switch case type delete Version 2.0.8 1. Tambah type callback Version 2.0.5 1. Fix response model Version 2.0.4 1. add sequence no Version 2.0.3 1. perbaikan genAction Version 2.0.2 1. tambah class width, body type decimal & date, link with target, type switch case Version 2.0.1 1. icon dynamic Version 2.0.0 1. Update ReadMe Version 1.0.4 1. Update ReadMe Version 1.0.3 1. tambah type link Version 1.0.2 1. kurang validasi Version 1.0.1 1. Added ReadMe ## Selector lib-ucgridview ## Input 1. gridInput : InputGridObj (object) \*mandatory 2. additionalObj : object any ## Output 1. output : return sort by criteria 2. callback : return selected row object 3. callbackCheckBox: return Grid Data 4. isRefresh: trigger if need refresh data after delete ## Callback - Callback return object: { RowObj: item, // return selected row object Key: key // Key name } ## Object property & JSON property InputGridObj : - resultData : object data to view, must put in 'data' property - searchComp : view child search component - apiUrl : search paging API path \*full path - deleteUrl : delete paging API path \*full path - pageNow : page now - pageSize : page size - pagingJson : gridView.json - navigationConst : Navigation Constant - switchValue : [ { property: "BizTmpltCode", value: "CF4W" } ] \*optional // list value for headerList type switch - addGridList : generate additional grid from input object, if last grid type action, will put additional grid before it. [ { AddGridLabel: "string", AddGridProperty: "string" } ] - dataInput: alternative data supply; use ESModule import to load json data, then pass the value into here. will override http.get angular date formats example : - short: equivalent to 'M/d/yy, h:mm a' (6/15/15, 9:03 AM). - medium: equivalent to 'MMM d, y, h:mm:ss a' (Jun 15, 2015, 9:03:01 AM). - long: equivalent to 'MMMM d, y, h:mm:ss a z' (June 15, 2015 at 9:03:01 AM GMT+1). - full: equivalent to 'EEEE, MMMM d, y, h:mm:ss a zzzz' (Monday, June 15, 2015 at 9:03:01 AM GMT+01:00). - shortDate: equivalent to 'M/d/yy' (6/15/15). - mediumDate: equivalent to 'MMM d, y' (Jun 15, 2015). - longDate: equivalent to 'MMMM d, y' (June 15, 2015). - fullDate: equivalent to 'EEEE, MMMM d, y' (Monday, June 15, 2015). - shortTime: equivalent to 'h:mm a' (9:03 AM). - mediumTime: equivalent to 'h:mm:ss a' (9:03:01 AM). - longTime: equivalent to 'h:mm:ss a z' (9:03:01 AM GMT+1). - fullTime: equivalent to 'h:mm:ss a zzzz' (9:03:01 AM GMT+01:00). gridView.json : ```javascript { "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" }, { "type" : "checkAll", // header text only "property" : "isActive", "label" : "Action" }, { "type" : "switch", "position" : "center", "case" : [ // list of case { "conditions" : [ // list of conditions { "property" : "type", // property for condition checking "value" : "EXE", // value to check "restriction" : "EQ" // condition restrictions (EQ, NEQ, GT, GTE, LT, LTE | default EQ) *optional } ], "result" : { // result of this case "type": "text", // type like bodyList : text,decimal,date,link,boolean "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", "precision" : "0.2", //Precision (0.2, 0.4, 0.6, ... | default 0.2) *optional "IsPrcnt" : false // if true, ' %' }, { "type" : "date", // date formatter dd-MMM-yyyy "position" : "left", "property" : "bodyId", "dateFormat" : // date formating (short, medium, long, full, shortDate, mediumDate, // longDate, fullDate, shortTime, mediumTime, longTime, fullTime) *optional }, { "type" : "boolean", // text convert false|true = No|Yes "position" : "center", "property" : "isActive" }, { "type" : "sla", // SLA "position" : "center", "property" : "color" // value must use color that HTML recognize }, { "type": "concat", // text join from multiple property "position" : "left", "propertyList": [ { "property": "bodyId", "prefix": "", "suffix": "" }, { "property": "bodyId", "prefix": "", "suffix": "" } ] }, { "type" : "link", // text with link url "position" : "left", "property" : "bodyId", "target" : "_self", // *optional _blank: Opens the linked document in a new window or tab "path" : "/test/paging", // router path ketik manual atau menyesuaikan dengan variable constant "param" : [ // passing optional parameters { "type" : "refBodyId", // key parameter "property" : "refBodyId" // property of row object } ] }, { "type" : "link-decimal", // text link url with decimal formatter with 1000 separator "position" : "left", "property" : "bodyId", "target" : "_self", // *optional _blank: Opens the linked document in a new window or tab "path" : "/test/paging", // router path ketik manual atau menyesuaikan dengan variable constant "param" : [ // passing optional parameters { "type" : "refBodyId", // key parameter "property" : "refBodyId" // property of row object } ], "precision" : "0.2", //Precision (0.2, 0.4, 0.6, ... | default 0.2) *optional "IsPrcnt" : false // if true, ' %' }, { "type" : "callback", // return selected row object "key" : "download/upload/trigger", // Key name for specific action "property" : "bodyId" }, { "type" : "checkBox", // return selected row object "property" : "isActive" // boolean }, { "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 "isAddProp" : false // if using property from additionalObj, MUST *boolean } ], "icon" : "ft-edit-2", // set class icon from feather icon "tooltip": "text", // set tooltip text "anchor" : "warning"// set icon color : primary, success(default), info, warning, danger }, { "type" : "delete", // trashbin icon with delete method "tooltip": "text", // set tooltip text "property" : "refBodyId" // property for delete method }, { "type" : "select", // return selected row object "property" : "refBodyId" // property for select method }, { "type" : "callback", // return selected row object "tooltip": "text", // set tooltip text "key" : "download/upload/trigger" // Key name for specific action }, { "type" : "switch", // switch case condition "case" : [ // list of case { "conditions" : [ // list of conditions { "isUser": true, "property" : "isActive", // property for condition checking "value" : "0", // value to check "restriction" : "EQ" // condition restrictions (EQ, NEQ, GT, GTE, LT, LTE | default EQ) *optional }, { "property" : "type", "value" : "EXE", "restriction" : "EQ" } ], "result" : { // result of this case "type": "url", // redirect path action "path" : "/test/paging", "icon" : "ft-edit-2", // set class icon from feather icon "tooltip": "text", // set tooltip text "param" : [ { "type" : "refBodyId", "property" : "refBodyId" } ] }, "result" : { // result of this case "type": "callback", // return selected row object "icon" : "ft-edit-2", "key" : "download/upload/trigger", // Key name for specific action "property" : "bodyId", "isText" : true, // change icon to text if condition true, MUST *boolean "anchor" : "warning"// set icon color : primary, success(default), info, warning, danger "tooltip": "text", // set tooltip text }, "result" : { // result of this case "type": "text", // type like bodyList : text,decimal,date,link,boolean "property" : "bodyId" }, "isHide" : true // hide icon if condition true, MUST *boolean } ] }, ] } ] } ``` ## Code scaffolding Run `ng generate component component-name --project ucgridview` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ucgridview`. > Note: Don't forget to add `--project ucgridview` or else it will be added to the default project in your `angular.json` file. ## Build Run `ng build ucgridview` to build the project. The build artifacts will be stored in the `dist/` directory. ## Publishing After building your library with `ng build ucgridview`, go to the dist folder `cd dist/ucgridview` and run `npm publish`. ## Running unit tests Run `ng test ucgridview` to execute the unit tests via [Karma](https://karma-runner.github.io). ## Further help To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).