From a579dbf70edda493894357b752b82fe4aec988c7 Mon Sep 17 00:00:00 2001
From: Sergio Figueiredo <informatic5.0@gmail.com>
Date: Thu, 26 Oct 2023 15:44:00 +0100
Subject: [PATCH] Edit form Css and AppComponents

---
 .../src/components/common/Search.tsx          |   3 +-
 .../src/components/dcm/AppComponent.tsx       |  54 ++--
 .../src/components/demands/DemandEditForm.tsx |   2 +-
 .../src/components/events/EventsTable.tsx     | 232 +++++++++---------
 4 files changed, 147 insertions(+), 144 deletions(-)

diff --git a/demand-capacity-mgmt-frontend/src/components/common/Search.tsx b/demand-capacity-mgmt-frontend/src/components/common/Search.tsx
index 12484cd0..3e0df4af 100644
--- a/demand-capacity-mgmt-frontend/src/components/common/Search.tsx
+++ b/demand-capacity-mgmt-frontend/src/components/common/Search.tsx
@@ -22,6 +22,7 @@
 import React from 'react';
 import Button from 'react-bootstrap/Button';
 import Form from 'react-bootstrap/Form';
+import { FaSearch } from 'react-icons/fa';
 
 type DemandsSearchProps = {
   searchQuery: string;
@@ -40,7 +41,7 @@ const DemandsSearch: React.FC<DemandsSearchProps> = ({ searchQuery, setSearchQue
         value={searchQuery}
         onChange={(e) => setSearchQuery(e.target.value)}
       />
-      <Button variant="outline-secondary">Search</Button>
+      <Button variant="outline-secondary"><FaSearch size={18} /></Button>
     </Form>
 
   );
diff --git a/demand-capacity-mgmt-frontend/src/components/dcm/AppComponent.tsx b/demand-capacity-mgmt-frontend/src/components/dcm/AppComponent.tsx
index b0ca3d1b..5c5b6423 100644
--- a/demand-capacity-mgmt-frontend/src/components/dcm/AppComponent.tsx
+++ b/demand-capacity-mgmt-frontend/src/components/dcm/AppComponent.tsx
@@ -21,10 +21,11 @@
  */
 
 import React from 'react';
-import {Route, Routes} from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import CapacityGroupsProvider from '../../contexts/CapacityGroupsContextProvider';
 import DemandContextProvider from '../../contexts/DemandContextProvider';
 import EventsContextProvider from '../../contexts/EventsContextProvider';
+import FavoritesContextProvider from "../../contexts/FavoritesContextProvider";
 import AuthenticatedRoute from "../../util/AuthenticatedRoute";
 import QuickAcessItems from '../common/QuickAcessItems';
 import AlertsPage from '../pages/AlertsPage';
@@ -34,18 +35,17 @@ import Home from "../pages/CapacityGroupPage";
 import DownStatusPage from '../pages/DownStatusPage';
 import ErrorPage from '../pages/ErrorPage';
 import EventsPage from "../pages/EventsPage";
+import FavoritesPage from "../pages/FavoritesPage";
 import TodoListPage from '../pages/TodoListPage';
 import UpStatusPage from '../pages/UpStatusPage';
 import Layout from './Layout';
-import FavoritesPage from "../pages/FavoritesPage";
-import FavoritesContextProvider from "../../contexts/FavoritesContextProvider";
 
 
 const AppComponent: React.FC = () => {
     return (
         <Routes>
-            <Route path="/login" element={<AuthenticationComponent/>}/>
-            <Route path="*" element={<ErrorPage/>}/>
+            <Route path="/login" element={<AuthenticationComponent />} />
+            <Route path="*" element={<ErrorPage />} />
 
             <Route path="/" element={
 
@@ -53,13 +53,13 @@ const AppComponent: React.FC = () => {
                     <FavoritesContextProvider>
                         <DemandContextProvider>
                             <Layout>
-                                <Home/>
-                                <QuickAcessItems/>
+                                <Home />
+                                <QuickAcessItems />
                             </Layout></DemandContextProvider>
                     </FavoritesContextProvider>
                 </AuthenticatedRoute>
 
-            }/>
+            } />
 
             <Route path="/details/:id" element={
                 <AuthenticatedRoute>
@@ -68,65 +68,65 @@ const AppComponent: React.FC = () => {
                             <Layout>
                                 <CapacityGroupsProvider>
                                     <EventsContextProvider>
-                                        <CapacityGroupDetailsPage/>
+                                        <CapacityGroupDetailsPage />
                                     </EventsContextProvider>
                                 </CapacityGroupsProvider>
                             </Layout></DemandContextProvider>
                     </FavoritesContextProvider>
                 </AuthenticatedRoute>
-            }/>
+            } />
             <Route path="/alerts" element={
                 <AuthenticatedRoute>
                     <FavoritesContextProvider>
                         <DemandContextProvider>
                             <Layout>
                                 <EventsContextProvider>
-                                    <AlertsPage/>
+                                    <AlertsPage />
                                 </EventsContextProvider>
                             </Layout>
                         </DemandContextProvider>
                     </FavoritesContextProvider>
                 </AuthenticatedRoute>
-            }/>
+            } />
             <Route path="/up" element={
                 <AuthenticatedRoute>
                     <FavoritesContextProvider>
                         <DemandContextProvider>
                             <Layout>
                                 <EventsContextProvider>
-                                    <UpStatusPage/>
+                                    <UpStatusPage />
                                 </EventsContextProvider>
                             </Layout>
                         </DemandContextProvider>
                     </FavoritesContextProvider>
                 </AuthenticatedRoute>
-            }/>
+            } />
             <Route path="/down" element={
                 <AuthenticatedRoute>
                     <FavoritesContextProvider>
                         <DemandContextProvider>
                             <Layout>
                                 <EventsContextProvider>
-                                    <DownStatusPage/>
+                                    <DownStatusPage />
                                 </EventsContextProvider>
                             </Layout>
                         </DemandContextProvider>
                     </FavoritesContextProvider>
                 </AuthenticatedRoute>
-            }/>
+            } />
             <Route path="/todo" element={
                 <AuthenticatedRoute>
                     <FavoritesContextProvider>
                         <DemandContextProvider>
                             <Layout>
                                 <EventsContextProvider>
-                                    <TodoListPage/>
+                                    <TodoListPage />
                                 </EventsContextProvider>
                             </Layout>
                         </DemandContextProvider>
                     </FavoritesContextProvider>
                 </AuthenticatedRoute>
-            }/>
+            } />
 
             <Route path="/events" element={
                 <AuthenticatedRoute>
@@ -134,25 +134,27 @@ const AppComponent: React.FC = () => {
                         <DemandContextProvider>
                             <Layout>
                                 <EventsContextProvider>
-                                    <EventsPage/>
+                                    <EventsPage />
                                 </EventsContextProvider>
                             </Layout>
                         </DemandContextProvider>
                     </FavoritesContextProvider>
                 </AuthenticatedRoute>
-            }/>
+            } />
 
             <Route path="/favorites" element={
                 <AuthenticatedRoute>
                     <DemandContextProvider>
-                        <Layout>
-                            <FavoritesContextProvider>
-                                <FavoritesPage/>
-                            </FavoritesContextProvider>
-                        </Layout>
+                        <FavoritesContextProvider>
+                            <Layout>
+
+                                <FavoritesPage />
+
+                            </Layout>
+                        </FavoritesContextProvider>
                     </DemandContextProvider>
                 </AuthenticatedRoute>
-            }/>
+            } />
         </Routes>
     );
 }
