dyomedea/src/components/account/Account.tsx

213 lines
5.5 KiB
TypeScript

import { Component, createSignal, For } from 'solid-js';
import PersonIcon from '@suid/icons-material/Person';
import style from './Account.module.css';
import {
Box,
Button,
DialogActions,
IconButton,
InputLabel,
NativeSelect,
TextField,
} from '@suid/material';
import { useI18n } from '@solid-primitives/i18n';
import Dialog from '../dialog';
import dispatch from '../../workers/dispatcher-main';
import { cloneDeep } from 'lodash';
import { getAccountById } from '../../db/account';
const Account: Component<{}> = (props) => {
const [t] = useI18n();
const [open, setOpen] = createSignal(false);
const [settings, setSettings] = createSignal<any>();
const [accounts, setAccounts] = createSignal<any>();
const [account, setAccount] = createSignal<any>({});
const handleClickOpen = async () => {
setOpen(true);
const newSettings: any = await dispatch({
action: 'getSettings',
});
setSettings(newSettings || {});
const newAccounts: any = await dispatch({
action: 'getAccounts',
});
setAccounts([{ id: '--new--', name: t('newAccount') }, ...newAccounts]);
setAccount(
cloneDeep(getAccountById(accounts(), settings().currentAccountId))
);
console.log({
caller: 'Account / handleClickOpen',
settings: settings(),
accounts: accounts(),
});
};
const handleClose = (event: any, reason?: string) => {
console.log({
caller: 'Account / handleClose',
event,
reason,
});
if (reason === undefined) {
setOpen(false);
}
};
const changeAccountHandler = (event: any) => {
const selectedAccountId = event.target.value;
setAccount(cloneDeep(getAccountById(accounts(), selectedAccountId)));
console.log({
caller: 'Account / changeAccountHandler',
event,
selectedAccountId: selectedAccountId,
account: account(),
});
};
const changeHandlerFactory = (path: string) => (event: any) => {
const value = event.target.value;
const newAccount = cloneDeep(account());
newAccount[path] = value;
setAccount(newAccount);
console.log({
caller: 'Account / changeHandlerFactory / ' + path,
event,
value,
account: account(),
});
};
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}>
<IconButton onClick={handleClickOpen}>
<PersonIcon />
</IconButton>
</div>
<Dialog
open={open()}
title={t('account')}
closeHandler={handleClose}
fullScreen={true}
>
<Box
component='form'
sx={{
width: '100%',
'& .MuiTextField-root': { m: 1, width: '100%' },
paddingTop: '5px',
}}
noValidate
autoComplete='off'
>
<InputLabel variant='normal' htmlFor='account-chooser'>
{t('accountChooser')}
</InputLabel>
<NativeSelect
inputProps={{
name: 'account-chooser',
id: 'account-chooser',
}}
onChange={changeAccountHandler}
>
<For each={accounts()}>
{(account: any) => (
<option
value={account.id}
selected={account.id === settings().currentAccountId}
>
{account.name}
</option>
)}
</For>
</NativeSelect>
<TextField
label={t('accountName')}
value={account().name || ''}
onChange={changeHandlerFactory('name')}
/>
<TextField
label={t('localDb')}
value={account().localDb || ''}
onChange={changeHandlerFactory('localDb')}
/>
<TextField
label={t('remoteDbServer')}
value={account().remoteDbServer || ''}
onChange={changeHandlerFactory('remoteDbServer')}
/>
<TextField
label={t('remoteDbUser')}
value={account().remoteDbUser || ''}
onChange={changeHandlerFactory('remoteDbUser')}
/>
<TextField
label={t('remoteDbPassword')}
value={account().remoteDbPassword || ''}
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>
</>
);
};
export default Account;