@antelopejs/dms-database 0.0.14 → 0.1.1

package/frontend-vue/app/components/DataBrowserTabBar.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import type { BrowserTab } from "../composables/useDataBrowserTabs";
+import {
+	instanceBadge as badgeOf,
+	useDataBrowserTabs,
+} from '../build/composables/useDataBrowserTabs'
+import { useStagedEdits } from '../build/data/stagedEdits'
+import type { BrowserTab } from '../build/composables/useDataBrowserTabs'
+
+// The open tables (D-05). A preview tab, in italics, is replaced by the next
+// table opened from the list; its pin keeps it, and the bar says so. A tab
+// holding staged edits carries a dot and asks before it is closed.
 
 const {
 	tabs,
@@ -9,20 +18,23 @@ const {
 	closeTab,
 	pinTab,
 	moveTab,
-} = useDataBrowserTabs();
-const { t } = useI18n();
+} = useDataBrowserTabs()
+const { t } = useI18n()
+const staged = useStagedEdits()
+const { confirm } = useConfirm()
 
-// Shared by the pin and close buttons — they are a hover-reveal pair on the
-// same tab and must render identically.
-const tabActionClass =
-	"rounded p-0.5 text-dimmed opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 hover:bg-elevated hover:text-default";
+const closeButtonClass =
+	'rounded p-0.5 text-dimmed opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 hover:bg-elevated hover:text-default'
+const pinButtonClass =
+	'rounded p-0.5 text-muted hover:bg-elevated hover:text-highlighted'
+const hasPreview = computed(() => tabs.value.some((tab) => tab.preview))
 
 // The label doubles as the accessible name; a preview tab announces its
 // ephemeral state, which the italic styling alone cannot convey.
 function tabAriaLabel(tab: BrowserTab): string {
 	return tab.preview
-		? t("dms_database.data.previewTab", { name: label(tab) })
-		: label(tab);
+		? t('dms_database.data.tabs.preview', { name: label(tab) })
+		: label(tab)
 }
 
 // Pinning from the pin button unmounts the button under focus (v-if), which
@@ -30,32 +42,32 @@ function tabAriaLabel(tab: BrowserTab): string {
 // label button — but only when focus actually fell to the body, so a mouse
 // click doesn't get focus stolen elsewhere.
 function pinFromButton(tab: BrowserTab, event: MouseEvent) {
-	const tabEl = (event.currentTarget as HTMLElement).closest("[data-tab]");
-	pinTab(tab.id);
+	const tabEl = (event.currentTarget as HTMLElement).closest('[data-tab]')
+	pinTab(tab.id)
 	nextTick(() => {
 		if (document.activeElement === document.body) {
-			tabEl?.querySelector("button")?.focus();
+			tabEl?.querySelector('button')?.focus()
 		}
-	});
+	})
 }
 
 // --- drag & drop reorder ---
