nodes selection in commander (#404)

ui2/src/components/Commander/Commander.tsx

@@ -3,7 +3,7 @@ import {Group} from "@mantine/core"
 import {useSelector, useDispatch} from "react-redux"
 import {useNavigate} from "react-router-dom"
 
-import FolderNodeActions from "@/components/FolderNodeActions"
+import FolderNodeActions from "@/components/Commander/FolderNodeActions"
 import Node from "@/components/Node"
 import {
   selectPanelNodes,
@@ -111,7 +111,7 @@ export default function Commander({mode}: Args) {
   }
 
   const nodes = data.map((n: NodeType) => (
-    <Node onClick={onClick} key={n.id} node={n} />
+    <Node onClick={onClick} key={n.id} node={n} mode={mode} />
   ))
 
   if (nodes.length > 0) {

ui2/src/components/Commander/DeleteButton.tsx

@@ -0,0 +1,12 @@
+import {Button} from "@mantine/core"
+import {IconTrash} from "@tabler/icons-react"
+
+export default function DeleteButton() {
+  const onClick = () => {}
+
+  return (
+    <Button leftSection={<IconTrash />} onClick={onClick} variant={"default"}>
+      Delete
+    </Button>
+  )
+}

ui2/src/components/Commander/FolderNodeActions/FolderNodeActions.tsx

@@ -0,0 +1,33 @@
+import {Group} from "@mantine/core"
+import {useSelector} from "react-redux"
+import {selectSelectedNodeIds} from "@/slices/dualPanel"
+
+import type {RootState} from "@/app/types"
+import type {PanelMode} from "@/types"
+import ToggleSecondaryPanel from "@/components/DualPanel/ToggleSecondaryPanel"
+import DeleteButton from "@/components/Commander/DeleteButton"
+import NewFolderButton from "@/components/Commander/NewFolderButton"
+import UploadButton from "@/components/Commander/UploadButton"
+
+type Args = {
+  mode: PanelMode
+}
+
+export default function FolderNodeActions({mode}: Args) {
+  const selectedIds = useSelector((state: RootState) =>
+    selectSelectedNodeIds(state, mode)
+  ) as Array<string>
+
+  return (
+    <Group justify="space-between">
+      <Group>
+        <UploadButton />
+        <NewFolderButton mode={mode} />
+        {selectedIds.length > 0 && <DeleteButton />}
+      </Group>
+      <Group>
+        <ToggleSecondaryPanel mode={mode} />
+      </Group>
+    </Group>
+  )
+}

ui2/src/components/Commander/NewFolderButton.tsx

@@ -0,0 +1,35 @@
+import {ActionIcon} from "@mantine/core"
+import {IconFolderPlus} from "@tabler/icons-react"
+import {useSelector, useDispatch} from "react-redux"
+import {selectCurrentFolderID, folderAdded} from "@/slices/dualPanel"
+import create_new_folder from "@/components/modals/NewFolder"
+
+import type {RootState} from "@/app/types"
+import type {NodeType, PanelMode} from "@/types"
+
+type Args = {
+  mode: PanelMode
+}
+
+export default function NewFolderButton({mode}: Args) {
+  const dispatch = useDispatch()
+  const currentFolderId = useSelector((state: RootState) =>
+    selectCurrentFolderID(state, mode)
+  )
+
+  const onNewFolder = () => {
+    if (!currentFolderId) {
+      console.error("Error: no current folder found")
+      return
+    }
+    create_new_folder(currentFolderId).then((new_folder: NodeType) => {
+      dispatch(folderAdded({node: new_folder, mode: mode}))
+    })
+  }
+
+  return (
+    <ActionIcon onClick={onNewFolder} size="lg" variant="default">
+      <IconFolderPlus size={18} />
+    </ActionIcon>
+  )
+}

ui2/src/components/Commander/UploadButton.tsx

@@ -0,0 +1,16 @@
+import {ActionIcon, FileButton} from "@mantine/core"
+import {IconUpload} from "@tabler/icons-react"
+
+export default function UploadButton() {
+  const onUpload = () => {}
+
+  return (
+    <FileButton onChange={onUpload} multiple>
+      {props => (
+        <ActionIcon {...props} size="lg" variant="default">
+          <IconUpload size={18} />
+        </ActionIcon>
+      )}
+    </FileButton>
+  )
+}

ui2/src/components/Node/Document/Document.tsx

@@ -1,17 +1,39 @@
+import {useDispatch, useSelector} from "react-redux"
 import {Checkbox} from "@mantine/core"
 
-import type {NodeType} from "@/types"
+import {
+  selectSelectedNodeIds,
+  selectionAddNode,
+  selectionRemoveNode
+} from "@/slices/dualPanel"
+
+import type {NodeType, PanelMode} from "@/types"
 import classes from "./Document.module.css"
+import {RootState} from "@/app/types"
 
 type Args = {
   node: NodeType
+  mode: PanelMode
   onClick: (node: NodeType) => void
 }
 
-export default function Document({node, onClick}: Args) {
+export default function Document({node, mode, onClick}: Args) {
+  const selectedIds = useSelector((state: RootState) =>
+    selectSelectedNodeIds(state, mode)
+  ) as Array<string>
+  const dispatch = useDispatch()
+
+  const onCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.currentTarget.checked) {
+      dispatch(selectionAddNode({selectionId: node.id, mode}))
+    } else {
+      dispatch(selectionRemoveNode({selectionId: node.id, mode}))
+    }
+  }
+
   return (
     <div className={classes.document}>
-      <Checkbox />
+      <Checkbox onChange={onCheck} checked={selectedIds.includes(node.id)} />
       <a onClick={() => onClick(node)}>
         <img className={classes.documentIcon} src={node.thumbnail_url!}></img>
         <div className="title">{node.title}</div>

ui2/src/components/Node/Folder/Folder.tsx

@@ -1,16 +1,39 @@
+import {useDispatch, useSelector} from "react-redux"
 import {Checkbox} from "@mantine/core"
-import type {NodeType} from "@/types"
+
+import {
+  selectSelectedNodeIds,
+  selectionAddNode,
+  selectionRemoveNode
+} from "@/slices/dualPanel"
+
+import type {NodeType, PanelMode} from "@/types"
 import classes from "./Folder.module.css"
+import {RootState} from "@/app/types"
 
 type Args = {
   node: NodeType
+  mode: PanelMode
   onClick: (node: NodeType) => void
 }
 
-export default function Folder({node, onClick}: Args) {
+export default function Folder({node, mode, onClick}: Args) {
+  const selectedIds = useSelector((state: RootState) =>
+    selectSelectedNodeIds(state, mode)
+  ) as Array<string>
+  const dispatch = useDispatch()
+
+  const onCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.currentTarget.checked) {
+      dispatch(selectionAddNode({selectionId: node.id, mode}))
+    } else {
+      dispatch(selectionRemoveNode({selectionId: node.id, mode}))
+    }
+  }
+
   return (
     <div className={classes.folder}>
-      <Checkbox />
+      <Checkbox onChange={onCheck} checked={selectedIds.includes(node.id)} />
       <a onClick={() => onClick(node)}>
         <div className={classes.folderIcon}></div>
         <div>{node.title}</div>

ui2/src/components/Node/Node.tsx

@@ -1,16 +1,17 @@
-import type {NodeType} from "@/types"
+import type {NodeType, PanelMode} from "@/types"
 import Document from "./Document/Document"
 import Folder from "./Folder/Folder"
 
 type Args = {
   node: NodeType
+  mode: PanelMode
   onClick: (node: NodeType) => void
 }
 
-export default function Node({node, onClick}: Args) {
+export default function Node({node, mode, onClick}: Args) {
   if (node.ctype == "folder") {
-    return <Folder onClick={onClick} node={node} />
+    return <Folder onClick={onClick} node={node} mode={mode} />
   }
 
-  return <Document onClick={onClick} node={node} />
+  return <Document onClick={onClick} node={node} mode={mode} />
 }