2023-02-21 20:11:03 +00:00
|
|
|
import { createForm } from '@felte/solid';
|
2023-02-22 10:19:10 +00:00
|
|
|
import { Component, createEffect, Match, Show, Switch } from 'solid-js';
|
2023-02-21 20:11:03 +00:00
|
|
|
import { TextField, Button } from '@kobalte/core';
|
2023-02-21 12:05:28 +00:00
|
|
|
|
2023-02-21 20:11:03 +00:00
|
|
|
import './style.css';
|
|
|
|
import { createServerAction$ } from 'solid-start/server';
|
|
|
|
import PouchDb from 'pouchdb';
|
|
|
|
import { v4 as uuid } from 'uuid';
|
2023-02-22 10:19:10 +00:00
|
|
|
import { put } from '~/lib/db';
|
|
|
|
import { useNavigate } from 'solid-start';
|
2023-02-21 10:23:35 +00:00
|
|
|
|
2023-02-22 10:19:10 +00:00
|
|
|
interface Props {
|
|
|
|
values?: any;
|
|
|
|
}
|
2023-02-21 10:23:35 +00:00
|
|
|
|
|
|
|
const Invitation: Component<Props> = (props) => {
|
2023-02-22 10:19:10 +00:00
|
|
|
const navigate = useNavigate();
|
|
|
|
|
|
|
|
const [saving, save] = createServerAction$(async (args: any) => {
|
|
|
|
const { props, values } = args;
|
|
|
|
console.log({
|
|
|
|
caller: 'Invitation / save',
|
|
|
|
props,
|
|
|
|
values,
|
|
|
|
args,
|
2023-02-22 10:58:56 +00:00
|
|
|
id: props.values?._id,
|
2023-02-22 10:19:10 +00:00
|
|
|
});
|
2023-02-21 20:11:03 +00:00
|
|
|
const db = new PouchDb('.db');
|
2023-02-22 10:58:56 +00:00
|
|
|
const id = props.values?._id ?? `invitation/${uuid()}`;
|
2023-02-22 10:19:10 +00:00
|
|
|
await put({
|
|
|
|
db,
|
|
|
|
doc: {
|
|
|
|
_id: id,
|
|
|
|
date: new Date().toISOString(),
|
|
|
|
type: 'invitation',
|
|
|
|
...values,
|
|
|
|
},
|
2023-02-21 12:38:43 +00:00
|
|
|
});
|
2023-02-21 15:12:52 +00:00
|
|
|
return id;
|
2023-02-21 12:38:43 +00:00
|
|
|
});
|
|
|
|
|
2023-02-22 10:19:10 +00:00
|
|
|
const submitHandler = async (values: any, context: any) => {
|
2023-02-21 10:23:35 +00:00
|
|
|
console.log({
|
2023-02-21 20:11:03 +00:00
|
|
|
caller: 'Invitation / submitHandler',
|
2023-02-21 10:23:35 +00:00
|
|
|
props,
|
|
|
|
values,
|
|
|
|
context,
|
|
|
|
});
|
2023-02-22 10:19:10 +00:00
|
|
|
const id = await save({ values, props });
|
|
|
|
if (!props.values) {
|
|
|
|
navigate(`/invitations/${encodeURIComponent(id)}`);
|
|
|
|
}
|
2023-02-21 10:23:35 +00:00
|
|
|
};
|
|
|
|
|
2023-02-22 10:58:56 +00:00
|
|
|
const cancelHandler = () => {
|
|
|
|
navigate(`/invitations/`);
|
|
|
|
};
|
|
|
|
|
|
|
|
const deleteHandler = async () => {
|
|
|
|
console.log({
|
|
|
|
caller: 'Invitation / deleteHandler',
|
|
|
|
props,
|
|
|
|
});
|
|
|
|
await save({ props, values: { _deleted: true } });
|
|
|
|
navigate(`/invitations/`);
|
|
|
|
};
|
|
|
|
|
|
|
|
const { form } = createForm({
|
2023-02-22 10:19:10 +00:00
|
|
|
onSubmit: submitHandler,
|
|
|
|
initialValues: props?.values,
|
|
|
|
});
|
|
|
|
|
|
|
|
console.log({
|
|
|
|
caller: 'Invitation ',
|
|
|
|
props,
|
|
|
|
});
|
2023-02-21 10:23:35 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<form use:form>
|
2023-02-21 20:11:03 +00:00
|
|
|
<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>
|
2023-02-21 12:05:28 +00:00
|
|
|
<TextField.Root>
|
|
|
|
<TextField.Label>Database</TextField.Label>
|
|
|
|
<TextField.Input
|
2023-02-21 20:11:03 +00:00
|
|
|
type='url'
|
|
|
|
name='database'
|
2023-02-21 12:05:28 +00:00
|
|
|
required={true}
|
2023-02-21 20:11:03 +00:00
|
|
|
placeholder='Database URL'
|
2023-02-21 12:05:28 +00:00
|
|
|
/>
|
|
|
|
<TextField.ErrorMessage>
|
|
|
|
Please provide a valid URL
|
|
|
|
</TextField.ErrorMessage>
|
|
|
|
</TextField.Root>
|
2023-02-22 12:29:27 +00:00
|
|
|
<TextField.Root>
|
|
|
|
<TextField.Label>User name</TextField.Label>
|
|
|
|
<TextField.Input
|
|
|
|
type='text'
|
|
|
|
name='username'
|
|
|
|
required={true}
|
|
|
|
placeholder='user name'
|
|
|
|
/>
|
|
|
|
</TextField.Root>
|
2023-02-21 12:05:28 +00:00
|
|
|
<TextField.Root>
|
|
|
|
<TextField.Label>Password</TextField.Label>
|
|
|
|
<TextField.Input
|
2023-02-21 20:11:03 +00:00
|
|
|
type='text'
|
|
|
|
name='password'
|
2023-02-21 12:05:28 +00:00
|
|
|
required={true}
|
2023-02-21 20:11:03 +00:00
|
|
|
placeholder='Password'
|
|
|
|
autocomplete='off'
|
2023-02-21 12:05:28 +00:00
|
|
|
/>
|
|
|
|
<TextField.ErrorMessage>
|
|
|
|
Please provide a valid password
|
|
|
|
</TextField.ErrorMessage>
|
|
|
|
</TextField.Root>
|
2023-02-22 10:58:56 +00:00
|
|
|
<Switch>
|
|
|
|
<Match when={!!props.values}>
|
|
|
|
<Button.Root type='submit'>Save</Button.Root>
|
|
|
|
<Button.Root onclick={deleteHandler}>Delete</Button.Root>
|
|
|
|
<Button.Root onclick={cancelHandler}>Cancel</Button.Root>
|
|
|
|
</Match>
|
|
|
|
<Match when={!props.values}>
|
|
|
|
<Button.Root type='submit'>Create</Button.Root>
|
|
|
|
<Button.Root onclick={cancelHandler}>Cancel</Button.Root>
|
|
|
|
</Match>
|
|
|
|
</Switch>
|
2023-02-21 10:23:35 +00:00
|
|
|
</form>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Invitation;
|