more database work, added search route, starting frontend new location form

frontend/src/components/cards/LocationCard.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Text, Button, Card, Group, Menu, Image, Badge } from '@mantine/core'
+import { useAtom } from 'jotai';
+import { useNavigate } from "react-router-dom";
+import { activePageAtom, roomFilterAtom, serverConfigAtom } from '../../state/main';
+
+
+
+function LocationCard(props) {
+    const {location, idx} = props
+    const [serverConfig] = useAtom(serverConfigAtom)
+    const [, setRoomsFilter] = useAtom(roomFilterAtom)
+    const [, setActivePage] = useAtom(activePageAtom)
+
+    const navigate = useNavigate();
+
+    const setRoomNumber = (rooms) => {
+        if (rooms === null) {
+          return <Text>0 Rooms</Text>
+        } else if (rooms.length > 1) {
+          return <Text>{rooms.length} Rooms</Text>
+        } else {
+          return <Text>1 Room</Text>
+        }
+      }
+
+    const navigateToRooms = (locationID, locationName) => {
+        setActivePage("rooms")
+        setRoomsFilter({"filterType": "location", "locationID": locationID, "commonName": "location", "metadata": locationName})
+        navigate("/rooms")
+    }
+
+
+    return (
+        <Card key={`${idx} - ${location.ID}`} shadow="md" padding="md">
+            <Card.Section>
+                {location.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${location.Name}/${location.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
+                <Group position='right' style={{position: 'absolute', top: '5px', right: '5px', backgroundColor: 'grey', borderRadius: '25%'}}>
+                    <Menu>
+                    <Menu.Label>Edit</Menu.Label>
+                    <Menu.Label>Delete</Menu.Label>
+                    </Menu>
+                </Group>
+
+            </Card.Section>
+            <Group position="apart">
+                <Text weight={500}>{location.Name}</Text>
+                <Badge variant="light">
+                    { setRoomNumber(location.Rooms) }  
+                </Badge>
+            </Group>
+            <Text size="sm">{location.Description}</Text>
+            <Group>
+                <Button onClick={() => navigateToRooms(location.ID, location.Name)}>View Details</Button>
+                <Button onClick={() => navigateToRooms(location.ID, location.Name)}>View Rooms</Button>
+            </Group>
+        </Card>
+    );
+}
+
+export default LocationCard;

frontend/src/components/cards/RoomCard.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Text, Button, Card, Group, Menu, Image, Badge } from '@mantine/core'
+import { useAtom } from 'jotai';
+import { useNavigate } from "react-router-dom";
+import { activePageAtom, roomFilterAtom, serverConfigAtom } from '../../state/main';
+
+
+
+function RoomCard(props) {
+    const {room, idx} = props
+    const [serverConfig] = useAtom(serverConfigAtom)
+    const [, setRoomsFilter] = useAtom(roomFilterAtom)
+    const [, setActivePage] = useAtom(activePageAtom)
+
+    const navigate = useNavigate();
+
+    const setItemAndCabinetNumber = (category, name) => {
+        if (category === null) {
+          return <Text>0 {name}s</Text>
+        } else if (category.length > 1) {
+          return <Text>{category.length} {name}s</Text>
+        } else {
+          return <Text>1 {name}</Text>
+        }
+      }
+
+    const navigateToCabinets = (roomID, roomName) => {
+        setActivePage("cabinets")
+        setRoomsFilter({"filterType": "room", "roomID": roomID, "commonName": "room", "metadata": roomName})
+        navigate("/cabinets")
+    }
+
+
+    return (
+        <Card key={`${idx} - ${room.ID}`} component="a" onClick={(e) => {}} shadow="sm" padding="md">
+        <Card.Section>
+            {room.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${room.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
+        </Card.Section>
+        <Group position="apart">
+            <Text weight={500}>{room.Name}</Text>
+            <Group>
+                <Badge color="pink" variant="light">
+                    {room.LocationName}
+                </Badge>
+                <Badge variant='light'>
+                    {setItemAndCabinetNumber(room.Cabinets, "Cabinet")}
+                </Badge>
+                <Badge color='teal' variant='light'>
+                    {setItemAndCabinetNumber(room.Items, "Item")}
+                </Badge>
+            </Group>
+        </Group>
+        <Text size="sm">{room.Description}</Text>
+        <Group>
+            <Button onClick={() => console.log("test")}>View Details</Button>
+            <Button onClick={() => navigateToCabinets(room.id, room.Name)}>View Cabinets</Button>
+            <Button onClick={() => console.log("test")}>View Items</Button>
+        </Group>
+    </Card>
+    );
+}
+
+export default RoomCard;

frontend/src/components/forms/LocationForm.js

@@ -0,0 +1,26 @@
+import React, {useState, useEffect} from 'react';
+import { Text, Title, TextInput, Button, NumberInput,  } from '@mantine/core'
+import { DatePicker } from '@mantine/dates';
+import { useForm } from '@mantine/form';
+import { useAtom } from 'jotai';
+import { serverConfigAtom } from '../../state/main'
+
+
+
+function LocationForm(props) {
+    const {location, modify: bool} = props
+    const [opened, setOpened] = useState(false);
+    const [serverConfig] = useAtom(serverConfigAtom)
+
+
+
+    return (
+        <>
+        <Title>Location Form</Title> 
+        <Text>This is the homepage!</Text>
+        </>
+
+    );
+}
+
+export default LocationForm;

frontend/src/components/pages/HomePage.js

@@ -1,5 +1,4 @@
 import React, {useState, useEffect, useContext, createContext} from 'react';
-import APIContext from '../../App';
 import { Text } from '@mantine/core'
 import { useAtom } from 'jotai';
 import { serverConfigAtom } from '../../state/main'

frontend/src/components/pages/Locations.js

@@ -1,25 +1,26 @@
-import React, {useState, useEffect, useContext, createContext} from 'react';
+import React, {useState, useEffect } from 'react';
 import { useAtom } from 'jotai'
-import { activePageAtom, roomFilterAtom, serverConfigAtom } from '../../state/main';
-import { Text, Loader, Center, Card, Image, Badge, Button, SimpleGrid, Group, Title } from '@mantine/core'
-import { useNavigate } from "react-router-dom";
+import { serverConfigAtom } from '../../state/main';
+import { HiPlus } from 'react-icons/hi'
+import {  Loader, Center, SimpleGrid, Title, Group, Button, Divider } from '@mantine/core'
+
 import { useNotifications } from '@mantine/notifications';
 
 
 import { backendAPI } from '../../services/backend-api';
+import LocationCard from '../cards/LocationCard';
 
 
-function LocationsPage(props) {
+function LocationsPage() {
     // const [opened, setOpened] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
     const [locations, setLocations] = useState([])
     const [serverConfig] = useAtom(serverConfigAtom)
-    const [, setRoomsFilter] = useAtom(roomFilterAtom)
-    const [, setActivePage] = useAtom(activePageAtom)
+
 
 
     const notifications = useNotifications();
-    const navigate = useNavigate();
+
 
     useEffect(() => {
         console.log("LOADING LOCATIONS PAGE!")
@@ -46,27 +47,12 @@ function LocationsPage(props) {
 
     }, [])
 
-    const navigateToRooms = (locationID, locationName) => {
-        setActivePage("rooms")
-        setRoomsFilter({"filterType": "location", "locationID": locationID, "commonName": "location", "metadata": locationName})
-        navigate("/rooms")
-    }
-
-    const setRoomNumber = (location) => {
-      if (location.Rooms === null) {
-        return <Text>0 Rooms</Text>
-      } else if (location.Rooms.length > 1) {
-        return <Text>{location.Rooms.length} Rooms</Text>
-      } else {
-        return <Text>1 Room</Text>
-      }
-    }
-
-
     return (
         <>
         <Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
         <Center><Title order={1}>Locations</Title></Center>
+        <Button leftIcon={<HiPlus />}>Add New Location</Button>
+        <Divider />
         <SimpleGrid 
           spacing="md"
           cols={4}
@@ -77,25 +63,9 @@ function LocationsPage(props) {
           ]}
         
         >
-              { locations.map((location, idx) => 
-                  <Card key={`${idx} - ${location.ID}`} shadow="md" padding="md">
-                      <Card.Section>
-                          {location.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${location.Name}/${location.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
-                      </Card.Section>
-                      <Group position="apart">
-                          <Text weight={500}>{location.Name}</Text>
-                          <Badge variant="light">
-                            { setRoomNumber(location) }  
-                          </Badge>
-                      </Group>
-                      <Text size="sm">{location.Description}</Text>
-                      <Group>
-                          <Button onClick={() => navigateToRooms(location.ID, location.Name)}>View Details</Button>
-                          <Button onClick={() => navigateToRooms(location.ID, location.Name)}>View Rooms</Button>
-                      </Group>
-
-                  </Card>
-              )}
+          { locations.map((location, idx) => 
+             <LocationCard location={location} idx={idx}></LocationCard>
+          )}
         </SimpleGrid>
         </>
 

frontend/src/components/pages/RoomsPage.js

@@ -6,6 +6,7 @@ import { useLocation } from "react-router-dom";
 import { useNotifications } from '@mantine/notifications';
 
 import { backendAPI } from '../../services/backend-api';
+import RoomCard from '../cards/RoomCard';
 
 
 function RoomsPage(props) {
@@ -27,7 +28,7 @@ function RoomsPage(props) {
             console.log("CURRENT STATE: ", state)
             // if we are filtering by location
             if (roomFilter.locationID) {
-                url = `rooms/${roomFilter.locationID}`
+                url = `locations/${roomFilter.locationID}/rooms`
             }
             backendAPI.get(url).then(results => {
                 console.log("ROOMS: ", results)
@@ -50,10 +51,10 @@ function RoomsPage(props) {
     }, [roomFilter])
 
     // Check if filter changes for this page and refresh results
-    useEffect(() => {
-        console.log("CURRENT ROOM FILTER: ", roomFilter)
+    // useEffect(() => {
+    //     console.log("CURRENT ROOM FILTER: ", roomFilter)
 
-    }, [roomFilter, setRoomFilter])
+    // }, [roomFilter, setRoomFilter])
 
     const removeFilterButton = (
         <ActionIcon size="xs" color="blue" radius="xl" variant="transparent">
@@ -83,30 +84,7 @@ function RoomsPage(props) {
           ]}
         >
             { rooms.map((room, idx) => 
-                <Card key={`${room.ID}`} component="a" onClick={(e) => {}} shadow="sm" padding="md">
-                    <Card.Section>
-                        {room.CoverPhoto ? <Image src={`${serverConfig.baseURL}/photos/locations/${room.CoverPhoto}`}></Image> : <Text>No Photo</Text>}
-                    </Card.Section>
-                    <Group position="apart">
-                        <Text weight={500}>{room.Name}</Text>
-                        <Group>
-                            <Badge color="pink" variant="light">
-                                {room.LocationName}
-                            </Badge>
-                            <Badge variant='light'>
-                                {room.Cabinets === null ? 0 : room.Cabinets.length} Cabinets
-                            </Badge>
-                            <Badge color='teal' variant='light'>
-                                {room.Cabinets === null ? 0 : room.Cabinets.length} Items
-                            </Badge>
-                        </Group>
-                    </Group>
-                    <Text size="sm">{room.Description}</Text>
-                    <Group>
-                        <Button onClick={() => console.log("test")}>View Details</Button>
-                        <Button onClick={() => console.log("test")}>View Rooms</Button>
-                    </Group>
-                </Card>
+               <RoomCard room={room} idx={idx}></RoomCard>
             )}
         </SimpleGrid>
         </>