diff --git a/demand-capacity-mgmt-frontend/src/components/demands/DemandEditForm.tsx b/demand-capacity-mgmt-frontend/src/components/demands/DemandEditForm.tsx
index d7582f6d..cef2d1c4 100644
--- a/demand-capacity-mgmt-frontend/src/components/demands/DemandEditForm.tsx
+++ b/demand-capacity-mgmt-frontend/src/components/demands/DemandEditForm.tsx
@@ -255,7 +255,7 @@ const EditForm: React.FC<EditFormProps> = ({ theDemand, onCloseModal }) => {
 
       <Button variant="primary" type="submit">
         <div style={{ display: "flex", justifyContent: "center" }}>
-          <FiSave size={23} /> Save Changes
+          <FiSave size={23} style={{ margin: " 0 12 0 0px" }} /> Save Changes
         </div>
       </Button>
     </Form>
diff --git a/demand-capacity-mgmt-frontend/src/components/events/EventsTable.tsx b/demand-capacity-mgmt-frontend/src/components/events/EventsTable.tsx
index 2ae54f5d..fbd617f9 100644
--- a/demand-capacity-mgmt-frontend/src/components/events/EventsTable.tsx
+++ b/demand-capacity-mgmt-frontend/src/components/events/EventsTable.tsx
@@ -20,8 +20,8 @@
  * *******************************************************************************
  */
 
-import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
-import {Button, Col, Dropdown, Form, OverlayTrigger, Row, Tooltip} from 'react-bootstrap';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { Button, Col, Dropdown, Form, OverlayTrigger, Row, Tooltip } from 'react-bootstrap';
 import {
     FaArchive,
     FaArrowDown,
@@ -36,19 +36,19 @@ import {
     FaUnlink,
     FaWrench
 } from 'react-icons/fa';
-import {EventsContext} from '../../contexts/EventsContextProvider';
-import {EventProp} from '../../interfaces/event_interfaces';
-import DangerConfirmationModal, {ConfirmationAction} from '../common/DangerConfirmationModal';
+import { EventsContext } from '../../contexts/EventsContextProvider';
+import { FavoritesContext } from "../../contexts/FavoritesContextProvider";
+import { EventFavoriteResponse, FavoriteType } from "../../interfaces/Favorite_interface";
+import { EventProp } from '../../interfaces/event_interfaces';
+import DangerConfirmationModal, { ConfirmationAction } from '../common/DangerConfirmationModal';
 import Pagination from '../common/Pagination';
-import {EventFavoriteResponse, FavoriteType} from "../../interfaces/Favorite_interface";
-import {FavoritesContext} from "../../contexts/FavoritesContextProvider";
 
 interface EventsTableProps {
     events: EventProp[];
     isArchive: boolean
 }
 
-const EventsTable: React.FC<EventsTableProps> = ({events, isArchive}) => {
+const EventsTable: React.FC<EventsTableProps> = ({ events, isArchive }) => {
     const eventsContext = useContext(EventsContext)!;
     const [sortField, setSortField] = useState<string>('timestamp');
     const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
@@ -59,7 +59,7 @@ const EventsTable: React.FC<EventsTableProps> = ({events, isArchive}) => {
     const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false);
 
     const [deleteItemId, setDeleteItemId] = useState<string | null>(null);
-    const {deleteEventId, deleteArchivedEventId} = useContext(EventsContext)!;
+    const { deleteEventId, deleteArchivedEventId } = useContext(EventsContext)!;
     const { addFavorite, fetchFavoritesByType, deleteFavorite } = useContext(FavoritesContext)!;
     const [favoriteEvents, setFavoriteEvents] = useState<string[]>([]);
 
@@ -87,13 +87,13 @@ const EventsTable: React.FC<EventsTableProps> = ({events, isArchive}) => {
     };
 
     const eventTypeIcons: { [key: string]: React.ReactNode } = {
-        GENERAL_EVENT: <FaEnvelope className="text-primary" size={25}/>,
-        TODO: <FaWrench className="text-warning" size={25}/>,
-        ALERT: <FaExclamation className="text-danger" size={25}/>,
-        STATUS_IMPROVEMENT: <FaArrowUp className="text-success" size={25}/>,
-        STATUS_REDUCTION: <FaArrowDown className="text-danger" size={25}/>,
-        LINKED: <FaLink className="text-info" size={25}/>,
-        UN_LINKED: <FaUnlink className="text-danger" size={25}/>,
+        GENERAL_EVENT: <FaEnvelope className="text-primary" size={25} />,
+        TODO: <FaWrench className="text-warning" size={25} />,
+        ALERT: <FaExclamation className="text-danger" size={25} />,
+        STATUS_IMPROVEMENT: <FaArrowUp className="text-success" size={25} />,
+        STATUS_REDUCTION: <FaArrowDown className="text-danger" size={25} />,
+        LINKED: <FaLink className="text-info" size={25} />,
+        UN_LINKED: <FaUnlink className="text-danger" size={25} />,
     };
 
 
@@ -194,109 +194,109 @@ const EventsTable: React.FC<EventsTableProps> = ({events, isArchive}) => {
             <div className='table-responsive table-overflow-control mt-2'>
                 <table className="table table-striped table-hover">
                     <thead>
-                    <tr>
-                        <th></th>
-                        <th onClick={() => handleSort('timestamp')}>
-                            Timestamp {sortField === 'timestamp' ? (sortOrder === 'asc' ? <FaArrowUp/> :
-                            <FaArrowDown/>) : '-'}
-                        </th>
-                        <th onClick={() => handleSort('eventId')}>
-                            Event ID {sortField === 'eventId' ? (sortOrder === 'asc' ? <FaArrowUp/> :
-                            <FaArrowDown/>) : '-'}
-                        </th>
-                        <th onClick={() => handleSort('objectId')}>
-                            Object ID {sortField === 'objectId' ? (sortOrder === 'asc' ? <FaArrowUp/> :
-                            <FaArrowDown/>) : '-'}
-                        </th>
-                        <th onClick={() => handleSort('eventType')}>
-                            Type {sortField === 'eventType' ? (sortOrder === 'asc' ? <FaArrowUp/> :
-                            <FaArrowDown/>) : '-'}
-                        </th>
-                        <th onClick={() => handleSort('objectType')}>
-                            Object Type {sortField === 'objectType' ? (sortOrder === 'asc' ? <FaArrowUp/> :
-                            <FaArrowDown/>) : '-'}
-                        </th>
-                        <th onClick={() => handleSort('eventDescription')}>
-                            Description {sortField === 'eventDescription' ? (sortOrder === 'asc' ? <FaArrowUp/> :
-                            <FaArrowDown/>) : '-'}
-                        </th>
-                        <th onClick={() => handleSort('userAccount')}>
-                            User {sortField === 'userAccount' ? (sortOrder === 'asc' ? <FaArrowUp/> :
-                            <FaArrowDown/>) : '-'}
-                        </th>
-                        <th></th>
-                    </tr>
+                        <tr>
+                            <th></th>
+                            <th onClick={() => handleSort('timestamp')}>
+                                Timestamp {sortField === 'timestamp' ? (sortOrder === 'asc' ? <FaArrowUp /> :
+                                    <FaArrowDown />) : '-'}
+                            </th>
+                            <th onClick={() => handleSort('eventId')}>
+                                Event ID {sortField === 'eventId' ? (sortOrder === 'asc' ? <FaArrowUp /> :
+                                    <FaArrowDown />) : '-'}
+                            </th>
+                            <th onClick={() => handleSort('objectId')}>
+                                Object ID {sortField === 'objectId' ? (sortOrder === 'asc' ? <FaArrowUp /> :
+                                    <FaArrowDown />) : '-'}
+                            </th>
+                            <th onClick={() => handleSort('eventType')}>
+                                Type {sortField === 'eventType' ? (sortOrder === 'asc' ? <FaArrowUp /> :
+                                    <FaArrowDown />) : '-'}
+                            </th>
+                            <th onClick={() => handleSort('objectType')}>
+                                Object Type {sortField === 'objectType' ? (sortOrder === 'asc' ? <FaArrowUp /> :
+                                    <FaArrowDown />) : '-'}
+                            </th>
+                            <th onClick={() => handleSort('eventDescription')}>
+                                Description {sortField === 'eventDescription' ? (sortOrder === 'asc' ? <FaArrowUp /> :
+                                    <FaArrowDown />) : '-'}
+                            </th>
+                            <th onClick={() => handleSort('userAccount')}>
+                                User {sortField === 'userAccount' ? (sortOrder === 'asc' ? <FaArrowUp /> :
+                                    <FaArrowDown />) : '-'}
+                            </th>
+                            <th></th>
+                        </tr>
                     </thead>
                     <tbody>
-                    {currentEvents.map((event, index) => (
-                        <tr key={index}>
-                            <td>
-                                <FaStar
-                                    className={favoriteEvents.includes(event.logID) ? "text-warning" : "text-muted"}
-                                    opacity={favoriteEvents.includes(event.logID) ? "1" : "0.2"}
-                                    onClick={() => toggleFavorite(event.logID)}
-                                    size={25}
-                                />
-                            </td>
-                            <td>{new Date(event.timeCreated).toLocaleString()}</td>
-                            <td><OverlayTrigger
-                                placement="top"
-                                overlay={<Tooltip id={`tooltip-copy-${event.id}`}>{event.id}</Tooltip>}>
-                                <Button
-                                    variant="outline-info"
-                                    onClick={() => {
-                                        // Function to copy the internalId to the clipboard
-                                        navigator.clipboard.writeText(event.id.toString());
-                                    }}
-                                ><FaCopy/>
-                                </Button></OverlayTrigger></td>
-                            <td>
-                                {event.capacityGroupId !== "null" || event.materialDemandId !== "null" ? (
-                                    <OverlayTrigger
-                                        placement="top"
-                                        overlay={
-                                            <Tooltip id={`tooltip-copy-${event.id}`}>
-                                                {event.capacityGroupId !== "null" ? event.capacityGroupId : event.materialDemandId}
-                                            </Tooltip>
-                                        }
-                                    >
-                                        <Button
-                                            variant="outline-info"
-                                            onClick={() => {
-                                                // Function to copy the appropriate ID to the clipboard
-                                                const idToCopy = event.capacityGroupId !== "null" ? event.capacityGroupId : event.materialDemandId;
-                                                if (idToCopy !== "null") {
-                                                    navigator.clipboard.writeText(idToCopy.toString());
-                                                }
-                                            }}
+                        {currentEvents.map((event, index) => (
+                            <tr key={index}>
+                                <td>
+                                    <FaStar
+                                        className={favoriteEvents.includes(event.logID) ? "text-warning" : "text-muted"}
+                                        opacity={favoriteEvents.includes(event.logID) ? "1" : "0.2"}
+                                        onClick={() => toggleFavorite(event.logID)}
+                                        size={25}
+                                    />
+                                </td>
+                                <td>{new Date(event.timeCreated).toLocaleString()}</td>
+                                <td><OverlayTrigger
+                                    placement="top"
+                                    overlay={<Tooltip id={`tooltip-copy-${event.id}`}>{event.id}</Tooltip>}>
+                                    <Button
+                                        variant="outline-info"
+                                        onClick={() => {
+                                            // Function to copy the internalId to the clipboard
+                                            navigator.clipboard.writeText(event.id.toString());
+                                        }}
+                                    ><FaCopy />
+                                    </Button></OverlayTrigger></td>
+                                <td>
+                                    {event.capacityGroupId !== "null" || event.materialDemandId !== "null" ? (
+                                        <OverlayTrigger
+                                            placement="top"
+                                            overlay={
+                                                <Tooltip id={`tooltip-copy-${event.id}`}>
+                                                    {event.capacityGroupId !== "null" ? event.capacityGroupId : event.materialDemandId}
+                                                </Tooltip>
+                                            }
                                         >
-                                            <FaCopy/>
-                                        </Button>
-                                    </OverlayTrigger>
-                                ) : '-'}
-                            </td>
-                            <td>{generateOverlay(event)}</td>
-                            <td>{event.objectType}</td>
-                            <td>{event.eventDescription}</td>
-                            <td>{event.userAccount}</td>
-                            <td>
-                                <Dropdown>
-                                    <Dropdown.Toggle variant="light" id={`dropdown-menu-${event.id}`}>
-                                        <span><FaEllipsisV/></span>
-                                    </Dropdown.Toggle>
-                                    <Dropdown.Menu>
-                                        <Dropdown.Item onClick={() => handleArchiveClick(event)}><FaArchive
-                                            className='text-muted'/> Archive</Dropdown.Item>
-                                        <Dropdown.Item onClick={() => {
-                                            navigator.clipboard.writeText(event.id.toString())
-                                        }}><FaCopy/> Copy ID</Dropdown.Item>
-                                        <Dropdown.Item className="red-delete-item"
-                                                       onClick={() => handleDeleteButtonClick(event.id.toString())}><FaTrashAlt/> Delete</Dropdown.Item>
-                                    </Dropdown.Menu>
-                                </Dropdown>
-                            </td>
-                        </tr>
-                    ))}
+                                            <Button
+                                                variant="outline-info"
+                                                onClick={() => {
+                                                    // Function to copy the appropriate ID to the clipboard
+                                                    const idToCopy = event.capacityGroupId !== "null" ? event.capacityGroupId : event.materialDemandId;
+                                                    if (idToCopy !== "null") {
+                                                        navigator.clipboard.writeText(idToCopy.toString());
+                                                    }
+                                                }}
+                                            >
+                                                <FaCopy />
+                                            </Button>
+                                        </OverlayTrigger>
+                                    ) : '-'}
+                                </td>
+                                <td>{generateOverlay(event)}</td>
+                                <td>{event.objectType}</td>
+                                <td>{event.eventDescription}</td>
+                                <td>{event.userAccount}</td>
+                                <td>
+                                    <Dropdown>
+                                        <Dropdown.Toggle variant="light" id={`dropdown-menu-${event.id}`}>
+                                            <span><FaEllipsisV /></span>
+                                        </Dropdown.Toggle>
+                                        <Dropdown.Menu>
+                                            <Dropdown.Item onClick={() => handleArchiveClick(event)}><FaArchive
+                                                className='text-muted' /> Archive</Dropdown.Item>
+                                            <Dropdown.Item onClick={() => {
+                                                navigator.clipboard.writeText(event.id.toString())
+                                            }}><FaCopy /> Copy ID</Dropdown.Item>
+                                            <Dropdown.Item className="red-delete-item"
+                                                onClick={() => handleDeleteButtonClick(event.id.toString())}><FaTrashAlt /> Delete</Dropdown.Item>
+                                        </Dropdown.Menu>
+                                    </Dropdown>
+                                </td>
+                            </tr>
+                        ))}
                     </tbody>
                 </table>
             </div>