From 15e2d3a29b0d1a304965e34f114a911e5a7abdb3 Mon Sep 17 00:00:00 2001
From: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com>
Date: Mon, 20 Mar 2023 08:05:47 +0100
Subject: Odlux Update

Add eslint and custom icons update

Issue-ID: CCSDK-3871
Signed-off-by: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com>
Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586
Signed-off-by: highstreetherbert <herbert.eiselt@highstreet-technologies.com>
---
 .../apps/inventoryApp/src/views/dashboard.tsx      | 139 ++++++++++-----------
 1 file changed, 65 insertions(+), 74 deletions(-)

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

diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
index 284f70239..acd2c6216 100644
--- a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
+++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx
@@ -16,99 +16,93 @@
  * ============LICENSE_END==========================================================================
  */
 
-import * as React from 'react';
+import React from 'react';
 import { RouteComponentProps, withRouter } from 'react-router-dom';
 
-import connect, { IDispatcher, Connect } from "../../../../framework/src/flux/connect";
-import { IApplicationStoreState } from "../../../../framework/src/store/applicationStore";
-import { MaterialTable, MaterialTableCtorType, ColumnType } from "../../../../framework/src/components/material-table";
-import { AppBar, Tabs, Tab, MenuItem, Typography } from "@mui/material";
 import Refresh from '@mui/icons-material/Refresh';
-import { PanelId } from "../models/panelId";
-import { setPanelAction } from "../actions/panelActions";
+import { AppBar, MenuItem, Tab, Tabs, Typography } from '@mui/material';
 
-
-import { createConnectedNetworkElementsProperties, createConnectedNetworkElementsActions } from "../handlers/connectedNetworkElementsHandler";
-
-import { NetworkElementConnection } from "../models/networkElementConnection";
-
-import { InventoryType } from '../models/inventory';
-
-import { createInventoryElementsProperties, createInventoryElementsActions } from "../handlers/inventoryElementsHandler";
 import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions';
+import { ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
+import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
+
+import { loadAllInventoryDeviceListAsync } from '../actions/inventoryDeviceListActions';
 import { updateInventoryTreeAsyncAction } from '../actions/inventoryTreeActions';
+import { setPanelAction } from '../actions/panelActions';
 import RefreshInventoryDialog, { RefreshInventoryDialogMode } from '../components/refreshInventoryDialog';
+import { createInventoryElementsActions, createInventoryElementsProperties } from '../handlers/inventoryElementsHandler';
+import { InventoryType } from '../models/inventory';
+import { InventoryDeviceListType } from '../models/inventoryDeviceListType';
+import { PanelId } from '../models/panelId';
 
 const InventoryTable = MaterialTable as MaterialTableCtorType<InventoryType & { _id: string }>;
 
 const mapProps = (state: IApplicationStoreState) => ({
-  connectedNetworkElementsProperties: createConnectedNetworkElementsProperties(state),
   panelId: state.inventory.currentOpenPanel,
   inventoryElementsProperties: createInventoryElementsProperties(state),
-  inventoryElements: state.inventory.inventoryElements
+  inventoryElements: state.inventory.inventoryElements,
+  inventoryDeviceList: state.inventory.inventoryDeviceList.inventoryDeviceList,
 });
 
 const mapDispatch = (dispatcher: IDispatcher) => ({
-  connectedNetworkElementsActions: createConnectedNetworkElementsActions(dispatcher.dispatch),
   switchActivePanel: (panelId: PanelId) => {
     dispatcher.dispatch(setPanelAction(panelId));
   },
   inventoryElementsActions: createInventoryElementsActions(dispatcher.dispatch),
   navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)),
   updateInventoryTree: (mountId: string, searchTerm?: string) => dispatcher.dispatch(updateInventoryTreeAsyncAction(mountId, searchTerm)),
+  getAllInventoryDeviceList: async () => {
+    await dispatcher.dispatch(loadAllInventoryDeviceListAsync);
+  },
 });
 
 let treeViewInitialSorted = false;
 let inventoryInitialSorted = false;
 
