sx-ng-aggrid
Version:
Angular Grid Table(ag-grid) Componet
1 lines • 11.3 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"GridFilterType":{"Text":"agTextColumnFilter","Date":"agDateColumnFilter","Number":"agNumberColumnFilter"},"GridValueFormatter":{"__symbolic":"error","message":"Lambda not supported","line":5,"character":10,"module":"./src/app/modules/grid/grid-value-formatter"},"GridParams":{"__symbolic":"interface"},"GridComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":45,"character":1},"arguments":[{"selector":"sx-ng-aggrid","template":"<!-- Grid View -->\n<div *ngIf=\"!isRowViewMode\" style=\"width: 100%; height: 100%;\" class=\"container-fluid sx-ng-aggrid-main\">\n <div style=\"width: 100%;min-height:42px\" class=\" sx-ng-aggrid-toolbar\" *ngIf=\"!params?.hideToolbar\">\n <div class=\"row\">\n <div class=\"col-md-5 mb-1\">\n <div class=\"btn-toolbar\" role=\"toolbar\">\n <div class=\"btn-group mr-2 me-2\" role=\"group\">\n <button *ngIf=\"!params?.gridFunctions?.hideView\" type=\"button\" class=\"btn btn-secondary\"\n (click)=\"onButtonView()\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"View Record\">\n <i class=\"fa fa-search-plus\"> </i>\n </button>\n <button *ngIf=\"params?.gridFunctions?.canAdd\" type=\"button\" class=\"btn btn-secondary\"\n (click)=\"onButtonAdd()\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Add...\">\n <i class=\"fa fa-plus\"> </i>\n </button>\n <button *ngIf=\"params?.gridFunctions?.canEdit\" type=\"button\" class=\"btn btn-secondary\"\n (click)=\"onButtonEdit()\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Edit...\">\n <i class=\"fa fa-edit\"> </i>\n </button>\n <button *ngIf=\"params?.gridFunctions?.canCopy\" type=\"button\" class=\"btn btn-secondary\"\n (click)=\"onButtonCopy()\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Copy...\">\n <i class=\"far fa-copy\"> </i>\n </button>\n <button *ngIf=\"params?.gridFunctions?.canDelete\" type=\"button\" class=\"btn btn-secondary\"\n (click)=\"onButtonDelete()\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Delete...\">\n <i class=\"fa fa-times\"> </i>\n </button>\n <button *ngIf=\"params?.gridFunctions?.canImport\" type=\"button\" class=\"btn btn-secondary import\"\n data-toggle=\"tooltip\" data-placement=\"top\" title=\"Import\">\n <label for=\"customFile\" class=\"m-0\"><i class=\"fas fa-upload\"></i></label>\n <input #fileImput type=\"file\" class=\"custom-file-input d-none\" id=\"customFile\" accept=\".csv\"\n (change)=\"onButtonImportCSV($event)\">\n </button>\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onButtonExport()\" data-toggle=\"tooltip\"\n data-placement=\"top\" title=\"Export\">\n <i class=\"fa fa-download\"> </i>\n </button>\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onButtonRefresh()\"\n data-toggle=\"tooltip\" data-placement=\"top\" title=\"Refresh\">\n <i class=\"fa fa-undo\"> </i>\n </button>\n </div>\n </div>\n </div>\n <div class=\"col-md-2 mb-1 text-center\">\n <button type=\"button\" class=\"btn btn-light count-btn\" disabled>\n <i class=\"fa fa-database\"></i>: {{totalRowCount}}\n </button>\n </div>\n <div class=\"mb-1\"\n [ngClass]=\"!params?.doNotUsePagination ? 'col-md-1' : 'col-md-5 ms-auto ml-auto text-right'\">\n <ng-content select=\"[extra-buttons]\"></ng-content>\n </div>\n <div class=\"col-md-4 mb-1 pagination\" *ngIf=\"!params?.doNotUsePagination\">\n <div class=\"btn-group ms-auto ml-auto\" role=\"group\">\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onButtonBackward()\">\n <i class=\"fa fa-backward\"></i> \n </button>\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onButtonPrevious()\">\n <i class=\"fa fa-caret-left\"></i> \n </button>\n <button type=\"button\" class=\"btn btn-light\" disabled>{{' '+currentPageNumber+' / '+totalPageCount+'\n '}}</button>\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onButtonNext()\">\n <i class=\"fa fa-caret-right\"></i>\n </button>\n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onButtonForward()\">\n <i class=\"fa fa-forward\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n <div style=\"width: 100%; height: 100%;\" class=\"sx-ng-aggrid-toolbar\">\n <ag-grid-angular #agGrid style=\"width: 100%; height: 100%;\" class=\"ag-theme-fresh\" [rowData]=\"rowData\"\n [columnDefs]=\"params?.columnDefs\" [gridOptions]=\"gridOptions\"></ag-grid-angular>\n </div>\n</div>\n\n<!-- Row View -->\n<div *ngIf=\"isRowViewMode\" class=\"container-fluid\">\n <div class=\"row\">\n <div class=\"col-md-8 mb-1\">\n <h3>Details\n <span class=\"float-right float-end\">\n <button *ngIf=\"params?.gridFunctions?.canEdit\" type=\"button\" class=\"btn btn-primary\"\n (click)=\"onButtonViewEdit()\">\n \n <i class=\"fa fa-edit\"></i> \n </button> \n <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onButtonViewCancel()\">\n \n <i class=\"fa fa-arrow-circle-left\"></i> \n </button>\n </span>\n </h3>\n <hr style=\"border-top: 1px solid black;\" />\n\n <div class=\"form-group mb-3\" *ngFor=\"let field of rowViewData\">\n <label class=\"mb-2\">{{field.headerName}}</label>\n <input class=\"form-control\" [value]=\"field.value\" disabled>\n </div>\n </div>\n </div>\n</div>","styles":["@media only screen and (max-width:767px){.btn-toolbar>.btn-group.mr-2{width:100%;margin-right:0!important}.count-btn{width:100%}.pagination{display:-ms-grid;display:grid;padding:0 15px}.pagination>.btn-group{margin:auto 0!important}}.import{min-width:42px;padding:0}.import>label{width:100%;height:100%;position:absolute;top:0;left:0;line-height:36px;cursor:pointer}.fa-file-archive::before{content:'\\f1c6'}"]}]}],"members":{"params":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":3}}]}],"agGrid":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":54,"character":3},"arguments":["agGrid",{"static":false}]}]}],"fileImput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":55,"character":3},"arguments":["fileImput",{"static":false}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClient","line":74,"character":18},{"__symbolic":"reference","module":"@angular/router","name":"ActivatedRoute","line":75,"character":19},{"__symbolic":"reference","module":"@angular/router","name":"Router","line":76,"character":20},{"__symbolic":"reference","module":"ngx-papaparse","name":"Papa","line":77,"character":18}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"saveLocalStorageData":[{"__symbolic":"method"}],"loadLocalStorageData":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}],"onButtonAdd":[{"__symbolic":"method"}],"onButtonEdit":[{"__symbolic":"method"}],"onButtonCopy":[{"__symbolic":"method"}],"onButtonDelete":[{"__symbolic":"method"}],"onButtonBackward":[{"__symbolic":"method"}],"onButtonForward":[{"__symbolic":"method"}],"onButtonNext":[{"__symbolic":"method"}],"onButtonPrevious":[{"__symbolic":"method"}],"onButtonRefresh":[{"__symbolic":"method"}],"formatErrorMessage":[{"__symbolic":"method"}],"onButtonView":[{"__symbolic":"method"}],"onButtonViewCancel":[{"__symbolic":"method"}],"onButtonViewEdit":[{"__symbolic":"method"}],"onButtonImportCSV":[{"__symbolic":"method"}],"onButtonExport":[{"__symbolic":"method"}]}},"GridModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":8,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":10,"character":4},{"__symbolic":"reference","module":"@angular/common/http","name":"HttpClientModule","line":11,"character":4},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/router","name":"RouterModule","line":12,"character":4},"member":"forRoot"},"arguments":[[]]},{"__symbolic":"call","expression":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"ag-grid-angular","name":"AgGridModule","line":13,"character":4},"member":"withComponents"},"arguments":[[]]}],"declarations":[{"__symbolic":"reference","name":"GridComponent"},{"__symbolic":"reference","name":"ɵa"}],"exports":[{"__symbolic":"reference","name":"GridComponent"},{"__symbolic":"reference","name":"ɵa"}]}]}],"members":{}},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"dateFormat"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"GridFilterType":"./src/app/modules/grid/grid.component","GridValueFormatter":"./src/app/modules/grid/grid-value-formatter","GridParams":"./src/app/modules/grid/grid.component","GridComponent":"./src/app/modules/grid/grid.component","GridModule":"./src/app/modules/grid.module","ɵa":"./src/app/modules/pipe/dateFormat"},"importAs":"sx-ng-aggrid"}