edit view intezo mode for tree

Author: NoelKova

apps/sensenet/src/components/tree/Props/StyledTreeItemProps.tsx

@@ -4,4 +4,5 @@ export default interface StyledTreeItemProps extends TreeItemProps {
   contentvalue: GenericContent
   activeitempath: string
   navigate: (item: GenericContent) => void
+  editMode: boolean
 }

apps/sensenet/src/components/tree/StyledTreeItem.tsx

@@ -6,7 +6,7 @@ import React, { MouseEventHandler, useCallback, useContext, useEffect, useState
 import { useHistory } from 'react-router'
 import { ResponsivePersonalSettings } from '../../context'
 import { useQuery, useSnRoute } from '../../hooks'
-import { getPrimaryActionUrl } from '../../services'
+import { getPrimaryActionUrl, navigateToAction } from '../../services'
 import { ContentContextMenu } from '../context-menu/content-context-menu'
 import { Icon } from '../Icon'
 import { ExpandItemsContext } from './Contexts/ExpandedItemsProvider'
@@ -59,6 +59,7 @@ export const StyledTreeItem = (props: StyledTreeItemProps) => {
             nodeId={innerChild.Id.toString()}
             contentvalue={innerChild}
             navigate={props.navigate}
+            editMode={props.editMode}
             onContextMenu={(event) => {
               event.preventDefault()
               event.stopPropagation()
@@ -74,7 +75,7 @@ export const StyledTreeItem = (props: StyledTreeItemProps) => {
         //
       }
     },
-    [loadChildren, props.activeitempath, props.navigate],
+    [loadChildren, props.activeitempath, props.navigate, props.editMode],
   )
 
   const { navigate, ...restProps } = props
@@ -140,22 +141,31 @@ export const StyledTreeItem = (props: StyledTreeItemProps) => {
       history.push(getPrimaryActionUrl({ content: props.contentvalue, repository, uiSettings, location, snRoute }))
       return
     }
-    const itemPath = (event.target as HTMLElement).closest('[data-path]')?.getAttribute('data-path')
-    const itemId = props.contentvalue.Id.toString()
-    setExpandItems((prevItems) => {
-      const updatedItems = new Set(prevItems)
-      if (!expandItems.has(itemId)) {
-        setIsTreeLoading(true)
-        updatedItems.add(itemId)
-        loadCollectionCB(props.contentvalue.Path).finally(() => setIsTreeLoading(false))
-      } else {
-        if (itemPath === props.activeitempath) {
-          updatedItems.delete(itemId)
+    if (props.editMode) {
+      navigateToAction({
+        history,
+        routeMatch: snRoute.match!,
+        action: 'edit',
+        queryParams: { content: props.contentvalue.Path.replace(snRoute.path, '') },
+      })
+    } else {
+      const itemPath = (event.target as HTMLElement).closest('[data-path]')?.getAttribute('data-path')
+      const itemId = props.contentvalue.Id.toString()
+      setExpandItems((prevItems) => {
+        const updatedItems = new Set(prevItems)
+        if (!expandItems.has(itemId)) {
+          setIsTreeLoading(true)
+          updatedItems.add(itemId)
+          loadCollectionCB(props.contentvalue.Path).finally(() => setIsTreeLoading(false))
+        } else {
+          if (itemPath === props.activeitempath) {
+            updatedItems.delete(itemId)
+          }
         }
-      }
-      return updatedItems
-    })
-    props.navigate(props.contentvalue)
+        return updatedItems
+      })
+      props.navigate(props.contentvalue)
+    }
   }
 
   const onContextMenu = (event: React.MouseEvent, data: GenericContent) => {

apps/sensenet/src/components/tree/simpletree.tsx

@@ -1,4 +1,4 @@
-import { LinearProgress } from '@material-ui/core'
+import { Button, LinearProgress, Switch } from '@material-ui/core'
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon'
 import TreeView from '@material-ui/lab/TreeView'
@@ -32,13 +32,20 @@ const useStyles = makeStyles((theme: Theme) =>
     root: {
       width: '100%',
       backgroundColor: theme.palette.background.paper,
+      borderTop: theme.palette.type === 'light' ? '1px solid #DBDBDB' : '1px solid rgba(255, 255, 255, 0.11)',
     },
     nested: {
       paddingLeft: theme.spacing(4),
     },
     '& .MuiListItemText-primary.MuiTypography-body1': {
       fontSize: '10px!important',
     },
+    btnCont: {
+      display: 'flex',
+      gap: '8px',
+      flexWrap: 'wrap',
+      justifyContent: 'center',
+    },
   }),
 )
 
@@ -60,6 +67,7 @@ export function SimpleTree(props: SimpleTreeProps) {
     left: 0,
   })
   const [selected, setSelected] = useState<string>('')
+  const [editMode, setEditMode] = useState<boolean>(false)
 
   const loadRoot = useCallback(async () => {
     setIsTreeLoading(true)
@@ -107,6 +115,16 @@ export function SimpleTree(props: SimpleTreeProps) {
 
   return (
     <>
+      <div className={classes.btnCont}>
+        <Button onClick={() => setEditMode(false)}>View</Button>
+        <Switch checked={editMode} onChange={() => setEditMode((prev) => !prev)} />
+        <Button
+          color={editMode ? 'primary' : 'default'}
+          variant={editMode ? 'contained' : 'text'}
+          onClick={() => setEditMode(true)}>
+          Edit
+        </Button>
+      </div>
       {isTreeLoading && (
         <LinearProgress
           style={{ position: 'sticky', top: '0', left: '0', width: '100%', zIndex: '100', marginBottom: '-4px' }}
@@ -126,6 +144,7 @@ export function SimpleTree(props: SimpleTreeProps) {
             data-id={rootElement?.Id}
             contentvalue={rootElement}
             onContextMenu={(event) => onContextMenu(event, rootElement)}
+            editMode={editMode}
           />
         )}
       </TreeView>