@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
487 lines (486 loc) • 18 kB
JavaScript
import { EMPTY_STRING } from '../../Utilities/Constants/GeneralConstants';
import AdaptableHelper from '../../Utilities/Helpers/AdaptableHelper';
import { normalizeLayout } from '../../Api/Implementation/LayoutHelpers';
/**
* @ReduxAction A new caption / header has been set for a Column in the Layout
*/
export const LAYOUT_COLUMN_SET_CAPTION = 'LAYOUT_COLUMN_SET_CAPTION';
/**
* @ReduxAction Layout Module is ready
*/
export const LAYOUT_READY = 'LAYOUT_READY';
/**
* @ReduxAction A Layout has been added
*/
export const LAYOUT_ADD = 'LAYOUT_ADD';
/**
* @ReduxAction A Layout has been edited
*/
export const LAYOUT_EDIT = 'LAYOUT_EDIT';
/**
* @ReduxAction A Layout has been deleted
*/
export const LAYOUT_DELETE = 'LAYOUT_DELETE';
/**
* @ReduxAction A Layout has been selected
*/
export const LAYOUT_SELECT = 'LAYOUT_SELECT';
/**
* @ReduxAction A Layout has been (auto)saved
*/
export const LAYOUT_SAVE = 'LAYOUT_SAVE';
/**
* @ReduxAction A Column has been added
*/
export const LAYOUT_COLUMN_ADD = 'LAYOUT_COLUMN_ADD';
/**
* @ReduxAction A Column has been removed
*/
export const LAYOUT_COLUMN_REMOVE = 'LAYOUT_COLUMN_REMOVE';
/**
* @ReduxAction A Column Filter has been added
*/
export const LAYOUT_COLUMN_FILTER_ADD = 'LAYOUT_COLUMN_FILTER_ADD';
/**
* @ReduxAction A Column Filter has been edited
*/
export const LAYOUT_COLUMN_FILTER_EDIT = 'LAYOUT_COLUMN_FILTER_EDIT';
/**
* @ReduxAction Column Filters have been set
*/
export const LAYOUT_COLUMN_FILTER_SET = 'LAYOUT_COLUMN_FILTER_SET';
/**
* @ReduxAction All Column Filters have been cleared
*/
export const LAYOUT_COLUMN_FILTER_CLEAR_ALL = 'LAYOUT_COLUMN_FILTER_CLEAR_ALL';
/**
* @ReduxAction A Column Filter has been cleared
*/
export const LAYOUT_COLUMN_FILTER_CLEAR = 'LAYOUT_COLUMN_FILTER_CLEAR';
/**
* @ReduxAction Column Filter is suspended
*/
export const LAYOUT_COLUMN_FILTER_SUSPEND = 'LAYOUT_COLUMN_FILTER_SUSPEND';
/**
* @ReduxAction Column Filter is un-suspended, or activated
*/
export const LAYOUT_COLUMN_FILTER_UNSUSPEND = 'LAYOUT_COLUMN_FILTER_UNSUSPEND';
/**
* @ReduxAction All Column Filters are suspended
*/
export const LAYOUT_COLUMN_FILTER_SUSPEND_ALL = 'LAYOUT_COLUMN_FILTER_SUSPEND_ALL';
/**
* @ReduxAction All Column Filters are un-suspended, or activated
*/
export const LAYOUT_COLUMN_FILTER_UNSUSPEND_ALL = 'LAYOUT_COLUMN_FILTER_UNSUSPEND_ALL';
/**
* @ReduxAction Grid Filter is un-suspended, or activated
*/
export const LAYOUT_GRID_FILTER_SUSPEND = 'LAYOUT_GRID_FILTER_SUSPEND';
/**
* @ReduxAction Grid Filter is un-suspended, or activated
*/
export const LAYOUT_GRID_FILTER_UNSUSPEND = 'LAYOUT_GRID_FILTER_UNSUSPEND';
/**
* @ReduxAction Edit Grid filter
*/
export const LAYOUT_GRID_FILTER_SET = 'LAYOUT_GRID_FILTER_SET';
/**
* @ReduxAction The Grid Filter has been cleared
*/
export const LAYOUT_GRID_FILTER_CLEAR = 'LAYOUT_GRID_FILTER_CLEAR';
// Column Filter Methods
export const LayoutColumnFilterAdd = (columnFilter) => ({
type: LAYOUT_COLUMN_FILTER_ADD,
columnFilter,
});
export const LayoutColumnFilterEdit = (columnFilter) => ({
type: LAYOUT_COLUMN_FILTER_EDIT,
columnFilter,
});
export const LayoutColumnFilterSet = (columnFilter) => ({
type: LAYOUT_COLUMN_FILTER_SET,
columnFilter,
});
export const LayoutColumnFilterClearAll = () => ({
type: LAYOUT_COLUMN_FILTER_CLEAR_ALL,
});
export const LayoutColumnFilterClear = (columnId) => ({
type: LAYOUT_COLUMN_FILTER_CLEAR,
columnId,
});
export const LayoutColumnFilterSuspend = (columnFilter) => ({
type: LAYOUT_COLUMN_FILTER_SUSPEND,
columnFilter,
});
export const LayoutColumnFilterUnSuspend = (columnFilter) => ({
type: LAYOUT_COLUMN_FILTER_UNSUSPEND,
columnFilter,
});
export const LayoutColumnFilterSuspendAll = () => ({
type: LAYOUT_COLUMN_FILTER_SUSPEND_ALL,
});
export const LayoutColumnFilterUnSuspendAll = () => ({
type: LAYOUT_COLUMN_FILTER_UNSUSPEND_ALL,
});
export const LayoutGridFilterSet = (gridFilter) => ({
type: LAYOUT_GRID_FILTER_SET,
gridFilter,
});
export const LayoutGridFilterSuspend = () => ({
type: LAYOUT_GRID_FILTER_SUSPEND,
});
export const LayoutGridFilterUnSuspend = () => ({
type: LAYOUT_GRID_FILTER_UNSUSPEND,
});
export const LayoutGridFilterClear = () => ({
type: LAYOUT_GRID_FILTER_CLEAR,
});
export const LayoutAdd = (layout) => ({
type: LAYOUT_ADD,
layout: normalizeLayout(layout),
});
export const LayoutDelete = (layout) => ({
type: LAYOUT_DELETE,
layout,
});
export const LayoutSave = (layout) => ({
type: LAYOUT_SAVE,
layout: normalizeLayout(layout),
});
export const LayoutSetColumnCaption = (layoutName, columnId, caption) => ({
type: LAYOUT_COLUMN_SET_CAPTION,
layoutName,
columnId,
caption,
});
export const LayoutAddColumn = (layoutName, columnId) => ({
type: LAYOUT_COLUMN_ADD,
layoutName,
columnId,
});
export const LayoutRemoveColumn = (layoutName, columnId) => ({
type: LAYOUT_COLUMN_REMOVE,
layoutName,
columnId,
});
export const LayoutSelect = (layoutName) => ({
type: LAYOUT_SELECT,
layoutName,
});
export const LayoutReady = (layoutState) => ({
type: LAYOUT_READY,
layoutState,
});
export const getColumnFiltersSelector = (state) => {
const currentLayout = getCurrentLayoutSelector(state);
return currentLayout?.ColumnFilters ?? [];
};
export const getCurrentLayoutSelector = (state) => {
return state.Layout.Layouts?.find((layout) => layout.Name === state.Layout.CurrentLayout);
};
export const getColumnFilterSelector = (state, columnId) => {
return { ...getColumnFiltersSelector(state).find((cf) => cf.ColumnId === columnId) };
};
const initialState = {
CurrentLayout: EMPTY_STRING,
Layouts: undefined,
};
export const LayoutReducer = (state = initialState, action) => {
let layouts;
const currentLayout = state.Layouts?.find((layout) => layout.Name === state.CurrentLayout);
switch (action.type) {
case LAYOUT_SELECT: {
const newCurrentLayout = action.layoutName;
if ((state.Layouts || []).find((l) => l.Name === newCurrentLayout)) {
return Object.assign({}, state, { CurrentLayout: newCurrentLayout });
}
return state;
}
case LAYOUT_ADD: {
const actionLayout = action.layout;
AdaptableHelper.addAdaptableObjectPrimitives(actionLayout);
layouts = [].concat(state.Layouts || []);
layouts.push(actionLayout);
return { ...state, Layouts: layouts };
}
case LAYOUT_SAVE: {
const actionLayout = action.layout;
return {
...state,
Layouts: state.Layouts.map((abObject) => abObject.Uuid === actionLayout.Uuid ? actionLayout : abObject),
};
}
case LAYOUT_DELETE: {
const actionLayout = action.layout;
const newLayouts = state.Layouts.filter((abObject) => abObject.Uuid !== actionLayout.Uuid);
return {
...state,
CurrentLayout: state.CurrentLayout === actionLayout.Name ? newLayouts[0].Name : state.CurrentLayout,
Layouts: newLayouts,
};
}
case LAYOUT_COLUMN_SET_CAPTION: {
const setColumnCaptionAction = action;
const currentLayoutName = setColumnCaptionAction.layoutName;
let currentLayout = state.Layouts.find((l) => l.Name === currentLayoutName);
if (currentLayout) {
if (!currentLayout.ColumnHeaders) {
currentLayout.ColumnHeaders = {};
}
currentLayout.ColumnHeaders[setColumnCaptionAction.columnId] =
setColumnCaptionAction.caption;
return Object.assign({}, state, {
Layouts: state.Layouts.map((abObject) => abObject.Uuid === currentLayout.Uuid ? currentLayout : abObject),
});
}
return state;
}
case LAYOUT_COLUMN_ADD: {
const addColumnAction = action;
const layoutname = addColumnAction.layoutName;
const colToAdd = addColumnAction.columnId;
let layoutToUpdate = state.Layouts.find((l) => l.Name === layoutname);
if (layoutToUpdate) {
layoutToUpdate.TableColumns.push(colToAdd);
return {
...state,
Layouts: state.Layouts.map((abObject) => abObject.Uuid === layoutToUpdate.Uuid ? layoutToUpdate : abObject),
};
}
return state;
}
case LAYOUT_COLUMN_REMOVE: {
const removeColumnAction = action;
const layoutname = removeColumnAction.layoutName;
const colToRemove = removeColumnAction.columnId;
let layoutToUpdate = state.Layouts.find((l) => l.Name === layoutname);
if (layoutToUpdate) {
layoutToUpdate.TableColumns = layoutToUpdate.TableColumns.filter((col) => {
return col !== colToRemove;
});
return {
...state,
Layouts: state.Layouts.map((abObject) => abObject.Uuid === layoutToUpdate.Uuid ? layoutToUpdate : abObject),
};
}
return state;
}
case LAYOUT_COLUMN_FILTER_SET: {
let columnFilters = currentLayout.ColumnFilters ?? [];
const columnFilterAction = action.columnFilter;
AdaptableHelper.addAdaptableObjectPrimitives(columnFilterAction);
columnFilters = columnFilters
.filter((colFilter) => {
return colFilter.ColumnId !== columnFilterAction.ColumnId;
})
.concat(columnFilterAction)
.map((cf) => ({ ...cf }));
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
ColumnFilters: columnFilters,
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_COLUMN_FILTER_ADD: {
const columnFilterAction = action.columnFilter;
let columnFilters = (currentLayout.ColumnFilters ?? []).filter(
// make sure we are not adding a filter that already exists
(cf) => cf.ColumnId !== columnFilterAction.ColumnId);
AdaptableHelper.addAdaptableObjectPrimitives(columnFilterAction);
columnFilters.push(columnFilterAction);
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
ColumnFilters: columnFilters,
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_COLUMN_FILTER_EDIT: {
const columnFilterAction = action.columnFilter;
// it is safer to change the col id, we cannot have multiple filter on the same id
// first we filter out other filters with the same colId, to ensure we have only one
const cleanColumnFilters = (currentLayout.ColumnFilters ?? []).filter((cf) => cf.ColumnId !== columnFilterAction.ColumnId);
cleanColumnFilters.push(columnFilterAction);
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
ColumnFilters: cleanColumnFilters,
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_COLUMN_FILTER_CLEAR_ALL: {
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
ColumnFilters: [],
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_COLUMN_FILTER_CLEAR: {
const actionTypedDelete = action;
const columnFilters = (currentLayout.ColumnFilters ?? []).filter((cf) => {
// make sure we are deleting all filters on the same column
return cf.ColumnId !== actionTypedDelete.columnId;
});
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
ColumnFilters: columnFilters,
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_COLUMN_FILTER_SUSPEND: {
const actionTypedSuspend = action;
const columnFilters = (currentLayout.ColumnFilters ?? []).map((abObject) => abObject.Uuid === actionTypedSuspend.columnFilter.Uuid
? { ...abObject, IsSuspended: true }
: abObject);
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
ColumnFilters: columnFilters,
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_COLUMN_FILTER_UNSUSPEND: {
const actionTypedSuspend = action;
const columnFilters = (currentLayout.ColumnFilters ?? []).map((abObject) => abObject.Uuid === actionTypedSuspend.columnFilter.Uuid
? { ...abObject, IsSuspended: false }
: abObject);
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
ColumnFilters: columnFilters,
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_COLUMN_FILTER_SUSPEND_ALL: {
const columnFilters = (currentLayout.ColumnFilters ?? []).map((abObject) => ({
...abObject,
IsSuspended: true,
}));
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
ColumnFilters: columnFilters,
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_COLUMN_FILTER_UNSUSPEND_ALL: {
const columnFilters = (currentLayout.ColumnFilters ?? []).map((abObject) => ({
...abObject,
IsSuspended: false,
}));
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
ColumnFilters: columnFilters,
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_GRID_FILTER_SET: {
const actionTyped = action;
return {
...state,
Layouts: state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
GridFilter: {
...layout.GridFilter,
Expression: actionTyped.gridFilter,
},
};
}
return layout;
}),
};
}
case LAYOUT_GRID_FILTER_SUSPEND: {
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
GridFilter: {
...layout.GridFilter,
IsSuspended: true,
},
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_GRID_FILTER_UNSUSPEND: {
const Layouts = state.Layouts.map((layout) => {
if (layout.Name === currentLayout.Name) {
return {
...layout,
GridFilter: {
...layout.GridFilter,
IsSuspended: false,
},
};
}
return layout;
});
return { ...state, Layouts };
}
case LAYOUT_GRID_FILTER_CLEAR: {
const Layouts = state.Layouts.map((layout) => {
let gridFilter = currentLayout.GridFilter;
if (gridFilter) {
gridFilter.IsSuspended = false;
gridFilter.Expression = '';
}
if (layout.Name === currentLayout.Name) {
return {
...layout,
gridFilter,
};
}
return layout;
});
return { ...state, Layouts };
}
default:
return state;
}
};