From 7f083b47c2e2333819823fd7835332a0f486b626 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 21 Jul 2021 17:31:45 +0200
Subject: feat(ui): Toggle to Floor Plan on room select

---
 .../src/components/topologies/RoomTable.js         |  7 +++---
 .../src/components/topologies/TopologyOverview.js  |  5 ++--
 .../projects/[project]/topologies/[topology].js    | 29 +++++++++++-----------
 3 files changed, 20 insertions(+), 21 deletions(-)

(limited to 'opendc-web')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
index 8a5c401f..9bf369e9 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/RoomTable.js
@@ -4,15 +4,13 @@ import React from 'react'
 import { useDispatch } from 'react-redux'
 import { useTopology } from '../../data/topology'
 import { Table, TableBody, TableHeader } from '@patternfly/react-table'
-import { goToRoom } from '../../redux/actions/interaction-level'
 import { deleteRoom } from '../../redux/actions/topology/room'
 import TableEmptyState from '../util/TableEmptyState'
 
-function RoomTable({ topologyId }) {
+function RoomTable({ topologyId, onSelect }) {
     const dispatch = useDispatch()
     const { status, data: topology } = useTopology(topologyId)
 
-    const onClick = (room) => dispatch(goToRoom(room._id))
     const onDelete = (room) => dispatch(deleteRoom(room._id))
 
     const columns = ['Name', 'Tiles', 'Racks']
@@ -24,7 +22,7 @@ function RoomTable({ topologyId }) {
                   return [
                       {
                           title: (
-                              <Button variant="link" isInline onClick={() => onClick(room)}>
+                              <Button variant="link" isInline onClick={() => onSelect(room)}>
                                   {room.name}
                               </Button>
                           ),
@@ -65,6 +63,7 @@ function RoomTable({ topologyId }) {
 
 RoomTable.propTypes = {
     topologyId: PropTypes.string,
+    onSelect: PropTypes.func,
 }
 
 export default RoomTable
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
index 761e7f9a..213a4868 100644
--- a/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
+++ b/opendc-web/opendc-web-ui/src/components/topologies/TopologyOverview.js
@@ -38,7 +38,7 @@ import { useTopology } from '../../data/topology'
 import { parseAndFormatDateTime } from '../../util/date-time'
 import RoomTable from './RoomTable'
 
-function TopologyOverview({ topologyId }) {
+function TopologyOverview({ topologyId, onSelect }) {
     const { data: topology } = useTopology(topologyId)
     return (
         <Grid hasGutter>
@@ -71,7 +71,7 @@ function TopologyOverview({ topologyId }) {
                 <Card>
                     <CardTitle>Rooms</CardTitle>
                     <CardBody>
-                        <RoomTable topologyId={topologyId} />
+                        <RoomTable topologyId={topologyId} onSelect={(room) => onSelect('room', room)} />
                     </CardBody>
                 </Card>
             </GridItem>
@@ -81,6 +81,7 @@ function TopologyOverview({ topologyId }) {
 
 TopologyOverview.propTypes = {
     topologyId: PropTypes.string,
+    onSelect: PropTypes.func,
 }
 
 export default TopologyOverview
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
index c2753144..ae26ae83 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js
@@ -24,7 +24,7 @@ import { useRouter } from 'next/router'
 import TopologyOverview from '../../../../components/topologies/TopologyOverview'
 import { useProject } from '../../../../data/project'
 import { useDispatch } from 'react-redux'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { AppPage } from '../../../../components/AppPage'
 import {
@@ -42,6 +42,7 @@ import {
 } from '@patternfly/react-core'
 import BreadcrumbLink from '../../../../components/util/BreadcrumbLink'
 import TopologyMap from '../../../../components/topologies/TopologyMap'
+import { goToRoom } from '../../../../redux/actions/interaction-level'
 import { openTopology } from '../../../../redux/actions/topologies'
 
 /**
@@ -61,8 +62,6 @@ function Topology() {
     }, [topologyId, dispatch])
 
     const [activeTab, setActiveTab] = useState('overview')
-    const overviewRef = useRef(null)
-    const floorPlanRef = useRef(null)
 
     const breadcrumb = (
         <Breadcrumb>
@@ -95,31 +94,31 @@ function Topology() {
                     onSelect={(_, tabIndex) => setActiveTab(tabIndex)}
                     className="pf-m-page-insets"
                 >
-                    <Tab
-                        eventKey="overview"
-                        title={<TabTitleText>Overview</TabTitleText>}
-                        tabContentId="overview"
-                        tabContentRef={overviewRef}
-                    />
+                    <Tab eventKey="overview" title={<TabTitleText>Overview</TabTitleText>} tabContentId="overview" />
                     <Tab
                         eventKey="floor-plan"
                         title={<TabTitleText>Floor Plan</TabTitleText>}
                         tabContentId="floor-plan"
-                        tabContentRef={floorPlanRef}
                     />
                 </Tabs>
             </PageSection>
             <PageSection padding={activeTab === 'floor-plan' && { default: 'noPadding' }} isFilled>
-                <TabContent eventKey="overview" id="overview" ref={overviewRef} aria-label="Overview tab">
-                    <TopologyOverview topologyId={topologyId} />
+                <TabContent id="overview" aria-label="Overview tab" hidden={activeTab !== 'overview'}>
+                    <TopologyOverview
+                        topologyId={topologyId}
+                        onSelect={(type, obj) => {
+                            if (type === 'room') {
+                                dispatch(goToRoom(obj._id))
+                                setActiveTab('floor-plan')
+                            }
+                        }}
+                    />
                 </TabContent>
                 <TabContent
-                    eventKey="floor-plan"
                     id="floor-plan"
-                    ref={floorPlanRef}
                     aria-label="Floor Plan tab"
                     className="pf-u-h-100"
-                    hidden
+                    hidden={activeTab !== 'floor-plan'}
                 >
                     <TopologyMap />
                 </TabContent>
-- 
cgit v1.2.3