Organization Location view done

inventory-manager/src/App.jsx

@@ -22,6 +22,7 @@ import OrganizationRoster from "./components/myorg/roster/OrganizationRoster";
 import OrganizationItems from "./components/myorg/items/OrganizationItems";
 import OrganizationItemDetails from "./components/myorg/items/OrganizationItemDetails";
 import OrganizationItemCreate from "./components/myorg/items/OrganizationItemCreate";
+import OrganizationLocations from "./components/myorg/location/OrganizationLocations";
 
 function App() {
   // const [token, setToken] = useState();
@@ -70,6 +71,9 @@ function App() {
         <Route element={<PrivateRoutes token={token} />}>
           <Route path="/organizations/:orgId/items/create" element={<OrganizationItemCreate token={token}/> } />
         </Route>
+        <Route element={<PrivateRoutes token={token} />}>
+          <Route path="/organizations/:orgId/locations" element={<OrganizationLocations token={token}/> } />
+        </Route>
         <Route path='*' element={<NotFound />}/>
         <Route path='/404' element={<NotFound />}/>
         {/*<Route path="/organizations/:orgId" element={<OrganizationDetails token={token}/>}>*/}

inventory-manager/src/components/myorg/OrganizationDetails.jsx

@@ -62,6 +62,10 @@ const OrganizationDetails = ({token}) => {
         }
 
     }
+    const handleLocationButtonClick = () => {
+        navigate(`/organizations/${orgId}/locations`);
+    };
+
     if (!organization) {
         return <div>Loading...</div>;
     }
@@ -80,7 +84,7 @@ const OrganizationDetails = ({token}) => {
                 <button className="blue-button" onClick={handleRosterButtonClick}>Roster</button>
                 <button className="blue-button">Requests</button>
                 <button className="blue-button" onClick={handleItemsButtonClick}>Items</button>
-                <button className="blue-button">Listings</button>
+                <button className="blue-button" onClick={handleLocationButtonClick}>Locations</button>
                 <button className="dark-red-button" onClick={handleLeaveButtonClick}>Leave Organization</button>
             </div>
         </div>

inventory-manager/src/components/myorg/location/OrganizationLocation.css

+.organization-locations {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.custom-ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.custom-li {
+    background-color: #f9f9f9;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.delete-button {
+    width: 20%;
+    padding: 8px;
+    background-color: #8b0000; /* Dark red color */
+    border: 1px solid #6b0000; /* Dark red border color */
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+}
+
+.delete-button:hover {
+    background-color: #6b0000; /* Dark red color on hover */
+}

inventory-manager/src/components/myorg/location/OrganizationLocations.jsx

+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import Axios from 'axios';
+import "./OrganizationLocation.css"
+const OrganizationLocations = ({ token }) => {
+    const { orgId } = useParams();
+    const [locations, setLocations] = useState([]);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [userType, setUserType] = useState('');
+
+    useEffect(() => {
+        const fetchLocations = async () => {
+            try {
+                const response = await Axios.post('http://localhost:8080/item/user/location', {
+                    orgId: parseInt(orgId),
+                    jwt: token.jwt,
+                });
+
+                if (response.data.result === 'success') {
+                    setLocations(response.data.data);
+                    setUserType(response.data.type);
+                } else {
+                    console.error('Error fetching locations');
+                }
+            } catch (error) {
+                console.error('Error fetching locations:', error);
+            }
+        };
+
+        fetchLocations();
+    }, [orgId, token]);
+
+    const handleDeleteLocation = async (locationId) => {
+        try {
+            const response = await Axios.post('http://localhost:8080/item/user/location/delete', {
+                orgId: parseInt(orgId),
+                jwt: token.jwt,
+                locationId: locationId,
+            });
+
+            if (response.data.result === 'success') {
+                // Update the locations list after deletion
+                setLocations(locations.filter(([_, id]) => id !== locationId));
+            } else {
+                console.error('Error deleting location');
+            }
+        } catch (error) {
+            console.error('Some unexpected error occurred:', error);
+        }
+    };
+
+    const filteredLocations = locations.filter(([locationName]) =>
+        locationName.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+
+    return (
+        <div className="organization-locations">
+            <h2>Organization Locations</h2>
+            <label>
+                Search Location:
+                <input
+                    type="text"
+                    value={searchTerm}
+                    onChange={(e) => setSearchTerm(e.target.value)}
+                />
+            </label>
+            <ul className="custom-ul">
+                {filteredLocations.map(([locationName, locationId]) => (
+                    <li key={locationId} className="custom-li">
+                        {locationName}
+                        {(userType === 'OWNER' || userType === 'MANAGER') && (
+                            <button onClick={() => handleDeleteLocation(locationId)} className="delete-button">
+                                Delete Location
+                            </button>
+                        )}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default OrganizationLocations;