Compare commits

..

4 commits

Author SHA1 Message Date
c6abf633f8
feat: select table entries on doubleclick
All checks were successful
Visitenbuch CI / test (push) Successful in 2m22s
Visitenbuch CI / release (push) Has been skipped
2024-05-16 20:19:55 +02:00
88a5040f9c
fix: autocomplete not closing on tab 2024-05-16 19:42:26 +02:00
cdb344609c
fix: remove process.on hooks (not necessary) 2024-05-16 18:47:16 +02:00
4a3155c33a
fix: close autocomplete on defocus 2024-05-16 18:45:22 +02:00
4 changed files with 33 additions and 34 deletions

View file

@ -31,7 +31,3 @@ export const handle = sequence(
authorization, authorization,
createTRPCHandle({ router, createContext }), createTRPCHandle({ router, createContext }),
); );
// Allow server application to exit
process.on("SIGINT", () => process.exit()); // Ctrl+C
process.on("SIGTERM", () => process.exit()); // docker stop

View file

@ -166,6 +166,14 @@
if (opened) { if (opened) {
onClose(kb); onClose(kb);
} }
// select remaining item if autoselect is enabled
if (!selection) {
if (!noAutoselect1 && filteredItems.length === 1) {
selectListItem(filteredItems[0], true);
} else {
setInputValue("");
}
}
opened = false; opened = false;
} }
@ -185,43 +193,38 @@
} }
function onKeyDown(e: KeyboardEvent): void { function onKeyDown(e: KeyboardEvent): void {
let { key } = e; switch (e.key) {
if (key === "Tab" && e.shiftKey) key = "ShiftTab"; case "Tab":
const fnmap: Record<string, () => void> = { close();
Tab: () => close, break;
ShiftTab: () => close, case "ArrowDown":
ArrowDown: () => {
open(); open();
if (highlightIndex < filteredItems.length - 1) { if (highlightIndex < filteredItems.length - 1) {
highlightIndex++; highlightIndex++;
highlight(); highlight();
} }
}, break;
ArrowUp: () => { case "ArrowUp":
open(); open();
if (highlightIndex > 0) { if (highlightIndex > 0) {
highlightIndex--; highlightIndex--;
highlight(); highlight();
} }
}, break;
Escape: () => { case "Escape":
e.stopPropagation(); e.stopPropagation();
if (opened) { if (opened) {
if (inputElm) inputElm.focus(); if (inputElm) inputElm.focus();
close(); close();
} }
}, break;
Backspace: () => { case "Backspace":
if (inputValue().length === 0) { if (inputValue().length === 0) {
onBackspace(); onBackspace();
} else if (selection) { } else if (selection) {
clearSelection(); clearSelection();
} }
}, break;
};
const fn = fnmap[key];
if (typeof fn === "function") {
fn();
} }
} }
@ -234,16 +237,6 @@
} }
} }
function onBlur(): void {
if (!selection) {
if (!noAutoselect1 && filteredItems.length === 1) {
selectListItem(filteredItems[0], true);
} else {
setInputValue("");
}
}
}
function highlight(): void { function highlight(): void {
if (browser && opened) { if (browser && opened) {
window.setTimeout(() => { window.setTimeout(() => {
@ -303,12 +296,11 @@
on:focus={open} on:focus={open}
on:keydown={onKeyDown} on:keydown={onKeyDown}
on:keypress={onKeyPress} on:keypress={onKeyPress}
on:blur={onBlur}
use:floatingRef use:floatingRef
/> />
{#if opened && filteredItems.length > 0} {#if opened && filteredItems.length > 0}
<div bind:this={listElm} class="autocomplete-list" use:floatingContent> <div bind:this={listElm} class="autocomplete-list" tabindex="-1" use:floatingContent>
{#each filteredItems as item, i} {#each filteredItems as item, i}
<div <div
class="autocomplete-list-item" class="autocomplete-list-item"
@ -344,7 +336,12 @@
{#if clearBtn && selection} {#if clearBtn && selection}
<div class="absolute bottom-0 right-0 h-full flex items-center"> <div class="absolute bottom-0 right-0 h-full flex items-center">
<IconButton cls="" path={mdiClose} title="Löschen" on:click={clearSelection} /> <IconButton
cls=""
path={mdiClose}
tabindex={-1}
title="Löschen"
on:click={clearSelection} />
</div> </div>
{/if} {/if}
</div> </div>

View file

@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation";
import type { RouterOutput } from "$lib/shared/trpc"; import type { RouterOutput } from "$lib/shared/trpc";
import { formatDate } from "$lib/shared/util"; import { formatDate } from "$lib/shared/util";
@ -39,6 +41,7 @@
class="transition-colors hover:bg-neutral-content/10" class="transition-colors hover:bg-neutral-content/10"
class:done={entry.execution?.done} class:done={entry.execution?.done}
class:priority={entry.current_version.priority} class:priority={entry.current_version.priority}
on:dblclick={() => { void goto("/entry/" + entry.id); }}
> >
<td <td
><a ><a

View file

@ -1,4 +1,6 @@
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation";
import { mdiFilter } from "@mdi/js"; import { mdiFilter } from "@mdi/js";
import { URL_ENTRIES } from "$lib/shared/constants"; import { URL_ENTRIES } from "$lib/shared/constants";
@ -34,6 +36,7 @@
<tr <tr
class="transition-colors hover:bg-neutral-content/10" class="transition-colors hover:bg-neutral-content/10"
class:p-hidden={patient.hidden} class:p-hidden={patient.hidden}
on:dblclick={() => { void goto("/patient/" + patient.id); }}
> >
<td <td
><a ><a