WPT editor

src/components/wpt/WptEditor.tsx

@@ -1,18 +1,12 @@
 import { useI18n } from '@solid-primitives/i18n';
-import {
+import { Box, TextField, Stack, Button, IconButton } from '@suid/material';
-  Dialog,
-  Box,
-  TextField,
-  Stack,
-  Button,
-  IconButton,
-} from '@suid/material';
 import { cloneDeep } from 'lodash';
 import { Component, createSignal } from 'solid-js';
 import { emptyWpt } from '../../db/wpt';
 import { peekCachedSignal } from '../../workers/cached-signals';
 import dispatch from '../../workers/dispatcher-main';
 import EditIcon from '@suid/icons-material/Edit';
+import Dialog from '../dialog';
 
 enum Mode {
   CLOSED,
@@ -37,6 +31,11 @@ const WptEditor: Component<Props> = ({ wptId }) => {
   const edit = () => {
     setMode(Mode.EDIT);
     setEditedWpt(cloneDeep(wpt()));
+    console.log({
+      caller: 'WptEditor / edit',
+      wptId,
+      editedWpt: editedWpt(),
+    });
   };
 
   const closeHandler = () => {
@@ -45,7 +44,7 @@ const WptEditor: Component<Props> = ({ wptId }) => {
 
   const saveHandler = () => {
     console.log({
-      caller: 'Wpt / saveHandler',
+      caller: 'WptEditor / saveHandler',
       wptId,
       editedWpt: editedWpt(),
     });
@@ -66,11 +65,20 @@ const WptEditor: Component<Props> = ({ wptId }) => {
         <EditIcon />
       </IconButton>
       <Dialog
-        open={mode() === Mode.EDIT}
+        open={mode() === Mode.EDIT && wpt()}
         title={getTitle()}
         closeHandler={closeHandler}
       >
-        <Box sx={{ flexGrow: 1, padding: '10px' }}>
+        <Box
+          component='form'
+          sx={{
+            width: '100%',
+            '& .MuiTextField-root': { m: 1, width: '100%' },
+            paddingTop: '5px',
+          }}
+          noValidate
+          autoComplete='off'
+        >
           <div>
             <TextField
               required
@@ -98,6 +106,16 @@ const WptEditor: Component<Props> = ({ wptId }) => {
                 setEditedWpt({ ...editedWpt(), extensions });
               }}
             />
+            <TextField
+              label={t('gpxDesc')}
+              type='text'
+              rows={5}
+              value={editedWpt()?.desc || ''}
+              onChange={(event: any) => {
+                setEditedWpt({ ...editedWpt(), desc: event.target.value });
+              }}
+              InputProps={{ inputComponent: 'textarea' }}
+            />
             <Stack spacing={2} direction='row' sx={{ marginTop: '20px' }}>
               <Button
                 variant='outlined'