Nested display with expansion arrows

client/src/components/windows/ManageTagsWindow.tsx

@@ -1,11 +1,29 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { WindowState } from './Windows';
-import { Box, Typography, Chip } from '@material-ui/core';
+import { Box, Typography, Chip, IconButton } from '@material-ui/core';
 import * as serverApi from '../../api';
 import LoyaltyIcon from '@material-ui/icons/Loyalty';
+import ArrowRightIcon from '@material-ui/icons/ArrowRight';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 var _ = require('lodash');
 
+export enum TagChangeType {
+    Delete = "Delete",
+    Create = "Create",
+    MoveTo = "MoveTo",
+    MergeTo = "MergeTo",
+    Rename = "Rename",
+}
+
+export interface TagChange {
+    type: TagChangeType,
+    parent?: number | string, // Number if MuDBase ID, string if UUID for new tag not in DB yet.
+    name?: string,
+}
+
 export interface ManageTagsWindowState extends WindowState {
+    fetchedTags: any[],
+    pendingChanges: TagChange[],
 }
 
 export enum ManageTagsWindowActions {
@@ -61,19 +79,43 @@ export async function getAllTags() {
     })();
 }
 
-export function SingleTag(props: any) {
+export function SingleTag(props: {
+    tag: any,
+    prependElems: any[],
+}) {
     const tag = props.tag;
-    const thisTag = <Chip label={tag.name} />;
+    const hasChildren = 'children' in tag && tag.children.length > 0;
+
+    const [expanded, setExpanded] = useState<Boolean>(false);
+
+    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 }}
+    >
+        <Chip
+            label={props.tag.name}
+        />
+    </Box>;
 
     return <>
-        {thisTag}
-        {tag.children && tag.children.map((tag: any) => {
-            return <Box display="flex" alignItems="center" mt={1}>
-                {thisTag}
-                <Typography variant="h5">/</Typography>
-                <SingleTag tag={tag} />
+        <Box display="flex" alignItems="center" mt={1}>
+            <Box visibility={hasChildren ? 'visible' : 'hidden'}>
+                {expandArrow}
             </Box>
-        })}
+            {props.prependElems}
+            <Chip
+                label={tag.name}
+            />
+        </Box>
+        {hasChildren && expanded && tag.children.map((child: any) => <SingleTag
+            tag={child}
+            prependElems={[...props.prependElems,
+            <GreyedTag tag={tag} />,
+            <Typography variant="h5">/</Typography>]}
+        />)}
     </>
 }
 
@@ -115,10 +157,10 @@ export default function ManageTagsWindow(props: IProps) {
             mt={4}
             width="80%"
         >
-                {tags && tags.length && tags.map((tag: any) => {
-                    console.log("Tags:", tags);
-                    return <Box mt={1}><SingleTag tag={tag} /></Box>;
-                })}
+            {tags && tags.length && tags.map((tag: any) => {
+                console.log("Tags:", tags);
+                return <Box mt={1}><SingleTag tag={tag} prependElems={[]} /></Box>;
+            })}
         </Box>
     </Box>
 }