-const draggedId = ref<string | null>(null);
-const dropTargetId = ref<string | null>(null);
+const draggedId = ref<string | null>(null)
+const dropTargetId = ref<string | null>(null)
 
 function onDragStart(tab: BrowserTab, event: DragEvent) {
-	draggedId.value = tab.id;
+	draggedId.value = tab.id
 	// Firefox refuses to start a drag without data attached.
-	event.dataTransfer?.setData("text/plain", tab.id);
-	if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+	event.dataTransfer?.setData('text/plain', tab.id)
+	if (event.dataTransfer) event.dataTransfer.effectAllowed = 'move'
 }
 
 function onDragOver(tab: BrowserTab, event: DragEvent) {
-	if (!draggedId.value || draggedId.value === tab.id) return;
+	if (!draggedId.value || draggedId.value === tab.id) return
 	// preventDefault marks the tab as a valid drop target.
-	event.preventDefault();
-	if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
-	dropTargetId.value = tab.id;
+	event.preventDefault()
+	if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+	dropTargetId.value = tab.id
 }
 
 function onDrop(tab: BrowserTab) {
@@ -63,104 +75,184 @@ function onDrop(tab: BrowserTab) {
 	// the dragged tab as a valid target, so this is belt-and-braces.)
 	if (draggedId.value && draggedId.value !== tab.id) {
 		// An arranged tab is kept (VS Code): a completed drag-reorder pins.
-		pinTab(draggedId.value);
-		moveTab(draggedId.value, tab.id);
+		pinTab(draggedId.value)
+		moveTab(draggedId.value, tab.id)
 	}
-	onDragEnd();
+	onDragEnd()
 }
 
 function onDragEnd() {
-	draggedId.value = null;
-	dropTargetId.value = null;
+	draggedId.value = null
+	dropTargetId.value = null
+}
+
+// Labels name the schema while tabs span several. Closing the last tab of a
+// schema would drop the prefix from every other label at once, so the tabs
+// shrink and slide under the pointer that is closing them: as browsers keep
+// tab widths, the prefix stays until the pointer leaves the bar.
+const pointerInBar = ref(false)
+const showSchema = ref(hasMultipleSchemas.value)
+watch(hasMultipleSchemas, (several) => {
+	if (several || !pointerInBar.value) showSchema.value = several
+})
+
+function leaveBar() {
+	pointerInBar.value = false
+	showSchema.value = hasMultipleSchemas.value
 }
 
+// Closing the last tab removes the bar before the pointer can leave it.
+watch(
+	() => tabs.value.length === 0,
+	(empty) => {
+		if (empty) leaveBar()
+	},
+)
+
 function label(tab: BrowserTab): string {
-	return hasMultipleSchemas.value ? `${tab.schema}.${tab.table}` : tab.table;
+	return showSchema.value ? `${tab.schema}.${tab.table}` : tab.table
 }
 
 function instanceBadge(tab: BrowserTab): string | null {
-	if (tab.instance === DEFAULT_INSTANCE_VALUE) return null;
-	if (tab.instance === CROSS_INSTANCE_VALUE) return "*";
-	return `@${tab.instance}`;
+	return badgeOf(tab.instance, t('dms_database.data.scope.all'))
 }
 
-function close(tab: BrowserTab) {
-	closeTab(tab.id);
+// The active tab stays in view when it changes or the bar fills up: a tab
+// opened at the end of a full bar would otherwise open out of sight.
+const strip = useTemplateRef<HTMLDivElement>('strip')
+watch(
+	[activeId, () => tabs.value.length],
+	() => {
+		nextTick(() => {
+			const id = activeId.value
+			if (!id) return
+			const active = [
+				...(strip.value?.querySelectorAll<HTMLElement>('[data-tab]') ?? []),
+			].find((element) => element.dataset.tabId === id)
+			active?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+		})
+	},
+	{ immediate: true, flush: 'post' },
+)
+
+async function close(tab: BrowserTab) {
+	const pending = staged.count(tab.id)
+	if (pending > 0) {
+		const discard = await confirm({
+			title: t('dms_database.data.tabs.close_title', { table: tab.table }),
+			description: t('dms_database.data.tabs.close_description', pending),
+			confirmLabel: t('dms_database.data.tabs.close_discard'),
+			cancelLabel: t('dms_database.data.tabs.close_keep'),
+			color: 'warning',
+			initialFocus: 'cancel',
+		})
+		if (!discard) return
+		staged.discard(tab.id)
+	}
+	closeTab(tab.id)
 }
 </script>
 
 <template>
 	<div
 		v-if="tabs.length > 0"
-		class="flex items-end gap-1 overflow-x-auto border-b border-default bg-elevated/50 px-2 pt-1.5"
+		class="border-default bg-elevated/50 flex items-end border-b"
+		@pointerenter="pointerInBar = true"
+		@pointerleave="leaveBar"
 	>
 		<div
-			v-for="tab in tabs"
-			:key="tab.id"
-			data-tab
-			draggable="true"
-			class="group flex shrink-0 select-none items-center gap-1.5 rounded-t-md border border-b-0 px-2.5 py-1.5"
-			:class="[
-				tab.id === activeId
-					? 'border-default bg-default'
-					: 'border-transparent bg-transparent hover:bg-default/60',
-				tab.id === draggedId ? 'opacity-40' : '',
-				tab.id === dropTargetId ? 'ring-1 ring-primary ring-inset' : '',
-			]"
-			@dragstart="onDragStart(tab, $event)"
-			@dragover="onDragOver(tab, $event)"
-			@drop.prevent="onDrop(tab)"
-			@dragend="onDragEnd"
+			ref="strip"
+			class="flex min-w-0 flex-1 items-end gap-1 overflow-x-auto px-2 pt-1.5 [scrollbar-width:thin]"
 		>
-			<button
-				type="button"
-				class="flex items-center gap-1.5"
-				:aria-label="tabAriaLabel(tab)"
-				@click="activateTab(tab.id)"
-				@dblclick="pinTab(tab.id)"
+			<div
+				v-for="tab in tabs"
+				:key="tab.id"
+				data-tab
+				:data-tab-id="tab.id"
+				draggable="true"
+				class="group flex shrink-0 select-none items-center gap-1.5 rounded-t-md border border-b-0 px-2.5 py-1.5"
+				:class="[
+					tab.id === activeId
+						? 'border-default bg-default'
+						: 'hover:bg-default/60 border-transparent bg-transparent',
+					tab.id === draggedId ? 'opacity-40' : '',
+					tab.id === dropTargetId ? 'ring-primary ring-1 ring-inset' : '',
+				]"
+				@dragstart="onDragStart(tab, $event)"
+				@dragover="onDragOver(tab, $event)"
+				@drop.prevent="onDrop(tab)"
+				@dragend="onDragEnd"
 			>
