Dyomedea
/
backend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Starting to implement subscriptions.

This commit is contained in:
Eric van der Vlist 2023-02-27 19:28:18 +01:00
parent 0dde189741
commit 9f396a167a
1 changed files with 97 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
src/components/user/User.tsx
View File

@ -1,5 +1,5 @@
import { createForm } from '@felte/solid'; import { createForm } from '@felte/solid';
import { Component, Index, Match, onMount, Switch } from 'solid-js'; import { Component, Index, Match, onMount, Show, Switch } from 'solid-js';
import { TextField, Button } from '@kobalte/core'; import { TextField, Button } from '@kobalte/core';
import reporter from '@felte/reporter-tippy'; import reporter from '@felte/reporter-tippy';
import './style.css'; import './style.css';
@ -130,7 +130,8 @@ const User: Component<Props> = (props) => {
} }
function addSubscription(index?: number) { function addSubscription(index?: number) {
return () => addField(`subscriptions`, { user: '', direction: '' }, index); return () =>
addField(`subscriptions`, { username: '', direction: '' }, index);
} }
console.log({ console.log({
@ -141,106 +142,100 @@ const User: Component<Props> = (props) => {
}); });
return ( return (
<form use:form> <>
<TextField.Root> <Show when={!isNew()}>
<TextField.Label>Mail address</TextField.Label> <h2>{userId(data('username'), data('database'))}</h2>
<TextField.Input </Show>
type='mail' <form use:form>
name='mail' <TextField.Root>
required={true} <TextField.Label>Mail address</TextField.Label>
placeholder='Email address' <TextField.Input
/> type='mail'
<TextField.ErrorMessage> name='mail'
Please provide a valid URL required={true}
</TextField.ErrorMessage> placeholder='Email address'
</TextField.Root> />
<TextField.Root> <TextField.ErrorMessage>
<TextField.Label>Database</TextField.Label> Please provide a valid URL
<TextField.Input </TextField.ErrorMessage>
type='url' </TextField.Root>
name='database' <TextField.Root>
required={true} <TextField.Label>Database</TextField.Label>
placeholder='Database URL' <TextField.Input
readOnly={true} type='url'
/> name='database'
</TextField.Root> required={true}
<TextField.Root> placeholder='Database URL'
<TextField.Label>User name</TextField.Label> readOnly={true}
<TextField.Input />
type='text' </TextField.Root>
name='username' <TextField.Root>
required={true} <TextField.Label>User name</TextField.Label>
placeholder='user name' <TextField.Input
readOnly={!isNew()} type='text'
/> name='username'
</TextField.Root> required={true}
<TextField.Root> placeholder='user name'
<TextField.Label>Password</TextField.Label> readOnly={!isNew()}
<TextField.Input />
type='text' </TextField.Root>
name='password' <TextField.Root>
required={true} <TextField.Label>Password</TextField.Label>
placeholder='Password' <TextField.Input
autocomplete='off' type='text'
/> name='password'
</TextField.Root> required={true}
<table> placeholder='Password'
<thead> autocomplete='off'
<tr> />
<th> </TextField.Root>
<button type='button' onClick={addSubscription()}> <table>
+ <thead>
</button> <tr>
</th> <th>
<th>User</th> <button type='button' onClick={addSubscription()}>
<th>Direction</th> +
</tr> </button>
</thead> </th>
<tbody> <th>User name</th>
<Index each={subscriptions()}> </tr>
{(_, index) => ( </thead>
<tr> <tbody>
<td> <Index each={subscriptions()}>
<button type='button' onClick={removeSubscription(index)}> {(_, index) => (
- <tr>
</button> <td>
</td> <button type='button' onClick={removeSubscription(index)}>
<td> -
<TextField.Root> </button>
<TextField.Input </td>
type='text' <td>
name={`subscriptions.${index}.user`} <TextField.Root>
required={true} <TextField.Input
placeholder='user' type='text'
/> name={`subscriptions.${index}.username`}
</TextField.Root> required={true}
</td> placeholder='user name'
<td> />
<TextField.Root> </TextField.Root>
<TextField.Input </td>
type='text' </tr>
name={`subscriptions.${index}.direction`} )}
required={true} </Index>
placeholder='direction' </tbody>
/> </table>
</TextField.Root> <Switch>
</td> <Match when={!isNew()}>
</tr> <Button.Root type='submit'>Save</Button.Root>
)} <Button.Root onclick={deleteHandler}>Delete</Button.Root>
</Index> </Match>
</tbody> <Match when={isNew()}>
</table> <Button.Root type='submit'>Create</Button.Root>
<Switch> </Match>
<Match when={!isNew()}> </Switch>
<Button.Root type='submit'>Save</Button.Root> <Button.Root onclick={cancelHandler}>Cancel</Button.Root>
<Button.Root onclick={deleteHandler}>Delete</Button.Root> </form>
</Match> </>
<Match when={isNew()}>
<Button.Root type='submit'>Create</Button.Root>
</Match>
</Switch>
<Button.Root onclick={cancelHandler}>Cancel</Button.Root>
</form>
); );
}; };