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