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

UPDATE: Add an empty state message to the Name Manager

Browse Source
This commit is contained in:
Daniel
2025-01-21 02:58:38 +01:00
committed by Nicolás Hatcher Andrés
parent 282ed16f0d
commit 38325b0bb9
2 changed files with 100 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
webapp/IronCalc/src/components/NameManagerDialog/NameManagerDialog.tsx
View File

@@ -10,7 +10,7 @@ import {
styled, styled,
} from "@mui/material"; } from "@mui/material";
import { t } from "i18next"; import { t } from "i18next";
import { BookOpen, Plus, X } from "lucide-react"; import { BookOpen, PackageOpen, Plus, X } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { theme } from "../../theme"; import { theme } from "../../theme";
import NamedRangeActive from "./NamedRangeActive"; import NamedRangeActive from "./NamedRangeActive";
@@ -79,65 +79,78 @@ function NameManagerDialog(properties: NameManagerDialogProperties) {
</Cross> </Cross>
</StyledDialogTitle> </StyledDialogTitle>
<StyledDialogContent> <StyledDialogContent>
<StyledRangesHeader> {(definedNameList.length > 0 || editingNameIndex !== -2) && (
<StyledBox>{t("name_manager_dialog.name")}</StyledBox> <StyledRangesHeader>
<StyledBox>{t("name_manager_dialog.range")}</StyledBox> <StyledBox>{t("name_manager_dialog.name")}</StyledBox>
<StyledBox>{t("name_manager_dialog.scope")}</StyledBox> <StyledBox>{t("name_manager_dialog.range")}</StyledBox>
</StyledRangesHeader> <StyledBox>{t("name_manager_dialog.scope")}</StyledBox>
<NameListWrapper> </StyledRangesHeader>
{definedNameList.map((definedName, index) => { )}
const scopeName = definedName.scope {definedNameList.length === 0 && editingNameIndex === -2 ? (
? worksheets[definedName.scope].name <EmptyStateMessage>
: "[global]"; <IconWrapper>
if (index === editingNameIndex) { <PackageOpen />
</IconWrapper>
{t("name_manager_dialog.empty_message1")}
<br />
{t("name_manager_dialog.empty_message2")}
</EmptyStateMessage>
) : (
<NameListWrapper>
{definedNameList.map((definedName, index) => {
const scopeName = definedName.scope
? worksheets[definedName.scope].name
: "[global]";
if (index === editingNameIndex) {
return (
<NamedRangeActive
worksheets={worksheets}
name={definedName.name}
scope={scopeName}
formula={definedName.formula}
key={definedName.name + definedName.scope}
onSave={(
newName,
newScope,
newFormula,
): string | undefined => {
const scope_index = worksheets.findIndex(
(s) => s.name === newScope,
);
const scope = scope_index > 0 ? scope_index : undefined;
try {
updateDefinedName(
definedName.name,
definedName.scope,
newName,
scope,
newFormula,
);
setEditingNameIndex(-2);
} catch (e) {
return `${e}`;
}
}}
onCancel={() => setEditingNameIndex(-2)}
/>
);
}
return ( return (
<NamedRangeActive <NamedRangeInactive
worksheets={worksheets}
name={definedName.name} name={definedName.name}
scope={scopeName} scope={scopeName}
formula={definedName.formula} formula={definedName.formula}
key={definedName.name + definedName.scope} key={definedName.name + definedName.scope}
onSave={( showOptions={editingNameIndex === -2}
newName, onEdit={() => setEditingNameIndex(index)}
newScope, onDelete={() => {
newFormula, deleteDefinedName(definedName.name, definedName.scope);
): string | undefined => {
const scope_index = worksheets.findIndex(
(s) => s.name === newScope,
);
const scope = scope_index > 0 ? scope_index : undefined;
try {
updateDefinedName(
definedName.name,
definedName.scope,
newName,
scope,
newFormula,
);
setEditingNameIndex(-2);
} catch (e) {
return `${e}`;
}
}} }}
onCancel={() => setEditingNameIndex(-2)}
/> />
); );
} })}
return ( </NameListWrapper>
<NamedRangeInactive )}
name={definedName.name}
scope={scopeName}
formula={definedName.formula}
key={definedName.name + definedName.scope}
showOptions={editingNameIndex === -2}
onEdit={() => setEditingNameIndex(index)}
onDelete={() => {
deleteDefinedName(definedName.name, definedName.scope);
}}
/>
);
})}
</NameListWrapper>
{editingNameIndex === -1 && ( {editingNameIndex === -1 && (
<NamedRangeActive <NamedRangeActive
worksheets={worksheets} worksheets={worksheets}
@@ -230,6 +243,39 @@ const NameListWrapper = styled(Stack)`
overflow-y: auto; overflow-y: auto;
`; `;
const EmptyStateMessage = styled(Box)`
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
font-size: 12px;
color: ${theme.palette.grey["600"]};
font-family: "Inter";
z-index: 0;
margin: auto 0px;
position: relative;
`;
const IconWrapper = styled("div")`
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 4px;
background-color: ${theme.palette.grey["100"]};
color: ${theme.palette.grey["600"]};
svg {
width: 16px;
height: 16px;
stroke-width: 2;
}
`;
const StyledBox = styled(Box)` const StyledBox = styled(Box)`
display: flex; display: flex;
flex-direction: column; flex-direction: column;

2
webapp/IronCalc/src/locale/en_us.json
View File

@@ -85,6 +85,8 @@
}, },
"name_manager_dialog": { "name_manager_dialog": {
"title": "Named Ranges", "title": "Named Ranges",
"empty_message1": "No named ranges added yet.",
"empty_message2": "Click on 'Add new' to add one.",
"name": "Name", "name": "Name",
"range": "Scope", "range": "Scope",
"scope": "Range", "scope": "Range",