diff --git a/www/src/components/Table/ColumnHeader.tsx b/www/src/components/Table/ColumnHeader.tsx index 80b80db3..1f889dd9 100644 --- a/www/src/components/Table/ColumnHeader.tsx +++ b/www/src/components/Table/ColumnHeader.tsx @@ -14,7 +14,7 @@ import { import SortDescIcon from "@material-ui/icons/ArrowDownward"; import DropdownIcon from "@material-ui/icons/ArrowDropDownCircle"; -import { getFieldIcon } from "constants/fields"; +import { getFieldIcon, FieldType } from "constants/fields"; import { useFiretableContext } from "contexts/firetableContext"; import { FiretableOrderBy } from "hooks/useFiretable"; @@ -179,24 +179,26 @@ const ColumnHeader: Column["headerRenderer"] = ({ column }) => { - - - - - + + + + + )} {userClaims?.roles?.includes("ADMIN") && ( diff --git a/www/src/components/Table/ColumnMenu/MenuContents.tsx b/www/src/components/Table/ColumnMenu/MenuContents.tsx index d48ae2b4..96bd53ac 100644 --- a/www/src/components/Table/ColumnMenu/MenuContents.tsx +++ b/www/src/components/Table/ColumnMenu/MenuContents.tsx @@ -67,6 +67,7 @@ export interface IMenuContentsProps { onClick?: () => void; active?: boolean; color?: "error"; + disabled?: boolean; }[]; } @@ -105,6 +106,7 @@ export default function MenuContents({ menuItems }: IMenuContentsProps) { item.active && classes.menuItemActive, item.color === "error" && classes.menuItemError )} + disabled={item.disabled} > {icon} diff --git a/www/src/components/Table/ColumnMenu/NewColumn.tsx b/www/src/components/Table/ColumnMenu/NewColumn.tsx index a97ed84d..ec4a6bb2 100644 --- a/www/src/components/Table/ColumnMenu/NewColumn.tsx +++ b/www/src/components/Table/ColumnMenu/NewColumn.tsx @@ -63,7 +63,10 @@ export default function FormDialog({ }, [columnLabel]); useEffect(() => { - if (type === FieldType.id) setFieldKey("id"); + if (type === FieldType.id) { + setColumnLabel("ID"); + setFieldKey("id"); + } }, [type]); return ( diff --git a/www/src/components/Table/ColumnMenu/index.tsx b/www/src/components/Table/ColumnMenu/index.tsx index 3f63735b..04e22a1b 100644 --- a/www/src/components/Table/ColumnMenu/index.tsx +++ b/www/src/components/Table/ColumnMenu/index.tsx @@ -11,7 +11,7 @@ import CellResizeIcon from "assets/icons/CellResize"; import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward"; import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; import EditIcon from "@material-ui/icons/Edit"; -import ReorderIcon from "@material-ui/icons/Reorder"; +// import ReorderIcon from "@material-ui/icons/Reorder"; import SettingsIcon from "@material-ui/icons/Settings"; import ColumnPlusBeforeIcon from "assets/icons/ColumnPlusBefore"; import ColumnPlusAfterIcon from "assets/icons/ColumnPlusAfter"; @@ -158,6 +158,7 @@ export default function ColumnMenu() { handleClose(); }, active: isSorted && !isAsc, + disabled: column.type === FieldType.id, }, { label: "Sort: Increasing", @@ -170,6 +171,7 @@ export default function ColumnMenu() { handleClose(); }, active: isSorted && isAsc, + disabled: column.type === FieldType.id, }, { type: "subheader", label: "Edit" }, { @@ -181,7 +183,7 @@ export default function ColumnMenu() { }, { label: `Edit Type: ${column?.type}`, - // TODO: This is based off the cell type + // This is based off the cell type icon: _find(FIELDS, { type: column.type })?.icon, onClick: () => { setModal({ type: ModalStates.typeChange, data: { column } }); @@ -189,7 +191,7 @@ export default function ColumnMenu() { }, { label: `Column Settings`, - // TODO: This is based off the cell type + // This is based off the cell type icon: , onClick: () => { setModal({ type: ModalStates.settings, data: { column } });