@cbm-common/cbm-types 0.0.198 → 0.0.200
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/lib/components/advanced-item-search-modal/advanced-item-search-modal.d.ts +7 -0
- package/lib/components/advanced-item-search-modal/item-list/item-list.d.ts +39 -34
- package/lib/components/table-column-config-dropdown/table-column-config-dropdown.component.d.ts +71 -0
- package/lib/directives/table-drag-drop.directive.d.ts +45 -0
- package/lib/domain/models/item.domain.model.d.ts +9 -0
- package/lib/domain/models/table-config.model.d.ts +62 -0
- package/lib/domain/services/table-configuration.service.d.ts +131 -0
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ import { CbmAlternativeItemModel } from '../../domain/models/alternative-item.do
|
|
|
4
4
|
import { CbmItemModel } from '../../domain/models/item.domain.model';
|
|
5
5
|
import { CbmPriceListModel } from '../../domain/models/price-list.domain.model';
|
|
6
6
|
import { CbmItemDomainRepository } from '../../domain/repositories/item.domain.repository';
|
|
7
|
+
import { CbmWarehouseModel } from '@cbm-common/cbm-types';
|
|
7
8
|
export declare class CbmAdvancedItemSearchModal {
|
|
8
9
|
private readonly itemRepository;
|
|
9
10
|
private readonly destroyRef;
|
|
@@ -16,7 +17,13 @@ export declare class CbmAdvancedItemSearchModal {
|
|
|
16
17
|
hideTable: import("@angular/core").InputSignal<boolean>;
|
|
17
18
|
addedItemsIds: import("@angular/core").InputSignal<string[]>;
|
|
18
19
|
codeFilter: import("@angular/core").WritableSignal<string | undefined>;
|
|
20
|
+
'suggest-warehouse': import("@angular/core").InputSignal<CbmWarehouseModel.ListResponse.Data | null>;
|
|
21
|
+
'with-stock': import("@angular/core").InputSignal<boolean>;
|
|
22
|
+
'with-provider-code': import("@angular/core").InputSignal<boolean>;
|
|
19
23
|
modalId: import("@angular/core").Signal<string>;
|
|
24
|
+
withStock: import("@angular/core").Signal<boolean>;
|
|
25
|
+
withProviderCode: import("@angular/core").Signal<boolean>;
|
|
26
|
+
suggestWarehouse: import("@angular/core").Signal<CbmWarehouseModel.ListResponse.Data | null>;
|
|
20
27
|
isOnlyOneItemCoincidence: import("@angular/core").OutputEmitterRef<CbmItemModel.ListResponse.Item | undefined>;
|
|
21
28
|
addSelectedPriceList: import("@angular/core").OutputEmitterRef<CbmPriceListModel.ListResponse.Data>;
|
|
22
29
|
open: import("@angular/core").OutputEmitterRef<void>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CdkDragDrop } from '@angular/cdk/drag-drop';
|
|
2
|
+
import { DestroyRef, OnInit } from '@angular/core';
|
|
2
3
|
import { FormControl, FormGroup } from '@angular/forms';
|
|
3
4
|
import { CbmProviderModel, CbmWarehouseModel } from '@cbm-common/cbm-types';
|
|
4
|
-
import { ListService } from '@cbm-common/data-access';
|
|
5
|
-
import { Subject } from 'rxjs';
|
|
5
|
+
import { ListService, PaginatedListService } from '@cbm-common/data-access';
|
|
6
6
|
import { CbmGroupModel } from '../../../domain/models/group.domain.model';
|
|
7
7
|
import { CbmItemModel } from '../../../domain/models/item.domain.model';
|
|
8
8
|
import { CbmManufacturerModel } from '../../../domain/models/manufacturer.domain.model';
|
|
@@ -11,24 +11,30 @@ import { CbmGroupDomainRepository } from '../../../domain/repositories/group.dom
|
|
|
11
11
|
import { CbmItemDomainRepository } from '../../../domain/repositories/item.domain.repository';
|
|
12
12
|
import { CbmManufacturerRepository } from '../../../domain/repositories/manufacturer.domain.repository';
|
|
13
13
|
import { CbmPriceListDomainRepository } from '../../../domain/repositories/price-list.domain.repository';
|
|
14
|
+
import { CbmProviderRepository } from '../../../domain/repositories/provider.domain.repository';
|
|
14
15
|
import { CbmWarehouseDomainRepository } from '../../../domain/repositories/warehouse.domain.repository';
|
|
15
16
|
import { CbmAuthReactiveService } from '../../../domain/services/auth-reactive.domain.service';
|
|
16
17
|
import { CbmNotificationService } from '../../../domain/services/notification/notification.service';
|
|
18
|
+
import { TableConfigurationService } from '../../../domain/services/table-configuration.service';
|
|
17
19
|
import { CbmModalConfirmComponent } from '../../modal-confirm/modal-confirm';
|
|
18
|
-
import {
|
|
20
|
+
import { StockByWarehouseModalCompModel } from '../../stock-by-warehouse-modal/stock-by-warehouse-modal.model';
|
|
19
21
|
import { IPagination, TStatus } from '../types';
|
|
20
22
|
interface IItemWithChecked extends CbmItemModel.AdvancedItemListResponse.Item {
|
|
21
23
|
checked: boolean;
|
|
22
24
|
}
|
|
23
|
-
export declare class ItemListComponent {
|
|
24
|
-
private priceListRepository;
|
|
25
|
-
private manufacturerRepository;
|
|
26
|
-
private groupRepository;
|
|
27
|
-
private itemRepository;
|
|
28
|
-
private
|
|
29
|
-
private readonly
|
|
25
|
+
export declare class ItemListComponent implements OnInit {
|
|
26
|
+
private readonly priceListRepository;
|
|
27
|
+
private readonly manufacturerRepository;
|
|
28
|
+
private readonly groupRepository;
|
|
29
|
+
private readonly itemRepository;
|
|
30
|
+
private readonly providerRepository;
|
|
31
|
+
private readonly notificationService;
|
|
32
|
+
private readonly tableConfigService;
|
|
30
33
|
private destroyRef;
|
|
34
|
+
private readonly warehouseRepository;
|
|
31
35
|
private readonly authReactiveService;
|
|
36
|
+
constructor(priceListRepository: CbmPriceListDomainRepository, manufacturerRepository: CbmManufacturerRepository, groupRepository: CbmGroupDomainRepository, itemRepository: CbmItemDomainRepository, providerRepository: CbmProviderRepository, notificationService: CbmNotificationService, tableConfigService: TableConfigurationService, destroyRef: DestroyRef, warehouseRepository: CbmWarehouseDomainRepository, authReactiveService: CbmAuthReactiveService);
|
|
37
|
+
private readonly initialColumns;
|
|
32
38
|
modalConfirmRef: import("@angular/core").Signal<CbmModalConfirmComponent>;
|
|
33
39
|
hidePricelistFilter: import("@angular/core").InputSignal<boolean | undefined>;
|
|
34
40
|
priceList: import("@angular/core").InputSignal<string | CbmPriceListModel.ListResponse.Data | undefined>;
|
|
@@ -36,30 +42,25 @@ export declare class ItemListComponent {
|
|
|
36
42
|
hideAlternativeItemsButton: import("@angular/core").InputSignal<boolean>;
|
|
37
43
|
addedItemsIds: import("@angular/core").InputSignal<string[]>;
|
|
38
44
|
nameCodeFilter: import("@angular/core").InputSignal<string | undefined>;
|
|
45
|
+
'with-stock': import("@angular/core").InputSignal<boolean>;
|
|
46
|
+
'with-provider-code': import("@angular/core").InputSignal<boolean>;
|
|
47
|
+
'suggest-warehouse': import("@angular/core").InputSignal<CbmWarehouseModel.ListResponse.Data | null>;
|
|
39
48
|
addItem: import("@angular/core").OutputEmitterRef<CbmItemModel.ListResponse.Item>;
|
|
40
49
|
addAllItems: import("@angular/core").OutputEmitterRef<CbmItemModel.ListResponse.Item[]>;
|
|
41
50
|
selectItem: import("@angular/core").OutputEmitterRef<CbmItemModel.ListResponse.Item>;
|
|
42
51
|
addSelectedPriceList: import("@angular/core").OutputEmitterRef<CbmPriceListModel.ListResponse.Data>;
|
|
43
52
|
isTableHide: import("@angular/core").WritableSignal<boolean>;
|
|
44
53
|
isFilterVisible: import("@angular/core").WritableSignal<boolean>;
|
|
45
|
-
categories: import("@angular/core").WritableSignal<CbmTreeSelect.Children<any>>;
|
|
46
54
|
items: import("@angular/core").WritableSignal<IItemWithChecked[]>;
|
|
47
|
-
checkedItems: import("@angular/core").WritableSignal<CbmItemModel.ListResponse.Item[]>;
|
|
48
55
|
rememberedItems: import("@angular/core").WritableSignal<IItemWithChecked[]>;
|
|
49
|
-
priceLists: import("@angular/core").WritableSignal<CbmPriceListModel.ListResponse.Data[] | null>;
|
|
50
|
-
manufacturers: import("@angular/core").WritableSignal<CbmManufacturerModel.ListResponse.Item[]>;
|
|
51
|
-
statusOfFetchCategories: import("@angular/core").WritableSignal<TStatus>;
|
|
52
|
-
statusOfFetchItems: import("@angular/core").WritableSignal<TStatus>;
|
|
53
|
-
statusOfFetchPriceLists: import("@angular/core").WritableSignal<TStatus>;
|
|
54
|
-
statusOfFetchManufacturers: import("@angular/core").WritableSignal<TStatus>;
|
|
55
56
|
itemsPagination: import("@angular/core").WritableSignal<IPagination>;
|
|
56
|
-
|
|
57
|
+
statusOfFetchItems: import("@angular/core").WritableSignal<TStatus>;
|
|
57
58
|
isSmallScreen: import("@angular/core").WritableSignal<boolean>;
|
|
59
|
+
withStock: import("@angular/core").Signal<boolean>;
|
|
60
|
+
withProviderCode: import("@angular/core").Signal<boolean>;
|
|
58
61
|
computedItems: import("@angular/core").Signal<IItemWithChecked[]>;
|
|
62
|
+
itemConsulted: import("@angular/core").WritableSignal<StockByWarehouseModalCompModel.ItemToConsulted | null>;
|
|
59
63
|
areAllItemsChecked: import("@angular/core").Signal<boolean>;
|
|
60
|
-
subjectToSearchCategory$: Subject<string>;
|
|
61
|
-
subjectToSearchPriceLists$: Subject<string>;
|
|
62
|
-
subjectToSearchManufacturers$: Subject<string>;
|
|
63
64
|
formToFilter: FormGroup<{
|
|
64
65
|
priceList: FormControl<CbmPriceListModel.ListResponse.Data | null>;
|
|
65
66
|
manufacturer: FormControl<CbmManufacturerModel.ListResponse.Item | null>;
|
|
@@ -69,42 +70,46 @@ export declare class ItemListComponent {
|
|
|
69
70
|
checked: FormControl<boolean | null>;
|
|
70
71
|
warehouse: FormControl<CbmWarehouseModel.ListResponse.Data | null>;
|
|
71
72
|
provider: FormControl<CbmProviderModel.ListResponse.Item | null>;
|
|
72
|
-
provider_code: FormControl<string | null>;
|
|
73
73
|
manage_by: FormControl<CbmItemModel.EManageBy | null>;
|
|
74
74
|
}>;
|
|
75
|
-
constructor(priceListRepository: CbmPriceListDomainRepository, manufacturerRepository: CbmManufacturerRepository, groupRepository: CbmGroupDomainRepository, itemRepository: CbmItemDomainRepository, notificationService: CbmNotificationService, warehouseRepository: CbmWarehouseDomainRepository, destroyRef: DestroyRef, authReactiveService: CbmAuthReactiveService);
|
|
76
75
|
company: import("@angular/core").Signal<import("../../../domain/models/auth-reactive.domain.model").CbmAuthReactiveModel.GlobalTokenData.Company>;
|
|
76
|
+
tableConfig: TableConfigurationService;
|
|
77
|
+
priceLists$: ListService<CbmPriceListModel.ListResponse, any, CbmPriceListModel.ListResponse.Data[]>;
|
|
78
|
+
manufacturers$: PaginatedListService<CbmManufacturerModel.ListResponse, CbmManufacturerModel.ListParams, CbmManufacturerModel.ListResponse.Item[]>;
|
|
79
|
+
providers$: PaginatedListService<import("../../../domain/models/provider.domain.model").CbmProviderModel.ListResponse, import("../../../domain/models/provider.domain.model").CbmProviderModel.ListParams, import("../../../domain/models/provider.domain.model").CbmProviderModel.ListResponse.Item[]>;
|
|
80
|
+
categories$: ListService<CbmGroupModel.ListAsTreeResponse, any, CbmGroupModel.ListAsTreeResponse.Children>;
|
|
77
81
|
warehouses$: ListService<import("../../../domain/models/warehouse.domain.model").CbmWarehouseModel.ListResponse, import("../../../domain/models/warehouse.domain.model").CbmWarehouseModel.ListParams, import("../../../domain/models/warehouse.domain.model").CbmWarehouseModel.ListResponse.Data[]>;
|
|
78
82
|
ngOnInit(): void;
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
get manufacturerControl(): FormControl<CbmManufacturerModel.ListResponse.Item | null>;
|
|
82
|
-
get nameCodeControl(): FormControl<string | null>;
|
|
83
|
-
get codeControl(): FormControl<string | null>;
|
|
83
|
+
protected onColumnDrop(event: CdkDragDrop<any>): void;
|
|
84
|
+
protected resetTableConfig(): void;
|
|
84
85
|
compareWithId(a: {
|
|
85
86
|
_id: string;
|
|
86
87
|
}, b: {
|
|
87
88
|
_id: string;
|
|
88
89
|
}): boolean;
|
|
89
90
|
makeSubscriptions(): void;
|
|
90
|
-
|
|
91
|
+
/** Valida el formulario y dispara la búsqueda de items */
|
|
91
92
|
searchItems(): void;
|
|
93
|
+
/** Construye los parámetros del filtro y busca items con paginación */
|
|
92
94
|
fetchItems(): void;
|
|
93
95
|
onGoToPage(page: number): void;
|
|
94
96
|
onNextPage(page: number): void;
|
|
95
97
|
onPreviousPage(page: number): void;
|
|
96
98
|
onPageSizeChange(size: number): void;
|
|
97
|
-
|
|
98
|
-
fetchManufacturers(searchTerm?: string): void;
|
|
99
|
-
fetchCategories(searchTerm?: string): void;
|
|
99
|
+
/** Emite item agregado y limpia selección */
|
|
100
100
|
_addItem(item: CbmItemModel.ListResponse.Item): void;
|
|
101
101
|
validateConfirmToAddAllItems(): Promise<void>;
|
|
102
|
+
/** Emite todos los items seleccionados y limpia estado */
|
|
102
103
|
_addAllItems(): void;
|
|
103
104
|
searchAlternativeItems(item: CbmItemModel.ListResponse.Item): void;
|
|
105
|
+
/** Obtiene el precio sin IVA según la lista de precios seleccionada */
|
|
104
106
|
getPriceWithoutIva(item: CbmItemModel.ListResponse.Item): string;
|
|
107
|
+
/** Obtiene el precio con IVA según la lista de precios seleccionada */
|
|
105
108
|
getPriceWithIva(item: CbmItemModel.ListResponse.Item): string;
|
|
109
|
+
/** Actualiza estado reactivo de item y sincroniza con lista de selección persistente */
|
|
106
110
|
_checkItem(item: IItemWithChecked): void;
|
|
107
111
|
removeRememberedItem(item: IItemWithChecked): void;
|
|
112
|
+
/** Marca/desmarca todos los items visibles (no agregados aún) */
|
|
108
113
|
toggleCheckAll(): void;
|
|
109
114
|
}
|
|
110
115
|
export {};
|
package/lib/components/table-column-config-dropdown/table-column-config-dropdown.component.d.ts
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { FormArray, FormControl } from '@angular/forms';
|
|
2
|
+
import { TableConfigurationService } from '../../domain/services/table-configuration.service';
|
|
3
|
+
/**
|
|
4
|
+
* Componente dropdown para configurar columnas de tabla
|
|
5
|
+
* Permite mostrar/ocultar columnas con un click
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```html
|
|
9
|
+
* <app-table-column-config-dropdown
|
|
10
|
+
* [tableConfig]="tableConfigService"
|
|
11
|
+
* buttonLabel="Configurar Columnas"
|
|
12
|
+
* [showResetButton]="true"
|
|
13
|
+
* (onReset)="handleReset()"
|
|
14
|
+
* />
|
|
15
|
+
* ```
|
|
16
|
+
*/
|
|
17
|
+
export declare class TableColumnConfigDropdownComponent {
|
|
18
|
+
private fb;
|
|
19
|
+
/** Servicio de configuración de tabla */
|
|
20
|
+
tableConfig: import("@angular/core").InputSignal<TableConfigurationService>;
|
|
21
|
+
/** Texto del botón principal */
|
|
22
|
+
buttonLabel: import("@angular/core").InputSignal<string>;
|
|
23
|
+
/** Mostrar botón de "Mostrar todas" */
|
|
24
|
+
showShowAllButton: import("@angular/core").InputSignal<boolean>;
|
|
25
|
+
/** Mostrar botón de "Ocultar todas" */
|
|
26
|
+
showHideAllButton: import("@angular/core").InputSignal<boolean>;
|
|
27
|
+
/** Mostrar botón de "Resetear" */
|
|
28
|
+
showResetButton: import("@angular/core").InputSignal<boolean>;
|
|
29
|
+
/** Mostrar botón de modo de edición de anchos */
|
|
30
|
+
showEditModeButton: import("@angular/core").InputSignal<boolean>;
|
|
31
|
+
/** Icono del botón principal (clase de icono) */
|
|
32
|
+
buttonIcon: import("@angular/core").InputSignal<string>;
|
|
33
|
+
/** Posición del dropdown */
|
|
34
|
+
dropdownPosition: import("@angular/core").InputSignal<"left" | "right">;
|
|
35
|
+
/** Evento emitido cuando se resetea la configuración */
|
|
36
|
+
onReset: import("@angular/core").OutputEmitterRef<void>;
|
|
37
|
+
/** FormArray para manejar anchos de columnas reactivamente */
|
|
38
|
+
columnWidthsForm: FormArray<FormControl<string>>;
|
|
39
|
+
/**
|
|
40
|
+
* Alterna el modo de edición
|
|
41
|
+
*/
|
|
42
|
+
toggleEditMode(event: Event): void;
|
|
43
|
+
/**
|
|
44
|
+
* Actualiza el ancho de una columna
|
|
45
|
+
*/
|
|
46
|
+
updateColumnWidth(columnKey: string, value: string): void;
|
|
47
|
+
/**
|
|
48
|
+
* Obtiene el FormControl del ancho por índice
|
|
49
|
+
*/
|
|
50
|
+
getWidthControl(index: number): FormControl;
|
|
51
|
+
/**
|
|
52
|
+
* Alterna la visibilidad de una columna
|
|
53
|
+
*/
|
|
54
|
+
toggleColumn(columnKey: string, event: Event): void;
|
|
55
|
+
/**
|
|
56
|
+
* Muestra todas las columnas
|
|
57
|
+
*/
|
|
58
|
+
showAll(event: Event): void;
|
|
59
|
+
/**
|
|
60
|
+
* Oculta todas las columnas no fijas
|
|
61
|
+
*/
|
|
62
|
+
hideAll(event: Event): void;
|
|
63
|
+
/**
|
|
64
|
+
* Resetea la configuración
|
|
65
|
+
*/
|
|
66
|
+
reset(event: Event): void;
|
|
67
|
+
/**
|
|
68
|
+
* Previene el cierre del dropdown al hacer click dentro
|
|
69
|
+
*/
|
|
70
|
+
preventClose(event: Event): void;
|
|
71
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ElementRef } from '@angular/core';
|
|
2
|
+
import { TableConfigurationService } from '../domain/services/table-configuration.service';
|
|
3
|
+
/**
|
|
4
|
+
* Directiva para aplicar drag-and-drop a los headers de una tabla
|
|
5
|
+
* Permite reordenar columnas arrastrando los headers
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* ```html
|
|
9
|
+
* <thead appTableDragDrop [tableConfig]="tableConfigService">
|
|
10
|
+
* <tr>
|
|
11
|
+
* @for (column of tableConfig.visibleColumns(); track column.key) {
|
|
12
|
+
* <th cdkDrag>{{ column.label }}</th>
|
|
13
|
+
* }
|
|
14
|
+
* </tr>
|
|
15
|
+
* </thead>
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare class TableDragDropDirective {
|
|
19
|
+
private elementRef;
|
|
20
|
+
/** Servicio de configuración de tabla */
|
|
21
|
+
tableConfig: import("@angular/core").InputSignal<TableConfigurationService>;
|
|
22
|
+
constructor(elementRef: ElementRef<HTMLElement>);
|
|
23
|
+
/**
|
|
24
|
+
* Manejador del evento drop
|
|
25
|
+
*/
|
|
26
|
+
onDrop(event: any): void;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* Directiva para aplicar a cada header individual que puede ser arrastrado
|
|
30
|
+
* Se usa en conjunto con appTableDragDrop
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```html
|
|
34
|
+
* <th appTableDragHandle [disabled]="column.fixed">
|
|
35
|
+
* <i class="mdi mdi-drag-vertical"></i>
|
|
36
|
+
* {{ column.label }}
|
|
37
|
+
* </th>
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export declare class TableDragHandleDirective {
|
|
41
|
+
private elementRef;
|
|
42
|
+
/** Si está deshabilitado el drag (para columnas fijas) */
|
|
43
|
+
disabled: import("@angular/core").InputSignal<boolean>;
|
|
44
|
+
constructor(elementRef: ElementRef<HTMLElement>);
|
|
45
|
+
}
|
|
@@ -262,8 +262,17 @@ export declare namespace CbmItemModel {
|
|
|
262
262
|
item_stock_company: number;
|
|
263
263
|
item_stock_warehouse: number;
|
|
264
264
|
observation?: string;
|
|
265
|
+
item_stock_in_transit_warehouse: number;
|
|
266
|
+
provider_items: Item.ProviderItem[];
|
|
265
267
|
}
|
|
266
268
|
namespace Item {
|
|
269
|
+
interface ProviderItem {
|
|
270
|
+
_id: string;
|
|
271
|
+
provider_item_id: string;
|
|
272
|
+
code: string;
|
|
273
|
+
provider_id: string;
|
|
274
|
+
provider_name: string;
|
|
275
|
+
}
|
|
267
276
|
interface TaxIva {
|
|
268
277
|
_id: string;
|
|
269
278
|
code: string;
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Modelo de configuración de columnas de tabla
|
|
3
|
+
* Sistema modular para gestionar visibilidad y orden de columnas
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Definición de una columna de tabla
|
|
7
|
+
*/
|
|
8
|
+
export interface ITableColumn {
|
|
9
|
+
/** Identificador único de la columna */
|
|
10
|
+
key: string;
|
|
11
|
+
/** Etiqueta visible para el usuario */
|
|
12
|
+
label: string;
|
|
13
|
+
/** Indica si la columna está visible */
|
|
14
|
+
visible: boolean;
|
|
15
|
+
/** Orden de visualización (menor número = más a la izquierda) */
|
|
16
|
+
order: number;
|
|
17
|
+
/** Si es true, la columna no se puede ocultar ni reordenar */
|
|
18
|
+
fixed?: boolean;
|
|
19
|
+
/** Ancho personalizado de la columna (opcional) */
|
|
20
|
+
width?: string;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Configuración completa de una tabla
|
|
24
|
+
*/
|
|
25
|
+
export interface ITableConfiguration {
|
|
26
|
+
/** ID único de la tabla para persistencia */
|
|
27
|
+
tableId: string;
|
|
28
|
+
/** Lista de columnas configurables */
|
|
29
|
+
columns: ITableColumn[];
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Evento emitido cuando cambia la configuración
|
|
33
|
+
*/
|
|
34
|
+
export interface ITableConfigChangeEvent {
|
|
35
|
+
/** Columnas actualizadas */
|
|
36
|
+
columns: ITableColumn[];
|
|
37
|
+
/** Tipo de cambio realizado */
|
|
38
|
+
changeType: 'visibility' | 'order' | 'reset';
|
|
39
|
+
}
|
|
40
|
+
/**
|
|
41
|
+
* Namespace para tipos relacionados con configuración de tablas
|
|
42
|
+
*/
|
|
43
|
+
export declare namespace ITableConfig {
|
|
44
|
+
/**
|
|
45
|
+
* Parámetros para inicializar una configuración de tabla
|
|
46
|
+
*/
|
|
47
|
+
interface InitParams {
|
|
48
|
+
tableId: string;
|
|
49
|
+
columns: Omit<ITableColumn, 'order'>[];
|
|
50
|
+
persistInLocalStorage?: boolean;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Estado de configuración almacenado
|
|
54
|
+
*/
|
|
55
|
+
interface StoredConfig {
|
|
56
|
+
tableId: string;
|
|
57
|
+
columns: (Pick<ITableColumn, 'key' | 'visible' | 'order'> & {
|
|
58
|
+
width?: string;
|
|
59
|
+
})[];
|
|
60
|
+
lastUpdated: string;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { ITableColumn, ITableConfiguration, ITableConfig } from '../models/table-config.model';
|
|
2
|
+
/**
|
|
3
|
+
* Servicio de gestión de configuración de tablas
|
|
4
|
+
* Maneja visibilidad, orden y persistencia de columnas
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```typescript
|
|
8
|
+
* // En el componente
|
|
9
|
+
* tableConfig = new TableConfigurationService();
|
|
10
|
+
*
|
|
11
|
+
* ngOnInit() {
|
|
12
|
+
* this.tableConfig.initialize({
|
|
13
|
+
* tableId: 'my-unique-table-id',
|
|
14
|
+
* columns: [
|
|
15
|
+
* { key: 'name', label: 'Nombre', visible: true },
|
|
16
|
+
* { key: 'code', label: 'Código', visible: true },
|
|
17
|
+
* { key: 'price', label: 'Precio', visible: false }
|
|
18
|
+
* ],
|
|
19
|
+
* persistInLocalStorage: true
|
|
20
|
+
* });
|
|
21
|
+
* }
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export declare class TableConfigurationService {
|
|
25
|
+
/** Configuración actual de la tabla */
|
|
26
|
+
private readonly _configuration;
|
|
27
|
+
/** Flag que indica si se debe persistir en localStorage */
|
|
28
|
+
private readonly _persistEnabled;
|
|
29
|
+
/** Modo de edición de anchos de columna */
|
|
30
|
+
private readonly _editMode;
|
|
31
|
+
/** Indica si el modo de edición está activo (read-only) */
|
|
32
|
+
readonly editMode: import("@angular/core").Signal<boolean>;
|
|
33
|
+
/** Configuración completa (read-only) */
|
|
34
|
+
readonly configuration: import("@angular/core").Signal<ITableConfiguration>;
|
|
35
|
+
/** Solo columnas visibles ordenadas */
|
|
36
|
+
readonly visibleColumns: import("@angular/core").Signal<ITableColumn[]>;
|
|
37
|
+
/** Solo columnas ocultas */
|
|
38
|
+
readonly hiddenColumns: import("@angular/core").Signal<ITableColumn[]>;
|
|
39
|
+
/** Todas las columnas ordenadas */
|
|
40
|
+
readonly allColumns: import("@angular/core").Signal<ITableColumn[]>;
|
|
41
|
+
/** Número total de columnas visibles */
|
|
42
|
+
readonly visibleColumnsCount: import("@angular/core").Signal<number>;
|
|
43
|
+
/** Indica si hay columnas ocultas */
|
|
44
|
+
readonly hasHiddenColumns: import("@angular/core").Signal<boolean>;
|
|
45
|
+
/**
|
|
46
|
+
* Inicializa la configuración de la tabla
|
|
47
|
+
* Si existe configuración guardada, la carga; si no, usa la configuración inicial
|
|
48
|
+
*/
|
|
49
|
+
initialize(params: ITableConfig.InitParams): void;
|
|
50
|
+
/**
|
|
51
|
+
* Alterna la visibilidad de una columna
|
|
52
|
+
*/
|
|
53
|
+
toggleColumnVisibility(columnKey: string): void;
|
|
54
|
+
/**
|
|
55
|
+
* Muestra una columna específica
|
|
56
|
+
*/
|
|
57
|
+
showColumn(columnKey: string): void;
|
|
58
|
+
/**
|
|
59
|
+
* Oculta una columna específica
|
|
60
|
+
*/
|
|
61
|
+
hideColumn(columnKey: string): void;
|
|
62
|
+
/**
|
|
63
|
+
* Reordena las columnas después de un drag-and-drop
|
|
64
|
+
* @param previousIndex Índice anterior de la columna
|
|
65
|
+
* @param currentIndex Nuevo índice de la columna
|
|
66
|
+
*/
|
|
67
|
+
reorderColumns(previousIndex: number, currentIndex: number): void;
|
|
68
|
+
/**
|
|
69
|
+
* Muestra todas las columnas
|
|
70
|
+
*/
|
|
71
|
+
showAllColumns(): void;
|
|
72
|
+
/**
|
|
73
|
+
* Oculta todas las columnas no fijas
|
|
74
|
+
*/
|
|
75
|
+
hideAllColumns(): void;
|
|
76
|
+
/**
|
|
77
|
+
* Resetea la configuración a los valores iniciales
|
|
78
|
+
*/
|
|
79
|
+
resetConfiguration(initialColumns: Omit<ITableColumn, 'order'>[]): void;
|
|
80
|
+
/**
|
|
81
|
+
* Obtiene una columna por su key
|
|
82
|
+
*/
|
|
83
|
+
getColumn(columnKey: string): ITableColumn | null;
|
|
84
|
+
/**
|
|
85
|
+
* Verifica si una columna está visible
|
|
86
|
+
*/
|
|
87
|
+
isColumnVisible(columnKey: string): boolean;
|
|
88
|
+
/**
|
|
89
|
+
* Activa o desactiva el modo de edición de anchos
|
|
90
|
+
*/
|
|
91
|
+
toggleEditMode(): void;
|
|
92
|
+
/**
|
|
93
|
+
* Establece el modo de edición
|
|
94
|
+
*/
|
|
95
|
+
setEditMode(enabled: boolean): void;
|
|
96
|
+
/**
|
|
97
|
+
* Actualiza el ancho de una columna
|
|
98
|
+
* @param columnKey Clave de la columna
|
|
99
|
+
* @param width Nuevo ancho (ej: '150px', '20%', 'auto')
|
|
100
|
+
*/
|
|
101
|
+
setColumnWidth(columnKey: string, width: string): void;
|
|
102
|
+
/**
|
|
103
|
+
* Actualiza la configuración y persiste si está habilitado
|
|
104
|
+
*/
|
|
105
|
+
private _updateConfiguration;
|
|
106
|
+
/**
|
|
107
|
+
* Merge configuración guardada con definición actual
|
|
108
|
+
* Mantiene el orden, visibilidad y anchos guardados, pero agrega nuevas columnas
|
|
109
|
+
*/
|
|
110
|
+
private _mergeConfigurations;
|
|
111
|
+
/**
|
|
112
|
+
* Guarda la configuración en localStorage
|
|
113
|
+
*/
|
|
114
|
+
private _saveToStorage;
|
|
115
|
+
/**
|
|
116
|
+
* Carga la configuración desde localStorage
|
|
117
|
+
*/
|
|
118
|
+
private _loadFromStorage;
|
|
119
|
+
/**
|
|
120
|
+
* Limpia la configuración del localStorage
|
|
121
|
+
*/
|
|
122
|
+
private _clearStorage;
|
|
123
|
+
/**
|
|
124
|
+
* Genera la clave de localStorage
|
|
125
|
+
*/
|
|
126
|
+
private _getStorageKey;
|
|
127
|
+
/**
|
|
128
|
+
* Emite evento de cambio (para futuras integraciones con EventEmitter si es necesario)
|
|
129
|
+
*/
|
|
130
|
+
private _emitChangeEvent;
|
|
131
|
+
}
|