Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat : create new spreadsheet #2340

Merged
merged 9 commits into from
Oct 23, 2024
Merged

Feat : create new spreadsheet #2340

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
6a48fe9
Remove cross-referencing in customColumns
ayolab Oct 21, 2024
440bcd2
Feat : create new spreadsheet
ayolab Oct 22, 2024
a865c57
update displayed, reordered, locked columns only in redux for new spr…
ayolab Oct 22, 2024
d984954
Requested changes
ayolab Oct 22, 2024
235708a
Merge branch 'main' into ayolab/feat-create-new-spreadsheet
ayolab Oct 22, 2024
b90485e
fix sonar issue
ayolab Oct 22, 2024
94aadbd
Requested changes
ayolab Oct 22, 2024
fcc22e9
Fix sorting and filtring for new spreadsheets
ayolab Oct 23, 2024
f2c9b2e
Merge branch 'main' into ayolab/feat-create-new-spreadsheet
ayolab Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 41 additions & 42 deletions src/components/app.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,6 @@ import {
DISPLAYED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE,
LOCKED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE,
REORDERED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE,
TABLES_DEFINITION_INDEXES,
TABLES_NAMES_INDEXES,
} from './spreadsheet/utils/config-tables';
import { getComputedLanguage } from '../utils/language';
import AppTopBar from './app-top-bar';
Expand Down Expand Up @@ -103,6 +101,8 @@ const App = () => {
const { snackError } = useSnackMessage();

const user = useSelector((state) => state.user);
const tablesNamesIndexes = useSelector((state) => state.tables.namesIndexes);
const tablesDefinitionIndexes = useSelector((state) => state.tables.definitionIndexes);

const signInCallbackError = useSelector((state) => state.signInCallbackError);
const authenticationRouterError = useSelector((state) => state.authenticationRouterError);
Expand All @@ -121,11 +121,11 @@ const App = () => {
const updateParams = useCallback(
(params) => {
console.debug('received UI parameters : ', params);
let displayedColumnsParams = new Array(TABLES_NAMES_INDEXES.size);
let displayedColumnsParams = new Array(tablesNamesIndexes.size);
let dispatchDisplayedColumns = false;
let lockedColumnsParams = new Array(TABLES_NAMES_INDEXES.size);
let lockedColumnsParams = new Array(tablesNamesIndexes.size);
let dispatchLockedColumns = false;
let reorderedColumnsParams = new Array(TABLES_NAMES_INDEXES.size);
let reorderedColumnsParams = new Array(tablesNamesIndexes.size);
let dispatchReorderedColumns = false;

params.forEach((param) => {
Expand Down Expand Up @@ -190,7 +190,7 @@ const App = () => {
break;
default:
if (param.name.startsWith(DISPLAYED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE)) {
let index = TABLES_NAMES_INDEXES.get(
let index = tablesNamesIndexes.get(
param.name.slice(DISPLAYED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE.length)
);
displayedColumnsParams[index] = {
Expand All @@ -200,7 +200,7 @@ const App = () => {
dispatchDisplayedColumns = true;
}
if (param.name.startsWith(LOCKED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE)) {
let index = TABLES_NAMES_INDEXES.get(
let index = tablesNamesIndexes.get(
param.name.slice(LOCKED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE.length)
);
lockedColumnsParams[index] = {
Expand All @@ -210,7 +210,7 @@ const App = () => {
dispatchLockedColumns = true;
}
if (param.name.startsWith(REORDERED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE)) {
let index = TABLES_NAMES_INDEXES.get(
let index = tablesNamesIndexes.get(
param.name.slice(REORDERED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE.length)
);
reorderedColumnsParams[index] = {
Expand All @@ -237,44 +237,43 @@ const App = () => {
cleanEquipmentsColumnsParamsWithNewAndDeleted(reorderedColumnsParams, reorderedColumnsParams);
dispatch(changeReorderedColumns(reorderedColumnsParams));
}
},
[dispatch]
);

function cleanEquipmentsColumnsParamsWithNewAndDeleted(
equipmentsColumnsParams,
reorderedColumnsParams,
deletedOnly = false
) {
for (let param of equipmentsColumnsParams) {
if (!param) {
continue;
}

let index = param.index;

const equipmentAllColumnsIds = TABLES_DEFINITION_INDEXES.get(index).columns.map((item) => item.id);

let equipmentReorderedColumnsIds = JSON.parse(reorderedColumnsParams[index].value);
let equipmentNewColumnsIds = equipmentAllColumnsIds.filter(
(item) => !equipmentReorderedColumnsIds.includes(item)
);
function cleanEquipmentsColumnsParamsWithNewAndDeleted(
equipmentsColumnsParams,
reorderedColumnsParams,
deletedOnly = false
) {
for (const param of equipmentsColumnsParams) {
if (!param) {
continue;
}

const index = param.index;

const equipmentAllColumnsIds = tablesDefinitionIndexes.get(index).columns.map((item) => item.id);

const equipmentReorderedColumnsIds = JSON.parse(reorderedColumnsParams[index].value);
const equipmentNewColumnsIds = equipmentAllColumnsIds.filter(
(item) => !equipmentReorderedColumnsIds.includes(item)
);

let equipmentsParamColumnIds = JSON.parse(equipmentsColumnsParams[index].value);
const equipmentsParamColumnIds = JSON.parse(equipmentsColumnsParams[index].value);

// Remove deleted ids
let equipmentsNewParamColumnIds = equipmentsParamColumnIds.filter((item) =>
equipmentAllColumnsIds.includes(item)
);
// Remove deleted ids
const equipmentsNewParamColumnIds = equipmentsParamColumnIds.filter((item) =>
equipmentAllColumnsIds.includes(item)
);

// Update columns
if (deletedOnly) {
param.value = JSON.stringify([...equipmentsNewParamColumnIds]);
} else {
param.value = JSON.stringify([...equipmentsNewParamColumnIds, ...equipmentNewColumnsIds]);
// Update columns
if (deletedOnly) {
param.value = JSON.stringify([...equipmentsNewParamColumnIds]);
} else {
param.value = JSON.stringify([...equipmentsNewParamColumnIds, ...equipmentNewColumnsIds]);
}
}
}
}
}
},
[dispatch, tablesNamesIndexes, tablesDefinitionIndexes]
);

const connectNotificationsUpdateConfig = useCallback(() => {
const ws = connectNotificationsWsUpdateConfig();
Expand Down
109 changes: 68 additions & 41 deletions src/components/spreadsheet/columns-config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,13 @@ import { Checkbox, IconButton, ListItem, ListItemButton, ListItemIcon, ListItemT
import { Theme } from '@mui/material/styles';
import { FunctionComponent, useCallback, useState } from 'react';
import { FormattedMessage, useIntl } from 'react-intl';
import { useSelector } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';
import { SelectOptionsDialog } from 'utils/dialogs';
import {
DISPLAYED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE,
LOCKED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE,
MAX_LOCKS_PER_TAB,
REORDERED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE,
TABLES_COLUMNS_NAMES,
TABLES_NAMES,
} from './utils/config-tables';
import LockIcon from '@mui/icons-material/Lock';
Expand All @@ -27,6 +26,7 @@ import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautif
import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
import { updateConfigParameter } from '../../services/config';
import { AppState } from '../../redux/reducer';
import { changeDisplayedColumns, changeLockedColumns, changeReorderedColumns } from 'redux/actions';

const styles = {
checkboxSelectAll: (theme: Theme) => ({
Expand Down Expand Up @@ -70,11 +70,15 @@ export const ColumnsConfig: FunctionComponent<ColumnsConfigProps> = ({
}) => {
const [popupSelectColumnNames, setPopupSelectColumnNames] = useState<boolean>(false);

const allDisplayedColumnsNames = useSelector((state: AppState) => state.allDisplayedColumnsNames);
const allDisplayedColumnsNames = useSelector((state: AppState) => state.tables.columnsNamesJson);
const allLockedColumnsNames = useSelector((state: AppState) => state.allLockedColumnsNames);
const allReorderedTableDefinitionIndexes = useSelector(
(state: AppState) => state.allReorderedTableDefinitionIndexes
);
const tablesNames = useSelector((state: AppState) => state.tables.names);
const columnsNames = useSelector((state: AppState) => state.tables.columnsNames);

const dispatch = useDispatch();

const { snackError } = useSnackMessage();
const intl = useIntl();
Expand Down Expand Up @@ -107,55 +111,78 @@ export const ColumnsConfig: FunctionComponent<ColumnsConfigProps> = ({
]);

const handleSaveSelectedColumnNames = useCallback(() => {
updateConfigParameter(
DISPLAYED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE + TABLES_NAMES[tabIndex],
JSON.stringify([...selectedColumnsNames])
).catch((error) => {
const allDisplayedTemp = allDisplayedColumnsNames[tabIndex];
setSelectedColumnsNames(new Set(allDisplayedTemp ? JSON.parse(allDisplayedTemp) : []));
snackError({
messageTxt: error.message,
headerId: 'paramsChangingError',
});
});
let lockedColumnsToSave = [...lockedColumnsNames].filter((name) => selectedColumnsNames.has(name));
updateConfigParameter(
LOCKED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE + TABLES_NAMES[tabIndex],
JSON.stringify(lockedColumnsToSave)
).catch((error) => {
const allLockedTemp = allLockedColumnsNames[tabIndex];
setLockedColumnsNames(new Set(allLockedTemp ? JSON.parse(allLockedTemp) : []));
snackError({
messageTxt: error.message,
headerId: 'paramsChangingError',
});
});
setLockedColumnsNames(lockedColumnsNames);
const saveConfigParameter = async (
prefix: string,
value: any,
index: number,
setState: Function,
allState: any[],
dispatchAction: Function
) => {
// for newly added tabs, we should not save the state in the database because the tabs are only persisted in the redux store
// we should only save the state in the redux store
if (index < TABLES_NAMES.length) {
updateConfigParameter(prefix + tablesNames[index], JSON.stringify(value)).catch((error) => {
const allTemp = allState[index];
setState(new Set(allTemp ? JSON.parse(allTemp) : []));
snackError({
messageTxt: error.message,
headerId: 'paramsChangingError',
});
});
} else {
const columns = new Array(tablesNames.length);
columns[index] = {
index: index,
value: JSON.stringify(value),
};
dispatch(dispatchAction(columns));
}
};

updateConfigParameter(
REORDERED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE + TABLES_NAMES[tabIndex],
JSON.stringify(reorderedTableDefinitionIndexes)
).catch((error) => {
snackError({
messageTxt: error.message,
headerId: 'paramsChangingError',
});
});
const selectedColumnsArray = Array.from(selectedColumnsNames);
const lockedColumnsToSave = [...lockedColumnsNames].filter((name) => selectedColumnsNames.has(name));

saveConfigParameter(
DISPLAYED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE,
selectedColumnsArray,
tabIndex,
setSelectedColumnsNames,
allDisplayedColumnsNames,
changeDisplayedColumns
);
saveConfigParameter(
LOCKED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE,
lockedColumnsToSave,
tabIndex,
setLockedColumnsNames,
allLockedColumnsNames,
changeLockedColumns
);
saveConfigParameter(
REORDERED_COLUMNS_PARAMETER_PREFIX_IN_DATABASE,
reorderedTableDefinitionIndexes,
tabIndex,
() => {},
[],
changeReorderedColumns
);

handleCloseColumnsSettingDialog();
}, [
tabIndex,
selectedColumnsNames,
lockedColumnsNames,
tablesNames,
setLockedColumnsNames,
reorderedTableDefinitionIndexes,
handleCloseColumnsSettingDialog,
selectedColumnsNames,
allDisplayedColumnsNames,
setSelectedColumnsNames,
snackError,
dispatch,
allLockedColumnsNames,
]);

const handleToggle = (value: string) => () => {
const newChecked = new Set(selectedColumnsNames.values());
const newLocked = new Set(lockedColumnsNames.values());
Expand All @@ -172,9 +199,9 @@ export const ColumnsConfig: FunctionComponent<ColumnsConfigProps> = ({
};

const handleToggleAll = () => {
let isAllChecked = selectedColumnsNames.size === TABLES_COLUMNS_NAMES[tabIndex].size;
let isAllChecked = selectedColumnsNames.size === columnsNames[tabIndex].size;
// If all columns are selected/checked, then we hide all of them.
setSelectedColumnsNames(isAllChecked ? new Set() : TABLES_COLUMNS_NAMES[tabIndex]);
setSelectedColumnsNames(isAllChecked ? new Set() : columnsNames[tabIndex]);
if (isAllChecked) {
setLockedColumnsNames(new Set());
}
Expand Down Expand Up @@ -217,7 +244,7 @@ export const ColumnsConfig: FunctionComponent<ColumnsConfigProps> = ({
};

const checkListColumnsNames = () => {
let isAllChecked = selectedColumnsNames.size === TABLES_COLUMNS_NAMES[tabIndex].size;
let isAllChecked = selectedColumnsNames.size === columnsNames[tabIndex].size;
let isSomeChecked = selectedColumnsNames.size !== 0 && !isAllChecked;

return (
Expand Down
4 changes: 2 additions & 2 deletions src/components/spreadsheet/custom-columns/custom-columns-config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { FormattedMessage } from 'react-intl';
import { Badge, IconButton } from '@mui/material';
import { Calculate as CalculateIcon } from '@mui/icons-material';
import { useSelector } from 'react-redux';
import { TABLES_NAMES } from '../utils/config-tables';
import { AppState } from '../../../redux/reducer';
import { useStateBoolean } from '@gridsuite/commons-ui';
import CustomColumnDialog from './custom-columns-dialog';
Expand All @@ -20,8 +19,9 @@ export type CustomColumnsConfigProps = {

export default function CustomColumnsConfig({ indexTab }: Readonly<CustomColumnsConfigProps>) {
const dialogOpen = useStateBoolean(false);
const tablesNames = useSelector((state: AppState) => state.tables.names);
const customColumnsDefinitions = useSelector(
(state: AppState) => state.allCustomColumnsDefinitions[TABLES_NAMES[indexTab]].columns
(state: AppState) => state.tables.allCustomColumnsDefinitions[tablesNames[indexTab]].columns
);

return (
Expand Down
10 changes: 6 additions & 4 deletions src/components/spreadsheet/custom-columns/custom-columns-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@ import {
import { yupResolver } from '@hookform/resolvers/yup';
import CustomColumnTable from './custom-columns-table';
import { setCustomColumDefinitions } from 'redux/actions';
import { TABLES_NAMES } from '../utils/config-tables';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch } from 'redux/store';
import { ColumnWithFormula } from 'types/custom-columns.types';
import { AppState } from 'redux/reducer';

export type CustomColumnDialogProps = {
open: UseStateBooleanReturn;
Expand Down Expand Up @@ -56,14 +56,16 @@ export default function CustomColumnDialog({

const intl = useIntl();

const tablesNames = useSelector((state: AppState) => state.tables.names);

const onSubmit = useCallback(
(newParams: CustomColumnForm) => {
dispatch(setCustomColumDefinitions(TABLES_NAMES[indexTab], newParams[TAB_CUSTOM_COLUMN]));
dispatch(setCustomColumDefinitions(tablesNames[indexTab], newParams[TAB_CUSTOM_COLUMN]));
reset(initialCustomColumnForm);
open.setFalse();
},

[dispatch, indexTab, open, reset]
[dispatch, indexTab, open, reset, tablesNames]
);

useEffect(() => {
Expand Down
Loading
Loading