-				<UIcon
-					name="i-ph-table"
-					class="size-3.5"
-					:class="tab.id === activeId ? 'text-primary' : 'text-dimmed'"
-				/>
-				<span
-					class="max-w-48 truncate font-mono text-xs"
-					:class="[
-						tab.id === activeId ? 'text-highlighted' : 'text-muted',
-						tab.preview ? 'italic' : '',
-					]"
+				<button
+					type="button"
+					class="flex items-center gap-1.5"
+					:aria-label="tabAriaLabel(tab)"
+					@click="activateTab(tab.id)"
+					@dblclick="pinTab(tab.id)"
 				>
-					{{ label(tab) }}
-				</span>
-				<span
-					v-if="instanceBadge(tab)"
-					class="rounded bg-primary/10 px-1 font-mono text-[10px] text-primary"
+					<UIcon
+						name="i-ph-table"
+						class="size-3.5"
+						:class="tab.id === activeId ? 'text-primary' : 'text-dimmed'"
+					/>
+					<span
+						class="max-w-48 truncate font-mono text-xs"
+						:class="[
+							tab.id === activeId ? 'text-highlighted' : 'text-muted',
+							tab.preview ? 'italic' : '',
+						]"
+					>
+						{{ label(tab) }}
+					</span>
+					<span
+						v-if="instanceBadge(tab)"
+						class="text-primary font-mono text-[10.5px]"
+					>
+						{{ instanceBadge(tab) }}
+					</span>
+					<span
+						v-if="staged.count(tab.id) > 0"
+						class="bg-warning size-1.5 rounded-full"
+						:title="t('dms_database.data.tabs.unsaved', staged.count(tab.id))"
+					/>
+				</button>
+				<button
+					type="button"
+					:class="[closeButtonClass, { 'opacity-100': tab.id === activeId }]"
+					:aria-label="t('dms_database.data.tabs.close')"
+					:title="t('dms_database.data.tabs.close')"
+					@click.stop="close(tab)"
 				>
-					{{ instanceBadge(tab) }}
-				</span>
-			</button>
-			<button
-				type="button"
-				:class="[tabActionClass, { 'opacity-100': tab.id === activeId }]"
-				:aria-label="$t('dms_database.data.closeTab')"
-				@click.stop="close(tab)"
-			>
-				<UIcon name="i-ph-x" class="size-3" />
-			</button>
-			<!-- The pin button sits AFTER the close button: pinning unmounts it, and
+					<UIcon name="i-ph-x" class="size-3" />
+				</button>
+				<!-- The pin button sits AFTER the close button: pinning unmounts it, and
 			     nothing may reflow into the pointer's position — a double-click's
 			     second click would otherwise land on the close button and destroy
 			     the tab the user just pinned. -->
-			<button
-				v-if="tab.preview"
-				type="button"
-				:class="[tabActionClass, { 'opacity-100': tab.id === activeId }]"
-				:aria-label="$t('dms_database.data.keepTab')"
-				@click.stop="pinFromButton(tab, $event)"
-			>
-				<UIcon name="i-ph-push-pin" class="size-3" />
-			</button>
+				<UTooltip
+					v-if="tab.preview"
+					:text="t('dms_database.data.tabs.keep_hint')"
+				>
+					<button
+						type="button"
+						:class="pinButtonClass"
+						:aria-label="t('dms_database.data.tabs.keep')"
+						@click.stop="pinFromButton(tab, $event)"
+					>
+						<UIcon name="i-ph-push-pin" class="size-3" />
+					</button>
+				</UTooltip>
+			</div>
 		</div>
+		<span
+			v-if="hasPreview"
+			class="text-dimmed hidden shrink-0 self-center whitespace-nowrap px-3 pb-1 pt-1.5 text-[11px] lg:inline"
+		>
+			<i18n-t keypath="dms_database.data.tabs.hint" tag="span">
+				<template #italic>
+					<em>{{ t('dms_database.data.tabs.italic') }}</em>
+				</template>
+			</i18n-t>
+		</span>
 	</div>
 </template>

