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

FIX: Refactor both dialogs to get common code

Browse Source
This commit is contained in:
Nicolás Hatcher
2025-10-12 14:07:53 +02:00
committed by Nicolás Hatcher Andrés
parent dd29287c5a
commit ed64716f0f
4 changed files with 162 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
webapp/app.ironcalc.com/frontend/src/App.tsx
View File

@@ -161,15 +161,13 @@ function App() {
>
<TemplatesDialog
onClose={() => setTemplatesDialogOpen(false)}
onSelectTemplate={
async (fileName) => {
const model_bytes = await get_documentation_model(fileName);
const importedModel = Model.from_bytes(model_bytes);
saveModelToStorage(importedModel);
setModel(importedModel);
setTemplatesDialogOpen(false);
}
}
onSelectTemplate={async (fileName) => {
const model_bytes = await get_documentation_model(fileName);
const importedModel = Model.from_bytes(model_bytes);
saveModelToStorage(importedModel);
setModel(importedModel);
setTemplatesDialogOpen(false);
}}
/>
</Modal>
</Wrapper>

130
webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/TemplatesDialog.tsx
View File

@@ -1,7 +1,12 @@
import { Dialog, styled } from "@mui/material";
import { House, TicketsPlane, X } from "lucide-react";
import { X } from "lucide-react";
import { useState } from "react";
import TemplatesListItem from "./TemplatesListItem";
import TemplatesList, {
Cross,
DialogContent,
DialogFooter,
DialogFooterButton,
} from "./TemplatesList";
function TemplatesDialog(properties: {
onClose: () => void;
@@ -19,7 +24,7 @@ function TemplatesDialog(properties: {
return (
<DialogWrapper open={true} onClose={() => {}}>
<DialogHeader>
<DialogTemplateHeader>
<span style={{ flexGrow: 2, marginLeft: 12 }}>Choose a template</span>
<Cross
style={{ marginRight: 12 }}
@@ -30,26 +35,12 @@ function TemplatesDialog(properties: {
>
<X />
</Cross>
</DialogHeader>
</DialogTemplateHeader>
<DialogContent>
<TemplatesListWrapper>
<TemplatesListItem
title="Mortgage calculator"
description="Estimate payments, interest, and overall cost."
icon={<House />}
iconColor="#2F80ED"
active={selectedTemplate === "mortgage_calculator"}
onClick={() => handleTemplateSelect("mortgage_calculator")}
/>
<TemplatesListItem
title="Travel expenses tracker"
description="Track trip costs and stay on budget."
icon={<TicketsPlane />}
iconColor="#EB5757"
active={selectedTemplate === "travel_expenses_tracker"}
onClick={() => handleTemplateSelect("travel_expenses_tracker")}
/>
</TemplatesListWrapper>
<TemplatesList
selectedTemplate={selectedTemplate}
handleTemplateSelect={handleTemplateSelect}
/>
</DialogContent>
<DialogFooter>
<DialogFooterButton
@@ -62,84 +53,27 @@ function TemplatesDialog(properties: {
);
}
const DialogWrapper = styled(Dialog)`
font-family: Inter;
.MuiDialog-paper {
width: 440px;
border-radius: 12px;
margin: 16px;
border: 1px solid #e0e0e0;
}
.MuiBackdrop-root {
background-color: rgba(0, 0, 0, 0.4);
}
export const DialogWrapper = styled(Dialog)`
font-family: Inter;
.MuiDialog-paper {
width: 440px;
border-radius: 12px;
margin: 16px;
border: 1px solid #e0e0e0;
}
.MuiBackdrop-root {
background-color: rgba(0, 0, 0, 0.4);
}
`;
const DialogHeader = styled("div")`
display: flex;
align-items: center;
border-bottom: 1px solid #e0e0e0;
height: 44px;
font-size: 14px;
font-weight: 500;
font-family: Inter;
`;
const Cross = styled("div")`
&:hover {
background-color: #f5f5f5;
}
display: flex;
border-radius: 4px;
min-height: 24px;
min-width: 24px;
cursor: pointer;
align-items: center;
justify-content: center;
svg {
width: 16px;
height: 16px;
stroke-width: 1.5;
}
`;
const DialogContent = styled("div")`
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
`;
const TemplatesListWrapper = styled("div")`
display: flex;
flex-direction: column;
gap: 10px;
`;
const DialogFooter = styled("div")`
border-top: 1px solid #e0e0e0;
padding: 16px;
`;
const DialogFooterButton = styled("button")`
background-color: #F2994A;
border: none;
color: #FFF;
padding: 12px;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 12px;
font-family: Inter;
&:hover {
background-color: #D68742;
}
&:active {
background-color: #D68742;
}
const DialogTemplateHeader = styled("div")`
display: flex;
align-items: center;
border-bottom: 1px solid #e0e0e0;
height: 44px;
font-size: 14px;
font-weight: 500;
font-family: Inter;
`;
export default TemplatesDialog;

103
webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/TemplatesList.tsx Normal file
View File

@@ -0,0 +1,103 @@
import { Dialog, styled } from "@mui/material";
import { House, TicketsPlane } from "lucide-react";
import TemplatesListItem from "./TemplatesListItem";
function TemplatesList(props: {
selectedTemplate: string;
handleTemplateSelect: (templateId: string) => void;
}) {
const { selectedTemplate, handleTemplateSelect } = props;
return (
<TemplatesListWrapper>
<TemplatesListItem
title="Mortgage calculator"
description="Estimate payments, interest, and overall cost."
icon={<House />}
iconColor="#2F80ED"
active={selectedTemplate === "mortgage_calculator"}
onClick={() => handleTemplateSelect("mortgage_calculator")}
/>
<TemplatesListItem
title="Travel expenses tracker"
description="Track trip costs and stay on budget."
icon={<TicketsPlane />}
iconColor="#EB5757"
active={selectedTemplate === "travel_expenses_tracker"}
onClick={() => handleTemplateSelect("travel_expenses_tracker")}
/>
</TemplatesListWrapper>
);
}
export const DialogWrapper = styled(Dialog)`
font-family: Inter;
.MuiDialog-paper {
width: 440px;
border-radius: 12px;
margin: 16px;
border: 1px solid #e0e0e0;
}
.MuiBackdrop-root {
background-color: rgba(0, 0, 0, 0.4);
}
`;
export const Cross = styled("div")`
&:hover {
background-color: #f5f5f5;
}
display: flex;
border-radius: 4px;
min-height: 24px;
min-width: 24px;
cursor: pointer;
align-items: center;
justify-content: center;
svg {
width: 16px;
height: 16px;
stroke-width: 1.5;
}
`;
export const DialogContent = styled("div")`
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
`;
export const TemplatesListWrapper = styled("div")`
display: flex;
flex-direction: column;
gap: 10px;
`;
export const DialogFooter = styled("div")`
border-top: 1px solid #e0e0e0;
padding: 16px;
`;
export const DialogFooterButton = styled("button")`
background-color: #f2994a;
border: none;
color: #fff;
padding: 12px;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 12px;
font-family: Inter;
&:hover {
background-color: #d68742;
}
&:active {
background-color: #d68742;
}
`;
// export default TemplatesDialog;
export default TemplatesList;

113
webapp/app.ironcalc.com/frontend/src/components/WelcomeDialog/WelcomeDialog.tsx
View File

@@ -1,9 +1,18 @@
import { IronCalcIconWhite as IronCalcIcon } from "@ironcalc/workbook";
import { Dialog, styled } from "@mui/material";
import { House, Table, TicketsPlane, X } from "lucide-react";
import { styled } from "@mui/material";
import { Table, X } from "lucide-react";
import { useState } from "react";
import TemplatesListItem from "./TemplatesListItem";
import TemplatesList, {
Cross,
DialogContent,
DialogFooter,
DialogFooterButton,
DialogWrapper,
TemplatesListWrapper,
} from "./TemplatesList";
function WelcomeDialog(properties: {
onClose: () => void;
onSelectTemplate: (templateId: string) => void;
@@ -20,7 +29,7 @@ function WelcomeDialog(properties: {
return (
<DialogWrapper open={true} onClose={() => {}}>
<DialogHeader>
<DialogWelcomeHeader>
<DialogHeaderTitleWrapper>
<DialogHeaderLogoWrapper>
<IronCalcIcon />
@@ -38,7 +47,7 @@ function WelcomeDialog(properties: {
>
<X />
</Cross>
</DialogHeader>
</DialogWelcomeHeader>
<DialogContent>
<ListTitle>New</ListTitle>
<TemplatesListWrapper>
@@ -52,24 +61,10 @@ function WelcomeDialog(properties: {
/>
</TemplatesListWrapper>
<ListTitle>Templates</ListTitle>
<TemplatesListWrapper>
<TemplatesListItem
title="Mortgage calculator"
description="Estimate payments, interest, and overall cost."
icon={<House />}
iconColor="#2F80ED"
active={selectedTemplate === "mortgage_calculator"}
onClick={() => handleTemplateSelect("mortgage_calculator")}
/>
<TemplatesListItem
title="Travel expenses tracker"
description="Track trip costs and stay on budget."
icon={<TicketsPlane />}
iconColor="#EB5757"
active={selectedTemplate === "travel_expenses_tracker"}
onClick={() => handleTemplateSelect("travel_expenses_tracker")}
/>
</TemplatesListWrapper>
<TemplatesList
selectedTemplate={selectedTemplate}
handleTemplateSelect={handleTemplateSelect}
/>
</DialogContent>
<DialogFooter>
<DialogFooterButton
@@ -82,20 +77,7 @@ function WelcomeDialog(properties: {
);
}
const DialogWrapper = styled(Dialog)`
font-family: Inter;
.MuiDialog-paper {
width: 440px;
border-radius: 12px;
margin: 16px;
border: 1px solid #e0e0e0;;
}
.MuiBackdrop-root {
background-color: rgba(0, 0, 0, 0.4);
}
`;
const DialogHeader = styled("div")`
const DialogWelcomeHeader = styled("div")`
display: flex;
flex-direction: row;
align-items: flex-start;
@@ -131,7 +113,7 @@ const DialogHeaderLogoWrapper = styled("div")`
justify-content: center;
max-width: 20px;
max-height: 20px;
background-color: #F2994A;
background-color: #f2994a;
padding: 10px;
margin-bottom: 12px;
border-radius: 6px;
@@ -145,67 +127,10 @@ const DialogHeaderLogoWrapper = styled("div")`
}
`;
const Cross = styled("div")`
&:hover {
background-color: #f5f5f5;
}
display: flex;
border-radius: 4px;
min-height: 24px;
min-width: 24px;
cursor: pointer;
align-items: center;
justify-content: center;
svg {
width: 16px;
height: 16px;
stroke-width: 1.5;
}
`;
const DialogContent = styled("div")`
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px;
max-height: 300px;
overflow: hidden;
overflow-y: auto;
`;
const ListTitle = styled("div")`
font-size: 12px;
font-weight: 600;
color: #424242;
`;
const TemplatesListWrapper = styled("div")`
display: flex;
flex-direction: column;
gap: 10px;
`;
const DialogFooter = styled("div")`
border-top: 1px solid #e0e0e0;
padding: 16px;
`;
const DialogFooterButton = styled("button")`
background-color: #F2994A;
border: none;
color: #FFF;
padding: 12px;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 12px;
font-family: Inter;
&:hover {
background-color: #D68742;
}
&:active {
background-color: #D68742;
}
`;
export default WelcomeDialog;