Add ShowPermissions To User Icon

SAS/TMSS/frontend/tmss_webapp/src/App.js

 import  { Component } from 'react';
-import { Redirect, BrowserRouter as Router } from 'react-router-dom';
+import { Redirect, BrowserRouter as Router, withRouter  } from 'react-router-dom';
 
 import classNames from 'classnames';
-import { AppTopbar } from './layout/components/AppTopbar';
+import  AppTopbar  from './layout/components/AppTopbar';
 import AppMenu from './layout/components/AppMenu';
 import { RoutedContent } from './routes';
 import AppBreadcrumb from "./layout/components/AppBreadcrumb";
 import handleResponse from "./response.handler"
 import 'primeicons/primeicons.css';
-
 import 'primereact/resources/primereact.css';
 import 'primereact/resources/themes/nova/theme.css';
 import './layout/layout.scss';
@@ -24,6 +23,7 @@ import { CustomDialog } from './layout/components/CustomDialog';
 import AuthStore from './authenticate/auth.store';
 import { Provider } from "react-redux";
 import AuthComponent from './components/AuthComponent';
+import DateTimeInfo from './layout/components/DateTimeInfo';
 
 
 const { publish, subscribe } = pubsub();
@@ -69,6 +69,8 @@ class App extends Component {
             { label: 'Workflow', icon: 'pi pi-fw pi-sitemap', to: '/su/workflow', section: 'workflow', isBreadCrumbVisible: true,isDateTimeVisible:false },
             { label: 'Week View', icon: 'pi pi-fw pi-calendar-times', to: '/su/timelineview/week', section: 'su/timelineview/week', isBreadCrumbVisible: false ,isDateTimeVisible:true},
             { label: 'Reports', icon: 'pi pi-fw pi-chart-bar', to: '/reports', section: 'reports', isBreadCrumbVisible: false ,isDateTimeVisible:false},
+            { label: 'System Events', icon: 'pi pi-fw pi-bolt', to: '/systemevent/list', section: 'reports', isBreadCrumbVisible: false ,isDateTimeVisible:false},
+            
         ];
     }
     onWrapperClick() {
@@ -154,6 +156,7 @@ class App extends Component {
         }
     }
 
+  
     toggleEditToggle() {
         this.setState({ showEditDialog: !this.state.showEditDialog });
     }
