kea-react/src/grid2Base/simpleGrid/gridState.ts

Componentes comunes de react

import { Key } from "./baseTypes";
import { intersect, filterObject, contains } from "keautils";
export type ColumnMapping = Key[];

/**Representa el estado del grid */
export interface OrdenGrid {
    columna: Key;
    orden: "asc" | "desc";
}
/**Representa un filtro agregado por el usuario a una columna */
export interface FiltroColumna {
    /**Datos del filtro */
    datos: {} | undefined;
}
/**La clave del objeto indica la columna a la que esta aplicando el filtro, el valor son los datos del filtro */
export interface FiltroColumnaMap {
    [key: string]: FiltroColumna;
}

/**Interfaz que representa por completo a todos los filtros del grid y al ordenamiento. Con este objeto y los items se pueden saber todos los items que estan visibles para grid */
export interface FiltroOrden {
    /**Filtros por columna */
    columna: FiltroColumnaMap;
    /**Búsqueda de texto global */
    busqueda: string;
    /**Orden del grid */
    orden?: OrdenGrid
}
/**Paginacion */
export interface Paginacion {
    /**Indice de la página seleccionada */
    selectedPage: number;
    /**Tamaño de la página seleccionada */
    selectedPageSize: number;
}
export interface DrillDownColumn {
    /**Clave de la columna de la cual se esta haciendo un drill down. Este indice debe de ser de las columnas originales, no de las columnas de drill down */
    columna: Key;
    /**Nombre de las propiedades que se debe de seguir */
    path: (string | number)[];
}
export interface DrillDownMap {
    [key: string]: DrillDownColumn
}

/**Estado del grid */
export interface Grid2State {
    /**Datos de filtrado y de ordenación */
    filtroOrden: FiltroOrden;
    /**Paginación */
    paginacion: Paginacion;
    /**Columnas extra agregadas a partir de drill downs */
    drillDowns: DrillDownMap;

    /**Indices de las columnas que se estan mostrando al usuario. El primer elemento de este arreglo representa la columna que se mostrará a la izquierda. */
    mapping: ColumnMapping;
    /**Indices de las columnas en orden de las que se van a exportar. */
    export: ColumnMapping;
}
function filtrarFiltroOrden(x: FiltroOrden, columnKeys: Key[]): FiltroOrden {
    return {
        ...x,
        columna: filterObject(x.columna, (x, key) => contains(columnKeys, key)),
        orden: x.orden && (contains(columnKeys, x.orden.columna) ? x.orden : undefined)
    };
}

function filtrarDrillDowns(x: DrillDownMap, columnKeys: Key[]): DrillDownMap {
    return filterObject(x, (x, key) => contains(columnKeys, x.columna));
}

function filterMapping(x: ColumnMapping, columnkeys: Key[]) : ColumnMapping {
    return intersect(x, columnkeys);
}
/**Obtiene los valores por default del grid state y filtra los nombres de las columnas que no existe, esto es por que como el grid state generalmente se almacena en los cookies, puede ser
 * que nuevas versiones del sistema ya no tengan columnas que esten referenciadas en el mismo
 */
export function gridStateDefaultValues(value: Partial<Grid2State> | undefined, originalColumnKeys: Key[]): Grid2State {

    value = value || {};
    return {
        filtroOrden: value.filtroOrden ? filtrarFiltroOrden(value.filtroOrden, originalColumnKeys) : { busqueda: "", columna: {}, orden: undefined },
        drillDowns: value.drillDowns ? filtrarDrillDowns(value.drillDowns, originalColumnKeys) : {},
        paginacion: value.paginacion || { selectedPage: 0, selectedPageSize: 15 },
        mapping: value.mapping ? filterMapping(value.mapping, originalColumnKeys) : originalColumnKeys,
        export: value.export ? filterMapping(value.export, originalColumnKeys) :  originalColumnKeys
    }
}