Added Item Detailed view

inventory-manager/src/App.jsx

@@ -20,6 +20,7 @@ import OrganizationDetails from "./components/myorg/OrganizationDetails";
 import NotFound from "./components/error/NotFound";
 import OrganizationRoster from "./components/myorg/roster/OrganizationRoster";
 import OrganizationItems from "./components/myorg/items/OrganizationItems";
+import OrganizationItemDetails from "./components/myorg/items/OrganizationItemDetails";
 
 function App() {
   // const [token, setToken] = useState();
@@ -62,6 +63,9 @@ function App() {
         <Route element={<PrivateRoutes token={token} />}>
           <Route path="/organizations/:orgId/items" element={<OrganizationItems token={token}/> } />
         </Route>
+        <Route element={<PrivateRoutes token={token} />}>
+          <Route path="/organizations/:orgId/items/:itemId" element={<OrganizationItemDetails 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/items/OrganizationItemDetails.css

+/* OrganizationItemDetails.css */
+
+.organization-item-details {
+    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);
+    text-align: center; /* Center the entire content */
+}
+
+.item-details {
+    margin-top: 20px;
+}
+
+.item-details span {
+    display: block;
+    margin-bottom: 10px;
+    text-align: left; /* Align text to the left within each span */
+}

inventory-manager/src/components/myorg/items/OrganizationItemDetails.jsx

+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import Axios from 'axios';
+import './OrganizationItemDetails.css'
+const OrganizationItemDetails = ({ token }) => {
+    const { orgId, itemId } = useParams();
+    const [itemInfo, setItemInfo] = useState(null);
+
+    useEffect(() => {
+        const fetchItemDetails = async () => {
+            try {
+                const response = await Axios.post('http://localhost:8080/item/user/oneitem', {
+                    orgId: parseInt(orgId), // Convert orgId to integer
+                    jwt: token.jwt,
+                    itemId: parseInt(itemId), // Convert itemId to integer
+                });
+
+                if (response.data.result === 'success') {
+                    setItemInfo(response.data.data);
+                } else {
+                    console.error('Error fetching item information');
+                }
+            } catch (error) {
+                console.error('Error fetching item information:', error);
+            }
+        };
+
+        fetchItemDetails();
+    }, [orgId, itemId, token]);
+
+    if (!itemInfo) {
+        return <div>Loading...</div>;
+    }
+
+    return (
+        <div className="organization-item-details">
+            <h2>Item Details</h2>
+            <div className="item-details">
+                <span><strong>Name:</strong> {itemInfo[1]}</span>
+                <span><strong>Description:</strong> {itemInfo[2]}</span>
+                <span><strong>Owner Email:</strong> {itemInfo[3]}</span>
+                <span><strong>Quantity:</strong> {itemInfo[4]}</span>
+                <span><strong>Category:</strong> {itemInfo[5]}</span>
+                <span><strong>Status:</strong> {itemInfo[6]}</span>
+                <span><strong>Location:</strong> {itemInfo[9]}</span>
+            </div>
+        </div>
+    );
+};
+
+export default OrganizationItemDetails;

inventory-manager/src/components/myorg/items/OrganizationItems.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import Axios from 'axios';
 
 import './OrganizationItems.css'
-import {useParams} from "react-router-dom";
+import {useNavigate, useParams} from "react-router-dom";
 const OrganizationItems = ({ token }) => {
     // const [orgId, setOrgId] = useState(null);
     const [items, setItems] = useState([]);
@@ -14,6 +14,10 @@ const OrganizationItems = ({ token }) => {
     const [locationFilter, setLocationFilter] = useState('');
     const [quantityFilter, setQuantityFilter] = useState('');
     const [searchFilter, setSearchFilter] = useState('');
+    const navigate = useNavigate();
+    const handleItemClick = (item) => {
+        navigate(`/organizations/${orgId}/items/${item}`);
+    };
 
     useEffect(() => {
         const fetchData = async () => {
@@ -33,9 +37,11 @@ const OrganizationItems = ({ token }) => {
                     setLocations(['', ...uniqueLocations]);
                 } else {
                     console.error('Error fetching organization items');
+                    navigate('/404');
                 }
             } catch (error) {
                 console.error('Error fetching organization items:', error);
+                navigate('/404');
             }
         };
 
@@ -108,8 +114,8 @@ const OrganizationItems = ({ token }) => {
             <div className="items-list">
                 {filteredItems.length > 0 ? (
                     filteredItems.map((item, index) => (
-                        <div key={index} className="item-item">
-                            <div className="item-details">
+                        <div key={index} className="item-item" onClick={() => handleItemClick(item)}>
+                            <div className="item-details" >
                                 <span><strong>Name:</strong> {item[1]}</span>
                                 <span><strong>Description:</strong> {item[2]}</span>
                                 <span><strong>Owner Email:</strong> {item[3]}</span>

src/main/java/com/example/accessingdatamysql/item/CustomItemRepository.java

@@ -27,5 +27,16 @@ public class CustomItemRepository {
         return resultList;
     }
 
+    @Transactional
+    public Object getItem(Integer orgId, Integer itemId)
+    {
+        String nativeQuery = "SELECT I.*, L.location FROM ITEM I JOIN LOCATION L ON I.location_id = L.location_id WHERE I.organization_id = :orgId AND I.item_id = :itemId";
+        Query query = entityManager.createNativeQuery(nativeQuery)
+                .setParameter("orgId", orgId)
+                .setParameter("itemId", itemId);
+
+        return query.getSingleResult();
+    }
+
 
 }

src/main/java/com/example/accessingdatamysql/item/ItemController.java

@@ -86,6 +86,44 @@ public class ItemController {
         return response;
     }
 
+    @PostMapping(path="/user/oneitem")
+    public @ResponseBody Map<String, Object> getItemToken(@RequestBody Map<String, Object> json)
+    {
+        Map<String, Object> response = new HashMap<>();
+        System.out.println(json.entrySet());
+        if (!json.containsKey("orgId") || !json.containsKey("jwt") || !json.containsKey("itemId"))
+        {
+            response.put("result", "failure - bad request");
+            return response;
+        }
+        Map<String, Object> map = getUserOrg(json);
+        if (map.get("result").equals("success"))
+        {
+            Integer orgId = 0;
+            Integer itemId;
+            if (json.get("orgId") instanceof Integer)
+            {
+                orgId = (Integer) json.get("orgId");
+            }
+            else
+            {
+                orgId = Integer.parseInt((String)(json.get("orgId"))); }
+            if (json.get("itemId") instanceof Integer)
+                itemId = (Integer) json.get("itemId");
+            else
+                itemId = Integer.parseInt((String)(json.get("itemId")));
+            response.put("data", customItemRepository.getItem(orgId, itemId));
+            response.put("result", "success");
+            response.put("type", map.get("type"));
+        }
+        else
+        {
+            response.put("result", "failure - not authorized");
+        }
+        return response;
+    }
+
+
     /*
     Private helper function to validate that the user is supposed to see this data
      */