diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte index e4c264b7b5..7e147103e7 100644 --- a/frontend/src/lib/components/runs/RunRow.svelte +++ b/frontend/src/lib/components/runs/RunRow.svelte @@ -37,7 +37,6 @@ containsLabel?: boolean showTag?: boolean activeLabel: string | null - selectionMode?: boolean } let { @@ -46,8 +45,7 @@ containerWidth = 0, containsLabel = false, showTag = true, - activeLabel, - selectionMode = false + activeLabel }: Props = $props() let scheduleEditor: ScheduleEditor | undefined = $state(undefined) @@ -66,32 +64,19 @@
{ dispatch('select') }} > - - {#if selectionMode} -
-
- -
-
- {/if} -
diff --git a/frontend/src/lib/components/runs/RunsTable.svelte b/frontend/src/lib/components/runs/RunsTable.svelte index ff03eebab7..bdfacfc55f 100644 --- a/frontend/src/lib/components/runs/RunsTable.svelte +++ b/frontend/src/lib/components/runs/RunsTable.svelte @@ -8,6 +8,7 @@ import Popover from '../Popover.svelte' import { workspaceStore } from '$lib/stores' import './runs-grid.css' + import { useKeyboardModifiers } from '$lib/svelte5Utils.svelte' interface Props { //import InfiniteLoading from 'svelte-infinite-loading' @@ -15,13 +16,13 @@ externalJobs?: Job[] omittedObscuredJobs: boolean showExternalJobs?: boolean - selectionMode?: boolean selectedIds?: string[] selectedWorkspace?: string | undefined activeLabel?: string | null // const loadMoreQuantity: number = 100 lastFetchWentToEnd?: boolean perPage?: number + allSelected?: boolean } let { @@ -29,14 +30,16 @@ externalJobs = [], omittedObscuredJobs, showExternalJobs = false, - selectionMode = false, selectedIds = $bindable([]), selectedWorkspace = $bindable(undefined), activeLabel = null, lastFetchWentToEnd = false, - perPage = 1000 + perPage = 1000, + allSelected = $bindable() }: Props = $props() + const keyboardModifiers = useKeyboardModifiers() + function getTime(job: Job): string | undefined { return job['completed_at'] ?? job['started_at'] ?? job['scheduled_for'] ?? job['created_at'] } @@ -196,20 +199,11 @@
- {#if selectionMode} -
- {/if}
{#if showExternalJobs && externalJobs.length > 0}
@@ -276,16 +270,15 @@ {jobOrDate.date}
{:else} -
+
{ + on:select={(e) => { const jobId = jobOrDate.job.id - if (selectionMode) { + if (keyboardModifiers.control || keyboardModifiers.meta) { if (selectedIds.includes(jobOrDate.job.id)) { selectedIds = selectedIds.filter((id) => id != jobId) } else { diff --git a/frontend/src/lib/svelte5Utils.svelte.ts b/frontend/src/lib/svelte5Utils.svelte.ts index b912f5ebd3..46ec543363 100644 --- a/frontend/src/lib/svelte5Utils.svelte.ts +++ b/frontend/src/lib/svelte5Utils.svelte.ts @@ -415,3 +415,52 @@ export function useInfiniteQuery( reset } } + +export function useKeyboardModifiers(): { + shift: boolean + control: boolean + meta: boolean + command: boolean +} { + if (typeof window === 'undefined') + return { shift: false, control: false, meta: false, command: false } + let _shift = $state(false) + let control = $state(false) + let meta = $state(false) + let command = $state(false) + $effect(() => { + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === 'Shift') _shift = true + else if (event.key === 'Control') control = true + else if (event.key === 'Meta') meta = true + else if (event.key === 'Command') command = true + } + + const handleKeyUp = (event: KeyboardEvent) => { + if (event.key === 'Shift') _shift = false + else if (event.key === 'Control') control = false + else if (event.key === 'Meta') meta = false + else if (event.key === 'Command') command = false + } + window.addEventListener('keydown', handleKeyDown) + window.addEventListener('keyup', handleKeyUp) + return () => { + window.removeEventListener('keydown', handleKeyDown) + window.removeEventListener('keyup', handleKeyUp) + } + }) + return { + get shift() { + return _shift + }, + get control() { + return control + }, + get meta() { + return meta + }, + get command() { + return command + } + } +}