new components for name manager dialog and fields

new text added to locale en_us added name manager to toolbar added model and worksheets as prop UPDATE: API for defined names NamedRange component changes NameManager dialog component changes new util formatting functions UPDATE: API for defined names new components for name manager dialog and fields new text added to locale en_us added name manager to toolbar added model and worksheets as prop UPDATE: API for defined names NamedRange component changes NameManager dialog component changes new util formatting functions UPDATE: API for defined names last changes corrected styling updates to namedRange and nameManagerDialog
2024-12-26 18:28:48 +01:00
9 changed files with 712 additions and 532 deletions
--- a/webapp/src/components/NameManagerDialog.tsx
+++ b/webapp/src/components/NameManagerDialog.tsx
@@ -0,0 +1,430 @@
+import type { DefinedName, Model } from "@ironcalc/wasm";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  styled,
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  styled,
+} from "@mui/material";
+import { t } from "i18next";
+import { BookOpen, Check, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import NamedRange from "./NamedRange";
+import { getFullRangeToString } from "./util";
+
+type NameManagerDialogProperties = {
+  onClose: () => void;
+  open: boolean;
+  model: Model;
+  onClose: () => void;
+  open: boolean;
+  model: Model;
+};
+
+function NameManagerDialog(props: NameManagerDialogProperties) {
+  const [definedNamesLocal, setDefinedNamesLocal] = useState<DefinedName[]>();
+  const [definedName, setDefinedName] = useState<DefinedName>({
+    name: "",
+    scope: undefined,
+    formula: "",
+  });
+
+  // render definedNames from model
+  useEffect(() => {
+    if (props.open) {
+      const definedNamesModel = props.model.getDefinedNameList();
+      setDefinedNamesLocal(definedNamesModel);
+      console.log("definedNamesModel EFFECT", definedNamesModel);
+    }
+  }, [props.open]);
+
+  const handleSave = () => {
+    try {
+      console.log("SAVE", definedName);
+
+      props.model.newDefinedName(
+        definedName.name,
+        definedName.scope,
+        definedName.formula,
+      );
+    } catch (error) {
+      console.log("DefinedName save failed", error);
+    }
+    props.onClose();
+  };
+
+  const handleChange = (
+    field: keyof DefinedName,
+    value: string | number | undefined,
+  ) => {
+    setDefinedName((prev: DefinedName) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleDelete = (name: string, scope: number | undefined) => {
+    try {
+      props.model.deleteDefinedName(name, scope);
+    } catch (error) {
+      console.log("DefinedName delete failed", error);
+    }
+    // should re-render modal
+  };
+
+  const handleUpdate = (
+    name: string,
+    scope: number | undefined,
+    newName: string,
+    newScope: number | undefined,
+    newFormula: string,
+  ) => {
+    try {
+      // partially update?
+      props.model.updateDefinedName(name, scope, newName, newScope, newFormula);
+    } catch (error) {
+      console.log("DefinedName update failed", error);
+    }
+  };
+
+  const formatFormula = (): string => {
+    const worksheets = props.model.getWorksheetsProperties();
+    const selectedView = props.model.getSelectedView();
+  const formatFormula = (): string => {
+    const worksheets = props.model.getWorksheetsProperties();
+    const selectedView = props.model.getSelectedView();
+
+    return getFullRangeToString(selectedView, worksheets);
+  };
+    return getFullRangeToString(selectedView, worksheets);
+  };
+
+  return (
+    <StyledDialog
+      open={props.open}
+      onClose={props.onClose}
+      maxWidth={false}
+      scroll="paper"
+    >
+      <StyledDialogTitle>
+        Named Ranges
+        <IconButton onClick={() => props.onClose()}>
+          <X size={16} />
+        </IconButton>
+      </StyledDialogTitle>
+      <StyledDialogContent dividers>
+        <StyledRangesHeader>
+          <Box width="171px">{t("name_manager_dialog.name")}</Box>
+          <Box width="171px">{t("name_manager_dialog.range")}</Box>
+          <Box width="171px">{t("name_manager_dialog.scope")}</Box>
+        </StyledRangesHeader>
+        {definedNamesLocal?.map((definedName) => (
+          <NamedRange
+            worksheets={props.model.getWorksheetsProperties()}
+            name={definedName.name}
+            scope={definedName.scope}
+            formula={definedName.formula}
+            key={definedName.name}
+            model={props.model}
+            onChange={handleChange}
+            onDelete={handleDelete}
+            canDelete={true}
+          />
+        ))}
+        <NamedRange
+          worksheets={props.model.getWorksheetsProperties()}
+          formula={formatFormula()}
+          onChange={handleChange}
+          canDelete={false}
+          model={props.model}
+        />
+      </StyledDialogContent>
+      <StyledDialogActions>
+        <Box display="flex" alignItems="center" gap={"8px"}>
+          <BookOpen color="grey" size={16} />
+          <span style={{ fontSize: "12px", fontFamily: "Inter" }}>
+            {t("name_manager_dialog.help")}
+          </span>
+        </Box>
+        <Box display="flex" gap="8px" width={"155px"}>
+          {/* change hover color? */}
+          <Button
+            onClick={() => props.onClose()}
+            variant="contained"
+            disableElevation
+            color="info"
+            sx={{
+              bgcolor: (theme): string => theme.palette.grey["200"],
+              color: (theme): string => theme.palette.grey["700"],
+              textTransform: "none",
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            variant="contained"
+            disableElevation
+            sx={{ textTransform: "none" }}
+            startIcon={<Check size={16} />}
+            // disabled={} // disable when error
+          >
+            Save
+          </Button>
+        </Box>
+      </StyledDialogActions>
+    </StyledDialog>
+  );
+}
+
+const StyledDialog = styled(Dialog)(() => ({
+  "& .MuiPaper-root": {
+    height: "380px",
+    minWidth: "620px",
+  },
+}));
+
+const StyledDialogTitle = styled(DialogTitle)`
+padding: 12px 20px;
+font-size: 14px;
+font-weight: 600;
+display: flex;
+align-items: center;
+justify-content: space-between;
+`;
+
+const StyledDialogContent = styled(DialogContent)`
+display: flex;
+flex-direction: column;
+gap: 12px;
+padding: 20px 12px 20px 20px;
+`;
+
+const StyledRangesHeader = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  gap: "12px",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "12px",
+  fontWeight: "700",
+  color: theme.palette.info.main,
+}));
+
+const StyledDialogActions = styled(DialogActions)`
+padding: 12px 20px;
+height: 40px;
+display: flex;
+align-items: center;
+justify-content: space-between;
+font-size: 12px;
+color: #757575;
+`;
+
+export default NameManagerDialog;
+import type { DefinedName, Model } from "@ironcalc/wasm";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Stack,
+  styled,
+} from "@mui/material";
+import { t } from "i18next";
+import { BookOpen, Check, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import NamedRange from "./NamedRange";
+import { getShortRangeToString } from "./util";
+
+type NameManagerDialogProperties = {
+  onClose: () => void;
+  open: boolean;
+  model: Model;
+};
+
+function NameManagerDialog(props: NameManagerDialogProperties) {
+  const [definedNamesLocal, setDefinedNamesLocal] = useState<DefinedName[]>();
+  const [definedName, setDefinedName] = useState<DefinedName>({
+    name: "",
+    scope: 0,
+    formula: "",
+  });
+
+  // render named ranges from model
+  useEffect(() => {
+    const definedNamesModel = props.model.getDefinedNameList();
+    setDefinedNamesLocal(definedNamesModel);
+    console.log("definedNamesModel EFFECT", definedNamesModel);
+  });
+
+  const handleSave = () => {
+    console.log("SAVE DIALOG", definedName);
+    // create newDefinedName and close
+    // props.model.newDefinedName(
+    // 	definedName.name,
+    // 	definedName.scope,
+    // 	definedName.formula,
+    // );
+    props.onClose();
+  };
+
+  const handleChange = (field: keyof DefinedName, value: string | number) => {
+    setDefinedName((prev: DefinedName) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleDelete = () => {
+    console.log("definedName marked for deletion");
+  };
+
+  const formatFormula = (): string => {
+    const selectedView = props.model.getSelectedView();
+
+    return getShortRangeToString(selectedView);
+  };
+
+  return (
+    <StyledDialog
+      open={props.open}
+      onClose={props.onClose}
+      maxWidth={false}
+      scroll="paper"
+    >
+      <StyledDialogTitle>
+        Named Ranges
+        <IconButton onClick={() => props.onClose()}>
+          <X size={16} />
+        </IconButton>
+      </StyledDialogTitle>
+      <StyledDialogContent dividers>
+        <StyledRangesHeader>
+          <Box width="171px">{t("name_manager_dialog.name")}</Box>
+          <Box width="171px">{t("name_manager_dialog.range")}</Box>
+          <Box width="171px">{t("name_manager_dialog.scope")}</Box>
+        </StyledRangesHeader>
+        {definedNamesLocal?.map((definedName) => (
+          <NamedRange
+            worksheets={props.model.getWorksheetsProperties()}
+            name={definedName.name}
+            scope={definedName.scope}
+            formula={definedName.formula}
+            key={definedName.name}
+            model={props.model}
+            onChange={handleChange}
+            onDelete={handleDelete}
+          />
+        ))}
+        <NamedRange
+          worksheets={props.model.getWorksheetsProperties()}
+          formula={formatFormula()}
+          onChange={handleChange}
+          model={props.model}
+        />
+      </StyledDialogContent>
+      <StyledDialogActions>
+        <Box display="flex" alignItems="center" gap={"8px"}>
+          <BookOpen color="grey" size={16} />
+          <span style={{ fontSize: "12px", fontFamily: "Inter" }}>
+            {t("name_manager_dialog.help")}
+          </span>
+        </Box>
+        <Box display="flex" gap="8px" width={"155px"}>
+          {/* change hover color? */}
+          <Button
+            onClick={() => props.onClose()}
+            variant="contained"
+            disableElevation
+            color="info"
+            sx={{
+              bgcolor: (theme): string => theme.palette.grey["200"],
+              color: (theme): string => theme.palette.grey["700"],
+              textTransform: "none",
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            variant="contained"
+            disableElevation
+            sx={{ textTransform: "none" }}
+            startIcon={<Check size={16} />}
+          >
+            Save
+          </Button>
+        </Box>
+      </StyledDialogActions>
+    </StyledDialog>
+  );
+}
+
+const StyledDialog = styled(Dialog)(() => ({
+  "& .MuiPaper-root": {
+    height: "380px",
+    minWidth: "620px",
+  },
+  "& .MuiPaper-root": {
+    height: "380px",
+    minWidth: "620px",
+  },
+}));
+
+const StyledDialogTitle = styled(DialogTitle)`
+padding: 12px 20px;
+font-size: 14px;
+font-weight: 600;
+display: flex;
+align-items: center;
+justify-content: space-between;
+`;
+
+const StyledDialogContent = styled(DialogContent)`
+display: flex;
+flex-direction: column;
+gap: 12px;
+padding: 20px 12px 20px 20px;
+`;
+
+const StyledRangesHeader = styled(Stack)(({ theme }) => ({
+  flexDirection: "row",
+  gap: "12px",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "12px",
+  fontWeight: "700",
+  color: theme.palette.info.main,
+  flexDirection: "row",
+  gap: "12px",
+  fontFamily: theme.typography.fontFamily,
+  fontSize: "12px",
+  fontWeight: "700",
+  color: theme.palette.info.main,
+}));
+
+const StyledDialogActions = styled(DialogActions)`
+padding: 12px 20px;
+height: 40px;
+display: flex;
+align-items: center;
+justify-content: space-between;
+font-size: 12px;
+color: #757575;
+`;
+
+export default NameManagerDialog;
--- a/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx
+++ b/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx
@@ -1,178 +0,0 @@
-import type { Model } from "@ironcalc/wasm";
-import {
-  Box,
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Stack,
-  styled,
-} from "@mui/material";
-import { t } from "i18next";
-import { BookOpen, Plus, X } from "lucide-react";
-import { useState } from "react";
-import { getFullRangeToString } from "../util";
-import NamedRangeActive, { NamedRangeInactive } from "./NamedRange";
-
-interface NameManagerDialogProperties {
-  onClose: () => void;
-  open: boolean;
-  model: Model;
-  onNamesChanged: () => void;
-}
-
-function NameManagerDialog(properties: NameManagerDialogProperties) {
-  const { onClose, open, model, onNamesChanged } = properties;
-
-  // If editingNameIndex is -1, then we are adding a new name
-  // If editingNameIndex is -2, then we are not editing any name
-  // If editingNameIndex is a positive number, then we are editing that index
-  const [editingNameIndex, setEditingNameIndex] = useState(-2);
-
-  const handleNewName = () => {
-    setEditingNameIndex(-1);
-  };
-
-  const handleDelete = () => {
-    onNamesChanged();
-  };
-
-  const formatFormula = (): string => {
-    const worksheets = model.getWorksheetsProperties();
-    const selectedView = model.getSelectedView();
-
-    return getFullRangeToString(selectedView, worksheets);
-  };
-
-  const worksheets = model.getWorksheetsProperties();
-  const definedNameList = model.getDefinedNameList();
-
-  return (
-    <StyledDialog open={open} onClose={onClose} maxWidth={false} scroll="paper">
-      <StyledDialogTitle>
-        {t("name_manager_dialog.title")}
-        <IconButton onClick={onClose}>
-          <X size={16} />
-        </IconButton>
-      </StyledDialogTitle>
-      <StyledDialogContent dividers>
-        <StyledRangesHeader>
-          <StyledBox>{t("name_manager_dialog.name")}</StyledBox>
-          <StyledBox>{t("name_manager_dialog.range")}</StyledBox>
-          <StyledBox>{t("name_manager_dialog.scope")}</StyledBox>
-        </StyledRangesHeader>
-        <NameLisWrapper>
-          {definedNameList.map((definedName, index) => {
-            if (index === editingNameIndex) {
-              return (
-                <NamedRangeActive
-                  model={model}
-                  worksheets={worksheets}
-                  name={definedName.name}
-                  scope={definedName.scope}
-                  formula={definedName.formula}
-                  key={definedName.name}
-                  onSave={onNamesChanged}
-                  onCancel={() => setEditingNameIndex(-2)}
-                />
-              );
-            }
-            return (
-              <NamedRangeInactive
-                name={definedName.name}
-                scope={definedName.scope}
-                formula={definedName.formula}
-                key={definedName.name}
-                onEdit={() => setEditingNameIndex(index)}
-                onDelete={handleDelete}
-              />
-            );
-          })}
-        </NameLisWrapper>
-        {editingNameIndex === -1 && (
-          <NamedRangeActive
-          model={model}
-          worksheets={worksheets}
-          name={"Name1"}
-          scope={0}
-          formula={formatFormula()}
-          onSave={onNamesChanged}
-          onCancel={() => setEditingNameIndex(-2)}
-        />)
-      }
-      </StyledDialogContent>
-      <StyledDialogActions>
-        <Box display="flex" alignItems="center" gap={"8px"}>
-          <BookOpen color="grey" size={16} />
-          <span style={{ fontSize: "12px", fontFamily: "Inter" }}>
-            {t("name_manager_dialog.help")}
-          </span>
-        </Box>
-        <Button
-          onClick={handleNewName}
-          variant="contained"
-          disableElevation
-          sx={{ textTransform: "none" }}
-          startIcon={<Plus size={16} />}
-          disabled={editingNameIndex > -2}
-        >
-          {t("name_manager_dialog.new")}
-        </Button>
-      </StyledDialogActions>
-    </StyledDialog>
-  );
-}
-
-const NameLisWrapper = styled(Stack)`
-  overflow-y: auto;
-`;
-
-const StyledBox = styled("div")`
-  width: 171px;
-`;
-
-const StyledDialog = styled(Dialog)(() => ({
-  "& .MuiPaper-root": {
-    height: "380px",
-    minWidth: "620px",
-  },
-}));
-
-const StyledDialogTitle = styled(DialogTitle)`
-  padding: 12px 20px;
-  font-size: 14px;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-`;
-
-const StyledDialogContent = styled(DialogContent)`
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 20px 12px 20px 20px;
-`;
-
-const StyledRangesHeader = styled(Box)(({ theme }) => ({
-  display: "flex",
-  paddingLeft: "6px",
-  fontFamily: theme.typography.fontFamily,
-  fontSize: "12px",
-  fontWeight: "700",
-  color: theme.palette.info.main,
-}));
-
-const StyledDialogActions = styled(DialogActions)`
-  padding: 12px 20px;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 12px;
-  color: #757575;
-`;
-
-export default NameManagerDialog;
--- a/webapp/src/components/NameManagerDialog/NamedRange.tsx
+++ b/webapp/src/components/NameManagerDialog/NamedRange.tsx
@@ -1,244 +0,0 @@
-import type { Model, WorksheetProperties } from "@ironcalc/wasm";
-import {
-  Box,
-  Divider,
-  IconButton,
-  MenuItem,
-  TextField,
-  styled,
-} from "@mui/material";
-import { t } from "i18next";
-import { Check, PencilLine, Trash2, X } from "lucide-react";
-import { useEffect, useState } from "react";
-
-interface NamedRangeProperties {
-  model: Model;
-  worksheets: WorksheetProperties[];
-  name: string;
-  scope?: number;
-  formula: string;
-  onSave: () => void;
-  onCancel: () => void;
-}
-
-interface NamedRangeInactiveProperties {
-  name: string;
-  scope?: number;
-  formula: string;
-  onDelete: () => void;
-  onEdit: () => void;
-}
-
-export function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
-  const { name, scope, formula, onDelete, onEdit } = properties;
-  const showOptions = true;
-  return (
-    <WrappedLine>
-      <StyledDiv>{name}</StyledDiv>
-      <StyledDiv>{scope}</StyledDiv>
-      <StyledDiv>{formula}</StyledDiv>
-      <WrappedIcons>
-        <IconButton onClick={onEdit} disabled={!showOptions}>
-          <StyledPencilLine size={12} />
-        </IconButton>
-        <StyledIconButton onClick={onDelete} disabled={!showOptions}>
-          <Trash2 size={12} />
-        </StyledIconButton>
-      </WrappedIcons>
-    </WrappedLine>
-  );
-}
-
-function NamedRangeActive(properties: NamedRangeProperties) {
-  const { model, worksheets, name, scope, formula, onCancel, onSave } =
-    properties;
-  const [newName, setNewName] = useState(name || "");
-  const [newScope, setNewScope] = useState(scope);
-  const [newFormula, setNewFormula] = useState(formula);
-  const [readOnly, setReadOnly] = useState(true);
-  const [showEditDelete, setShowEditDelete] = useState(false);
-
-  // todo: add error messages for validations
-  const [nameError, setNameError] = useState(false);
-  const [formulaError, setFormulaError] = useState(false);
-
-  useEffect(() => {
-    // set state for new name
-    const definedNamesModel = model.getDefinedNameList();
-    if (!definedNamesModel.find((n) => n.name === newName)) {
-      setReadOnly(false);
-      setShowEditDelete(true);
-    }
-  }, [newName, model]);
-
-  const handleSaveUpdate = () => {
-    const definedNamesModel = model.getDefinedNameList();
-
-    if (definedNamesModel.find((n) => n.name === name)) {
-      // update name
-      try {
-        model.updateDefinedName(
-          name || "",
-          scope,
-          newName,
-          newScope,
-          newFormula
-        );
-      } catch (error) {
-        console.log("DefinedName update failed", error);
-      }
-    } else {
-      // create name
-      try {
-        model.newDefinedName(newName, newScope, newFormula);
-      } catch (error) {
-        console.log("DefinedName save failed", error);
-      }
-      setReadOnly(true);
-    }
-    setShowEditDelete(false);
-  };
-
-  const handleCancel = () => {
-    setReadOnly(true);
-    setShowEditDelete(false);
-    setNewName(name || "");
-    setNewScope(scope);
-  };
-
-  const handleEdit = () => {
-    setReadOnly(false);
-    setShowEditDelete(true);
-  };
-
-  const handleDelete = () => {
-    try {
-      model.deleteDefinedName(newName, newScope);
-    } catch (error) {
-      console.log("DefinedName delete failed", error);
-    }
-  };
-
-  return (
-    <>
-      <StyledBox>
-        <StyledTextField
-          id="name"
-          variant="outlined"
-          size="small"
-          margin="none"
-          fullWidth
-          error={nameError}
-          value={newName}
-          onChange={(event) => setNewName(event.target.value)}
-          onKeyDown={(event) => {
-            event.stopPropagation();
-          }}
-          onClick={(event) => event.stopPropagation()}
-        />
-        <StyledTextField
-          id="scope"
-          variant="outlined"
-          select
-          size="small"
-          margin="none"
-          fullWidth
-          value={newScope ?? "global"}
-          onChange={(event) => {
-            event.target.value === "global"
-              ? setNewScope(undefined)
-              : setNewScope(+event.target.value);
-          }}
-        >
-          <MenuItem value={"global"}>
-            {t("name_manager_dialog.workbook")}
-          </MenuItem>
-          {worksheets.map((option, index) => (
-            <MenuItem key={option.name} value={index}>
-              {option.name}
-            </MenuItem>
-          ))}
-        </StyledTextField>
-        <StyledTextField
-          id="formula"
-          variant="outlined"
-          size="small"
-          margin="none"
-          fullWidth
-          error={formulaError}
-          value={newFormula}
-          onChange={(event) => setNewFormula(event.target.value)}
-          onKeyDown={(event) => {
-            event.stopPropagation();
-          }}
-          onClick={(event) => event.stopPropagation()}
-        />
-        <>
-          <IconButton onClick={handleSaveUpdate}>
-            <StyledCheck size={12} />
-          </IconButton>
-          <StyledIconButton onClick={onCancel}>
-            <X size={12} />
-          </StyledIconButton>
-        </>
-      </StyledBox>
-    </>
-  );
-}
-
-const StyledBox = styled(Box)`
-  display: flex;
-  width: 577px;
-`;
-
-const StyledPencilLine = styled(PencilLine)(({ theme }) => ({
-  color: theme.palette.common.black,
-}));
-
-const StyledCheck = styled(Check)(({ theme }) => ({
-  color: theme.palette.success.main,
-}));
-
-const StyledTextField = styled(TextField)(() => ({
-  padding: "0px",
-  width: "163px",
-  marginRight: "8px",
-  "& .MuiInputBase-root": {
-    height: "28px",
-    margin: 0,
-  },
-  "& .MuiInputBase-input": {
-    padding: "6px",
-    fontSize: "12px",
-  },
-}));
-
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  color: theme.palette.error.main,
-  "&.Mui-disabled": {
-    opacity: 0.6,
-    color: theme.palette.error.light,
-  },
-}));
-
-
-const WrappedLine = styled(Box)({
-  display: "flex",
-  paddingLeft: "6px",
-  height: "28px",
-});
-
-const StyledDiv = styled("div")(({ theme }) => ({
-  fontFamily: theme.typography.fontFamily,
-  fontSize: "12px",
-  fontWeight: "400",
-  color: theme.palette.common.black,
-  width: "171px",
-}));
-
-const WrappedIcons = styled(Box)({
-  display: "flex",
-  gap: "0px",
-});
-
-export default NamedRangeActive;
--- a/webapp/src/components/NameManagerDialog/index.tsx
+++ b/webapp/src/components/NameManagerDialog/index.tsx
@@ -1 +0,0 @@
-export { default } from "./NameManagerDialog";
--- a/webapp/src/components/NamedRange.tsx
+++ b/webapp/src/components/NamedRange.tsx
@@ -0,0 +1,168 @@
+import type { DefinedName, Model, WorksheetProperties } from "@ironcalc/wasm";
+import {
+  Box,
+  Divider,
+  IconButton,
+  MenuItem,
+  TextField,
+  styled,
+  Box,
+  Divider,
+  IconButton,
+  MenuItem,
+  TextField,
+  styled,
+} from "@mui/material";
+import { Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+
+type NamedRangeProperties = {
+  name?: string;
+  scope?: number;
+  formula: string;
+  model: Model;
+  worksheets: WorksheetProperties[];
+  onChange: (
+    field: keyof DefinedName,
+    value: string | number | undefined,
+  ) => void;
+  onDelete?: (name: string, scope: number | undefined) => void;
+  canDelete: boolean;
+  onUpdate?: (
+    name: string,
+    scope: number | undefined,
+    newName: string,
+    newScope: number | undefined,
+    newFormula: string,
+  ) => void;
+};
+
+function NamedRange(props: NamedRangeProperties) {
+  const [name, setName] = useState(props.name || "");
+  const [scope, setScope] = useState(props.scope || undefined);
+  const [formula, setFormula] = useState(props.formula);
+  const [nameError, setNameError] = useState(false);
+  const [formulaError, setFormulaError] = useState(false);
+
+  const handleChange = (
+    field: keyof DefinedName,
+    value: string | number | undefined,
+  ) => {
+    if (field === "name") {
+      setName(value as string);
+      props.onChange("name", value);
+    }
+    if (field === "scope") {
+      setScope(value as number | undefined);
+      props.onChange("scope", value);
+    }
+    if (field === "formula") {
+      setFormula(value as string);
+      props.onChange("formula", value);
+    }
+  };
+
+  useEffect(() => {
+    // send initial formula value to parent
+    handleChange("formula", formula);
+  }, []);
+
+  const handleDelete = () => {
+    props.onDelete?.(name, scope);
+  };
+
+  return (
+    <>
+      <StyledBox>
+        <StyledTextField
+          id="name"
+          variant="outlined"
+          size="small"
+          margin="none"
+          fullWidth
+          error={nameError}
+          value={name}
+          onChange={(event) => handleChange("name", event.target.value)}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={(event) => event.stopPropagation()}
+        />
+        <StyledTextField
+          id="scope"
+          variant="outlined"
+          select
+          size="small"
+          margin="none"
+          fullWidth
+          value={scope ?? "Workbook (Global)"}
+          onChange={(event) =>
+            handleChange(
+              "scope",
+              event.target.value === "Workbook (Global)"
+                ? undefined
+                : event.target.value,
+            )
+          }
+        >
+          <MenuItem value="Workbook (Global)">Workbook (Global)</MenuItem>
+          {props.worksheets.map((option, index) => (
+            <MenuItem key={option.sheet_id} value={index}>
+              {option.name}
+            </MenuItem>
+          ))}
+        </StyledTextField>
+        <StyledTextField
+          id="formula"
+          variant="outlined"
+          size="small"
+          margin="none"
+          fullWidth
+          error={formulaError}
+          value={formula}
+          onChange={(event) => handleChange("formula", event.target.value)}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={(event) => event.stopPropagation()}
+        />
+        <StyledIconButton onClick={handleDelete} disabled={!props.canDelete}>
+          <Trash2 size={12} />
+        </StyledIconButton>
+      </StyledBox>
+      <Divider />
+    </>
+  );
+}
+
+const StyledBox = styled(Box)`
+display: flex;
+gap: 12px;
+width: 577px;
+`;
+
+const StyledTextField = styled(TextField)(() => ({
+  "& .MuiInputBase-root": {
+    height: "28px",
+    margin: 0,
+  },
+  "& .MuiInputBase-root": {
+    height: "28px",
+    margin: 0,
+  },
+}));
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  color: theme.palette.error.main,
+  "&.Mui-disabled": {
+    opacity: 0.6,
+    color: theme.palette.error.light,
+  },
+  color: theme.palette.error.main,
+  "&.Mui-disabled": {
+    opacity: 0.6,
+    color: theme.palette.error.light,
+  },
+}));
+
+export default NamedRange;
--- a/webapp/src/components/toolbar.tsx
+++ b/webapp/src/components/toolbar.tsx
@@ -37,6 +37,7 @@ import {
 } from "../icons";
 import { theme } from "../theme";
 import NameManagerDialog from "./NameManagerDialog";