-const ConnectedElementTable = MaterialTable as MaterialTableCtorType<NetworkElementConnection>;
+const InventoryDeviceListTable = MaterialTable as MaterialTableCtorType<InventoryDeviceListType>;
 
 type DashboardComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDispatch>;
 type DashboardComponentState = {
-  refreshInventoryEditorMode: RefreshInventoryDialogMode
-}
+  refreshInventoryEditorMode: RefreshInventoryDialogMode;
+};
 
 class DashboardSelectorComponent extends React.Component<DashboardComponentProps, DashboardComponentState> {
   constructor(props: DashboardComponentProps) {
     super(props);
 
     this.state = {
-      refreshInventoryEditorMode: RefreshInventoryDialogMode.None
+      refreshInventoryEditorMode: RefreshInventoryDialogMode.None,
     };
   }
 
   private onHandleTabChange = (event: React.SyntheticEvent, newValue: PanelId) => {
     this.onTogglePanel(newValue);
-  }
+  };
 
   private onTogglePanel = (panelId: PanelId) => {
     const nextActivePanel = panelId;
     this.props.switchActivePanel(nextActivePanel);
 
     switch (nextActivePanel) {
-      case 'InventoryElementsTable':
+      case 'Equipment':
 
         if (!inventoryInitialSorted) {
-          this.props.inventoryElementsActions.onHandleExplicitRequestSort("nodeId", "asc");
+          this.props.inventoryElementsActions.onHandleExplicitRequestSort('nodeId', 'asc');
           inventoryInitialSorted = true;
         } else {
           this.props.inventoryElementsActions.onRefresh();
 
         }
         break;
-      case 'TreeviewTable':
-        if (!treeViewInitialSorted) {
-          this.props.connectedNetworkElementsActions.onHandleExplicitRequestSort("nodeId", "asc");
-          treeViewInitialSorted = true;
-        } else {
-          this.props.connectedNetworkElementsActions.onRefresh();
-        }
+      case 'TreeView':
+        this.props.getAllInventoryDeviceList();
         break;
       case null:
         // do nothing if all panels are closed
         break;
       default:
-        console.warn("Unknown nextActivePanel [" + nextActivePanel + "] in connectView");
+        console.warn('Unknown nextActivePanel [' + nextActivePanel + '] in connectView');
         break;
     }
 
@@ -116,47 +110,47 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
 
   getContextMenu = (rowData: InventoryType) => {
     return [
-      <MenuItem aria-label={"inventory-button"} onClick={event => { this.props.updateInventoryTree(rowData.nodeId, rowData.uuid); this.props.navigateToApplication("inventory", rowData.nodeId) }}><Typography>View in Treeview</Typography></MenuItem>,
+      <MenuItem aria-label={'inventory-button'} onClick={() => { this.props.updateInventoryTree(rowData.nodeId, rowData.uuid); this.props.navigateToApplication('inventory', rowData.nodeId); }}><Typography>View in Treeview</Typography></MenuItem>,
     ];
 
-  }
+  };
 
   render() {
 
     const refreshInventoryAction = {
       icon: Refresh, tooltip: 'Refresh Inventory', ariaLabel: 'refresh', onClick: () => {
         this.setState({
-          refreshInventoryEditorMode: RefreshInventoryDialogMode.RefreshInventoryTable
+          refreshInventoryEditorMode: RefreshInventoryDialogMode.RefreshInventoryTable,
         });
-      }
+      },
     };
     const { panelId: activePanelId } = this.props;
     return (
       <>
         <AppBar enableColorOnDark position="static">
           <Tabs indicatorColor="secondary" textColor="inherit" value={activePanelId} onChange={this.onHandleTabChange} aria-label="inventory-app-tabs">
-            <Tab label="Table View" value="InventoryElementsTable" aria-label="table-tab" />
-            <Tab label="Tree view" value="TreeviewTable" aria-label="treeview-tab" />
+            <Tab label="Equipment" value="Equipment" aria-label="equipment-tab" />
+            <Tab label="Tree View" value="TreeView" aria-label="treeview-tab" />
           </Tabs>
         </AppBar>
 
         {
 
-          activePanelId === "InventoryElementsTable" &&
+          activePanelId === 'Equipment' &&
           <>
-            <InventoryTable stickyHeader title="Inventory" idProperty="_id" tableId="inventory-table" customActionButtons={[refreshInventoryAction]} columns={[
-              { property: "nodeId", title: "Node Name" },
-              { property: "manufacturerIdentifier", title: "Manufacturer" },
-              { property: "parentUuid", title: "Parent" },
-              { property: "uuid", title: "Name" },
-              { property: "serial", title: "Serial" },
-              { property: "version", title: "Version" },
-              { property: "date", title: "Date" },
-              { property: "description", title: "Description" },
-              { property: "partTypeId", title: "Part Type Id" },
-              { property: "modelIdentifier", title: "Model Identifier" },
-              { property: "typeName", title: "Type" },
-              { property: "treeLevel", title: "Containment Level" },
+            <InventoryTable stickyHeader idProperty="_id" tableId="inventory-table" customActionButtons={[refreshInventoryAction]} columns={[
+              { property: 'nodeId', title: 'Node Name' },
+              { property: 'manufacturerIdentifier', title: 'Manufacturer' },
+              { property: 'parentUuid', title: 'Parent' },
+              { property: 'uuid', title: 'Name' },
+              { property: 'serial', title: 'Serial' },
+              { property: 'version', title: 'Version' },
+              { property: 'date', title: 'Date' },
+              { property: 'description', title: 'Description' },
+              { property: 'partTypeId', title: 'Part Type Id' },
+              { property: 'modelIdentifier', title: 'Model Identifier' },
+              { property: 'typeName', title: 'Type' },
+              { property: 'treeLevel', title: 'Containment Level' },
             ]}  {...this.props.inventoryElementsActions} {...this.props.inventoryElementsProperties}
               createContextMenu={rowData => {
 
@@ -171,22 +165,20 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
 
         }
         {
-          activePanelId === "TreeviewTable" &&
-
-          <ConnectedElementTable stickyHeader tableId="treeview-networkelement-selection-table"
-            onHandleClick={(e, row) => {
-              this.props.navigateToApplication("inventory", row.nodeId);
-              this.props.updateInventoryTree(row.nodeId, '*');
-            }}
-            columns={[
-              { property: "nodeId", title: "Node Name", type: ColumnType.text },
-              { property: "isRequired", title: "Required", type: ColumnType.boolean },
-              { property: "host", title: "Host", type: ColumnType.text },
-              { property: "port", title: "Port", type: ColumnType.numeric },
-              { property: "coreModelCapability", title: "Core Model", type: ColumnType.text },
-              { property: "deviceType", title: "Type", type: ColumnType.text },
-            ]} idProperty="id" {...this.props.connectedNetworkElementsActions} {...this.props.connectedNetworkElementsProperties} asynchronus >
-          </ConnectedElementTable>
+          activePanelId === 'TreeView' &&
+          <>
+            <InventoryDeviceListTable stickyHeader tableId="treeview-networkelement-selection-table"
+              defaultSortColumn={'nodeId'} defaultSortOrder="asc"
+              onHandleClick={(e, row) => {
+                this.props.navigateToApplication('inventory', row.nodeId);
+                this.props.updateInventoryTree(row.nodeId, '*');
+              }}
+              rows={this.props.inventoryDeviceList} asynchronus
+              columns={[
+                { property: 'nodeId', title: 'Node Name', type: ColumnType.text },
+              ]} idProperty="nodeId" >
+            </InventoryDeviceListTable>
+          </>
         }
       </>
     );
@@ -194,15 +186,14 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps
 
   private onCloseRefreshInventoryDialog = () => {
     this.setState({
-      refreshInventoryEditorMode: RefreshInventoryDialogMode.None
+      refreshInventoryEditorMode: RefreshInventoryDialogMode.None,
     });
-  }
-  componentDidMount() {
+  };
 
+  componentDidMount() {
     if (this.props.panelId === null) { //set default tab if none is set
-      this.onTogglePanel("InventoryElementsTable");
+      this.onTogglePanel('Equipment');
     }
-
   }
 }
 
-- 
cgit 1.2.3-korg