@@ -249,7 +252,6 @@ class App extends Component {
                         <div className={wrapperClass}>
                             {/* Load main routes and application only if the application is authenticated */}
                                 {this.state.redirect &&
-                                    // <AuthComponent isLogin = {this.state.isLogin}>
                                     <AuthComponent>
                                         <AppTopbar
                                             onToggleMenu={this.onToggleMenu}

SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.js

@@ -20,7 +20,7 @@ const Auth = {
         }   else {
             //Keycloak authentication
             const res = await AuthService.getKeycloakAuthState();
-            if (res && res.is_authenticated) {
+            if (res?.is_authenticated) {
                 localStorage.setItem("loginType", 'Keycloak');
                 const cookies = document.cookie.split(';').reduce((prev, current) => {
                     const [name, value] = current.split(/\s?(.*?)=(.*)/).splice(1, 2);

SAS/TMSS/frontend/tmss_webapp/src/authenticate/auth.store.js

@@ -10,19 +10,7 @@ let permissionStack = {};
  */
 const rolePermissionReducer = (state, action) => {
     switch (action.type) {
-       /* case 'project': {
-            if(state && state['project']) {
-                delete state['project'];
-            }
-            return { ...state, project: permissionStack['project']};
-        }
-        case 'scheduleunit': {
-            if(state && state['scheduleunit']) {
-                delete state['scheduleunit'];
-            }
-            return { ...state, scheduleunit:permissionStack['scheduleunit']};
-        }*/
-        case 'loadpermission': {
+       case 'loadpermission': {
             permissionStack = action.payload;
             const keys = Object. keys(permissionStack);
             for ( const key of keys) {
@@ -43,10 +31,7 @@ const rolePermissionReducer = (state, action) => {
        
         default: {
             const actionType = action.type;
-            if (permissionStack && permissionStack[actionType]) {
-                //if(state && state[actionType]) {
-                  //delete state[actionType];
-               // }
+            if (permissionStack?.[actionType]) {
                 return { ...state, [actionType]:permissionStack[actionType]};
             }   else {
                 return  { ...state, rolePermission: {}};

SAS/TMSS/frontend/tmss_webapp/src/layout/components/AppTopbar.js

 
-import React, {Component} from 'react';
+import React, { useState}   from 'react';
 import 'primeicons/primeicons.css';
 import 'primereact/resources/themes/nova/theme.css';
 import 'primereact/resources/primereact.css';
@@ -8,64 +8,77 @@ import { PropTypes } from 'prop-types';
 import Auth from '../../authenticate/auth';
 import { FindObject } from './FindObject';
 import DateTimeInfo from "./DateTimeInfo";
-export class AppTopbar extends Component {
+import { Dialog } from 'primereact/dialog';
+import UserOverView from '../../routes/User/UserOverView';
 
+
+  /*
     constructor(props) {
         super(props);
         this.state = {
             username: Auth.getUser().name,
         };
     }
-        
-    static defaultProps = {
-        onToggleMenu: null
-    }
-    
-    static propTypes = {
-        onToggleMenu: PropTypes.func.isRequired,
-        isLoggedIn: PropTypes.bool,
-        isDateTimeVisible:PropTypes.bool,
-        setSearchField:PropTypes.func
-    }
-    
-    render() {
-        return (
+    */
+const AppTopbar = (props) => {
+  
+  
+    const [visible, setVisible] = useState(false);
+    const user = Auth.getUser();
+
+     return (
                 <div className="layout-wrapper layout-static layout-static-sidebar-inactive">
                     <div className="layout-topbar clearfix">
                         
-                        <button className="p-link layout-menu-button" onClick={this.props.onToggleMenu}>
+                        <button className="p-link layout-menu-button" onClick={props.onToggleMenu}>
 						<i className="pi pi-bars"></i></button>
                         <span className="header-title">TMSS</span>
                         <span className="header-by">by</span>
                         <span className="header-company">ASTRON</span>
                        
-                        {this.props.isLoggedIn &&
+                        {props.isLoggedIn &&
                         <React.Fragment>
                                 
-                            {this.props.isDateTimeVisible && 
+                            {props.isDateTimeVisible && 
                             <div className="top-date-bar">
                             <DateTimeInfo/>
                             </div>
                 }
-
-                            <div className="top-right-bar">
+                           <div className="top-right-bar">
                           
                                 <a className="p-link layout-menu-button" style= {{marginLeft: '8px', marginRight: '8px'}} title="Documentation"
                                 href="https://support.astron.nl/confluence/display/public/TMSS+User+Manual" target="_blank" rel="noreferrer ">
                                 <i className="pi pi-file-o"></i></a>
                                 <a className="p-link layout-menu-button"  title="Helpdesk" href="https://support.astron.nl/sdchelpdesk" target="_blank" rel="noreferrer ">
                                 <span><i className="pi pi-question-circle"></i></span></a>
-                                <button className="p-link layout-menu-button" onClick={this.props.onLogout} title="Logout">
+                                
+                                <button className="p-link layout-menu-button" onClick={props.onLogout} title="Logout">
                                 <i className="pi pi-power-off"></i></button>
-                                <span style= {{marginLeft: '8px'}}><i className="fa fa-user" title={`Logged in as ${this.state.username}`}></i></span>
+                                <button className="p-link layout-menu-button" onClick={() => setVisible(true)}  title={`Logged in as ${user?.name}`}>
+                                <i className="pi pi-user"></i></button>
                             </div>
+                               <Dialog header="TMSS User Permission" visible={visible} style={{ width: '50vw' }} onHide={() => setVisible(false)} maximizable >
+                                <UserOverView></UserOverView>
+                                    </Dialog>
+
                             </React.Fragment>
                         }
-                       <FindObject setSearchField={this.props.setSearchField} />
+                       <FindObject setSearchField={props.setSearchField} />
                     </div>
                         
                 </div>
 
         )
-    }
 }
+
+
+AppTopbar.propTypes = {
+    onToggleMenu: PropTypes.func.isRequired,
+    isLoggedIn: PropTypes.bool,
+    isDateTimeVisible:PropTypes.bool,
+    setSearchField:PropTypes.func,
+    onLogout:PropTypes.func,
+    username:PropTypes.string   
+}
+
+export default   AppTopbar 
\ No newline at end of file

SAS/TMSS/frontend/tmss_webapp/src/routes/User/UserOverView.js

+import { useState, useEffect } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import 'primereact/resources/themes/saga-blue/theme.css';
+import 'primereact/resources/primereact.min.css';
+import 'primeicons/primeicons.css';
+import Auth from '../../authenticate/auth.js';
+import PermissionStackUtil from '../../authenticate/permission.stack.handler';
+const UserOverView = () => {
+  const [permissions, setPermissions] = useState([]);
+
+  useEffect(() => {
+    const fetchData =  async () => {
+      try {
+        const user = Auth.getUser();
+        const userPermissions = await PermissionStackUtil.getPermissions(user);
+        const objectpermissions = Object.entries(userPermissions);
+
+        setPermissions(objectpermissions);
+      } catch (error) {
+        console.error('Error fetching user permissions:', error);
+      }
+    };
+
+    fetchData();
+  }, []); // The empty dependency array ensures that this effect runs once when the component mounts
+  
+  const checkMarkTemplate = (fieldvalue) => {
+    const classes = fieldvalue===true ? 'pi true-icon pi-check-circle' : '';
+    return <i className={classes}></i>;
+};
+
+
+
+
+
+  return (
+    <div>
+      <DataTable value={permissions} resizableColumns columnResizeMode="expand"  scrollable  showGridlines stripedRows >
+        <Column field="0" header="Module" frozen  />
+        <Column field="1.create" header="Create" dataType="boolean" body={(rowData ) => checkMarkTemplate(rowData[1].create)} />
+        <Column field="1.edit" header="Edit" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].edit)} />
+        <Column field="1.delete" header="Delete" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].delete)} />
+        <Column field="1.list" header="List" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].list)}  />
+        <Column field="1.add" header="Add" dataType="boolean" body={(rowData ) => checkMarkTemplate(rowData[1].add)}  />
+        <Column field="1.setting" header="Setting" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].setting)}  />
+        <Column field="1.canceltask" header="Cancel Task" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].canceltask)}  />
+        <Column field="1.addreservation" header="addreservation" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].addreservation)}  />
+        <Column field="1.addsystemevent" header="addsystemevent" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].addsystemevent)}  />
+        <Column field="1.listreservation" header="listreservation" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].listreservation)}  />
+        <Column field="1.listsystemevent" header="listsystemevent" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].listsystemevent)}  />
+        <Column field="1.decide_acceptance" header="decide_acceptance" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].decide_acceptance)}  />
+        <Column field="1.pi_verification" header="pi_verification" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].pi_verification)}  />
+        <Column field="1.qa_reporting_sos" header="qa_reporting_sos" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].qa_reporting_sos)}  />
+        <Column field="1.qa_reporting_to" header="qa_reporting_to" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].qa_reporting_to)}  />
+        <Column field="1.unpin_data" header="unpin_data" dataType="boolean"  body={(rowData ) => checkMarkTemplate(rowData[1].unpin_data)}   />
+      </DataTable>
+    </div>
+  );
+};
+
+export default UserOverView;