+import NameManagerDialog from "./NameManagerDialog";
 import BorderPicker from "./borderPicker";
 import ColorPicker from "./colorPicker";
 import { TOOLBAR_HEIGHT } from "./constants";
@@ -75,7 +76,6 @@ type ToolbarProperties = {
  numFmt: string;
  showGridLines: boolean;
  onToggleShowGridLines: (show: boolean) => void;
-  onNamesChanged: () => void;
  model: Model;
 };

@@ -399,7 +399,6 @@ function Toolbar(properties: ToolbarProperties) {
          setNameManagerDialogOpen(false);
        }}
        model={properties.model}
-        onNamesChanged={properties.onNamesChanged}
      />
    </ToolbarContainer>
  );
--- a/webapp/src/components/util.ts
+++ b/webapp/src/components/util.ts
@@ -68,7 +68,7 @@ export function rangeToStr(

 export function getFullRangeToString(
  selectedView: SelectedView,
-  worksheets: WorksheetProperties[],
+  worksheets: WorksheetProperties[], // solo pasar names
 ): string {
  // order of values is confusing compared to rangeToStr range type, needs refactoring for consistency
  const [rowStart, columnStart, rowEnd, columnEnd] = selectedView.range;
--- a/webapp/src/components/workbook.tsx
+++ b/webapp/src/components/workbook.tsx
@@ -115,6 +115,10 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
    updateRangeStyle("num_fmt", numberFmt);
  };

+  const onNamedRangesUpdate = () => {
+    // update named ranges in model
+  };
+
  const onCopyStyles = () => {
    const {
      sheet,
@@ -137,17 +141,16 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
    // FIXME: This is so that the cursor indicates there are styles to be pasted
    const el = rootRef.current?.getElementsByClassName("sheet-container")[0];
    if (el) {
-      (
-        el as HTMLElement
-      ).style.cursor = `url('data:image/svg+xml;utf8,${encodeURIComponent(
-        ReactDOMServer.renderToString(
-          <PaintRoller
-            width={24}
-            height={24}
-            style={{ transform: "rotate(-8deg)" }}
-          />
-        )
-      )}'), auto`;
+      (el as HTMLElement).style.cursor =
+        `url('data:image/svg+xml;utf8,${encodeURIComponent(
+          ReactDOMServer.renderToString(
+            <PaintRoller
+              width={24}
+              height={24}
+              style={{ transform: "rotate(-8deg)" }}
+            />,
+          ),
+        )}'), auto`;
    }
  };

@@ -169,12 +172,12 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
        row,
        column,
        row + height,
-        column + width
+        column + width,
      );
      setRedrawId((id) => id + 1);
    },
    onExpandAreaSelectedKeyboard: (
-      key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown"
+      key: "ArrowRight" | "ArrowLeft" | "ArrowUp" | "ArrowDown",
    ): void => {
      model.onExpandSelectedRange(key);
      setRedrawId((id) => id + 1);
@@ -328,7 +331,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
    } = model.getSelectedView();
    return getCellAddress(
      { rowStart, rowEnd, columnStart, columnEnd },
-      { row, column }
+      { row, column },
    );
  }, [model]);

