Added deletion.

client/src/components/windows/manage_tags/ManageTagMenu.tsx

@@ -26,27 +26,34 @@ export function MenuEditText(props: {
 }
 
 export interface IProps {
-    anchorEl: null | HTMLElement,
+    position: null | number[],
+    open: boolean,
     onClose: () => void,
     onRename: (s: string) => void,
+    onDelete: () => void,
     tag: any,
 }
 
 export default function ManageTagMenu(props: IProps) {
-    const anchorEl = props.anchorEl;
-
-    const onRename = (name: string) => {
-
-    }
+    const pos = props.open && props.position ?
+        { left: props.position[0], top: props.position[1] }
+        : { left: 0, top: 0 }
 
     return <Menu
-        anchorEl={anchorEl}
+        open={props.open}
+        anchorReference="anchorPosition"
+        anchorPosition={pos}
         keepMounted
-        open={Boolean(props.anchorEl)}
         onClose={props.onClose}
     >
+        <MenuItem
+            onClick={() => {
+                props.onClose();
+                props.onDelete();
+            }}
+        >Delete</MenuItem>
         <NestedMenuItem
-            parentMenuOpen={Boolean(anchorEl)}
+            parentMenuOpen={props.open}
             label="Rename"
         >
             <MenuEditText
@@ -57,5 +64,6 @@ export default function ManageTagMenu(props: IProps) {
                 }}
             />
         </NestedMenuItem>
+
     </Menu>
 }

client/src/components/windows/manage_tags/ManageTagsWindow.tsx

@@ -106,31 +106,35 @@ export function SingleTag(props: {
     const tag = props.tag;
     const hasChildren = 'children' in tag && tag.children.length > 0;
 
-    const [menuAnchorEl, setMenuAnchorEl] = React.useState<null | HTMLElement>(null);
+    const [menuPos, setMenuPos] = React.useState<null | number[]>(null);
     const [expanded, setExpanded] = useState<Boolean>(false);
     const theme = useTheme();
 
-    const onOpenMenu = (event: any) => {
-        setMenuAnchorEl(event.currentTarget);
+    const onOpenMenu = (e: any) => {
+        setMenuPos([e.clientX, e.clientY])
     };
     const onCloseMenu = () => {
-        setMenuAnchorEl(null);
+        setMenuPos(null);
     };
 
-    const tagLabel = ("proposedName" in tag) ?
-        <><del style={{ color: theme.palette.text.secondary }}>{tag.name}</del>→{tag.proposedName}</> :
-        tag.name;
+    var tagLabel: any = tag.name;
+    if ("proposedName" in tag) {
+        tagLabel = <><del style={{ color: theme.palette.text.secondary }}>{tag.name}</del>→{tag.proposedName}</>;
+    } else if ("proposeDelete" in tag && tag.proposeDelete) {
+        tagLabel = <><del style={{ color: theme.palette.text.secondary }}>{tag.name}</del></>;
+    }
 
     const expandArrow = expanded ?
         <IconButton size="small" onClick={() => setExpanded(false)}><ArrowDropDownIcon /></IconButton> :
         <IconButton size="small" onClick={() => setExpanded(true)}><ArrowRightIcon /></IconButton>;
 
-    const GreyedTag = (props: any) => <Box
-        style={{ opacity: 0.5 }}
+    const TagChip = (props: any) => <Box
+        style={{ opacity: props.transparent ? 0.5 : 1.0 }}
     >
         <Chip
             size="small"
-            label={tagLabel}
+            label={props.label}
+            onClick={onOpenMenu}
         />
     </Box>;
 
@@ -140,22 +144,19 @@ export function SingleTag(props: {
                 {expandArrow}
             </Box>
             {props.prependElems}
-            <Chip
-                size="small"
-                label={tagLabel}
-                onClick={onOpenMenu}
-            />
+            <TagChip transparent={tag.proposeDelete} label={tagLabel} />
         </Box>
         {hasChildren && expanded && tag.children.map((child: any) => <SingleTag
             tag={child}
             prependElems={[...props.prependElems,
-            <GreyedTag tag={tag} />,
+            <TagChip transparent={true} label={tagLabel} />,
             <Typography variant="h5">/</Typography>]}
             dispatch={props.dispatch}
             state={props.state}
         />)}
         <ManageTagMenu
-            anchorEl={menuAnchorEl}
+            position={menuPos}
+            open={menuPos !== null}
             onClose={onCloseMenu}
             onRename={(s: string) => {
                 props.dispatch({
@@ -170,6 +171,18 @@ export function SingleTag(props: {
                     ]
                 })
             }}
+            onDelete={() => {
+                props.dispatch({
+                    type: ManageTagsWindowActions.SetPendingChanges,
+                    value: [
+                        ...props.state.pendingChanges,
+                        {
+                            type: TagChangeType.Delete,
+                            id: tag.tagId,
+                        }
+                    ]
+                })
+            }}
             tag={tag}
         />
     </>
@@ -177,11 +190,21 @@ export function SingleTag(props: {
 
 function addTagChanges(tags: Record<number, any>, changes: TagChange[]) {
     var retval = tags;
+
+    const applyDelete = (id: number) => {
+        retval[id].proposeDelete = true;
+        Object.values(tags).filter((t: any) => t.parentId === id)
+            .forEach((child: any) => applyDelete(child.tagId));
+    }
+
     changes.forEach((change: TagChange) => {
         switch (change.type) {
             case TagChangeType.Rename:
                 retval[change.id].proposedName = change.name;
                 break;
+            case TagChangeType.Delete:
+                applyDelete(change.id);
+                break;
             default:
                 throw new Error("Unimplemented tag change")
         }