lib-portal-angular 0.0.77 → 0.0.78
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/tables/data-paginate.service.mjs +18 -13
- package/esm2022/lib/components/tables/data-table.component.mjs +111 -48
- package/esm2022/lib/function/ConvertToSnakeCase.mjs +4 -0
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/lib-portal-angular.mjs +125 -53
- package/fesm2022/lib-portal-angular.mjs.map +1 -1
- package/lib/components/tables/data-paginate.service.d.ts +4 -3
- package/lib/components/tables/data-table.component.d.ts +17 -15
- package/lib/function/ConvertToSnakeCase.d.ts +1 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
@@ -2770,45 +2770,67 @@ class DataTableComponent {
|
|
2770
2770
|
this.columns = [];
|
2771
2771
|
this.hiddenColumns = [];
|
2772
2772
|
this.defaultItemsPerPage = 10;
|
2773
|
-
this.itemsPerPageLabel =
|
2773
|
+
this.itemsPerPageLabel = "Items per page:";
|
2774
2774
|
this.showActionColumn = false;
|
2775
|
-
this.actionColumnLabel =
|
2775
|
+
this.actionColumnLabel = "Actions";
|
2776
2776
|
this.totalItems = 0;
|
2777
2777
|
this.fetchDataFunction = () => {
|
2778
|
-
return new Observable(subscriber => subscriber.error(
|
2778
|
+
return new Observable((subscriber) => subscriber.error("Implement the fetchDataFunction to fetch paginated data from the back-end."));
|
2779
2779
|
};
|
2780
2780
|
this.editPermissions = [];
|
2781
2781
|
this.deletePermissions = [];
|
2782
2782
|
this.viewPermissions = [];
|
2783
2783
|
this.showPageInfo = true;
|
2784
|
-
this.pageText =
|
2785
|
-
this.ofText =
|
2786
|
-
this.filterDescription =
|
2787
|
-
this.buttonLabel =
|
2788
|
-
this.
|
2784
|
+
this.pageText = "Page";
|
2785
|
+
this.ofText = "of";
|
2786
|
+
this.filterDescription = "";
|
2787
|
+
this.buttonLabel = "";
|
2788
|
+
this.pagedData = [];
|
2789
|
+
this.initialFilterField = null;
|
2789
2790
|
this.pageChange = new EventEmitter();
|
2790
2791
|
this.itemsPerPageChange = new EventEmitter();
|
2791
2792
|
this.onEditTable = new EventEmitter();
|
2792
2793
|
this.onDeleteTable = new EventEmitter();
|
2793
2794
|
this.onViewTable = new EventEmitter();
|
2794
|
-
this.onButtonClick = new EventEmitter();
|
2795
|
+
this.onButtonClick = new EventEmitter();
|
2796
|
+
this.filterFieldChange = new EventEmitter();
|
2795
2797
|
this.itemsPerPageOptions = [5, 10, 15, 25];
|
2796
2798
|
this.currentPage = 1;
|
2797
|
-
this.sortColumn =
|
2798
|
-
this.sortDirection =
|
2799
|
-
this.
|
2799
|
+
this.sortColumn = "";
|
2800
|
+
this.sortDirection = "asc";
|
2801
|
+
this.selectedSearchField = "";
|
2800
2802
|
this.isLoading = false;
|
2801
2803
|
this.destroy$ = new Subject();
|
2802
2804
|
this.isInitialized = false; // Flag para evitar chamadas duplas
|
2803
2805
|
this.ButtonClasses = ButtonClasses;
|
2804
2806
|
this.labelStyle = {
|
2805
|
-
|
2806
|
-
|
2807
|
-
|
2807
|
+
"font-family": "Inter, Arial, sans-serif",
|
2808
|
+
"font-size": "14px",
|
2809
|
+
color: "#000",
|
2808
2810
|
};
|
2809
2811
|
}
|
2810
2812
|
ngOnInit() {
|
2811
|
-
this.
|
2813
|
+
if (this.initialFilterField) {
|
2814
|
+
// Se o usuário definir o initialFilterField, ele será usado como o campo inicial
|
2815
|
+
this.selectedSearchField = this.initialFilterField;
|
2816
|
+
this.sortColumn = this.initialFilterField;
|
2817
|
+
this.sortDirection = "asc";
|
2818
|
+
this.columns = this.columns.map((column) => ({
|
2819
|
+
...column,
|
2820
|
+
isSearchSelected: column.prop === this.initialFilterField,
|
2821
|
+
}));
|
2822
|
+
}
|
2823
|
+
else if (this.columns.length > 0) {
|
2824
|
+
// Caso contrário, usa a primeira coluna como padrão
|
2825
|
+
this.selectedSearchField = this.columns[0].prop;
|
2826
|
+
this.sortColumn = this.columns[0].prop;
|
2827
|
+
this.sortDirection = "asc";
|
2828
|
+
this.columns = this.columns.map((column) => ({
|
2829
|
+
...column,
|
2830
|
+
isSearchSelected: column.prop === this.selectedSearchField,
|
2831
|
+
}));
|
2832
|
+
}
|
2833
|
+
//this.fetchData();
|
2812
2834
|
this.refreshService.refresh$
|
2813
2835
|
.pipe(takeUntil(this.destroy$))
|
2814
2836
|
.subscribe(() => {
|
@@ -2818,29 +2840,38 @@ class DataTableComponent {
|
|
2818
2840
|
});
|
2819
2841
|
this.isInitialized = true;
|
2820
2842
|
}
|
2821
|
-
ngOnChanges(changes) {
|
2822
|
-
|
2823
|
-
|
2824
|
-
|
2825
|
-
|
2843
|
+
// ngOnChanges(changes: SimpleChanges) {
|
2844
|
+
// if (
|
2845
|
+
// changes["totalItems"] ||
|
2846
|
+
// changes["defaultItemsPerPage"] ||
|
2847
|
+
// changes["currentPage"] ||
|
2848
|
+
// changes["fetchDataFunction"] ||
|
2849
|
+
// changes["filterDescription"]
|
2850
|
+
// ) {
|
2851
|
+
// this.fetchData();
|
2852
|
+
// }
|
2853
|
+
// }
|
2826
2854
|
ngOnDestroy() {
|
2827
2855
|
this.destroy$.next();
|
2828
2856
|
this.destroy$.complete();
|
2829
2857
|
}
|
2830
2858
|
getNestedProperty(obj, path) {
|
2831
|
-
return path.split(
|
2859
|
+
return path.split(".").reduce((acc, part) => acc && acc[part], obj);
|
2832
2860
|
}
|
2833
2861
|
fetchData() {
|
2834
2862
|
if (this.fetchDataFunction) {
|
2835
2863
|
this.isLoading = true;
|
2836
2864
|
const params = {
|
2837
2865
|
filterDescription: this.filterDescription,
|
2838
|
-
|
2839
|
-
|
2866
|
+
filterField: this.selectedSearchField,
|
2867
|
+
pageNumber: this.currentPage ?? 1,
|
2868
|
+
pageSize: this.defaultItemsPerPage ?? 10,
|
2840
2869
|
sortColumn: this.sortColumn,
|
2841
|
-
sortDirection: this.sortDirection
|
2870
|
+
sortDirection: this.sortDirection,
|
2842
2871
|
};
|
2843
|
-
this.fetchDataFunction(params)
|
2872
|
+
this.fetchDataFunction(params)
|
2873
|
+
.pipe(takeUntil(this.destroy$))
|
2874
|
+
.subscribe({
|
2844
2875
|
next: (result) => {
|
2845
2876
|
this.pagedData = result.items;
|
2846
2877
|
this.totalItems = result.totalItems;
|
@@ -2848,21 +2879,15 @@ class DataTableComponent {
|
|
2848
2879
|
this.cdr.markForCheck();
|
2849
2880
|
},
|
2850
2881
|
error: (error) => {
|
2851
|
-
console.error(
|
2882
|
+
console.error("Error fetching data:", error);
|
2852
2883
|
this.isLoading = false;
|
2853
|
-
}
|
2884
|
+
},
|
2854
2885
|
});
|
2855
2886
|
}
|
2856
2887
|
}
|
2857
2888
|
refreshData() {
|
2858
2889
|
this.fetchData();
|
2859
2890
|
}
|
2860
|
-
onSort(column) {
|
2861
|
-
this.sortColumn = column;
|
2862
|
-
this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
|
2863
|
-
this.sortChange.emit({ column, direction: this.sortDirection });
|
2864
|
-
this.fetchData();
|
2865
|
-
}
|
2866
2891
|
onPageChange(page) {
|
2867
2892
|
this.currentPage = page;
|
2868
2893
|
this.pageChange.emit(page);
|
@@ -2873,19 +2898,53 @@ class DataTableComponent {
|
|
2873
2898
|
this.itemsPerPageChange.emit(this.defaultItemsPerPage);
|
2874
2899
|
this.fetchData();
|
2875
2900
|
}
|
2901
|
+
onSelectSearchField(columnProp) {
|
2902
|
+
if (this.sortColumn === columnProp) {
|
2903
|
+
this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
|
2904
|
+
}
|
2905
|
+
else {
|
2906
|
+
this.sortDirection = "asc";
|
2907
|
+
}
|
2908
|
+
this.selectedSearchField = columnProp;
|
2909
|
+
this.sortColumn = columnProp;
|
2910
|
+
this.columns = this.columns.map((column) => ({
|
2911
|
+
...column,
|
2912
|
+
isSearchSelected: column.prop === columnProp,
|
2913
|
+
}));
|
2914
|
+
this.filterFieldChange.emit(this.selectedSearchField);
|
2915
|
+
if (this.fetchDataFunction) {
|
2916
|
+
this.fetchDataFunction({
|
2917
|
+
filterDescription: this.filterDescription,
|
2918
|
+
filterField: this.selectedSearchField,
|
2919
|
+
pageNumber: this.currentPage,
|
2920
|
+
pageSize: this.defaultItemsPerPage,
|
2921
|
+
sortColumn: this.sortColumn,
|
2922
|
+
sortDirection: this.sortDirection,
|
2923
|
+
}).subscribe({
|
2924
|
+
next: (result) => {
|
2925
|
+
this.pagedData = result.items;
|
2926
|
+
this.totalItems = result.totalItems;
|
2927
|
+
this.cdr.markForCheck();
|
2928
|
+
},
|
2929
|
+
error: (error) => {
|
2930
|
+
console.error("Erro ao buscar dados:", error);
|
2931
|
+
},
|
2932
|
+
});
|
2933
|
+
}
|
2934
|
+
}
|
2876
2935
|
handleAction(action, item, index) {
|
2877
2936
|
switch (action) {
|
2878
|
-
case
|
2937
|
+
case "edit":
|
2879
2938
|
if (this.hasPermission(this.editPermissions)) {
|
2880
2939
|
this.onEditTable.emit({ item, index });
|
2881
2940
|
}
|
2882
2941
|
break;
|
2883
|
-
case
|
2942
|
+
case "delete":
|
2884
2943
|
if (this.hasPermission(this.deletePermissions)) {
|
2885
2944
|
this.onDeleteTable.emit({ item, index });
|
2886
2945
|
}
|
2887
2946
|
break;
|
2888
|
-
case
|
2947
|
+
case "view":
|
2889
2948
|
if (this.hasPermission(this.viewPermissions)) {
|
2890
2949
|
this.onViewTable.emit({ item, index });
|
2891
2950
|
}
|
@@ -2901,10 +2960,10 @@ class DataTableComponent {
|
|
2901
2960
|
}
|
2902
2961
|
catch (error) {
|
2903
2962
|
if (error instanceof Error) {
|
2904
|
-
console.error(
|
2963
|
+
console.error("Permission error:", error.message);
|
2905
2964
|
}
|
2906
2965
|
else {
|
2907
|
-
console.error(
|
2966
|
+
console.error("Unknown error occurred during permission check");
|
2908
2967
|
}
|
2909
2968
|
return true;
|
2910
2969
|
}
|
@@ -2921,11 +2980,11 @@ class DataTableComponent {
|
|
2921
2980
|
this.onButtonClick.emit(); // Emitindo o evento
|
2922
2981
|
}
|
2923
2982
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: AuthService }, { token: RefreshService }], target: i0.ɵɵFactoryTarget.Component }); }
|
2924
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "argenta-list-data-table", inputs: { columns: "columns", hiddenColumns: "hiddenColumns", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel" }, outputs: { sortChange: "sortChange", pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem;\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{ itemsPerPageLabel }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange()\">\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">{{ option }}</option>\n </select>\n </div>\n </div>\n <div *ngIf=\"buttonLabel && buttonLabel.length > 0\" class=\"right-section\">\n <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n {{ buttonLabel }}\n </button>\n </div>\n</div>\n\n<div class=\"search-input-container\">\n <argenta-search-input id=\"search\" label=\"\" placeholder=\"Buscar\" [(ngModel)]=\"filterDescription\" (search)=\"onSearch($event)\"></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem;\">\n <table class=\"table table-hover\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let column of columns\">\n <th *ngIf=\"!isColumnHidden(column.prop)\" (click)=\"onSort(column.prop)\">\n {{ column.label }}\n </th>\n </ng-container>\n <th *ngIf=\"showActionColumn\" class=\"text-end\" style=\"padding-right: 6.3rem;\">{{ actionColumnLabel }}</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of pagedData; let i = index\">\n <ng-container *ngFor=\"let column of columns\">\n <td *ngIf=\"!isColumnHidden(column.prop)\">\n {{ getNestedProperty(item, column.prop) }}\n </td>\n </ng-container>\n <td *ngIf=\"showActionColumn\" class=\"text-end\">\n <div class=\"d-flex justify-content-end\">\n <div *ngIf=\"hasPermission(editPermissions) && onEditTable.observers.length > 0\" (click)=\"handleAction('edit', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n <lucide-icon name=\"square-pen\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n </div>\n <div *ngIf=\"hasPermission(viewPermissions) && onViewTable.observers.length > 0\" (click)=\"handleAction('view', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n <lucide-icon name=\"user-round\" [size]=\"20\" color=\"#2CA58D\" [strokeWidth]=\"1.75\"></lucide-icon>\n </div>\n <div *ngIf=\"hasPermission(deletePermissions) && onDeleteTable.observers.length > 0\" (click)=\"handleAction('delete', item, i)\" class=\"clickable-icon\" style=\"margin-right: 1.5rem;\">\n <i-lucide name=\"trash-2\" [size]=\"20\" color=\"#F26E6E\" [strokeWidth]=\"1.75\"></i-lucide>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n <custom-pagination\n [totalItems]=\"totalItems\"\n [itemsPerPage]=\"defaultItemsPerPage\"\n [currentPage]=\"currentPage\"\n [showPageInfo]=\"showPageInfo\"\n (pageChange)=\"onPageChange($event)\">\n </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .15rem var(--secondary-color)}.custom-button:active{background-color:var(--secondary-color)}.custom-button:focus{outline:none;box-shadow:0 0 0 .15rem var(--secondary-color)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }, { kind: "component", type: SearchInputComponent, selector: "argenta-search-input", inputs: ["id", "label", "type", "placeholder", "value", "disabled", "readonly", "autofocus", "maxlength", "minlength", "required", "pattern", "debounceTime"], outputs: ["search", "inputChange", "change", "focus", "blur", "keyup", "keydown", "keypress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
2983
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DataTableComponent, selector: "argenta-list-data-table", inputs: { columns: "columns", hiddenColumns: "hiddenColumns", defaultItemsPerPage: "defaultItemsPerPage", itemsPerPageLabel: "itemsPerPageLabel", showActionColumn: "showActionColumn", actionColumnLabel: "actionColumnLabel", totalItems: "totalItems", fetchDataFunction: "fetchDataFunction", editPermissions: "editPermissions", deletePermissions: "deletePermissions", viewPermissions: "viewPermissions", showPageInfo: "showPageInfo", pageText: "pageText", ofText: "ofText", filterDescription: "filterDescription", buttonLabel: "buttonLabel", pagedData: "pagedData", initialFilterField: "initialFilterField" }, outputs: { pageChange: "pageChange", itemsPerPageChange: "itemsPerPageChange", onEditTable: "onEditTable", onDeleteTable: "onDeleteTable", onViewTable: "onViewTable", onButtonClick: "onButtonClick", filterFieldChange: "filterFieldChange" }, ngImport: i0, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{\n itemsPerPageLabel\n }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange()\"\n >\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n </div>\n <div *ngIf=\"buttonLabel && buttonLabel.length > 0\" class=\"right-section\">\n <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n {{ buttonLabel }}\n </button>\n </div>\n</div>\n\n<div class=\"search-input-container\">\n <argenta-search-input\n id=\"search\"\n label=\"\"\n placeholder=\"Buscar\"\n [(ngModel)]=\"filterDescription\"\n (search)=\"onSearch($event)\"\n ></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem\">\n <table class=\"table table-hover\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let column of columns\">\n <th\n *ngIf=\"!isColumnHidden(column.prop)\"\n (click)=\"onSelectSearchField(column.prop)\"\n >\n {{ column.label }}\n <span>\n <i-lucide\n name=\"arrow-up\"\n [size]=\"14\"\n [class.selected]=\"\n column.isSearchSelected && sortDirection === 'asc'\n \"\n ></i-lucide>\n <i-lucide\n name=\"arrow-down\"\n [size]=\"14\"\n [class.selected]=\"\n column.isSearchSelected && sortDirection === 'desc'\n \"\n ></i-lucide>\n </span>\n </th>\n </ng-container>\n <th\n *ngIf=\"showActionColumn\"\n class=\"text-end\"\n style=\"padding-right: 6.3rem\"\n >\n {{ actionColumnLabel }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of pagedData; let i = index\">\n <ng-container *ngFor=\"let column of columns\">\n <td *ngIf=\"!isColumnHidden(column.prop)\">\n {{ getNestedProperty(item, column.prop) }}\n </td>\n </ng-container>\n <td *ngIf=\"showActionColumn\" class=\"text-end\">\n <div class=\"d-flex justify-content-end\">\n <div\n *ngIf=\"\n hasPermission(editPermissions) &&\n onEditTable.observers.length > 0\n \"\n (click)=\"handleAction('edit', item, i)\"\n class=\"clickable-icon\"\n style=\"margin-right: 1.5rem\"\n >\n <lucide-icon\n name=\"square-pen\"\n [size]=\"20\"\n color=\"#2CA58D\"\n [strokeWidth]=\"1.75\"\n ></lucide-icon>\n </div>\n <div\n *ngIf=\"\n hasPermission(viewPermissions) &&\n onViewTable.observers.length > 0\n \"\n (click)=\"handleAction('view', item, i)\"\n class=\"clickable-icon\"\n style=\"margin-right: 1.5rem\"\n >\n <lucide-icon\n name=\"user-round\"\n [size]=\"20\"\n color=\"#2CA58D\"\n [strokeWidth]=\"1.75\"\n ></lucide-icon>\n </div>\n <div\n *ngIf=\"\n hasPermission(deletePermissions) &&\n onDeleteTable.observers.length > 0\n \"\n (click)=\"handleAction('delete', item, i)\"\n class=\"clickable-icon\"\n style=\"margin-right: 1.5rem\"\n >\n <i-lucide\n name=\"trash-2\"\n [size]=\"20\"\n color=\"#F26E6E\"\n [strokeWidth]=\"1.75\"\n ></i-lucide>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n <custom-pagination\n [totalItems]=\"totalItems\"\n [itemsPerPage]=\"defaultItemsPerPage\"\n [currentPage]=\"currentPage\"\n [showPageInfo]=\"showPageInfo\"\n (pageChange)=\"onPageChange($event)\"\n >\n </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .15rem var(--secondary-color)}.custom-button:active{background-color:var(--secondary-color)}.custom-button:focus{outline:none;box-shadow:0 0 0 .15rem var(--secondary-color)}.selected{color:var(--secondary-color);stroke-width:8}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3.LucideAngularComponent, selector: "lucide-angular, lucide-icon, i-lucide, span-lucide", inputs: ["class", "name", "img", "color", "absoluteStrokeWidth", "size", "strokeWidth"] }, { kind: "component", type: CustomPaginationComponent, selector: "custom-pagination", inputs: ["totalItems", "itemsPerPage", "currentPage", "showPageInfo"], outputs: ["pageChange"] }, { kind: "component", type: SearchInputComponent, selector: "argenta-search-input", inputs: ["id", "label", "type", "placeholder", "value", "disabled", "readonly", "autofocus", "maxlength", "minlength", "required", "pattern", "debounceTime"], outputs: ["search", "inputChange", "change", "focus", "blur", "keyup", "keydown", "keypress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
2925
2984
|
}
|
2926
2985
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataTableComponent, decorators: [{
|
2927
2986
|
type: Component,
|
2928
|
-
args: [{ selector:
|
2987
|
+
args: [{ selector: "argenta-list-data-table", changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"data-table-header\" style=\"margin-top: 2.5rem\">\n <div class=\"left-section\">\n <div class=\"form-group\">\n <label for=\"itemsPerPageSelect\" class=\"items-per-page-label\">{{\n itemsPerPageLabel\n }}</label>\n <select\n id=\"itemsPerPageSelect\"\n class=\"form-control form-control-sm d-inline-block w-auto custom-select\"\n [(ngModel)]=\"defaultItemsPerPage\"\n (ngModelChange)=\"onItemsPerPageChange()\"\n >\n <option *ngFor=\"let option of itemsPerPageOptions\" [value]=\"option\">\n {{ option }}\n </option>\n </select>\n </div>\n </div>\n <div *ngIf=\"buttonLabel && buttonLabel.length > 0\" class=\"right-section\">\n <button class=\"custom-button\" (click)=\"onNewButtonClick()\">\n <lucide-icon name=\"plus\" [size]=\"28\" [strokeWidth]=\"1.75\"></lucide-icon>\n {{ buttonLabel }}\n </button>\n </div>\n</div>\n\n<div class=\"search-input-container\">\n <argenta-search-input\n id=\"search\"\n label=\"\"\n placeholder=\"Buscar\"\n [(ngModel)]=\"filterDescription\"\n (search)=\"onSearch($event)\"\n ></argenta-search-input>\n</div>\n\n<div class=\"table-responsive\" style=\"margin-top: 1rem\">\n <table class=\"table table-hover\">\n <thead>\n <tr>\n <ng-container *ngFor=\"let column of columns\">\n <th\n *ngIf=\"!isColumnHidden(column.prop)\"\n (click)=\"onSelectSearchField(column.prop)\"\n >\n {{ column.label }}\n <span>\n <i-lucide\n name=\"arrow-up\"\n [size]=\"14\"\n [class.selected]=\"\n column.isSearchSelected && sortDirection === 'asc'\n \"\n ></i-lucide>\n <i-lucide\n name=\"arrow-down\"\n [size]=\"14\"\n [class.selected]=\"\n column.isSearchSelected && sortDirection === 'desc'\n \"\n ></i-lucide>\n </span>\n </th>\n </ng-container>\n <th\n *ngIf=\"showActionColumn\"\n class=\"text-end\"\n style=\"padding-right: 6.3rem\"\n >\n {{ actionColumnLabel }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of pagedData; let i = index\">\n <ng-container *ngFor=\"let column of columns\">\n <td *ngIf=\"!isColumnHidden(column.prop)\">\n {{ getNestedProperty(item, column.prop) }}\n </td>\n </ng-container>\n <td *ngIf=\"showActionColumn\" class=\"text-end\">\n <div class=\"d-flex justify-content-end\">\n <div\n *ngIf=\"\n hasPermission(editPermissions) &&\n onEditTable.observers.length > 0\n \"\n (click)=\"handleAction('edit', item, i)\"\n class=\"clickable-icon\"\n style=\"margin-right: 1.5rem\"\n >\n <lucide-icon\n name=\"square-pen\"\n [size]=\"20\"\n color=\"#2CA58D\"\n [strokeWidth]=\"1.75\"\n ></lucide-icon>\n </div>\n <div\n *ngIf=\"\n hasPermission(viewPermissions) &&\n onViewTable.observers.length > 0\n \"\n (click)=\"handleAction('view', item, i)\"\n class=\"clickable-icon\"\n style=\"margin-right: 1.5rem\"\n >\n <lucide-icon\n name=\"user-round\"\n [size]=\"20\"\n color=\"#2CA58D\"\n [strokeWidth]=\"1.75\"\n ></lucide-icon>\n </div>\n <div\n *ngIf=\"\n hasPermission(deletePermissions) &&\n onDeleteTable.observers.length > 0\n \"\n (click)=\"handleAction('delete', item, i)\"\n class=\"clickable-icon\"\n style=\"margin-right: 1.5rem\"\n >\n <i-lucide\n name=\"trash-2\"\n [size]=\"20\"\n color=\"#F26E6E\"\n [strokeWidth]=\"1.75\"\n ></i-lucide>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<div class=\"text-center pagination-controls\">\n <custom-pagination\n [totalItems]=\"totalItems\"\n [itemsPerPage]=\"defaultItemsPerPage\"\n [currentPage]=\"currentPage\"\n [showPageInfo]=\"showPageInfo\"\n (pageChange)=\"onPageChange($event)\"\n >\n </custom-pagination>\n</div>\n", styles: ["@charset \"UTF-8\";.clickable-icon{cursor:pointer}:host{font-family:var(--font-family)}.data-table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:-.2rem}.left-section,.right-section{display:flex;align-items:center}.search-input-container{display:flex;justify-content:flex-start}.left-section .form-group{display:flex;align-items:center}.items-per-page-label{font-family:var(--font-family);font-size:14px;color:#666;margin-right:.2rem}.custom-select{font-family:var(--font-family);font-size:14px;color:#666;background:#fff url('data:image/svg+xml;charset=US-ASCII,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 4 5\"><path fill=\"#666\" d=\"M2 0L0 2h4L2 0zM2 5l2-2H0l2 2z\"/></svg>') no-repeat right .75rem center/8px 10px;border:1px solid #ccc;border-radius:.25rem;padding:.375rem 1.75rem .375rem .75rem;appearance:none;-webkit-appearance:none;-moz-appearance:none}.custom-select:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 .2rem #007bff40}.table{font-family:var(--font-family);font-size:var(--table-font-size, 14px);color:var(--table-font-color, #737b7b);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden}.table thead tr{height:60px}.table thead th{background-color:var(--primary-color);color:var(--text-color);font-family:var(--font-family);font-size:14px;font-weight:600;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center;line-height:2.5}.table thead th:first-child{text-align:left;padding-left:1.4rem}.table tbody td{font-family:var(--font-family);font-size:14px;color:#737b7b;padding:10px;border-bottom:.1rem solid #dcdcdc;text-align:center}.table tbody td:first-child{text-align:left;padding-left:1.4rem}.table tbody tr:last-child td{border-bottom:.1rem solid #dcdcdc}.table tbody td{border-right:none;border-left:none}.table thead th:first-child{border-top-left-radius:0}.table thead th:last-child{border-top-right-radius:0}.table tbody tr:last-child td:first-child{border-bottom-left-radius:0}.table tbody tr:last-child td:last-child{border-bottom-right-radius:0}.btn-icon{width:24px;height:24px;background-size:cover;display:inline-block;cursor:pointer;margin-right:16px}.pagination-controls{display:flex;justify-content:center;align-items:center;margin-top:1rem}.custom-button{display:flex;align-items:center;padding:.5rem 1rem .5rem .5rem;border-radius:.25rem;transition:background-color .3s,border-color .3s,filter .3s;font-family:var(--font-family);font-size:16px;font-weight:600;height:40px;letter-spacing:.005em;text-align:left;color:#fff;background-color:var(--secondary-color);border:none;cursor:pointer}.custom-button lucide-icon{margin-right:.5rem}.custom-button:hover{box-shadow:0 0 0 .15rem var(--secondary-color)}.custom-button:active{background-color:var(--secondary-color)}.custom-button:focus{outline:none;box-shadow:0 0 0 .15rem var(--secondary-color)}.selected{color:var(--secondary-color);stroke-width:8}\n"] }]
|
2929
2988
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: AuthService }, { type: RefreshService }]; }, propDecorators: { columns: [{
|
2930
2989
|
type: Input
|
2931
2990
|
}], hiddenColumns: [{
|
@@ -2958,8 +3017,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2958
3017
|
type: Input
|
2959
3018
|
}], buttonLabel: [{
|
2960
3019
|
type: Input
|
2961
|
-
}],
|
2962
|
-
type:
|
3020
|
+
}], pagedData: [{
|
3021
|
+
type: Input
|
3022
|
+
}], initialFilterField: [{
|
3023
|
+
type: Input
|
2963
3024
|
}], pageChange: [{
|
2964
3025
|
type: Output
|
2965
3026
|
}], itemsPerPageChange: [{
|
@@ -2972,6 +3033,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
2972
3033
|
type: Output
|
2973
3034
|
}], onButtonClick: [{
|
2974
3035
|
type: Output
|
3036
|
+
}], filterFieldChange: [{
|
3037
|
+
type: Output
|
2975
3038
|
}] } });
|
2976
3039
|
|
2977
3040
|
class TextareaComponent {
|
@@ -3554,29 +3617,34 @@ class DataPaginateService {
|
|
3554
3617
|
}
|
3555
3618
|
fetchData(url, params) {
|
3556
3619
|
let httpParams = new HttpParams()
|
3557
|
-
.set(
|
3558
|
-
.set(
|
3559
|
-
.set(
|
3560
|
-
.set(
|
3620
|
+
.set("page", params.pageNumber.toString())
|
3621
|
+
.set("limit", params.pageSize.toString())
|
3622
|
+
.set("sort", params.sortColumn)
|
3623
|
+
.set("order", params.sortDirection);
|
3561
3624
|
if (params.filterDescription) {
|
3562
|
-
httpParams = httpParams.set(
|
3625
|
+
httpParams = httpParams.set("description", params.filterDescription);
|
3626
|
+
}
|
3627
|
+
if (params.filterField) {
|
3628
|
+
httpParams = httpParams.set("filterField", params.filterField);
|
3563
3629
|
}
|
3564
|
-
return this.http
|
3630
|
+
return this.http
|
3631
|
+
.get(url, { params: httpParams })
|
3632
|
+
.pipe(map((response) => {
|
3565
3633
|
const items = response.data || [];
|
3566
3634
|
const totalItems = response.meta.total || 0;
|
3567
3635
|
return {
|
3568
3636
|
items,
|
3569
|
-
totalItems
|
3637
|
+
totalItems,
|
3570
3638
|
};
|
3571
3639
|
}));
|
3572
3640
|
}
|
3573
3641
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, deps: [{ token: i2$1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
3574
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, providedIn:
|
3642
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, providedIn: "root" }); }
|
3575
3643
|
}
|
3576
3644
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DataPaginateService, decorators: [{
|
3577
3645
|
type: Injectable,
|
3578
3646
|
args: [{
|
3579
|
-
providedIn:
|
3647
|
+
providedIn: "root",
|
3580
3648
|
}]
|
3581
3649
|
}], ctorParameters: function () { return [{ type: i2$1.HttpClient }]; } });
|
3582
3650
|
|
@@ -3670,6 +3738,10 @@ function setThemeColors(config) {
|
|
3670
3738
|
}
|
3671
3739
|
}
|
3672
3740
|
|
3741
|
+
function convertToSnakeCase(input) {
|
3742
|
+
return input.replace(/([A-Z])/g, "_$1").toLowerCase();
|
3743
|
+
}
|
3744
|
+
|
3673
3745
|
/*
|
3674
3746
|
* Public API Surface of sim-lib
|
3675
3747
|
*
|
@@ -3682,5 +3754,5 @@ function setThemeColors(config) {
|
|
3682
3754
|
* Generated bundle index. Do not edit.
|
3683
3755
|
*/
|
3684
3756
|
|
3685
|
-
export { AccordionArgentaComponent, AlertComponent, AppBackgroundComponent, AutofocusDirective, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CalendarArgentaComponent, CardComponent, CepMaskDirective, CheckboxComponent, CnpjMaskDirective, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CpfMaskDirective, CustomPaginationComponent, CustomSwitchComponent, DataPaginateService, DataTableComponent, FileUploadComponent, InputComponent, JsonViewerComponent, LibPortalAngularModule, LucideIconsModule, ModalComponent, MultiSelectCategoryComponent, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchCustomerComponent, SearchInputComponent, SelectComponent, TabComponent, TextareaComponent, TreeNodeComponent, setThemeColors };
|
3757
|
+
export { AccordionArgentaComponent, AlertComponent, AppBackgroundComponent, AutofocusDirective, BadgeComponent, BasicRegistrationComponent, ButtonClasses, ButtonComponent, CalendarArgentaComponent, CardComponent, CepMaskDirective, CheckboxComponent, CnpjMaskDirective, CodeHighlightComponent, ComponentsModule, ConfirmationComponent, ConfirmationService, CpfMaskDirective, CustomPaginationComponent, CustomSwitchComponent, DataPaginateService, DataTableComponent, FileUploadComponent, InputComponent, JsonViewerComponent, LibPortalAngularModule, LucideIconsModule, ModalComponent, MultiSelectCategoryComponent, MultiSelectComponent, NotificationService, RadioComponent, RefreshService, RouterParameterService, SearchCustomerComponent, SearchInputComponent, SelectComponent, TabComponent, TextareaComponent, TreeNodeComponent, convertToSnakeCase, setThemeColors };
|
3686
3758
|
//# sourceMappingURL=lib-portal-angular.mjs.map
|