Merge pull request #563 from subugoe/global-tree-selection

Add the feature of Global Tree

src/App.tsx

@@ -1,8 +1,13 @@
-import PanelsWrapper from './components/PanelsWrapper'
-import { FC } from 'react'
+import { FC, useEffect } from 'react'
+
 import { configStore } from '@/store/ConfigStore.tsx'
+import { dataStore } from '@/store/DataStore.tsx'
 
 import TopBar from '@/components/TopBar'
+import GlobalTree from '@/components/tree/GlobalTree.tsx'
+
+import { createCollectionNodes } from '@/utils/tree.ts'
+import PanelsWrapper from '@/components/PanelsWrapper.tsx'
 
 interface AppProps {
   customConfig: Config
@@ -12,10 +17,28 @@ const App: FC<AppProps> = ({ customConfig }) => {
   const addCustomConfig = configStore((state) => state.addCustomConfig)
   addCustomConfig(customConfig)
 
+  const collections = dataStore(state => state.collections)
+  const setTreeNodes = dataStore(state => state.setTreeNodes)
+
+
+  useEffect(() => {
+    async function initTree(collections: CollectionMap) {
+      const nodes = await createCollectionNodes(collections)
+      if (!nodes) return
+
+      setTreeNodes(nodes)
+    }
+
+    initTree(collections)
+  }, [collections])
+
   return (
     <div className="tido t-flex t-flex-col">
-      <TopBar />
-      <PanelsWrapper />
+      <TopBar/>
+      <div className="t-flex">
+        <GlobalTree/>
+        <PanelsWrapper/>
+      </div>
     </div>
   )
 }

src/components/Modal.tsx

@@ -0,0 +1,42 @@
+import { FC, ReactNode, useEffect, useState } from 'react'
+
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+
+interface ModalProps {
+    children: ReactNode,
+    TriggerButton?: ReactNode,
+    showPopover?: boolean,
+    position?: Position
+}
+
+const Modal: FC<ModalProps> = ({
+  children, TriggerButton, showPopover, position
+}) => {
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handleOpenChange = (open: boolean) => {
+    setIsOpen(open)
+  }
+
+  useEffect(() => {
+    if (showPopover) setIsOpen(true)
+  }, [position])
+
+  return <div className="local-tree-modal">
+    <Popover open={isOpen} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        {TriggerButton}
+      </PopoverTrigger>
+      <PopoverContent
+        style={{
+          top: `${position?.y + 40}px`,
+          left: `${position?.x}px`,
+        }}>
+        {children}
+      </PopoverContent>
+    </Popover>
+  </div>
+}
+
+export default Modal

src/components/PanelsWrapper.tsx

@@ -6,7 +6,7 @@ import { configStore } from '@/store/ConfigStore.tsx'
 const PanelsWrapper: FC = () => {
   const config = configStore(state => state.config)
   const panels = config?.panels
-  return <div className="t-flex t-h-full t-flex-row t-ml-[6%]"> {
+  return <div className="t-flex t-h-full t-ml-4 t-flex-row"> {
     panels?.map((panelConfig, i: number) => (<Panel config={panelConfig} key={i}/>))
   }</div>
 }

src/components/TopBar.tsx

@@ -1,21 +1,52 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 
+import { configStore } from '@/store/ConfigStore.tsx'
+
+import Modal from '@/components/Modal.tsx'
+import TreeSelectionModalContent from '@/components/tree-modal/TreeSelectionModalContent.tsx'
+import IconRenderer from '@/components/base/IconRenderer.tsx'
+
+import { tree } from '@/utils/icons'
+import { cross } from '@/utils/icons'
+import { dataStore } from '@/store/DataStore.tsx'
 
-import TreeSelectionModal from '@/components/TreeSelectionModal'
 
 const TopBar: FC = () => {
 
+  const [iconHtmlString, setIconHtmlString] = useState(tree)
+  const globalTree = configStore(state => state.config.globalTree)
+
+  const setShowGlobalTree = dataStore(state => state.setShowGlobalTree)
+
+  function toggleIcon() {
+    if (iconHtmlString === tree) {
+      // we click the tree icon - now we show the global tree (set the value to true)
+      setShowGlobalTree(true)
+      setIconHtmlString(cross)
+    } else if (iconHtmlString === cross) {
+      setShowGlobalTree(false)
+      setIconHtmlString(tree)
+    }
+  }
+
   const addButton =
     <span
       className="t-bg-blue-500 t-text-white t-rounded t-flex t-pl-4 t-items-center t-justify-items-center t-w-16 t-h-10">
-            New
+        New
     </span>
 
 
   return <div className="t-flex t-flex-row t-ml-[6%] t-mt-10">
-    <TreeSelectionModal TriggerButton={addButton}/>
+    <button className={`t-mr-2 toggle-global-tree ${!globalTree ? 't-hidden' : ''}`} onClick={() => toggleIcon()}>
+      <IconRenderer
+        htmlString={iconHtmlString}
+        width={8}
+        height={8}/>
+    </button>
+    <Modal TriggerButton={addButton}>
+      <TreeSelectionModalContent/>
+    </Modal>
   </div>
-
 }
 
 export default TopBar

src/components/Tree.tsx

@@ -8,27 +8,25 @@ import TreeNode from '@/components/tree/TreeNode'
 interface TreeProps {
   nodes: TreeNode[],
 
-  onSelect(node: TreeNode): void,
+  onSelect(node: TreeNode, target): void,
 
-  onExpand(node: TreeNode): void,
-
-  onCollapse(node: TreeNode): void,
+  getChildren(node: TreeNode): Promise<TreeNode[]>
 }
 
-const Tree: FC<TreeProps> = ({ nodes, onSelect, onExpand, onCollapse }) => {
+const Tree: FC<TreeProps> = ({ nodes, onSelect, getChildren }) => {
 
 
   const tree =
-    nodes.length > 0 &&
-    nodes.map((collection, i) => (
-      <div key={i}>
-        <TreeNode node={collection}/>
-      </div>
-    ))
+      nodes?.length > 0 &&
+      nodes.map((collection, i) => (
+        <div key={i}>
+          <TreeNode node={collection}/>
+        </div>
+      ))
 
 
-  return <div className="tree t-h-96 t-overflow-hidden t-overflow-y-auto">
-    <TreeProvider onSelect={onSelect} onExpand={onExpand} onCollapse={onCollapse}>
+  return <div className="tree t-w-96 t-h-96 t-overflow-hidden t-overflow-y-auto">
+    <TreeProvider onSelect={onSelect} getChildren={getChildren}>
       {tree}
     </TreeProvider>
   </div>

src/components/base/IconRenderer.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useRef, FC, useState } from 'react'
+
+interface IconRendererProps {
+  htmlString: string
+  width?: number,
+  height?: number
+}
+
+const IconRenderer: FC<IconRendererProps> = ({ htmlString, width, height }) => {
+  const ref = useRef<HTMLInputElement>(null)
+
+  const [iconWidth, setIconWidth] = useState(4)
+  const [iconHeight, setIconHeight] = useState(4)
+
+  useEffect(() => {
+    if (width) setIconWidth(width)
+    if (height) setIconHeight(height)
+
+    if (ref?.current) {
+      (ref.current as HTMLElement).innerHTML = htmlString
+      const iconEls = ref.current.children
+
+      const iconEl = iconEls[0]
+      iconEl.classList.add('t-w-' + iconWidth, 't-h-' + iconHeight)
+    }
+  }, [htmlString, iconWidth, iconHeight])
+
+  return <div ref={ref}></div>
+}
+export default IconRenderer

src/components/base/InputField.tsx

@@ -1,13 +1,14 @@
 import { FC } from 'react'
 
 interface InputFieldProps {
-    updateInputValue: (newValue: string) => void
+  updateInputValue: (newValue: string) => void,
+  width: number
 }
 
-const InputField: FC<InputFieldProps> = ({ updateInputValue }) => {
+const InputField: FC<InputFieldProps> = ({ updateInputValue, width }) => {
 
   return <>
-    <input className="t-border-solid t-border-[1.5px] t-w-[200px] t-h-[30px] t-mb-[10px]"
+    <input className={`t-border-solid t-border-[1.5px] t-w-${width} t-h-[30px] t-mb-[10px]`}
       onChange={(e) => updateInputValue(e.target.value)}/>
   </>
 }

src/components/tree-modal/GlobalTreeSelectionModalContent.tsx

@@ -0,0 +1,53 @@
+import { FC } from 'react'
+import { configStore } from '@/store/ConfigStore.tsx'
+
+
+interface SelectedItemIndicesType {
+  collectionUrl: string,
+  manifestIndex: number,
+  itemIndex: number,
+}
+
+interface GlobalTreeSelectionModalContentProps {
+  selectedItemIndices: SelectedItemIndicesType,
+}
+
+const GlobalTreeSelectionModalContent: FC<GlobalTreeSelectionModalContentProps> = ({ selectedItemIndices }) => {
+
+  const panels = configStore(state => state.config.panels)
+  const addNewPanel = configStore(state => state.addNewPanel)
+  const updatePanel = configStore(state => state.updatePanel)
+
+  const newPanelConfig = {
+    entrypoint: {
+      url: selectedItemIndices.collectionUrl,
+      type: 'collection',
+    },
+    manifestIndex: selectedItemIndices.manifestIndex,
+    itemIndex: selectedItemIndices.itemIndex
+  }
+
+  let buttonsUpdatePanel
+  if (panels && panels?.length > 0) {
+    buttonsUpdatePanel = panels?.map((_, i) => <button
+      className="t-bg-slate-200 t-w-20 t-h-8 t-mr-1 t-rounded-md hover:t-bg-slate-300" key={i}
+      onClick={() => updatePanel(
+        newPanelConfig
+        , i)}>Panel {i + 1}</button>)
+  }
+
+
+  return (
+    <div
+      className="t-flex t-items-center t-h-12 t-border-1 t-border-gray-300 t-px-4 t-py-2 t-shadow-md t-rounded-md ">
+      <div className="buttons-update-panel t-flex">
+        {buttonsUpdatePanel}
+      </div>
+      <button className="button-new-panel t-bg-slate-200 t-w-24 t-h-8 t-mr-1 t-rounded-md hover:t-bg-slate-300"
+        onClick={() => addNewPanel(newPanelConfig)}> New
+          Panel
+      </button>
+    </div>)
+}
+
+export default GlobalTreeSelectionModalContent