Can render and discard changes. No submit yet.

client/src/components/common/DiscardChangesButton.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box, Button } from '@material-ui/core';
+
+export default function DiscardChangesButton(props: any) {
+    return <Box>
+        <Button
+            {...props}
+            variant="contained" color="primary"
+        >
+            Discard Changes
+        </Button>
+    </Box>
+}

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

@@ -273,13 +273,20 @@ export default function ManageTagsWindow(props: IProps) {
         >
             <Typography variant="h4">Manage Tags</Typography>
         </Box>
-        <Box
+        {props.state.pendingChanges.length > 0 && <Box
             m={1}
             mt={4}
             width="80%"
         >
-            <ControlTagChanges changes={props.state.pendingChanges}/>
-        </Box>
+            <ControlTagChanges
+                changes={props.state.pendingChanges}
+                onDiscard={() => props.dispatch({
+                    type: ManageTagsWindowActions.SetPendingChanges,
+                    value: [],
+                })}
+                onSave={() => {}}
+            />
+        </Box>}
         <Box
             m={1}
             mt={4}

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

@@ -1,5 +1,9 @@
-import React from 'react';
-import { Typography, Chip } from '@material-ui/core';
+import React, { useState, useEffect } from 'react';
+import { Typography, Chip, CircularProgress, Box, Paper } from '@material-ui/core';
+import { queryTags } from '../../../lib/query/Backend';
+import { QueryLeafBy, QueryLeafOp } from '../../../lib/query/Query';
+import DiscardChangesButton from '../../common/DiscardChangesButton';
+import SubmitChangesButton from '../../common/SubmitChangesButton';
 
 export enum TagChangeType {
     Delete = "Delete",
@@ -17,14 +21,64 @@ export interface TagChange {
     name?: string,
 }
 
+export async function getTag(id: number) {
+    return (await queryTags({
+        query: {
+            a: QueryLeafBy.TagId,
+            b: id,
+            leafOp: QueryLeafOp.Equals,
+        },
+        offset: 0,
+        limit: 1,
+    }))[0];
+}
+
 export function TagChangeDisplay(props: {
     change: TagChange,
 }) {
-    const tag = <Chip size="small" label={props.change.id} />;
+    const [tag, setTag] = useState<any>(undefined);
+    const [oldParent, setOldParent] = useState<any>(undefined);
+    const [newParent, setNewParent] = useState<any>(undefined);
+
+    useEffect(() => {
+        getTag(props.change.id).then((tag: any) => {
+            if (tag.parentId) {
+                getTag(tag.parentId).then((parent: any) => setOldParent(parent));
+            } else {
+                setOldParent(null);
+            }
+            setTag(tag);
+        })
+        if (props.change.type === TagChangeType.MoveTo) {
+            if (props.change.parent) {
+                getTag(props.change.parent).then((tag: any) => setNewParent(tag));
+            } else {
+                setNewParent(null);
+            }
+        }
+    }, [props.change.id]);
+
+    const MakeTag = (props: { name: string }) => <Chip label={props.name} />
+    const MainTag = tag ?
+        <MakeTag name={tag.name} /> :
+        <CircularProgress />;
 
     switch (props.change.type) {
         case TagChangeType.Delete:
-            return <Typography>Delete {tag}</Typography>
+            return <Typography>Delete {MainTag}</Typography>
+        case TagChangeType.Rename:
+            const NewTag = tag ?
+                <MakeTag name={props.change.name || "unknown"} /> :
+                <CircularProgress />;
+            return <Typography>Rename {MainTag} to {NewTag}</Typography>
+        case TagChangeType.MoveTo:
+            const OldParent = oldParent !== undefined ?
+                <MakeTag name={oldParent ? oldParent.name : "/"} /> :
+                <CircularProgress />;
+            const NewParent = newParent !== undefined ?
+                <MakeTag name={newParent ? newParent.name : "/"} /> :
+                <CircularProgress />;
+            return <Typography>Move {MainTag} from {OldParent} to {NewParent}</Typography>
         default:
             throw new Error("Unhandled tag change type")
     }
@@ -32,8 +86,22 @@ export function TagChangeDisplay(props: {
 
 export default function ControlTagChanges(props: {
     changes: TagChange[],
+    onSave: () => void,
+    onDiscard: () => void,
 }) {
-    return <>
-        {props.changes.map((change: any) => <TagChangeDisplay change={change} />)}
-    </>
+    return <Box display="flex"><Paper style={{ padding: 10, minWidth: 0 }}>
+        <Typography variant="h5">Pending changes</Typography>
+        <Box mt={2}>
+            {props.changes.map((change: any) =>
+                <Box display="flex">
+                    <Typography>-&nbsp;</Typography>
+                    <TagChangeDisplay change={change} />
+                </Box>
+            )}
+        </Box>
+        <Box mt={2} display="flex">
+            <Box m={1}><SubmitChangesButton onClick={props.onSave}>Save Changes</SubmitChangesButton></Box>
+            <Box m={1}><DiscardChangesButton onClick={props.onDiscard}>Discard Changes</DiscardChangesButton></Box>
+        </Box>
+    </Paper></Box>
 }