Minor Changes

eclipse-tractusx · Nov 16, 2023 · 98d51d2 · 98d51d2
1 parent 4ad8f83
commit 98d51d2
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 17 deletions.
diff --git a/demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupsList.tsx b/demand-capacity-mgmt-frontend/src/components/capacitygroup/CapacityGroupsList.tsx
@@ -26,6 +26,7 @@ import { Button, Col, Dropdown, Form, OverlayTrigger, Row, Tooltip } from 'react
 import { FaCopy, FaEllipsisV, FaEye, FaRedo } from 'react-icons/fa';
 import { LuStar } from 'react-icons/lu';
 import { CapacityGroupContext } from '../../contexts/CapacityGroupsContextProvider';
+import { CompanyContext } from '../../contexts/CompanyContextProvider';
 import { FavoritesContext } from "../../contexts/FavoritesContextProvider";
 import { useUser } from '../../contexts/UserContext';
 import '../../index.css';
@@ -52,6 +53,7 @@ const CapacityGroupsList: React.FC = () => {
   const [sortOrder, setSortOrder] = useState('asc');
   const [capacitygroupsPerPage, setcapacitygroupsPerPage] = useState(20); // Set the default value here
   const { addFavorite, fetchFavoritesByType, deleteFavorite } = useContext(FavoritesContext)!;
+  const { findCompanyByCompanyID } = useContext(CompanyContext)!;
   const [favoriteCapacityGroups, setFavoriteCapacityGroups] = useState<string[]>([]);
 
   const handleSort = (column: string) => {
@@ -247,15 +249,18 @@ const CapacityGroupsList: React.FC = () => {
         <div className="row">
           <div className="col-sm-6">
             <h3>{getUserGreeting(user)}!</h3>
+            <span className='text-muted'>{findCompanyByCompanyID(user?.companyID || '')?.companyName || ''}</span>
           </div>
           <div className="col-sm-6">
             <div className="row">
               <div className="col-sm-11">
                 <Search searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
               </div>
               <div className="col-sm-1">
-                <Button className='float-end' variant="primary" onClick={handleRefreshClick}>
-                  <FaRedo className="spin-on-hover" />
+                <Button className='float-end spin-on-hover' variant="primary" onClick={handleRefreshClick}>
+                  <span className="button-content">
+                    <FaRedo className="icon" />
+                  </span>
                 </Button>
               </div>
             </div>

diff --git a/demand-capacity-mgmt-frontend/src/components/dcm/AppComponent.tsx b/demand-capacity-mgmt-frontend/src/components/dcm/AppComponent.tsx
@@ -23,6 +23,7 @@
 import React from 'react';
 import { Route, Routes } from "react-router-dom";
 import CapacityGroupsProvider from '../../contexts/CapacityGroupsContextProvider';
+import CompanyContextProvider from '../../contexts/CompanyContextProvider';
 import DemandContextProvider from '../../contexts/DemandContextProvider';
 import EventsContextProvider from '../../contexts/EventsContextProvider';
 import FavoritesContextProvider from "../../contexts/FavoritesContextProvider";
@@ -53,10 +54,13 @@ const AppComponent: React.FC = () => {
                 <AuthenticatedRoute>
                     <FavoritesContextProvider>
                         <DemandContextProvider>
-                            <Layout>
-                                <Home />
-                                <QuickAcessItems />
-                            </Layout></DemandContextProvider>
+                            <CompanyContextProvider>
+                                <Layout>
+                                    <Home />
+                                    <QuickAcessItems />
+                                </Layout>
+                            </CompanyContextProvider>
+                        </DemandContextProvider>
                     </FavoritesContextProvider>
                 </AuthenticatedRoute>
 

diff --git a/demand-capacity-mgmt-frontend/src/components/demands/DemandManagement.tsx b/demand-capacity-mgmt-frontend/src/components/demands/DemandManagement.tsx
@@ -353,8 +353,10 @@ const DemandManagement: React.FC = () => {
                                 onClick={() => setShowAddModal(true)}>
                                 <span>New Material Demand</span>
                             </Button>)}
-                        <Button className='btn btn-primary' onClick={handleRefreshClick}>
-                            <FaRedo className="spin-on-hover" />
+                        <Button className='float-end spin-on-hover' variant="primary" onClick={handleRefreshClick}>
+                            <span className="button-content">
+                                <FaRedo className="icon" />
+                            </span>
                         </Button>
                     </div>
                 </div>

diff --git a/demand-capacity-mgmt-frontend/src/components/pages/EventsPage.tsx b/demand-capacity-mgmt-frontend/src/components/pages/EventsPage.tsx
@@ -199,8 +199,10 @@ function EventsPage() {
                                     </div>
                                     <div className="col-sm-6">
                                         <div className="float-end ms-3">
-                                            <Button className='mx-1' variant="primary" onClick={handleRefreshClick}>
-                                                <FaRedo className="spin-on-hover" />
+                                            <Button className='float-end spin-on-hover' variant="primary" onClick={handleRefreshClick}>
+                                                <span className="button-content">
+                                                    <FaRedo className="icon" />
+                                                </span>
                                             </Button>
                                             {user?.role === 'ADMIN' && (
                                                 <Button variant="danger" onClick={handleNukeClick}>

diff --git a/demand-capacity-mgmt-frontend/src/components/pages/TodoListPage.tsx b/demand-capacity-mgmt-frontend/src/components/pages/TodoListPage.tsx
@@ -109,8 +109,10 @@ function TodoListPage() {
                       />
                     </div>
                     <div className="col-sm-6">
-                      <Button className='btn btn-primary float-end ms-2' onClick={handleRefreshClick}>
-                        <FaRedo className="spin-on-hover" />
+                      <Button className='float-end spin-on-hover ms-2' variant="primary" onClick={handleRefreshClick}>
+                        <span className="button-content">
+                          <FaRedo className="icon" />
+                        </span>
                       </Button>
                       {user?.role === 'SUPPLIER' && (
                         <>

diff --git a/demand-capacity-mgmt-frontend/src/contexts/CompanyContextProvider.tsx b/demand-capacity-mgmt-frontend/src/contexts/CompanyContextProvider.tsx
@@ -39,6 +39,7 @@ export interface Company {
 interface CompanyContextData {
   companies: Company[];
   topCompanies: Company[];
+  findCompanyByCompanyID: (companyID: string) => Company | undefined;
 }
 
 export const CompanyContext = createContext<CompanyContextData | undefined>(undefined);
@@ -77,9 +78,13 @@ const CompanyContextProvider: React.FC<React.PropsWithChildren<{}>> = (props) =>
   }, [access_token]);
 
 
+  const findCompanyByCompanyID = (companyID: string | undefined): Company | undefined => {
+    return companies.find(company => company.id === companyID);
+  };
+
 
   return (
-    <CompanyContext.Provider value={{ companies, topCompanies }}>
+    <CompanyContext.Provider value={{ companies, topCompanies, findCompanyByCompanyID }}>
       {props.children}
     </CompanyContext.Provider>
   );

diff --git a/demand-capacity-mgmt-frontend/src/index.css b/demand-capacity-mgmt-frontend/src/index.css
@@ -318,6 +318,9 @@ code {
 }
 
 
+.spin-on-hover:hover .button-content {
+  animation: spin 0.7s ease-in-out infinite;
+}
 
 @keyframes spin {
   0% {
@@ -329,15 +332,17 @@ code {
   }
 }
 
-.spin-on-hover {
-  animation: spin 1s ease-in-out;
+.button-content {
+  display: inline-block;
   transform-origin: center;
+  /* Ensure the span takes the size of its content */
 }
 
-.spin-on-hover:hover {
-  animation: spin 1s ease-in-out infinite;
+.icon {
+  /* Any specific styling for your icon */
 }
 
+
 /* Admin Panel */
 .tabs-column {
   background-color: #f0f0f0;