Drawer

src/components/App.js

@@ -36,7 +36,6 @@ export default function App() {
   const dispatch = useDispatch()
   const isLayoutMobile = useMediaQuery('(max-width:599px)')
   const [isWithDetails, setIsWithDetails] = useState(IS_WITH_DETAILS)
-  const [isWithTables, setIsWithTables] = useState(IS_WITH_TABLES)
   const [deletedAssetId, setDeletedAssetId] = useState(null)
   const [
     isWithImportExportDialog,
@@ -58,31 +57,16 @@ export default function App() {
         onAssetDelete={assetId => setDeletedAssetId(assetId)}
       />
       <SketchButtons />
-      <OptionsWindow
-        isWithDetails={isWithDetails}
-        isWithTables={isWithTables}
-        setIsWithDetails={setIsWithDetails}
-        setIsWithTables={setIsWithTables}
-      />
-      <TablesWindow
-        isWithTables={isWithTables}
-      />
-
       {/* TODO: Review all components below */}
-      <SketchAddToolbar
-        isWithTables={isWithTables}
-      />
+      <SketchAddToolbar />
       <ActionsWindow
         isWithImportExportDialog={isViewing}
         setIsWithImportExportDialog={setIsWithImportExportDialog}
       />
-      <OverlaysWindow />
-      {isWithDetails &&
-        <DetailsWindow
-          isWithDetails={isWithDetails}
-          isWithTables={isWithTables}
-        />
-      }
+      <DetailsWindow
+        isWithDetails={isWithDetails}
+        setIsWithDetails={setIsWithDetails}
+      />
       { isWithImportExportDialog &&
         <ImportExportDialog
           isOpen={isWithImportExportDialog}

src/components/AssetAttributesPanel2.js

@@ -0,0 +1,34 @@
+// TODO: Review from scratch
+
+import React from 'react'
+import { useSelector } from 'react-redux'
+import List from '@material-ui/core/List'
+import AssetAttributesListItem from './AssetAttributesListItem'
+import AssetConnectionsListItems from './AssetConnectionsListItems'
+import CollapsibleTaskList from './CollapsibleTaskList'
+import {
+  getIsViewing,
+} from '../selectors'
+
+export default function AssetAttributesPanel({
+  asset,
+  isDetailsWindowFullScreen,
+}) {
+  const isViewing = useSelector(getIsViewing)
+  const isEditing = !isViewing
+
+  return (
+    <List component='div'>
+      <AssetAttributesListItem
+        asset={asset}
+        isEditing={isEditing}
+      />
+      <AssetConnectionsListItems
+        asset={asset}
+        isEditing={isEditing}
+        isDetailsWindowFullScreen={isDetailsWindowFullScreen}
+      />
+      <CollapsibleTaskList asset={asset} />
+    </List>
+  )
+}

src/components/AssetConnectionsListItems.js

@@ -33,7 +33,7 @@ export default function AssetConnectionsListItems({
   isEditing,
   // TODO: Rename
   noHighlight,
-  expand,
+  isDetailsWindowFullScreen,
 }) {
   const dispatch = useDispatch()
   const isLayoutMobile = useContext(IsLayoutMobileContext)
@@ -50,7 +50,7 @@ export default function AssetConnectionsListItems({
     const connectedAssetIds = getConnectedAssetIds(
       assetId, busId, assetIdsByBusId)
     const connectedAssetCount = connectedAssetIds.length
-    const title = 'Bus ' + index
+    const title = `Bus ${index}`
     const description = getCountDescription(connectedAssetCount, 'connection')
     const isOpen = isOpenByIndex[index]
     const isHighlighted = selectedBusId === busId
@@ -72,36 +72,41 @@ export default function AssetConnectionsListItems({
 
     // TODO: Fix unclear isNotMobile || expand syntax
     // TODO: Replace <></> technique with just not showing component
-    return connectedAssetCount > 0 ?
-      <CollapsibleListItem
-        key={index}
-        title={title}
-        description={(!isLayoutMobile || expand) ? description : null}
-        isHighlighted={isHighlighted}
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        onClick={handleClickOrFocus}
-      >
-        <BusAttributesListItem
-          assetId={assetId}
-          assetTypeCode={assetTypeCode}
-          connection={connection}
-          isEditing={isEditing}
-          onFocus={handleClickOrFocus}
-          connectionIndex={index}
-        />
-        <BusConnectionsList connectedAssetIds={connectedAssetIds} />
-      </CollapsibleListItem> :
-      ( !isLayoutMobile || expand ?
-      <ListItem
-        key={index}
-        className={clsx({ highlighted: isHighlighted })}
-        component='div'
-        disableGutters
-        onClick={handleClickOrFocus}
-      >
-        <ListItemText primary={title} secondary={description} />
-      </ListItem>
-      : null)
+    return (
+      <React.Fragment key={index}>
+        { connectedAssetCount > 0 &&
+          <>
+            <CollapsibleListItem
+              title={title}
+              description={(!isLayoutMobile || isDetailsWindowFullScreen) &&  description }
+              isHighlighted={isHighlighted}
+              isOpen={isOpen}
+              setIsOpen={setIsOpen}
+              onClick={handleClickOrFocus}
+            >
+              <BusAttributesListItem
+                assetId={assetId}
+                assetTypeCode={assetTypeCode}
+                connection={connection}
+                isEditing={isEditing}
+                onFocus={handleClickOrFocus}
+                connectionIndex={index}
+              />
+              <BusConnectionsList connectedAssetIds={connectedAssetIds} />
+            </CollapsibleListItem>
+          </>
+        }
+        { !connectedAssetCount && (!isLayoutMobile || isDetailsWindowFullScreen) &&
+          <ListItem
+            className={clsx({ highlighted: isHighlighted })}
+            component='div'
+            disableGutters
+            onClick={handleClickOrFocus}
+          >
+            <ListItemText primary={title} secondary={description} />
+          </ListItem>
+        }
+      </React.Fragment>
+    )
   })
 }

src/components/AssetList.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import { useDispatch } from 'react-redux'
+import { makeStyles } from '@material-ui/core/styles'
+import { useSelector } from 'react-redux'
+import Divider from '@material-ui/core/Divider'
+import List from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import AssetNameWithIcon from './AssetNameWithIcon'
+import {
+  setSelection,
+} from '../actions'
+import {
+  getAssetById,
+} from '../selectors'
+
+const useStyles = makeStyles(theme => ({
+  listItem: {
+    padding: 0,
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2),
+  },
+}))
+
+export default function AssetList(props) {
+  const dispatch = useDispatch()
+  const classes = useStyles()
+  const assetById = useSelector(getAssetById)
+
+  return (
+    <List>
+      {
+        Object.entries(assetById).map((assetEntry) => {
+          const [assetId, asset] = assetEntry
+
+          return (
+            <React.Fragment key={assetId}>
+              <ListItem button component='div'
+                className={classes.listItem}
+                onClick={() => dispatch(setSelection({ assetId: assetId }))}
+              >
+                <AssetNameWithIcon asset={asset} />
+              </ListItem>
+              <Divider variant="middle" component="li" />
+            </React.Fragment>
+          )
+        })
+      }
+    </List>
+  )
+}

src/components/AssetName.js

@@ -1,70 +1,42 @@
 // TODO: Review from scratch
 
-import React, { useContext } from 'react'
+import React from 'react'
 import { useDispatch } from 'react-redux'
 import { makeStyles } from '@material-ui/core/styles'
 import TextField from '@material-ui/core/TextField'
-import IconButton from '@material-ui/core/IconButton'
 import Typography from '@material-ui/core/Typography'
-import FullScreenExitIcon from '@material-ui/icons/FullscreenExit'
-import FullScreenIcon from '@material-ui/icons/Fullscreen'
 import {
   setAssetValue,
 } from '../actions'
-import {
-  IsLayoutMobileContext,
-} from '../contexts'
 
 const useStyles = makeStyles(theme => ({
   input: {
     lineHeight: 1.5,
     padding: '0 !important',
   },
-  inline: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-  },
 }))
 
 export default function AssetName({
   asset,
   isEditing,
-  isFullScreen,
-  setIsFullScreen,
 }) {
-  const classes = useStyles()
   const dispatch = useDispatch()
-  const isLayoutMobile = useContext(IsLayoutMobileContext)
-
+  const classes = useStyles()
   const assetId = asset.id
   const assetName = asset.name
 
   function handleAssetNameChange(event) {
     dispatch(setAssetValue(assetId, 'name', event.target.value))
   }
 
-  return (
-    <div className={classes.inline}>
-      {isEditing ?
-        <TextField
-          fullWidth
-          value={assetName}
-          multiline={true}
-          variant='filled'
-          InputProps={{ className: classes.input }}
-          onChange={handleAssetNameChange}
-        /> :
-        <Typography>{assetName}</Typography>
-      }
-      {isLayoutMobile && (
-        <IconButton onClick={() => setIsFullScreen(!isFullScreen)}>
-          {isFullScreen ?
-            <FullScreenExitIcon /> :
-            <FullScreenIcon />
-          }
-        </IconButton>
-      )}
-    </div>
-  )
+  return isEditing
+    ? <TextField
+        fullWidth
+        value={assetName}
+        multiline={true}
+        variant='filled'
+        InputProps={{ className: classes.input }}
+        onChange={handleAssetNameChange}
+      />
+    : <Typography>{assetName}</Typography>
 }

src/components/AssetNameWithIcon.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import Box from '@material-ui/core/Box'
+import IconButton from '@material-ui/core/IconButton'
+import FullScreenExitIcon from '@material-ui/icons/FullscreenExit'
+import FullScreenIcon from '@material-ui/icons/Fullscreen'
+import AssetName from './AssetName'
+import AssetTypeSvgIcon from './AssetTypeSvgIcon'
+
+export default function AssetNameWithIcon(props) {
+  const {
+    asset,
+    expand,
+    setExpand,
+    showExpandButton = false,
+    isViewing = true } = props
+
+  return (
+    <Box display='flex' flex-direction='column' alignItems='center' style={{ width: '100%' }}>
+      <AssetTypeSvgIcon assetTypeCode={asset.typeCode} />
+      <Box flexGrow={1} style={{ overflowX: 'hidden' }} pl={1}>
+        <AssetName asset={asset} isEditing={!isViewing} />
+      </Box>
+      { showExpandButton && (
+        <IconButton style={{ padding: 0 }} onClick={() => {setExpand(!expand)}}>
+          {expand ?
+            <FullScreenExitIcon /> :
+            <FullScreenIcon />
+          }
+        </IconButton>)
+      }
+    </Box>
+  )
+}