Working on Wpt save after edition.

src/components/wpt/Wpt.tsx

@@ -12,6 +12,7 @@ import GeoJSON from 'ol/format/GeoJSON';
 import { setBranch, tree } from '../map';
 import { Feature } from 'ol';
 import { useI18n } from '@solid-primitives/i18n';
+import { cloneDeep } from 'lodash';
 import Dialog from '../dialog';
 import { Box, Button, Grid, Stack, TextField } from '@suid/material';
 
@@ -29,6 +30,7 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
   const [t, { add, locale, dict }] = useI18n();
 
   const [wpt, setWpt] = createSignal<Wpt>();
+  const [editedWpt, setEditedWpt] = createSignal<Wpt>();
   const [dispatchId, setDispatchId] = createSignal<number>(-1);
 
   const getTitle = () => {
@@ -77,6 +79,7 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
 
   const edit = () => {
     setMode(Mode.EDIT);
+    setEditedWpt(cloneDeep(wpt()));
   };
 
   createEffect(() => {
@@ -115,6 +118,20 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
     setMode(Mode.CLOSED);
   };
 
+  const saveHandler = () => {
+    console.log({
+      caller: 'Wpt / saveHandler',
+      wptId,
+      editedWpt: editedWpt(),
+    });
+    // const newWpt = wpt();
+    // if (newWpt) {
+    //   newWpt.name = name.value;
+    // }
+    dispatch({ action: 'putWpt', params: { id: wptId, wpt: editedWpt() } });
+    setMode(Mode.CLOSED);
+  };
+
   return (
     <Dialog
       open={mode() === Mode.EDIT}
@@ -125,15 +142,17 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
         <div>
           <TextField
             required
-            id='name'
             label={t('name')}
             defaultValue={wpt()?.name}
+            onChange={(event: any, value: string) => {
+              setEditedWpt({ ...editedWpt(), name: value });
+            }}
           />
           <Stack spacing={2} direction='row' sx={{ marginTop: '20px' }}>
             <Button variant='outlined' color='secondary' onClick={closeHandler}>
               {t('cancel')}
             </Button>
-            <Button variant='contained' color='success'>
+            <Button variant='contained' color='success' onClick={saveHandler}>
               {t('save')}
             </Button>
           </Stack>