@@ -405,7 +408,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
            source.sheet,
            source.area,
            data,
-            source.type === "cut"
+            source.type === "cut",
          );
          setRedrawId((id) => id + 1);
        } else if (mimeType === "text/plain") {
@@ -436,7 +439,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
        // '2024-10-18T14:07:37.599Z'

        let clipboardId = sessionStorage.getItem(
-          CLIPBOARD_ID_SESSION_STORAGE_KEY
+          CLIPBOARD_ID_SESSION_STORAGE_KEY,
        );
        if (!clipboardId) {
          clipboardId = getNewClipboardId();
@@ -474,7 +477,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
        // '2024-10-18T14:07:37.599Z'

        let clipboardId = sessionStorage.getItem(
-          CLIPBOARD_ID_SESSION_STORAGE_KEY
+          CLIPBOARD_ID_SESSION_STORAGE_KEY,
        );
        if (!clipboardId) {
          clipboardId = getNewClipboardId();
@@ -546,7 +549,7 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
          };
          model.setAreaWithBorder(
            { sheet, row, column, width, height },
-            borderArea
+            borderArea,
          );
          setRedrawId((id) => id + 1);
        }}
@@ -571,9 +574,6 @@ const Workbook = (props: { model: Model; workbookState: WorkbookState }) => {
          setRedrawId((id) => id + 1);
        }}
        model={model}
-        onNamesChanged={() => {
-          setRedrawId((id) => id + 1);
-        }}
      />
      <FormulaBar
        cellAddress={cellAddress()}
--- a/webapp/src/locale/en_us.json
+++ b/webapp/src/locale/en_us.json
@@ -1,87 +1,93 @@
 {
-  "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": {
-    "title": "Named Ranges",
-    "name": "Name",
-    "range": "Scope",
-    "scope": "Range",
-    "help": "Learn more about Named Ranges",
-    "new": "Add new",
-    "workbook": "Workbook (Global)"
-  }
+	"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",
+		"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",
+		"close": "Close dialog",
+		"save": "Save"
+	},
+	"sheet_rename": {
+		"rename": "Save",
+		"label": "New name",
+		"title": "Rename Sheet",
+		"close": "Close dialog"
+	},
+	"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",
+		"name": "Name",
+		"range": "Scope",
+		"scope": "Range"
+	},
+	"name_manager_dialog": {
+		"help": "Learn more about Named Ranges",
+		"name": "Name",
+		"range": "Scope",
+		"scope": "Range"
+	}
 }
				`@@ -1 +0,0 @@`
				`export { default } from "./NameManagerDialog";`