ItemFormPopup cleanup

src/Components/Input/InputText.tsx

@@ -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>
     )
 }

src/Components/Input/TextAreaInput.tsx

@@ -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(
+    return (
-        <div className={`tw-form-control tw-w-full ${containerStyle? containerStyle : ""}`}>
+        <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>
     )
 }

src/Components/Map/Subcomponents/ItemFormPopup.tsx

@@ -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) => {
+    const handleSubmit = async (evt: any) => {
-        evt.preventDefault()
+        const formItem: Item = {} as Item;
-        console.log("New Item Popup is adding Item ...");
+        Array.from(evt.target).forEach((input: HTMLFormElement) => {
-        if(props.item) {
+            if (input.name) {
-            setSpinner(true);
+                console.log(input.name + ": " + input.value);
-            props.api?.updateItem!(new Item(props.item.id, name, text, new Geometry(props.position.lng, props.position.lat)))
+                formItem[input.name] = input.value;
-            .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())
+        formItem['position']=new Geometry(props.position.lng, props.position.lat);
-            .catch(err => console.log(err));
+        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);
+            formItem['id']=crypto.randomUUID();
-            props.api?.createItem!(new Item(crypto.randomUUID(), name, text, new Geometry(props.position.lng, props.position.lat)))
+            await props.api?.createItem!(formItem);
-            .then( () =>  addItem(new Item(crypto.randomUUID(), name, text, new Geometry(props.position.lng, props.position.lat), props.layer, props.api)))
+            formItem['api']=props.api;
-            .then(()=> setSpinner(false))
+            formItem['layer']=props.layer;
-            .then(()=> map.closePopup())
+            await addItem(formItem);
-            .catch(err => console.log(err));
+            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)} />
+                <InputText type="text" placeholder="Name" dataField="name" defaultValue={props.item? props.item.name : ""}  />
-                <TextAreaInput placeholder="Text" defaultValue={text} updateFormValue={e => setText(e)} inputStyle='tw-h-40 tw-mt-5'/>
+                <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>