deranjer/goInventorize
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

working on location form, dropzone and previews

Browse Source
This commit is contained in:
deranjer
2022-07-31 22:13:39 -04:00
parent bd6319b6b1
commit cf6e40db56
8 changed files with 368 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/App.js
View File

@@ -8,7 +8,7 @@ import NotFound from './components/pages/NotFound';
import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'
import { Modal, Button, Text, Group, TextInput, Loader, AppShell, MediaQuery } from '@mantine/core';
import { useDebouncedValue, useLocalStorageValue } from '@mantine/hooks';
import { useNotifications } from '@mantine/notifications';
import { showNotification } from '@mantine/notifications';
import { backendAPI, defaultURLS } from './services/backend-api';
@@ -27,7 +27,7 @@ function App() {
const [, setServerConfig] = useAtom(serverConfigAtom)
const notifications = useNotifications();
// const navigate = useNavigate();
@@ -41,14 +41,14 @@ function App() {
results.data.baseURL = defaultURLS.baseURL
console.log("CONFIG: ", results.data)
setServerConfig(results.data)
notifications.showNotification({
showNotification({
title: 'Backend Notice',
message: 'Config fetched from backend!',
color: "green"
})
setIsLoading(false)
}).catch(err => {
notifications.showNotification({
showNotification({
title: 'Backend Notice',
message: `Failed to connect to backend! ${err}`,
autoClose: false,
@@ -74,11 +74,11 @@ function App() {
>
<Routes>
<Route path='*' element={<NotFound />} />
<Route index element={<HomePage />} />
<Route index element={<HomePage />}/>
<Route path="locations">
<Route index element={<LocationsPage />} />
<Route path=":id" element={<LocationDetailsPage />} />
<Route path="new" element={<LocationForm />} />
<Route path="new" element={<LocationForm />}/>
</Route>
<Route path="rooms">
<Route index element={<RoomsPage />} />

72
frontend/src/components/CustomDropZone.js Normal file
View File

@@ -0,0 +1,72 @@
import React from 'react';
import { Text, Group, useMantineTheme } from '@mantine/core'
import { BsCardImage, BsCloudUpload, BsXLg } from 'react-icons/bs'
import { Dropzone } from '@mantine/dropzone';
import { showNotification } from '@mantine/notifications';
function CustomDropZone(props) {
const {uploadText1, uploadText2, uploadFormat, maxSize, multipleFiles, returnFiles} = props
const theme = useMantineTheme();
const handleFileRejections = (fileRejections) => {
let message = ""
let fileName = ""
if ((fileRejections.length > 1) && (!multipleFiles)) {
showNotification({color: 'red', title: "Too many Files!", message: "Only a single photo is allowed for the coverphoto!"})
return
}
fileName = fileRejections[0].file.name
const errors = fileRejections[0].errors
errors.forEach(error => {
message = message + `${error.message} \n\n`
})
showNotification({color: 'red', title: `Error accepting file: ${fileName}`, message: message})
}
return (
<Dropzone
onDrop={(files) => returnFiles(files)}
onReject={(fileRejections) => handleFileRejections(fileRejections)}
maxSize={maxSize}
multiple={multipleFiles}
accept={uploadFormat}
>
<Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
<Dropzone.Accept>
<BsCloudUpload
size={50}
stroke={1.5}
color={theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]}
/>
</Dropzone.Accept>
<Dropzone.Reject>
<BsXLg
size={50}
stroke={1.5}
color={theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]}
/>
</Dropzone.Reject>
<Dropzone.Idle>
<BsCardImage size={50} stroke={1.5} />
</Dropzone.Idle>
<div>
<Text size="xl" inline>
{uploadText1}
</Text>
<Text size="sm" color="dimmed" inline mt={7}>
{uploadText2}
</Text>
</div>
</Group>
</Dropzone>
);
}
export default CustomDropZone;

4
frontend/src/components/SideBar.js
View File

@@ -5,7 +5,7 @@ import { BiCabinet } from 'react-icons/bi'
import { LinksGroup } from './sidebar/SidebarLinksGroup';
const sideBarData = [
{ label: 'Dashboard', icon: GoDashboard, link: {label: 'Dashboard', link: '/'}},
{ label: 'Dashboard', icon: GoDashboard, link: "/"},
{
label: 'Locations',
icon: GoLocation,
@@ -29,7 +29,7 @@ const sideBarData = [
},
{ label: 'Cabinets', icon: BiCabinet, link: "/" },
{ label: 'Items', icon: BsDiagram2, link: "/" },
{ label: 'Settings', icon: GoGear, link: '/' },
{ label: 'Settings', icon: GoGear, link: '/settings' },
];
const useStyles = createStyles((theme) => ({

2
frontend/src/components/cards/LocationCard.js
View File

@@ -52,7 +52,7 @@ function LocationCard(props) {
</Group>
<Text size="sm">{location.Description}</Text>
<Group>
<Button component={Link} to={`/location/${location.ID}`} state={{ location: location }}>View Details</Button>
<Button component={Link} to={`/locations/${location.ID}`} state={{ location: location }}>View Details</Button>
<Button onClick={() => navigateToRooms(location.ID, location.Name)}>View Rooms</Button>
</Group>
</Card>

132
frontend/src/components/forms/LocationForm.js
View File

@@ -1,12 +1,13 @@
import React, {useState, useEffect} from 'react';
import { Text, Title, TextInput, Button, NumberInput, Textarea, Grid, Group, useMantineTheme, MantineTheme } from '@mantine/core'
import { Text, Title, TextInput, Button, NumberInput, Textarea, Grid, Group, useMantineTheme, MantineTheme, Image, SimpleGrid } from '@mantine/core'
import { DatePicker } from '@mantine/dates';
import dayjs from 'dayjs';
import { useForm } from '@mantine/form';
import { useAtom } from 'jotai';
import { serverConfigAtom } from '../../state/main'
import { backendAPI } from '../../services/backend-api';
import { BsCardImage, BsCloudUpload, BsXLg } from 'react-icons/bs'
import { Dropzone, DropzoneStatus, IMAGE_MIME_TYPE, PDF_MIME_TYPE } from '@mantine/dropzone';
import { IMAGE_MIME_TYPE } from '@mantine/dropzone';
import CustomDropZone from '../CustomDropZone';
@@ -14,6 +15,11 @@ function LocationForm(props) {
const {location, modify: bool} = props
const [opened, setOpened] = useState(false);
const [serverConfig] = useAtom(serverConfigAtom)
// Cover Photo
const [coverPhoto, setCoverPhoto] = useState(null)
// Additional Photos
const [additionalPhotos, setAdditionalPhotos] = useState([])
const theme = useMantineTheme();
@@ -38,9 +44,6 @@ function LocationForm(props) {
},
});
// useEffect(() => {
// console.log("FORM", form)
// }, [form])
const submitNewLocation = (values) => {
@@ -63,44 +66,41 @@ function LocationForm(props) {
console.log("Error adding new location!", err)
})
}
function ImageUploadIcon({status, ...props}) {
if (status.accepted) {
return <BsCloudUpload {...props} />;
}
if (status.rejected) {
return <BsXLg {...props} />;
}
return <BsCardImage {...props} />;
}
const handleFileAccept = (files) => {
form.setFieldValue('CoverPhoto', files[0])
const imageUrl = URL.createObjectURL(files[0]);
setCoverPhoto(
<Image
key={"coverPhoto"}
src={imageUrl}
imageProps={{ onLoad: () => URL.revokeObjectURL(imageUrl) }}
/>
)
}
function getIconColor(status, theme) {
return status.accepted
? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
: status.rejected
? theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]
: theme.colorScheme === 'dark'
? theme.colors.dark[0]
: theme.colors.gray[7];
}
const handleAdditionalPhotos = (files) => {
setAdditionalPhotos(oldPhotos => [...oldPhotos, ...files])
// setAdditionalPhotos(files)
console.log("FORM VALUES: ",form.values)
const oldValues = form.values['AdditionalPhotos']
form.setFieldValue('AdditionalPhotos', [...oldValues, ...files])
console.log("NEW FORM VALUES: ", form.values)
const dropzoneChildren = (status, theme, multiple) => (
<Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
<ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} />
<div>
<Text size="xl" inline>
Drag images here or click to select file{multiple ? "s" : ""}
</Text>
<Text size="sm" color="dimmed" inline mt={7}>
Attach as many files as you like, each file should not exceed 5mb
</Text>
</div>
</Group>
);
}
const previews = additionalPhotos.map((file, index) => {
console.log("FILE IS: ", file)
const imageUrl = URL.createObjectURL(file);
return (
<Image
key={index}
src={imageUrl}
imageProps={{ onLoad: () => URL.revokeObjectURL(imageUrl) }}
/>
)
})
return (
<>
@@ -116,37 +116,47 @@ function LocationForm(props) {
<NumberInput label="Square Feet" value={form.values.SquareFeet} {...form.getInputProps('SquareFeet')} />
<TextInput label="Latitude" value={form.values.Latitude} {...form.getInputProps('Latitude')} />
<TextInput label="Longitude" value={form.values.Longitude} {...form.getInputProps('Longitude')}/>
<TextInput label="Date Purchased" value={form.values.DatePurchased} {...form.getInputProps('DatePurchased')} />
<DatePicker
label="Date Purchased"
value={form.values.DatePurchased}
maxDate={dayjs(new Date()).add(1, 'days').toDate()}
{...form.getInputProps('DatePurchased')}
/>
<TextInput label="Purchase Price" value={form.values.PurchasePrice} {...form.getInputProps('PurchasePrice')}/>
<TextInput label="Current Value" value={form.values.CurrentValue} {...form.getInputProps('CurrentValue')}/>
<Group><Title order={4}>Location Cover Photo </Title><Text color="red">*</Text></Group>
<Dropzone
onDrop={(files) => form.setFieldValue('CoverPhoto', files[0])}
onReject={(files) => console.log('rejected files', files)}
{coverPhoto ?
coverPhoto
:
<CustomDropZone
uploadText1={"Drag Image Here or click to select File"}
uploadText2={"Single File, max size: 5mb"}
uploadFormat={IMAGE_MIME_TYPE}
maxSize={3 * 1024 ** 2}
multiple={false}
accept={IMAGE_MIME_TYPE}
>
{(status) => dropzoneChildren(status, theme, false)}
</Dropzone>
multipleFiles={false}
returnFiles={handleFileAccept}
/>
}
<Title order={4}>Additional Location Photos</Title>
<Dropzone
onDrop={(files) => form.setFieldValue('AdditionalPhotos', files)}
onReject={(files) => console.log('rejected files', files)}
<CustomDropZone
uploadText1={"Drag Images Here or click to select Files"}
uploadText2={"Multiple Files, max size per file: 5mb"}
uploadFormat={IMAGE_MIME_TYPE}
maxSize={3 * 1024 ** 2}
multiple={true}
accept={PDF_MIME_TYPE}
getInputProps={{"capture": "environment"}}
multipleFiles={true}
returnFiles={handleAdditionalPhotos}
/>
<SimpleGrid
cols={4}
breakpoints={[{ maxWidth: 'sm', cols: 1 }]}
mt={previews.length > 0 ? 'xl' : 0}
>
{(status) => dropzoneChildren(status, theme, true)}
</Dropzone>
{previews}
</SimpleGrid>
<Button type="submit">Submit</Button>
</Grid.Col>
</Grid>
</form>
</>

2
frontend/src/components/pages/LocationsPage.js
View File

@@ -53,7 +53,7 @@ function LocationsPage() {
<>
<Center>{ isLoading && <Loader size="xl" variant="bars" />}</Center>
<Center><Title order={1}>Locations</Title></Center>
<Button leftIcon={<HiPlus />} onClick={(e) => {navigate("/locations/new")}}>Add New Location</Button>
<Button mb="lg" leftIcon={<HiPlus />} onClick={(e) => {navigate("/locations/new")}}>Add New Location</Button>
<SimpleGrid
spacing="md"
cols={4}

37
frontend/src/components/sidebar/SidebarLinksGroup.js
View File

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import { Group, Box, Collapse, ThemeIcon, Text, UnstyledButton, createStyles } from '@mantine/core';
import { BiChevronLeft, BiChevronRight } from 'react-icons/bi';
import { NavLink, useLocation } from 'react-router-dom';
import { NoEncryption } from '@material-ui/icons';
const useStyles = createStyles((theme, _params, getRef) => {
const icon = getRef('icon');
@@ -13,6 +14,7 @@ const useStyles = createStyles((theme, _params, getRef) => {
padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,
color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
fontSize: theme.fontSizes.sm,
textDecoration: 'none',
'&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.colors.gray[0],
@@ -58,7 +60,7 @@ const useStyles = createStyles((theme, _params, getRef) => {
}});
export function LinksGroup({ icon: Icon, label, initiallyOpened, links }) {
export function LinksGroup({ icon: Icon, label, link, initiallyOpened, links }) {
const mypath = useLocation()
const { classes, theme, cx } = useStyles();
const hasLinks = Array.isArray(links);
@@ -71,14 +73,41 @@ export function LinksGroup({ icon: Icon, label, initiallyOpened, links }) {
className={({ isActive}) => (cx(classes.link, {[classes.linkActive]: isActive === true}))}
key={link.label}
to={link.link}
end
>
{link.label}
</NavLink>
));
console.log("TOP LINK: ", link)
useEffect(() => {
console.log("MYPATH: ", mypath)
}, [])
if (link) {
return (
<>
<NavLink
className={({ isActive}) => (cx(classes.control, {[classes.linkActive]: isActive === true}))}
key={label}
to={link}
end
>
{/* <UnstyledButton className={classes.control}> */}
<Group position="apart" spacing={0}>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<ThemeIcon variant="light" size={30}>
<Icon size={18} />
</ThemeIcon>
<Box ml="md">{label}</Box>
</Box>
</Group>
{/* </UnstyledButton> */}
</NavLink>
</>
)
}
return (