package/frontend-vue/app/components/DataFilterBar.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { isReservedFilterField } from '../build/composables/useDataBrowserGrid'
+import type {
+	ColumnFilterState,
+	GridColumn,
+} from '../build/composables/useDataBrowserGrid'
+import { describeRuntimeType } from '../build/utils/fieldTypes'
+
+// The active column filters as removable chips (D-14), with a way to add one
+// on any column and to clear them all.
+
+type FilterMode = ColumnFilterState['mode']
+
+const props = defineProps<{
+	columns: GridColumn[]
+	filters: Record<string, ColumnFilterState>
+}>()
+
+const emit = defineEmits<{
+	set: [field: string, filter: ColumnFilterState | null]
+	clear: []
+}>()
+
+const { t } = useI18n()
+
+const chips = computed(() =>
+	Object.entries(props.filters)
+		.filter(([, filter]) => filter.value)
+		.map(([field, filter]) => {
+			const column = props.columns.find((candidate) => candidate.name === field)
+			return {
+				field,
+				filter,
+				icon: column
+					? describeRuntimeType(column.type, column.name).icon
+					: 'i-ph-funnel',
+			}
+		}),
+)
+
+const MODE_LABELS: Record<FilterMode, string> = {
+	contains: 'dms_database.data.filters.contains',
+	is: 'dms_database.data.filters.is',
+}
+
+const addOpen = ref(false)
+const draftField = ref<string | undefined>()
+const draftMode = ref<FilterMode>('contains')
+const draftValue = ref('')
+
+const fieldItems = computed(() =>
+	props.columns
+		.filter((column) => !isReservedFilterField(column.name))
+		.map((column) => ({ label: column.name, value: column.name })),
+)
+const modeItems = computed(() =>
+	(Object.keys(MODE_LABELS) as FilterMode[]).map((mode) => ({
+		label: t(MODE_LABELS[mode]),
+		value: mode,
+	})),
+)
+
+watch(addOpen, (open) => {
+	if (!open) return
+	draftField.value = fieldItems.value[0]?.value
+	draftMode.value = 'contains'
+	draftValue.value = ''
+})
+
+function add() {
+	const value = draftValue.value.trim()
+	if (!draftField.value || !value) return
+	emit('set', draftField.value, { mode: draftMode.value, value })
+	addOpen.value = false
+}
+</script>
+
+<template>
+	<div
+		class="border-default flex flex-wrap items-center gap-1.5 border-b px-3 py-1.5"
+	>
+		<span
+			v-for="chip in chips"
+			:key="chip.field"
+			class="border-accented bg-elevated inline-flex h-7 items-center overflow-hidden rounded-md border text-xs"
+		>
+			<span class="text-toned flex items-center gap-1 px-2 font-mono">
+				<UIcon :name="chip.icon" class="text-dimmed size-3" />
+				{{ chip.field }}
+			</span>
+			<span class="text-muted border-default border-l px-2">
+				{{ t(MODE_LABELS[chip.filter.mode]) }}
+			</span>
+			<span
+				class="text-highlighted border-default max-w-48 truncate border-l px-2 font-mono"
+			>
+				{{ chip.filter.value }}
+			</span>
+			<button
+				type="button"
+				class="text-dimmed hover:text-highlighted hover:bg-default border-default h-full border-l px-1.5"
+				:aria-label="
+					t('dms_database.data.filters.remove_chip', { column: chip.field })
+				"
+				:title="
+					t('dms_database.data.filters.remove_chip', { column: chip.field })
+				"
+				@click="emit('set', chip.field, null)"
+			>
+				<UIcon name="i-ph-x" class="size-3" />
+			</button>
+		</span>
+		<UPopover v-model:open="addOpen">
+			<UButton
+				size="xs"
+				color="neutral"
+				variant="ghost"
+				icon="i-ph-plus"
+				:label="t('dms_database.data.filters.add')"
+				:disabled="fieldItems.length === 0"
+			/>
+			<template #content>
+				<form class="grid w-64 gap-2 p-3" @submit.prevent="add">
+					<USelect
+						v-model="draftField"
+						:items="fieldItems"
+						size="xs"
+						class="w-full font-mono"
+					/>
+					<USelect
+						v-model="draftMode"
+						:items="modeItems"
+						size="xs"
+						class="w-full"
+					/>
+					<UInput
+						v-model="draftValue"
+						size="xs"
+						class="w-full"
+						autofocus
+						:placeholder="t('dms_database.data.filters.value')"
+					/>
+					<UButton
+						type="submit"
+						size="xs"
+						class="justify-self-end"
+						:label="t('dms_database.data.filters.apply')"
+						:disabled="!draftValue.trim()"
+					/>
+				</form>
+			</template>
+		</UPopover>
+		<UButton
+			v-if="chips.length > 0"
+			size="xs"
+			color="neutral"
+			variant="ghost"
+			class="ml-auto"
+			:label="t('dms_database.data.filters.clear_all')"
+			@click="emit('clear')"
+		/>
+	</div>
+</template>