diff options
Diffstat (limited to 'code/app/src/routes/(main)/(app)/projects')
| -rw-r--r-- | code/app/src/routes/(main)/(app)/projects/+page.svelte | 11 | ||||
| -rw-r--r-- | code/app/src/routes/(main)/(app)/projects/create/+page.svelte (renamed from code/app/src/routes/(main)/(app)/projects/new/+page.svelte) | 14 |
2 files changed, 20 insertions, 5 deletions
diff --git a/code/app/src/routes/(main)/(app)/projects/+page.svelte b/code/app/src/routes/(main)/(app)/projects/+page.svelte index 55e9372..e39a886 100644 --- a/code/app/src/routes/(main)/(app)/projects/+page.svelte +++ b/code/app/src/routes/(main)/(app)/projects/+page.svelte @@ -20,7 +20,7 @@ while (i < 101) { tempProjects.push({ id: crypto.randomUUID(), - name: faker.word.preposition(), + name: faker.lorem.word(), start: Temporal.Now.plainDateISO().toLocaleString(), description: faker.lorem.words(3), members: [], @@ -31,7 +31,9 @@ projects.set(tempProjects); }); - function goto_project(name: string) { + function on_open_project(event) { + if (event.code && (event.code !== "Enter" || event.code !== "Space")) return; + const name = event.target.innerText; const projectId = $projects.find((p) => p.name === name).id; goto("/projects/" + projectId); } @@ -59,7 +61,7 @@ </div> <div class="mt-4 sm:mt-0 sm:ml-16 inline-flex gap-1 sm:flex-none"> <Input icon={MagnifyingGlassIcon} placeholder="Search" bind:value={$filterValue} /> - <Button text="Create project" href="/projects/new" /> + <Button text="Create project" href="/projects/create" /> </div> </div> <div class="-mx-2 mt-6 rounded-md shadow overflow-auto max-h-[80vh] sm:-mx-6 md:mx-0"> @@ -79,6 +81,7 @@ <Render of={cell.render()} /> <span on:click={props.sort.toggle} + on:keypress={props.sort.toggle} class="{props.sort.disabled ? 'bg-gray-200 text-gray-900 group-hover:bg-gray-300' : 'invisible text-gray-400 group-hover:visible group-focus:visible'} @@ -115,7 +118,7 @@ <Subscribe attrs={cell.attrs()} let:attrs> <td {...attrs} class="whitespace-nowrap px-2 py-2 text-sm"> {#if cell.id === "name"} - <span class="link" title="Open project" on:click={() => goto_project(materialisedCell.toString())}> + <span class="link" title="Open project" on:click={on_open_project} on:keypress={on_open_project}> <Render of={materialisedCell} /> </span> {:else if cell.id === "status"} diff --git a/code/app/src/routes/(main)/(app)/projects/new/+page.svelte b/code/app/src/routes/(main)/(app)/projects/create/+page.svelte index 4c453dc..2b5e7bc 100644 --- a/code/app/src/routes/(main)/(app)/projects/new/+page.svelte +++ b/code/app/src/routes/(main)/(app)/projects/create/+page.svelte @@ -1,7 +1,8 @@ <script lang="ts"> import { useSWR } from "sswr"; - import { Input, TextArea } from "$lib/components"; + import { Input, TextArea, Combobox, Button } from "$lib/components"; import type { ProjectMember } from "$lib/models/projects/ProjectMember"; + import LL from "$lib/i18n/i18n-svelte"; const formFields = { name: { @@ -40,4 +41,15 @@ <Input type="date" label="Start" bind:value={formFields.start.value} errorText={formFields.start.error} /> <Input type="date" label="Stop" bind:value={formFields.stop.value} errorText={formFields.stop.error} /> </section> + <Combobox options={$members} label={$LL.app.members()}> + <svelte:fragment slot="no-records"> + <h1>No members found</h1> + {#if !$members?.length} + <p> + <a href="/users/create" class="link">Click here</a> to create your first user + </p> + {/if} + </svelte:fragment> + </Combobox> + <Button text={$LL.submit()} /> </form> |