sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: Refactor model out of the dialogs

Browse Source
This commit is contained in:
Nicolás Hatcher
2025-01-01 13:55:42 +01:00
committed by Nicolás Hatcher Andrés
parent 99d42cb1e2
commit d2ba34166b
3 changed files with 80 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
webapp/src/components/NameManagerDialog/NameManagerDialog.tsx
View File

@@ -48,19 +48,6 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
} }
}, [editingNameIndex]); }, [editingNameIndex]);
const handleNewName = () => {
setEditingNameIndex(-1);
};
const handleSave = () => {
setEditingNameIndex(-2);
onNamesChanged();
};
const handleDelete = () => {
onNamesChanged();
};
const formatFormula = (): string => { const formatFormula = (): string => {
const worksheetNames = model.getWorksheetsProperties().map((s) => s.name); const worksheetNames = model.getWorksheetsProperties().map((s) => s.name);
const selectedView = model.getSelectedView(); const selectedView = model.getSelectedView();
@@ -84,31 +71,49 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
</StyledRangesHeader> </StyledRangesHeader>
<NameListWrapper> <NameListWrapper>
{definedNameList.map((definedName, index) => { {definedNameList.map((definedName, index) => {
const scopeName = definedName.scope
? worksheets[definedName.scope].name
: "[global]";
if (index === editingNameIndex) { if (index === editingNameIndex) {
return ( return (
<NamedRangeActive <NamedRangeActive
model={model} model={model}
worksheets={worksheets} worksheets={worksheets}
name={definedName.name} name={definedName.name}
scope={definedName.scope} scope={scopeName}
formula={definedName.formula} formula={definedName.formula}
key={definedName.name + definedName.scope} key={definedName.name + definedName.scope}
onSave={handleSave} onSave={(newName, newScope, newFormula) => {
const scope_index = worksheets.findIndex(
(s) => s.name === newScope,
);
const scope = scope_index > 0 ? scope_index : undefined;
model.updateDefinedName(
definedName.name,
definedName.scope,
newName,
scope,
newFormula,
);
setEditingNameIndex(-2);
onNamesChanged();
}}
onCancel={() => setEditingNameIndex(-2)} onCancel={() => setEditingNameIndex(-2)}
/> />
); );
} }
return ( return (
<NamedRangeInactive <NamedRangeInactive
model={model}
worksheets={worksheets}
name={definedName.name} name={definedName.name}
scope={definedName.scope} scope={scopeName}
formula={definedName.formula} formula={definedName.formula}
key={definedName.name + definedName.scope} key={definedName.name + definedName.scope}
showOptions={showOptions} showOptions={showOptions}
onEdit={() => setEditingNameIndex(index)} onEdit={() => setEditingNameIndex(index)}
onDelete={handleDelete} onDelete={() => {
model.deleteDefinedName(definedName.name, definedName.scope);
onNamesChanged();
}}
/> />
); );
})} })}
@@ -119,7 +124,14 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
worksheets={worksheets} worksheets={worksheets}
name={""} name={""}
formula={formatFormula()} formula={formatFormula()}
onSave={handleSave} scope={t("name_manager_dialog.global")}
onSave={(name, scope, formula) => {
const scope_index = worksheets.findIndex((s) => s.name === scope);
const scope_value = scope_index > 0 ? scope_index : undefined;
model.newDefinedName(name, scope_value, formula);
setEditingNameIndex(-2);
onNamesChanged();
}}
onCancel={() => setEditingNameIndex(-2)} onCancel={() => setEditingNameIndex(-2)}
/> />
)} )}
@@ -132,7 +144,7 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
</span> </span>
</Box> </Box>
<Button <Button
onClick={handleNewName} onClick={() => setEditingNameIndex(-1)}
variant="contained" variant="contained"
disableElevation disableElevation
sx={{ textTransform: "none" }} sx={{ textTransform: "none" }}
@@ -155,13 +167,13 @@ const StyledDialog = styled(Dialog)(() => ({
})); }));
const StyledDialogTitle = styled(DialogTitle)` const StyledDialogTitle = styled(DialogTitle)`
padding: 12px 20px; padding: 12px 20px;
height: 20px; height: 20px;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
`; `;
const NameListWrapper = styled(Stack)` const NameListWrapper = styled(Stack)`
@@ -170,14 +182,14 @@ const NameListWrapper = styled(Stack)`
`; `;
const StyledBox = styled(Box)` const StyledBox = styled(Box)`
width: 161.67px; width: 161.67px;
`; `;
const StyledDialogContent = styled(DialogContent)` const StyledDialogContent = styled(DialogContent)`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
padding: 20px 12px 20px 20px; padding: 20px 12px 20px 20px;
`; `;
const StyledRangesHeader = styled(Stack)(({ theme }) => ({ const StyledRangesHeader = styled(Stack)(({ theme }) => ({
@@ -191,13 +203,13 @@ const StyledRangesHeader = styled(Stack)(({ theme }) => ({
})); }));
const StyledDialogActions = styled(DialogActions)` const StyledDialogActions = styled(DialogActions)`
padding: 12px 20px; padding: 12px 20px;
height: 40px; height: 40px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: 12px; font-size: 12px;
color: #757575; color: #757575;
`; `;
export default NameManagerDialog; export default NameManagerDialog;

60
webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
View File

@@ -15,44 +15,22 @@ interface NamedRangeProperties {
model: Model; model: Model;
worksheets: WorksheetProperties[]; worksheets: WorksheetProperties[];
name: string; name: string;
scope?: number; scope: string;
formula: string; formula: string;
onSave: () => void; onSave: (name: string, scope: string, formula: string) => void;
onDelete: () => void;
onCancel: () => void; onCancel: () => void;
} }
function NamedRangeActive(properties: NamedRangeProperties) { function NamedRangeActive(properties: NamedRangeProperties) {
const { model, worksheets, name, scope, formula, onSave, onCancel } = const { worksheets, onSave, onCancel } = properties;
properties; const [name, setName] = useState(properties.name);
const [newName, setNewName] = useState(name); const [scope, setScope] = useState(properties.scope);
const [newScope, setNewScope] = useState(scope); const [formula, setFormula] = useState(properties.formula);
const [newFormula, setNewFormula] = useState(formula);
// TODO: add error messages for validations // TODO: add error messages for validations
const [nameError, setNameError] = useState(false); const [nameError, setNameError] = useState(false);
const [formulaError, setFormulaError] = useState(false); const [formulaError, setFormulaError] = useState(false);
// TODO: move logic to NameManagerDialog
const handleSaveUpdate = () => {
const definedNamesModel = model.getDefinedNameList();
if (definedNamesModel.find((n) => n.name === name && n.scope === scope)) {
try {
model.updateDefinedName(name, scope, newName, newScope, newFormula);
} catch (error) {
console.log("DefinedName update failed", error);
}
} else {
try {
model.newDefinedName(newName, newScope, newFormula);
} catch (error) {
console.log("DefinedName save failed", error);
}
}
onSave();
};
return ( return (
<> <>
<StyledBox> <StyledBox>
@@ -63,8 +41,8 @@ function NamedRangeActive(properties: NamedRangeProperties) {
margin="none" margin="none"
fullWidth fullWidth
error={nameError} error={nameError}
value={newName} value={name}
onChange={(event) => setNewName(event.target.value)} onChange={(event) => setName(event.target.value)}
onKeyDown={(event) => { onKeyDown={(event) => {
event.stopPropagation(); event.stopPropagation();
}} }}
@@ -77,20 +55,18 @@ function NamedRangeActive(properties: NamedRangeProperties) {
size="small" size="small"
margin="none" margin="none"
fullWidth fullWidth
value={newScope ?? "global"} value={scope}
onChange={(event) => { onChange={(event) => {
event.target.value === "global" setScope(event.target.value);
? setNewScope(undefined)
: setNewScope(+event.target.value);
}} }}
> >
<MenuItem value={"global"}> <MenuItem value={"[global]"}>
{`${t("name_manager_dialog.workbook")} ${t( {`${t("name_manager_dialog.workbook")} ${t(
"name_manager_dialog.global", "name_manager_dialog.global",
)}`} )}`}
</MenuItem> </MenuItem>
{worksheets.map((option, index) => ( {worksheets.map((option) => (
<MenuItem key={option.name} value={index}> <MenuItem key={option.name} value={option.name}>
{option.name} {option.name}
</MenuItem> </MenuItem>
))} ))}
@@ -102,15 +78,19 @@ function NamedRangeActive(properties: NamedRangeProperties) {
margin="none" margin="none"
fullWidth fullWidth
error={formulaError} error={formulaError}
value={newFormula} value={formula}
onChange={(event) => setNewFormula(event.target.value)} onChange={(event) => setFormula(event.target.value)}
onKeyDown={(event) => { onKeyDown={(event) => {
event.stopPropagation(); event.stopPropagation();
}} }}
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
/> />
<IconsWrapper> <IconsWrapper>
<IconButton onClick={handleSaveUpdate}> <IconButton
onClick={() => {
onSave(name, scope, formula);
}}
>
<StyledCheck size={12} /> <StyledCheck size={12} />
</IconButton> </IconButton>
<StyledIconButton onClick={onCancel}> <StyledIconButton onClick={onCancel}>

36
webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx
View File

@@ -1,13 +1,10 @@
import type { Model, WorksheetProperties } from "@ironcalc/wasm";
import { Box, Divider, IconButton, styled } from "@mui/material"; import { Box, Divider, IconButton, styled } from "@mui/material";
import { t } from "i18next"; import { t } from "i18next";
import { PencilLine, Trash2 } from "lucide-react"; import { PencilLine, Trash2 } from "lucide-react";
interface NamedRangeInactiveProperties { interface NamedRangeInactiveProperties {
model: Model;
worksheets: WorksheetProperties[];
name: string; name: string;
scope?: number; scope: string;
formula: string; formula: string;
onDelete: () => void; onDelete: () => void;
onEdit: () => void; onEdit: () => void;
@@ -15,31 +12,14 @@ interface NamedRangeInactiveProperties {
} }
function NamedRangeInactive(properties: NamedRangeInactiveProperties) { function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
const { const { name, scope, formula, onDelete, onEdit, showOptions } = properties;
model,
worksheets,
name,
scope,
formula,
onDelete,
onEdit,
showOptions,
} = properties;
// TODO: move logic to NameManagerDialog
const handleDelete = () => {
try {
model.deleteDefinedName(name, scope);
} catch (error) {
console.log("DefinedName delete failed", error);
}
onDelete();
};
// TODO: pass the name, avoid logic
const scopeName = const scopeName =
worksheets.find((sheet, index) => index === scope)?.name || scope === "[global]"
`${t("name_manager_dialog.workbook")} ${t("name_manager_dialog.global")}`; ? `${t("name_manager_dialog.workbook")} ${t(
"name_manager_dialog.global",
)}`
: scope;
return ( return (
<> <>
@@ -51,7 +31,7 @@ function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
<StyledIconButtonBlack onClick={onEdit} disabled={!showOptions}> <StyledIconButtonBlack onClick={onEdit} disabled={!showOptions}>
<PencilLine size={12} /> <PencilLine size={12} />
</StyledIconButtonBlack> </StyledIconButtonBlack>
<StyledIconButtonRed onClick={handleDelete} disabled={!showOptions}> <StyledIconButtonRed onClick={onDelete} disabled={!showOptions}>
<Trash2 size={12} /> <Trash2 size={12} />
</StyledIconButtonRed> </StyledIconButtonRed>
</IconsWrapper> </IconsWrapper>