refactored NameManager logic for new design

webapp/src/components/NameManager/NameManagerDialog.tsx

@@ -0,0 +1,171 @@
+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, Plus, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { getFullRangeToString } from "../util";
+import NamedRange from "./NamedRange";
+
+interface NameManagerDialogProperties {
+  onClose: () => void;
+  open: boolean;
+  model: Model;
+}
+
+function NameManagerDialog({
+  onClose,
+  open,
+  model,
+}: NameManagerDialogProperties) {
+  const [definedNamesLocal, setDefinedNamesLocal] = useState<DefinedName[]>();
+  const [showNewName, setShowNewName] = useState(false);
+  const [showOptions, setShowOptions] = useState(true);
+
+  useEffect(() => {
+    // render definedNames from model
+    if (open) {
+      const definedNamesModel = model.getDefinedNameList();
+      setDefinedNamesLocal(definedNamesModel);
+    }
+    setShowNewName(false);
+    setShowOptions(true);
+  }, [open, model]);
+
+  const handleNewName = () => {
+    setShowNewName(true);
+    setShowOptions(false);
+  };
+
+  const handleDelete = () => {
+    // re-render modal
+    setDefinedNamesLocal(model.getDefinedNameList());
+  };
+
+  const formatFormula = (): string => {
+    const worksheets = model.getWorksheetsProperties();
+    const selectedView = model.getSelectedView();
+
+    return getFullRangeToString(selectedView, worksheets);
+  };
+
+  const toggleOptions = () => {
+    setShowOptions(!showOptions);
+  };
+
+  const toggleShowNewName = () => {
+    setShowNewName(false);
+  };
+
+  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>
+          <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
+            model={model}
+            worksheets={model.getWorksheetsProperties()}
+            name={definedName.name}
+            scope={definedName.scope}
+            formula={definedName.formula}
+            key={definedName.name}
+            showOptions={showOptions}
+            toggleOptions={toggleOptions}
+            onDelete={handleDelete}
+          />
+        ))}
+        {showNewName && (
+          <NamedRange
+            model={model}
+            worksheets={model.getWorksheetsProperties()}
+            formula={formatFormula()}
+            showOptions={showOptions}
+            toggleOptions={toggleOptions}
+            toggleShowNewName={toggleShowNewName}
+          />
+        )}
+      </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={!showOptions} // disable when editing
+        >
+          {t("name_manager_dialog.new")}
+        </Button>
+      </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;

webapp/src/components/NameManager/NamedRange.tsx

@@ -0,0 +1,217 @@
+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;
+  onDelete?: () => void;
+  toggleShowNewName?: () => void;
+  toggleOptions: () => void;
+  showOptions?: boolean;
+}
+
+function NamedRange({
+  model,
+  worksheets,
+  name,
+  scope,
+  formula,
+  onDelete,
+  toggleShowNewName,
+  toggleOptions,
+  showOptions,
+}: NamedRangeProperties) {
+  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);
+    toggleOptions();
+  };
+
+  const handleCancel = () => {
+    setReadOnly(true);
+    setShowEditDelete(false);
+    toggleOptions();
+    setNewName(name || "");
+    setNewScope(scope);
+
+    // if it's newName remove it from modal
+    toggleShowNewName?.();
+  };
+
+  const handleEdit = () => {
+    setReadOnly(false);
+    setShowEditDelete(true);
+    toggleOptions();
+  };
+
+  const handleDelete = () => {
+    try {
+      model.deleteDefinedName(newName, newScope);
+    } catch (error) {
+      console.log("DefinedName delete failed", error);
+    }
+    onDelete?.(); // refresh modal
+  };
+
+  return (
+    <>
+      <StyledBox>
+        <StyledTextField
+          id="name"
+          variant="outlined"
+          size="small"
+          margin="none"
+          fullWidth
+          InputProps={{ readOnly: readOnly }}
+          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
+          InputProps={{ readOnly: readOnly }}
+          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
+          InputProps={{ readOnly: readOnly }}
+          error={formulaError}
+          value={newFormula}
+          onChange={(event) => setNewFormula(event.target.value)}
+          onKeyDown={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={(event) => event.stopPropagation()}
+        />
+
+        {showEditDelete ? (
+          // save cancel
+          <>
+            <IconButton onClick={handleSaveUpdate}>
+              <Check size={12} />
+            </IconButton>
+            <StyledIconButton onClick={handleCancel}>
+              <X size={12} />
+            </StyledIconButton>
+          </>
+        ) : (
+          // edit delete
+          <>
+            <IconButton onClick={handleEdit} disabled={!showOptions}>
+              <PencilLine size={12} />
+            </IconButton>
+            <StyledIconButton onClick={handleDelete} disabled={!showOptions}>
+              <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,
+  },
+}));
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  color: theme.palette.error.main,
+  "&.Mui-disabled": {
+    opacity: 0.6,
+    color: theme.palette.error.light,
+  },
+}));
+
+export default NamedRange;

webapp/src/components/NameManagerDialog.tsx

