From 948204ee82cd6c2c0cedf2820eec0610a9df7185 Mon Sep 17 00:00:00 2001
From: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Date: Fri, 30 Jul 2021 09:03:14 +0200
Subject: Update InventoryApp

Fix several bugs and improve usability

Issue-ID: CCSDK-3395
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: I25a3badc2d179ccc99ffd38e860046dbfd771df1
---
 .../apps/inventoryApp/src/pluginInventory.tsx      | 56 +++++++++++++++++++++-
 1 file changed, 54 insertions(+), 2 deletions(-)

(limited to 'sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx')

diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx
index 665e085e6..50339c0ab 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/pluginInventory.tsx
@@ -21,16 +21,68 @@ import * as React from "react";
 import { withRouter, RouteComponentProps, Route, Switch, Redirect } from 'react-router-dom';
 import { faShoppingBag } from '@fortawesome/free-solid-svg-icons'; // select app icon
 import applicationManager from '../../../framework/src/services/applicationManager';
+import connect, { Connect, IDispatcher } from '../../../framework/src/flux/connect';
+import { IApplicationStoreState } from "../../../framework/src/store/applicationStore";
 
 import { InventoryTreeView } from './views/treeview';
-import Dashboard from "./views/dashboard";
+import Dashboard from './views/dashboard';
+
+import { PanelId } from "./models/panelId";
+import { SetPanelAction } from "./actions/panelActions";
 
 import inventoryAppRootHandler from './handlers/inventoryAppRootHandler';
+import { createInventoryElementsActions, createInventoryElementsProperties } from "./handlers/inventoryElementsHandler";
+import { createConnectedNetworkElementsProperties, createConnectedNetworkElementsActions } from "./handlers/connectedNetworkElementsHandler";
+
+let currentMountId: string | undefined = undefined;
+const mapProps = (state: IApplicationStoreState) => ({
+  inventoryProperties: createInventoryElementsProperties(state),
+  panelId: state.inventory.currentOpenPanel,
+  connectedNetworkElementsProperties: createConnectedNetworkElementsProperties(state),
+});
+
+const mapDisp = (dispatcher: IDispatcher) => ({
+  inventoryActions: createInventoryElementsActions(dispatcher.dispatch, true),
+  connectedNetworkElementsActions: createConnectedNetworkElementsActions(dispatcher.dispatch, true),
+  setCurrentPanel: (panelId: PanelId) => dispatcher.dispatch(new SetPanelAction(panelId)),
+});
+
+const InventoryTableApplicationRouteAdapter = connect(mapProps, mapDisp)((props: RouteComponentProps<{ mountId?: string }> & Connect<typeof mapProps, typeof mapDisp>) => {
+  if (currentMountId !== props.match.params.mountId) {
+    // route parameter has changed
+    currentMountId = props.match.params.mountId || undefined;
+    // Hint: This timeout is needed, since it is not recommended to change the state while rendering is in progress !
+    window.setTimeout(() => {
+      if (currentMountId) {
+        if (props.panelId) {
+          props.setCurrentPanel(props.panelId);
+        }
+        else {
+          props.setCurrentPanel("InventoryElementsTable");
+        }
+        props.inventoryActions.onFilterChanged("nodeId", currentMountId);
+        props.connectedNetworkElementsActions.onFilterChanged("nodeId", currentMountId);
+        if (!props.inventoryProperties.showFilter) {
+          props.inventoryActions.onToggleFilter(false);
+        }
+        if (!props.connectedNetworkElementsProperties.showFilter) {
+          props.connectedNetworkElementsActions.onToggleFilter(false);
+        }
+        props.inventoryActions.onRefresh();
+        props.connectedNetworkElementsActions.onRefresh();
+      }
+    });
+  }
+  return (
+    <Dashboard />
+  )
+});
 
 const App = withRouter((props: RouteComponentProps) => (
   <Switch>
+    <Route path={`${props.match.path}/dashboard/:mountId`} component={InventoryTableApplicationRouteAdapter} />
     <Route path={`${props.match.path}/:mountId`} component={InventoryTreeView} />
-    <Route path={`${props.match.path}`} component={Dashboard} /> 
+    <Route path={`${props.match.path}`} component={Dashboard} />
     <Redirect to={`${props.match.path}`} />
   </Switch>
 ));
-- 
cgit 1.2.3-korg