antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

ItemFormPopup cleanup

Browse Source
This commit is contained in:
Anton 2023-08-21 11:41:48 +02:00
parent ee4b67d590
commit d6e780436f
3 changed files with 52 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/Components/Input/InputText.tsx
View File

@ -5,14 +5,15 @@ type InputTextProps = {
labelTitle?: string;
labelStyle?: string;
type?: string;
dataField?: string;
containerStyle?: string;
defaultValue: string;
placeholder?: string;
updateFormValue: (value: string ) => void;
updateFormValue?: (value: string ) => void;
}
function InputText({labelTitle, labelStyle, type, containerStyle, defaultValue, placeholder, updateFormValue} : InputTextProps){
function InputText({labelTitle, labelStyle, type, dataField, containerStyle, defaultValue, placeholder, updateFormValue} : InputTextProps){
const [value, setValue] = useState<string>(defaultValue)
@ -23,7 +24,8 @@ function InputText({labelTitle, labelStyle, type, containerStyle, defaultValue,
const updateInputValue = (val : string) => {
setValue(val)
updateFormValue(val)
if(updateFormValue)
updateFormValue(val)
}
@ -33,7 +35,7 @@ function InputText({labelTitle, labelStyle, type, containerStyle, defaultValue,
<span className={"tw-label-text tw-text-base-content " + labelStyle}>{labelTitle}</span>
</label>
: " "}
<input type={type || "text"} value={value} placeholder={placeholder || ""} onChange={(e) => updateInputValue(e.target.value)}className="tw-input tw-input-bordered tw-w-full " />
<input type={type || "text"} name={dataField} value={value} placeholder={placeholder || ""} onChange={(e) => updateInputValue(e.target.value)}className="tw-input tw-input-bordered tw-w-full " />
</div>
)
}

20
src/Components/Input/TextAreaInput.tsx
View File

@ -6,34 +6,36 @@ type TextAreaProps = {
labelTitle?: string;
labelStyle?: string;
containerStyle?: string;
dataField?: string;
inputStyle?: string;
defaultValue: string;
placeholder?: string;
updateFormValue: (value: string ) => void;
updateFormValue?: (value: string) => void;
}
function TextAreaInput({labelTitle, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, updateFormValue} : TextAreaProps){
function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, updateFormValue }: TextAreaProps) {
const [value, setValue] = useState<string>(defaultValue)
useEffect(() => {
setValue(defaultValue)
}, [defaultValue])
}, [defaultValue])
const updateInputValue = (val : string) => {
const updateInputValue = (val: string) => {
setValue(val)
updateFormValue(val)
if (updateFormValue)
updateFormValue(val)
}
return(
<div className={`tw-form-control tw-w-full ${containerStyle? containerStyle : ""}`}>
return (
<div className={`tw-form-control tw-w-full ${containerStyle ? containerStyle : ""}`}>
{labelTitle ? <label className="tw-label">
<span className={"tw-label-text tw-text-base-content " + labelStyle}>{labelTitle}</span>
</label> : ""}
<textarea value={value} className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle? inputStyle : ""}`} placeholder={placeholder || ""} onChange={(e) => updateInputValue(e.target.value)}></textarea>
<textarea value={value} name={dataField} className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle ? inputStyle : ""}`} placeholder={placeholder || ""} onChange={(e) => updateInputValue(e.target.value)}></textarea>
</div>
)
}

75
src/Components/Map/Subcomponents/ItemFormPopup.tsx
View File

@ -3,7 +3,7 @@ import { LatLng } from 'leaflet'
import { Popup as LeafletPopup, useMap } from 'react-leaflet'
import { useEffect, useState } from 'react'
import { useAddItem, useUpdateItem } from '../hooks/useItems'
import { Geometry, LayerProps, Item, ItemsApi} from '../../../types'
import { Geometry, LayerProps, Item, ItemsApi } from '../../../types'
import TextAreaInput from '../../Input/TextAreaInput'
import InputText from '../../Input/InputText'
@ -16,62 +16,57 @@ export interface ItemFormPopupProps {
}
export default function ItemFormPopup(props: ItemFormPopupProps) {
const [name, setName] = useState('')
const [text, setText] = useState('')
const [spinner, setSpinner] = useState(false);
const map = useMap();
const addItem = useAddItem();
const updateItem = useUpdateItem();
const handleSubmit = (evt: any) => {
evt.preventDefault()
console.log("New Item Popup is adding Item ...");
if(props.item) {
setSpinner(true);
props.api?.updateItem!(new Item(props.item.id, name, text, new Geometry(props.position.lng, props.position.lat)))
.then( () => updateItem(new Item(props.item!.id, name, text, new Geometry(props.position.lng, props.position.lat), props.layer, props.item!.api)))
.then(()=> setSpinner(false))
.then(()=> map.closePopup())
.catch(err => console.log(err));
const handleSubmit = async (evt: any) => {
const formItem: Item = {} as Item;
Array.from(evt.target).forEach((input: HTMLFormElement) => {
if (input.name) {
console.log(input.name + ": " + input.value);
formItem[input.name] = input.value;
}
});
formItem['position']=new Geometry(props.position.lng, props.position.lat);
evt.preventDefault();
setSpinner(true);
if (props.item) {
formItem['id']=props.item.id;
await props.api?.updateItem!(formItem);
formItem['api']=props.api;
formItem['layer']=props.layer;
await updateItem(formItem);
setSpinner(false);
map.closePopup();
}
else {
setSpinner(true);
props.api?.createItem!(new Item(crypto.randomUUID(), name, text, new Geometry(props.position.lng, props.position.lat)))
.then( () => addItem(new Item(crypto.randomUUID(), name, text, new Geometry(props.position.lng, props.position.lat), props.layer, props.api)))
.then(()=> setSpinner(false))
.then(()=> map.closePopup())
.catch(err => console.log(err));
}
formItem['id']=crypto.randomUUID();
await props.api?.createItem!(formItem);
formItem['api']=props.api;
formItem['layer']=props.layer;
await addItem(formItem);
setSpinner(false);
map.closePopup();
}
props.setItemFormPopup(null);
}
const resetPopup = () => {
setName('');
setText('');
}
const setItemValues = () => {
if(props.item) {
setName(props.item?.name);
setText(props.item?.text);
}
}
useEffect(() => {
setItemValues();
},[props.item])
return (
<LeafletPopup minWidth={275} maxWidth={275} autoPanPadding={[20, 5]}
<LeafletPopup minWidth={275} maxWidth={275} autoPanPadding={[20, 5]}
eventHandlers={{
remove: resetPopup
// remove: resetPopup
}}
position={props.position}>
<form onSubmit={handleSubmit}>
<form onSubmit={e => handleSubmit(e)}>
<div className='tw-flex tw-justify-center'><b className="tw-text-xl tw-font-bold">New {props.layer.name}</b></div>
<InputText type="text" placeholder="Name" defaultValue={name} updateFormValue={e => setName(e)} />
<TextAreaInput placeholder="Text" defaultValue={text} updateFormValue={e => setText(e)} inputStyle='tw-h-40 tw-mt-5'/>
<InputText type="text" placeholder="Name" dataField="name" defaultValue={props.item? props.item.name : ""} />
<TextAreaInput placeholder="Text" dataField="text" defaultValue={props.item ? props.item.text : ""} inputStyle='tw-h-40 tw-mt-5' />
<div className='tw-flex tw-justify-center'><button className={spinner ? 'tw-btn tw-loading tw-mt-5 tw-place-self-center' : 'tw-btn tw-mt-5 tw-place-self-center'}>Save</button></div>
</form>
</LeafletPopup>