@@ -1,224 +0,0 @@
-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 { getFullRangeToString } 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: undefined,
-    formula: "",
-  });
-
-  // render definedNames from model
-  useEffect(() => {
-    if (props.open) {
-      const definedNamesModel = props.model.getDefinedNameList();
-      setDefinedNamesLocal(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,
-  ) => {
-    console.log("CHANGE", field, value);
-
-    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);
-    }
-    // re-render modal
-    setDefinedNamesLocal(props.model.getDefinedNameList());
-  };
-
-  const handleUpdate = (
-    name: string,
-    scope: number | undefined,
-    newName: string,
-    newScope: number | undefined,
-    newFormula: string,
-  ) => {
-    try {
-      // what about partial update?
-      props.model.updateDefinedName(name, scope, newName, newScope, newFormula);
-    } catch (error) {
-      console.log("DefinedName update failed", error);
-    }
-    // re-render modal
-    setDefinedNamesLocal(props.model.getDefinedNameList());
-  };
-
-  const formatFormula = (): string => {
-    const worksheets = props.model.getWorksheetsProperties();
-    const selectedView = props.model.getSelectedView();
-
-    return getFullRangeToString(selectedView, worksheets);
-  };
-
-  return (
-    <StyledDialog
-      open={props.open}
-      onClose={props.onClose}
-      maxWidth={false}
-      scroll="paper"
-    >
-      <StyledDialogTitle>
-        {t("name_manager_dialog.title")}
-        <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
-            model={props.model}
-            worksheets={props.model.getWorksheetsProperties()}
-            name={definedName.name}
-            scope={definedName.scope}
-            formula={definedName.formula}
-            key={definedName.name}
-            onChange={handleChange}
-            onDelete={handleDelete}
-            canEdit={false}
-            canDelete={true}
-          />
-        ))}
-        <NamedRange
-          model={props.model}
-          worksheets={props.model.getWorksheetsProperties()}
-          formula={formatFormula()}
-          onChange={handleChange}
-          canEdit={true}
-          canDelete={false}
-        />
-      </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",
-            }}
-          >
-            {t("name_manager_dialog.cancel")}
-          </Button>
-          <Button
-            onClick={handleSave}
-            variant="contained"
-            disableElevation
-            sx={{ textTransform: "none" }}
-            startIcon={<Check size={16} />}
-            // disabled={} // disable when error
-          >
-            {t("name_manager_dialog.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;

webapp/src/components/NamedRange.tsx

@@ -1,158 +0,0 @@
-import type { DefinedName, Model, WorksheetProperties } from "@ironcalc/wasm";
-import {
-  Box,
-  Divider,
-  IconButton,
-  MenuItem,
-  TextField,
-  styled,
-} from "@mui/material";
-import { t } from "i18next";
-import { Trash2 } from "lucide-react";
-import { useEffect, useState } from "react";
-
-type NamedRangeProperties = {
-  model: Model;
-  worksheets: WorksheetProperties[];
-  name?: string;
-  scope?: number;
-  formula: string;
-  canEdit: boolean;
-  canDelete: boolean;
-  onChange: (
-    field: keyof DefinedName,
-    value: string | number | undefined,
-  ) => void;
-  onDelete?: (name: string, scope: number | undefined) => void;
-  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);
-  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
-          InputProps={{ readOnly: !props.canEdit }}
-          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
-          InputProps={{ readOnly: !props.canEdit }}
-          value={scope ?? "global"}
-          onChange={(event) =>
-            handleChange(
-              "scope",
-              event.target.value === "global" ? undefined : event.target.value,
-            )
-          }
-        >
-          <MenuItem value={"global"}>
-            {t("name_manager_dialog.workbook")}
-          </MenuItem>
-          {props.worksheets.map((option, index) => (
-            <MenuItem key={option.name} value={index}>
-              {option.name}
-            </MenuItem>
-          ))}
-        </StyledTextField>
-        <StyledTextField
-          id="formula"
-          variant="outlined"
-          size="small"
-          margin="none"
-          fullWidth
-          InputProps={{ readOnly: !props.canEdit }}
-          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,
-  },
-}));
-
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  color: theme.palette.error.main,
-  "&.Mui-disabled": {
-    opacity: 0.6,
-    color: theme.palette.error.light,
-  },
-}));
-
-export default NamedRange;

webapp/src/components/toolbar.tsx

@@ -36,7 +36,7 @@ import {
   DecimalPlacesIncreaseIcon,
 } from "../icons";
 import { theme } from "../theme";
-import NameManagerDialog from "./NameManagerDialog";
+import NameManagerDialog from "./NameManager/NameManagerDialog";
 import BorderPicker from "./borderPicker";
 import ColorPicker from "./colorPicker";
 import { TOOLBAR_HEIGHT } from "./constants";

webapp/src/locale/en_us.json

@@ -81,8 +81,7 @@
     "range": "Scope",
     "scope": "Range",
     "help": "Learn more about Named Ranges",
-    "save": "Save",
-    "cancel": "Cancel",
+    "new": "Add new",
     "workbook": "Workbook (Global)"
   }
 }