working on location form, dropzone and previews
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user