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

FIX: Set a visual cue when a name is wrong

Browse Source
This commit is contained in:
Nicolás Hatcher
2025-01-01 16:02:19 +01:00
committed by Nicolás Hatcher Andrés
parent d2ba34166b
commit 82b2d28663
2 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -83,20 +83,28 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
scope={scopeName} scope={scopeName}
formula={definedName.formula} formula={definedName.formula}
key={definedName.name + definedName.scope} key={definedName.name + definedName.scope}
onSave={(newName, newScope, newFormula) => { onSave={(
newName,
newScope,
newFormula
): string | undefined => {
const scope_index = worksheets.findIndex( const scope_index = worksheets.findIndex(
(s) => s.name === newScope, (s) => s.name === newScope
); );
const scope = scope_index > 0 ? scope_index : undefined; const scope = scope_index > 0 ? scope_index : undefined;
model.updateDefinedName( try {
definedName.name, model.updateDefinedName(
definedName.scope, definedName.name,
newName, definedName.scope,
scope, newName,
newFormula, scope,
); newFormula
setEditingNameIndex(-2); );
onNamesChanged(); setEditingNameIndex(-2);
onNamesChanged();
} catch (e) {
return `${e}`;
}
}} }}
onCancel={() => setEditingNameIndex(-2)} onCancel={() => setEditingNameIndex(-2)}
/> />
@@ -124,13 +132,17 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
worksheets={worksheets} worksheets={worksheets}
name={""} name={""}
formula={formatFormula()} formula={formatFormula()}
scope={t("name_manager_dialog.global")} scope={"[global]"}
onSave={(name, scope, formula) => { onSave={(name, scope, formula): string | undefined => {
const scope_index = worksheets.findIndex((s) => s.name === scope); const scope_index = worksheets.findIndex((s) => s.name === scope);
const scope_value = scope_index > 0 ? scope_index : undefined; const scope_value = scope_index > 0 ? scope_index : undefined;
model.newDefinedName(name, scope_value, formula); try {
setEditingNameIndex(-2); model.newDefinedName(name, scope_value, formula);
onNamesChanged(); setEditingNameIndex(-2);
onNamesChanged();
} catch (e) {
return `${e}`;
}
}} }}
onCancel={() => setEditingNameIndex(-2)} onCancel={() => setEditingNameIndex(-2)}
/> />

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

@@ -17,7 +17,7 @@ interface NamedRangeProperties {
name: string; name: string;
scope: string; scope: string;
formula: string; formula: string;
onSave: (name: string, scope: string, formula: string) => void; onSave: (name: string, scope: string, formula: string) => string | undefined;
onCancel: () => void; onCancel: () => void;
} }
@@ -27,8 +27,6 @@ function NamedRangeActive(properties: NamedRangeProperties) {
const [scope, setScope] = useState(properties.scope); const [scope, setScope] = useState(properties.scope);
const [formula, setFormula] = useState(properties.formula); const [formula, setFormula] = useState(properties.formula);
// TODO: add error messages for validations
const [nameError, setNameError] = useState(false);
const [formulaError, setFormulaError] = useState(false); const [formulaError, setFormulaError] = useState(false);
return ( return (
@@ -40,7 +38,7 @@ function NamedRangeActive(properties: NamedRangeProperties) {
size="small" size="small"
margin="none" margin="none"
fullWidth fullWidth
error={nameError} error={formulaError}
value={name} value={name}
onChange={(event) => setName(event.target.value)} onChange={(event) => setName(event.target.value)}
onKeyDown={(event) => { onKeyDown={(event) => {
@@ -55,6 +53,7 @@ function NamedRangeActive(properties: NamedRangeProperties) {
size="small" size="small"
margin="none" margin="none"
fullWidth fullWidth
error={formulaError}
value={scope} value={scope}
onChange={(event) => { onChange={(event) => {
setScope(event.target.value); setScope(event.target.value);
@@ -88,7 +87,10 @@ function NamedRangeActive(properties: NamedRangeProperties) {
<IconsWrapper> <IconsWrapper>
<IconButton <IconButton
onClick={() => { onClick={() => {
onSave(name, scope, formula); const error = onSave(name, scope, formula);
if (error) {
setFormulaError(true);
}
}} }}
> >
<StyledCheck size={12} /> <StyledCheck size={12} />