Still working on the account dialog.

src/components/account/Account.tsx

@@ -5,6 +5,8 @@ import PersonIcon from '@suid/icons-material/Person';
 import style from './Account.module.css';
 import {
   Box,
+  Button,
+  DialogActions,
   IconButton,
   InputLabel,
   NativeSelect,
@@ -13,8 +15,6 @@ import {
 import { useI18n } from '@solid-primitives/i18n';
 import Dialog from '../dialog';
 import dispatch from '../../workers/dispatcher-main';
-import allGpxes from '../all-gpxes';
-import gpx from '../gpx';
 import { cloneDeep } from 'lodash';
 import { getAccountById } from '../../db/account';
 
@@ -63,7 +63,7 @@ const Account: Component<{}> = (props) => {
     console.log({
       caller: 'Account / changeAccountHandler',
       event,
-      selectedAccountName: selectedAccountId,
+      selectedAccountId: selectedAccountId,
       account: account(),
     });
   };
@@ -81,6 +81,42 @@ const Account: Component<{}> = (props) => {
     });
   };
 
+  const saveHandler = async () => {
+    const updatedAccount = account();
+    if (updatedAccount.id === '--new--') {
+      updatedAccount.id = updatedAccount.name;
+    }
+    await dispatch({
+      action: 'putAccount',
+      params: { id: updatedAccount.id, account: updatedAccount },
+    });
+    const updatedSettings = {
+      ...settings(),
+      currentAccountId: updatedAccount.id,
+    };
+    await dispatch({
+      action: 'putSettings',
+      params: { settings: updatedSettings },
+    });
+    console.log({
+      caller: 'Account / saveHandler',
+      account: account(),
+      updatedAccount,
+      settings: settings(),
+      updatedSettings,
+    });
+    handleClose();
+    location.reload();
+  };
+
+  const isValid = () => {
+    if (!account().localDb) {
+      return false;
+    }
+    //TODO: add more tests
+    return true;
+  };
+
   return (
     <>
       <div class={style.control}>
@@ -156,6 +192,18 @@ const Account: Component<{}> = (props) => {
             onChange={changeHandlerFactory('remoteDbPassword')}
           />
         </Box>
+        <DialogActions>
+          <Button
+            variant='contained'
+            disabled={!isValid()}
+            onClick={saveHandler}
+          >
+            {t('accountSave')}
+          </Button>
+          <Button variant='outlined' color='secondary' onClick={handleClose}>
+            {t('accountCancel')}
+          </Button>
+        </DialogActions>
       </Dialog>
     </>
   );