BOB
This commit is contained in:
Nicolás Hatcher
127
webapp/src/components/NameManagerDialog.tsx
Normal file
127
webapp/src/components/NameManagerDialog.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import type { Model } from "@ironcalc/wasm";
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
styled,
|
||||
} from "@mui/material";
|
||||
import { t } from "i18next";
|
||||
import { BookOpen, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import NamedRange from "./NamedRange";
|
||||
import type { NamedRangeObject } from "./NamedRange";
|
||||
|
||||
type NameManagerDialogProperties = {
|
||||
onClose: () => void;
|
||||
onSave: () => void;
|
||||
open: boolean;
|
||||
model: Model;
|
||||
};
|
||||
|
||||
function NameManagerDialog(props: NameManagerDialogProperties) {
|
||||
|
||||
const handleClose = () => {
|
||||
props.onClose();
|
||||
};
|
||||
|
||||
// update child component values in model
|
||||
const handleSave = () => {
|
||||
props.onSave(); // => onNamedRangesUpdate from toolbar
|
||||
props.onClose();
|
||||
};
|
||||
|
||||
//! Why are fields editable only while clicking them?
|
||||
// update child component values in UI
|
||||
const handleChange = (id: string, field: string, value: string) => {
|
||||
console.log("change:", id, field, value);
|
||||
|
||||
// previous array elements, plus updated value
|
||||
// setNamedRangesLocal((prev) =>
|
||||
// prev.map((namedRange) =>
|
||||
// namedRange.id === id ? { ...namedRange, [field]: value } : namedRange,
|
||||
// ),
|
||||
// );
|
||||
};
|
||||
|
||||
const nameList = props.model.getDefinedNameList();
|
||||
|
||||
return (
|
||||
<StyledDialog
|
||||
open={props.open}
|
||||
onClose={props.onClose}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
scroll="paper"
|
||||
>
|
||||
<StyledDialogTitle>
|
||||
Named Ranges
|
||||
<IconButton onClick={handleClose}>
|
||||
<X size={16} />
|
||||
</IconButton>
|
||||
</StyledDialogTitle>
|
||||
<DialogContent dividers>
|
||||
{nameList.map((e) => (
|
||||
<NamedRange
|
||||
worksheets={props.model.getWorksheetsProperties()}
|
||||
name={e.name}
|
||||
scope={e.scope}
|
||||
range={e.formula}
|
||||
key={`${e.name}-${e.scope}`}
|
||||
onChange={handleChange}
|
||||
model={props.model}
|
||||
/>
|
||||
))}
|
||||
</DialogContent>
|
||||
<StyledDialogActions>
|
||||
<Box display="flex" alignItems="center">
|
||||
<BookOpen
|
||||
color="grey"
|
||||
style={{ width: 16, height: 16, marginLeft: 12, marginRight: 8 }}
|
||||
/>
|
||||
<span style={{ fontSize: "12px", fontFamily: "Inter" }}>
|
||||
{t("name_manager_dialog.help")}
|
||||
</span>
|
||||
</Box>
|
||||
<Box display="flex" gap="10px">
|
||||
<Button onClick={handleClose} variant="contained" color="info">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave} variant="contained">
|
||||
Save changes
|
||||
</Button>
|
||||
</Box>
|
||||
</StyledDialogActions>
|
||||
</StyledDialog>
|
||||
);
|
||||
}
|
||||
|
||||
const StyledDialog = styled(Dialog)(() => ({
|
||||
"& .MuiPaper-root": {
|
||||
maxHeight: "60%",
|
||||
minHeight: "40%",
|
||||
},
|
||||
}));
|
||||
|
||||
// font-weight: 600 is too bold compared to design, should be between 500 & 600
|
||||
const StyledDialogTitle = styled(DialogTitle)`
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const StyledDialogActions = styled(DialogActions)`
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #757575;
|
||||
`;
|
||||
|
||||
export default NameManagerDialog;
|
||||
91
webapp/src/components/NamedRange.tsx
Normal file
91
webapp/src/components/NamedRange.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
import type { Model, WorksheetProperties } from "@ironcalc/wasm";
|
||||
import { Box, IconButton, MenuItem, TextField, styled } from "@mui/material";
|
||||
import { Trash2 } from "lucide-react";
|
||||
|
||||
export type NamedRangeObject = {
|
||||
id: string;
|
||||
name: string;
|
||||
scope: string;
|
||||
range: string;
|
||||
};
|
||||
|
||||
type NamedRangeProperties = {
|
||||
name: string;
|
||||
scope: string;
|
||||
range: string;
|
||||
model: Model;
|
||||
worksheets: WorksheetProperties[];
|
||||
// update namedRange in model
|
||||
onChange: (field: string, value: string) => void;
|
||||
};
|
||||
|
||||
function NamedRange(props: NamedRangeProperties) {
|
||||
// define onChange in parent for updating the model and values
|
||||
|
||||
const handleDelete = () => {
|
||||
// update model
|
||||
console.log("deleted named range");
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledBox>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
size="small"
|
||||
margin="normal"
|
||||
fullWidth
|
||||
value={props.name}
|
||||
onChange={(event) =>
|
||||
props.onChange("name", event.target.value)
|
||||
}
|
||||
onKeyDown={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
/>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
select
|
||||
defaultValue="Workbook"
|
||||
size="small"
|
||||
margin="normal"
|
||||
fullWidth
|
||||
value={props.scope}
|
||||
onChange={(event) =>
|
||||
props.onChange("scope", event.target.value)
|
||||
}
|
||||
>
|
||||
{props.worksheets.map((option) => (
|
||||
<MenuItem key={option.sheet_id} value={option.name}>
|
||||
{option.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
size="small"
|
||||
margin="normal"
|
||||
fullWidth
|
||||
value={props.range}
|
||||
onChange={(event) =>
|
||||
props.onChange("range", event.target.value)
|
||||
}
|
||||
onKeyDown={(event) => {
|
||||
event.stopPropagation();
|
||||
}}
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
/>
|
||||
{/* remove round hover animation */}
|
||||
<IconButton onClick={handleDelete}>
|
||||
<Trash2 size={16} absoluteStrokeWidth />
|
||||
</IconButton>
|
||||
</StyledBox>
|
||||
);
|
||||
}
|
||||
|
||||
const StyledBox = styled(Box)`
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
`;
|
||||
|
||||
export default NamedRange;
|
||||
@@ -1,6 +1,7 @@
|
||||
import type {
|
||||
BorderOptions,
|
||||
HorizontalAlignment,
|
||||
Model,
|
||||
VerticalAlignment,
|
||||
} from "@ironcalc/wasm";
|
||||
import { styled } from "@mui/material/styles";
|
||||
@@ -22,6 +23,7 @@ import {
|
||||
Percent,
|
||||
Redo2,
|
||||
Strikethrough,
|
||||
Tags,
|
||||
Type,
|
||||
Underline,
|
||||
Undo2,
|
||||
@@ -34,6 +36,7 @@ import {
|
||||
DecimalPlacesIncreaseIcon,
|
||||
} from "../icons";
|
||||
import { theme } from "../theme";
|
||||
import NameManagerDialog from "./NameManagerDialog";
|
||||
import BorderPicker from "./borderPicker";
|
||||
import ColorPicker from "./colorPicker";
|
||||
import { TOOLBAR_HEIGHT } from "./constants";
|
||||
@@ -60,6 +63,7 @@ type ToolbarProperties = {
|
||||
onFillColorPicked: (hex: string) => void;
|
||||
onNumberFormatPicked: (numberFmt: string) => void;
|
||||
onBorderChanged: (border: BorderOptions) => void;
|
||||
onNamedRangesUpdate: () => void;
|
||||
fillColor: string;
|
||||
fontColor: string;
|
||||
bold: boolean;
|
||||
@@ -72,12 +76,14 @@ type ToolbarProperties = {
|
||||
numFmt: string;
|
||||
showGridLines: boolean;
|
||||
onToggleShowGridLines: (show: boolean) => void;
|
||||
model: Model;
|
||||
};
|
||||
|
||||
function Toolbar(properties: ToolbarProperties) {
|
||||
const [fontColorPickerOpen, setFontColorPickerOpen] = useState(false);
|
||||
const [fillColorPickerOpen, setFillColorPickerOpen] = useState(false);
|
||||
const [borderPickerOpen, setBorderPickerOpen] = useState(false);
|
||||
const [nameManagerDialogOpen, setNameManagerDialogOpen] = useState(false);
|
||||
|
||||
const fontColorButton = useRef(null);
|
||||
const fillColorButton = useRef(null);
|
||||
@@ -340,6 +346,18 @@ function Toolbar(properties: ToolbarProperties) {
|
||||
>
|
||||
{properties.showGridLines ? <Grid2x2Check /> : <Grid2x2X />}
|
||||
</StyledButton>
|
||||
<Divider />
|
||||
<StyledButton
|
||||
type="button"
|
||||
$pressed={false}
|
||||
onClick={() => {
|
||||
setNameManagerDialogOpen(true);
|
||||
}}
|
||||
disabled={!canEdit}
|
||||
title={t("toolbar.name_manager")}
|
||||
>
|
||||
<Tags />
|
||||
</StyledButton>
|
||||
|
||||
<ColorPicker
|
||||
color={properties.fontColor}
|
||||
@@ -375,6 +393,18 @@ function Toolbar(properties: ToolbarProperties) {
|
||||
anchorEl={borderButton}
|
||||
open={borderPickerOpen}
|
||||
/>
|
||||
<NameManagerDialog
|
||||
open={nameManagerDialogOpen}
|
||||
onClose={() => {
|
||||
setNameManagerDialogOpen(false);
|
||||
}}
|
||||
onSave={() => {
|
||||
console.log(
|
||||
"update NamedRanges in model => properties.onNamedRangesUpdate",
|
||||
);
|
||||
}}
|
||||
model={properties.model}
|
||||
/>
|
||||
</ToolbarContainer>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -113,6 +113,10 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
|
||||
updateRangeStyle("num_fmt", numberFmt);
|
||||
};
|
||||
|
||||
const onNamedRangesUpdate = () => {
|
||||
// update named ranges in model
|
||||
}
|
||||
|
||||
const onCopyStyles = () => {
|
||||
const {
|
||||
sheet,
|
||||
@@ -559,6 +563,8 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
|
||||
model.setShowGridLines(sheet, show);
|
||||
setRedrawId((id) => id + 1);
|
||||
}}
|
||||
onNamedRangesUpdate={onNamedRangesUpdate}
|
||||
model={model}
|
||||
/>
|
||||
<FormulaBar
|
||||
cellAddress={cellAddress()}
|
||||
|
||||
@@ -1,77 +1,81 @@
|
||||
{
|
||||
"toolbar": {
|
||||
"redo": "Redo",
|
||||
"undo": "Undo",
|
||||
"copy_styles": "Copy styles",
|
||||
"euro": "Format as Euro",
|
||||
"percentage": "Format as Percentage",
|
||||
"bold": "Bold",
|
||||
"italic": "Italic",
|
||||
"underline": "Underline",
|
||||
"strike_through": "Strikethrough",
|
||||
"align_left": "Align left",
|
||||
"align_right": "Align right",
|
||||
"align_center": "Align center",
|
||||
"format_number": "Format number",
|
||||
"font_color": "Font color",
|
||||
"fill_color": "Fill color",
|
||||
"decimal_places_increase": "Increase decimal places",
|
||||
"decimal_places_decrease": "Decrease decimal places",
|
||||
"show_hide_grid_lines": "Show/hide grid lines",
|
||||
"vertical_align_bottom": "Align bottom",
|
||||
"vertical_align_middle": " Align middle",
|
||||
"vertical_align_top": "Align top",
|
||||
"format_menu": {
|
||||
"auto": "Auto",
|
||||
"number": "Number",
|
||||
"percentage": "Percentage",
|
||||
"currency_eur": "Euro (EUR)",
|
||||
"currency_usd": "Dollar (USD)",
|
||||
"currency_gbp": "British Pound (GBD)",
|
||||
"date_short": "Short date",
|
||||
"date_long": "Long date",
|
||||
"custom": "Custom",
|
||||
"number_example": "1,000.00",
|
||||
"percentage_example": "10%",
|
||||
"currency_eur_example": "€",
|
||||
"currency_usd_example": "$",
|
||||
"currency_gbp_example": "£",
|
||||
"date_short_example": "09/24/2024",
|
||||
"date_long_example": "Tuesday, September 24, 2024"
|
||||
},
|
||||
"borders": {
|
||||
"title": "Borders",
|
||||
"all": "All borders",
|
||||
"inner": "Inner borders",
|
||||
"outer": "Outer borders",
|
||||
"top": "Top borders",
|
||||
"bottom": "Bottom borders",
|
||||
"clear": "Clear borders",
|
||||
"left": "Left borders",
|
||||
"right": "Right borders",
|
||||
"horizontal": "Horizontal borders",
|
||||
"vertical": "Vertical borders",
|
||||
"color": "Border color",
|
||||
"style": "Border style"
|
||||
}
|
||||
},
|
||||
"num_fmt": {
|
||||
"title": "Custom number format",
|
||||
"label": "Number format",
|
||||
"save": "Save"
|
||||
},
|
||||
"sheet_rename": {
|
||||
"rename": "Save",
|
||||
"label": "New name",
|
||||
"title": "Rename Sheet"
|
||||
},
|
||||
"formula_input": {
|
||||
"update": "Update",
|
||||
"label": "Formula",
|
||||
"title": "Update formula"
|
||||
},
|
||||
"navigation": {
|
||||
"add_sheet": "Add sheet",
|
||||
"sheet_list": "Sheet list"
|
||||
}
|
||||
"toolbar": {
|
||||
"redo": "Redo",
|
||||
"undo": "Undo",
|
||||
"copy_styles": "Copy styles",
|
||||
"euro": "Format as Euro",
|
||||
"percentage": "Format as Percentage",
|
||||
"bold": "Bold",
|
||||
"italic": "Italic",
|
||||
"underline": "Underline",
|
||||
"strike_through": "Strikethrough",
|
||||
"align_left": "Align left",
|
||||
"align_right": "Align right",
|
||||
"align_center": "Align center",
|
||||
"format_number": "Format number",
|
||||
"font_color": "Font color",
|
||||
"fill_color": "Fill color",
|
||||
"decimal_places_increase": "Increase decimal places",
|
||||
"decimal_places_decrease": "Decrease decimal places",
|
||||
"show_hide_grid_lines": "Show/hide grid lines",
|
||||
"name_manager": "Name manager",
|
||||
"vertical_align_bottom": "Align bottom",
|
||||
"vertical_align_middle": " Align middle",
|
||||
"vertical_align_top": "Align top",
|
||||
"format_menu": {
|
||||
"auto": "Auto",
|
||||
"number": "Number",
|
||||
"percentage": "Percentage",
|
||||
"currency_eur": "Euro (EUR)",
|
||||
"currency_usd": "Dollar (USD)",
|
||||
"currency_gbp": "British Pound (GBD)",
|
||||
"date_short": "Short date",
|
||||
"date_long": "Long date",
|
||||
"custom": "Custom",
|
||||
"number_example": "1,000.00",
|
||||
"percentage_example": "10%",
|
||||
"currency_eur_example": "€",
|
||||
"currency_usd_example": "$",
|
||||
"currency_gbp_example": "£",
|
||||
"date_short_example": "09/24/2024",
|
||||
"date_long_example": "Tuesday, September 24, 2024"
|
||||
},
|
||||
"borders": {
|
||||
"title": "Borders",
|
||||
"all": "All borders",
|
||||
"inner": "Inner borders",
|
||||
"outer": "Outer borders",
|
||||
"top": "Top borders",
|
||||
"bottom": "Bottom borders",
|
||||
"clear": "Clear borders",
|
||||
"left": "Left borders",
|
||||
"right": "Right borders",
|
||||
"horizontal": "Horizontal borders",
|
||||
"vertical": "Vertical borders",
|
||||
"color": "Border color",
|
||||
"style": "Border style"
|
||||
}
|
||||
},
|
||||
"num_fmt": {
|
||||
"title": "Custom number format",
|
||||
"label": "Number format",
|
||||
"save": "Save"
|
||||
},
|
||||
"sheet_rename": {
|
||||
"rename": "Save",
|
||||
"label": "New name",
|
||||
"title": "Rename Sheet"
|
||||
},
|
||||
"formula_input": {
|
||||
"update": "Update",
|
||||
"label": "Formula",
|
||||
"title": "Update formula"
|
||||
},
|
||||
"navigation": {
|
||||
"add_sheet": "Add sheet",
|
||||
"sheet_list": "Sheet list"
|
||||
},
|
||||
"name_manager_dialog": {
|
||||
"help": "Learn more about Named Ranges"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user