SAS/TMSS/frontend/tmss_webapp/src/routes/index.js

@@ -11,7 +11,8 @@ import { Scheduling } from './Scheduling';
 import { TaskEdit, TaskView, DataProduct, TaskList } from './Task';
 import ViewSchedulingUnit from './Scheduling/ViewSchedulingUnit'
 import SchedulingUnitCreate from './Scheduling/create';
-import EditSchedulingUnit from './Scheduling/edit';
+import  UserOverView from './User/UserOverView';
+import EditSchedulingUnit  from './Scheduling/edit';
 import { CycleList, CycleCreate, CycleView, CycleEdit } from './Cycle';
 import { ReservationCreate, ReservationList, ReservationView, ReservationEdit } from './Reservation';
 import { SystemEventCreate, SystemEventList, SystemEventView, SystemEventEdit } from './SystemEvent';
@@ -29,7 +30,9 @@ export const routes = [
     {
         path: "/not-found",
         component: NotFound,
-    }, {
+    },
+  
+    {
         path: "/access-denied",
         component: AccessDenied,
         name: 'Access Denied',
@@ -39,7 +42,15 @@ export const routes = [
         component: Dashboard,
         name: 'Dashboard',
         title: 'Dashboard'
-    }, {
+    },
+      {
+        path: "/useroverview",
+        component: UserOverView,
+        name: 'User Overview',
+        title: 'User Overview'
+    },
+    
+    {
         path: "/schedulingunit",
         component: Scheduling,
         name: 'Scheduling Unit',
@@ -267,7 +278,7 @@ export const RoutedContent = () => {
             <Toast ref={(el) => setAppGrowl(el)} />
             <Switch>
                 {/* <Redirect from="/" to="/" exact /> */}
-                {routes.map(routeProps => <ProtectedRoute {...routeProps} exact="true" key={(routeProps.path || routeProps.name) + '_switch'} />)}
+                {routes.map(routeProps => <ProtectedRoute {...routeProps} exact key={(routeProps.path || routeProps.name) + '_switch'} />)}
             </Switch>
         </>
     );