@antelopejs/dms-database 0.1.2 → 0.2.1

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

@@ -8,14 +8,14 @@ import { useDatabaseSchemas } from '../build/composables/useDatabaseSchemas'
 import {
 	GRID_PAGE_SIZES,
 	browseListQuery,
-	browseParamsKey,
 	browseSelectionQuery,
 	useDataBrowserGrid,
 } from '../build/composables/useDataBrowserGrid'
 import { onKeyStroke, useEventListener } from '@vueuse/core'
 import { parseDraft } from '../build/data/cellValues'
 import { useStagedEdits } from '../build/data/stagedEdits'
-import { useStagedSave } from '../build/data/useStagedSave'
+import { mayMoveRows, withWrittenRow } from '../build/data/stagedWrites'
+import { type SavedChanges, useStagedSave } from '../build/data/useStagedSave'
 import type { TableSummary } from '../build/composables/useDatabaseSchemas'
 import type { BrowserTab } from '../build/composables/useDataBrowserTabs'
 import type {
@@ -34,6 +34,8 @@ import RowDrawer from './RowDrawer.vue'
 // The grid of one open table. Rows are read a page at a time; a committed
 // cell is staged, not written (D-02): the save bar offers a review of every
 // change before it is written, then the save and its undo for a few seconds.
+// A row written shows as the server answered it, in place: the page is read
+// again only when the write may move rows in or out of it.
 
 const BROWSE_ENDPOINT = '/api/database/browse'
 // Browse-only columns: the source instance of a cross-instance read.
@@ -63,7 +65,6 @@ const props = defineProps<{
 }>()
 
 const { t, n } = useI18n()
-const { $authFetch } = useAuthFetch()
 const router = useDmsRouter()
 const grid = useDataBrowserGrid()
 const staged = useStagedEdits()
@@ -75,12 +76,23 @@ const state = grid.getState(props.tab.id)
 const readOnly = computed(() => props.tab.instance === CROSS_INSTANCE_VALUE)
 
 // --- data loading ---
-const data = ref<GridData | null>(grid.getCache(props.tab.id))
-const loading = ref(false)
-const loadError = ref<string | null>(null)
-let requestSeq = 0
-// Column metadata only depends on the tab, so it is read once per mount.
-const columnsMeta = ref<ColumnsResponse | null>(null)
+const selection = computed(() => browseSelectionQuery(props.tab))
+// The columns sampled from the table: the table alone decides them. A
+// failure leaves the grid on the introspected fields.
+const columnsRead = useApiData<ColumnsResponse>(`${BROWSE_ENDPOINT}/columns`, {
+	query: selection,
+})
+// A page of rows, read again as the selection, the page, the sort, the search
+// or the filters change; the previous page stays on screen meanwhile.
+const listRead = useApiData<ListResponse>(`${BROWSE_ENDPOINT}/list`, {
+	query: () => ({ ...selection.value, ...browseListQuery(state) }),
+})
+const loading = computed(() => listRead.pending.value)
+const loadError = computed(() => {
+	const error = listRead.error.value
+	if (!error) return null
+	return error instanceof Error ? error.message : String(error)
+})
 
 function columnsOf(
 	meta: ColumnsResponse | null,
@@ -96,90 +108,36 @@ function columnsOf(
 	}))
 }
 
-async function fetchPage(force: boolean) {
-	const selection = browseSelectionQuery(props.tab)
-	const needColumns = force || columnsMeta.value === null
-	return Promise.all([
-		needColumns
-			? // A columns failure must not discard the rows: the grid falls back
-				// to the introspected fields.
-				$authFetch<ColumnsResponse>(`${BROWSE_ENDPOINT}/columns`, {
-					query: selection,
-				}).catch(() => null)
-			: Promise.resolve(columnsMeta.value),
-		$authFetch<ListResponse>(`${BROWSE_ENDPOINT}/list`, {
-			query: { ...selection, ...browseListQuery(state) },
-		}),
-	])
-}
-
-async function load(force = false) {
-	const key = browseParamsKey(props.tab, state)
-	const cached = grid.getCache(props.tab.id)
-	if (!force && cached && cached.paramsKey === key) {
-		// Retire a request in flight: its late answer would overwrite the cache
-		// with rows for parameters the user has left.
-		requestSeq += 1
-		data.value = cached
-		loadError.value = null
-		loading.value = false
-		return
-	}
-	const seq = ++requestSeq
-	loading.value = true
-	loadError.value = null
-	try {
-		const [columnsRes, listRes] = await fetchPage(force)
-		if (seq !== requestSeq) return
-		if (columnsRes) columnsMeta.value = columnsRes
-		const primaryKey =
-			listRes.primaryKey ?? columnsMeta.value?.primaryKey ?? null
-		const next: GridData = {
-			columns: columnsOf(columnsMeta.value, primaryKey),
-			rows: listRes.results ?? [],
-			total: listRes.total ?? 0,
-			primaryKey,
-			paramsKey: key,
-		}
-		grid.setCache(props.tab.id, next)
-		data.value = next
-		if (
-			editing.value &&
-			rowIdOf(next.rows[editing.value.r] ?? {}) !== editing.value.rowId
-		) {
-			cancelEdit()
-		}
-		// Rows deleted elsewhere can leave the page past the end.
-		if (next.total > 0 && state.page * state.pageSize >= next.total) {
-			state.page = Math.max(0, Math.ceil(next.total / state.pageSize) - 1)
-		}
-	} catch (error) {
-		if (seq !== requestSeq) return
-		loadError.value = error instanceof Error ? error.message : String(error)
-	} finally {
-		if (seq === requestSeq) loading.value = false
+const data = computed<GridData | null>(() => {
+	const list = listRead.data.value
+	if (!list) return null
+	const meta = columnsRead.data.value
+	const primaryKey = list.primaryKey ?? meta?.primaryKey ?? null
+	return {
+		columns: columnsOf(meta, primaryKey),
+		rows: list.results ?? [],
+		total: list.total ?? 0,
+		primaryKey,
 	}
-}
-
-watch(
-	() => browseParamsKey(props.tab, state),
-	() => load(),
-	{ immediate: true },
-)
+})
 
-// A table cached empty while the schemas were still loading recovers once
-// its introspected fields arrive.
-watch(
-	() => props.table,
-	(table) => {
-		if (table && (data.value?.columns.length ?? 0) === 0 && !loading.value)
-			load(true)
-	},
-)
+watch(data, (next) => {
+	if (!next) return
+	if (
+		editing.value &&
+		rowIdOf(next.rows[editing.value.r] ?? {}) !== editing.value.rowId
+	) {
+		cancelEdit()
+	}
+	// Rows deleted elsewhere can leave the page past the end.
+	if (next.total > 0 && state.page * state.pageSize >= next.total) {
+		state.page = Math.max(0, Math.ceil(next.total / state.pageSize) - 1)
+	}
+})
 
 function reload() {
-	grid.invalidate(props.tab.id)
-	load(true)
+	void columnsRead.refresh()
+	void listRead.refresh()
 }
 
 const columns = computed(() => data.value?.columns ?? [])
@@ -237,7 +195,6 @@ watch(searchDraft, (value) => {
 })
 onBeforeUnmount(() => {
 	clearTimeout(searchTimer)
-	requestSeq += 1
 	const value = searchDraft.value.trim()
 	if (value !== state.search) {
 		state.search = value
@@ -492,6 +449,30 @@ const pendingCount = computed(() => staged.count(props.tab.id))
 const changedFields = computed(() => [
 	...new Set(staged.list(props.tab.id).map((change) => change.field)),
 ])
+// The page on screen, with a row written in place of the one read: the read's
+// data is replaced (it is shallow), so the cell shows the stored value at once.
+function showWritten(tab: BrowserTab, row: Record<string, unknown>) {
+	const list = listRead.data.value
+	if (tab.id !== props.tab.id || !list) return
+	listRead.data.value = {
+		...list,
+		results: withWrittenRow(list.results ?? [], row, rowIdOf),
+	}
+}
+
+// A save may change which rows the page holds, or their order, only through
+// the fields it sorts, filters or searches by; a row gone meanwhile leaves.
+function afterSave({ fields, gone }: SavedChanges) {
+	const filtered = Object.entries(state.filters)
+		.filter(([, filter]) => filter.value)
+		.map(([field]) => field)
+	if (
+		gone > 0 ||
+		mayMoveRows(fields, { sortKey: state.sortKey, search: state.search, filtered })
+	)
+		reload()
+}
+
 const {
 	saving,
 	review,
@@ -499,7 +480,8 @@ const {
 	undo,
 } = useStagedSave({
 	tab: () => props.tab,
-	onSaved: reload,
+	onWritten: showWritten,
+	onSaved: afterSave,
 })
 
 onKeyStroke('s', (event) => {

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

@@ -40,76 +40,84 @@ const emit = defineEmits<{ 'update:modelValue': [choice: InstanceChoice] }>()
 const INSTANCES_ENDPOINT = '/api/database/tables/instances'
 const SEARCH_DEBOUNCE_MS = 250
 
+/** One read of a schema's named instances, with what it searched. */
+interface InstancesPage {
+	schema: string
+	term: string
+	instances: string[]
+	total: number
+}
+
 const { t, n } = useI18n()
-const { $authFetch } = useAuthFetch()
 
 const search = ref('')
+// What the server searches: the term once typing settles.
+const term = ref('')
 const open = ref(false)
-const names = ref<string[]>([])
-const matched = ref(0)
-// Named instances of the schema, before any search; null until known.
-const total = ref<number | null>(null)
-const status = ref<InstancesStatus>('idle')
-let request = 0
-let loadedKey: string | null = null
-
-async function load() {
-	const schema = props.schema
-	if (!schema) return
-	const term = search.value.trim()
-	const key = `${schema}\u0000${term}`
-	if (key === loadedKey) return
-	const current = ++request
-	status.value = 'pending'
-	try {
-		const res = await $authFetch<{ instances: string[]; total: number }>(
+
+watchDebounced(search, (value) => (term.value = value.trim()), {
+	debounce: SEARCH_DEBOUNCE_MS,
+})
+
+// Read when the menu opens, in the browser only, never on the page's
+// refreshes: a closed menu shows nothing of it.
+const instances = useApiData<InstancesPage>(
+	() =>
+		props.schema
+			? `dms-database:instances:${JSON.stringify([props.schema, term.value])}`
+			: null,
+	async ({ $authFetch, signal }) => {
+		const schema = props.schema as string
+		const searched = term.value
+		const page = await $authFetch<{ instances: string[]; total: number }>(
 			INSTANCES_ENDPOINT,
 			{
-				query: {
-					schema,
-					search: term || undefined,
-					limit: PICKER_LIMIT,
-				},
+				query: { schema, search: searched || undefined, limit: PICKER_LIMIT },
+				signal,
 			},
 		)
-		if (current !== request) return
-		names.value = res.instances
-		matched.value = res.total
-		if (!term) total.value = res.total
-		status.value = 'success'
-		loadedKey = key
-	} catch {
-		if (current === request) status.value = 'error'
-	}
-}
-
-// Another schema, other instances: they load when the menu opens.
-watch(
-	() => props.schema,
-	() => {
-		request++
-		loadedKey = null
-		names.value = []
-		matched.value = 0
-		total.value = null
-		status.value = 'idle'
-		if (open.value) void load()
+		return { schema, term: searched, ...page }
+	},
+	{
+		immediate: false,
+		server: false,
+		watch: false,
+		refreshOnPageRefresh: false,
 	},
 )
 
+// Another schema shows none of the previous one's instances while its own
+// load; another search keeps the previous matches on screen meanwhile.
+const page = computed(() => {
+	const value = instances.data.value
+	return value?.schema === props.schema ? value : null
+})
+const names = computed(() => page.value?.instances ?? [])
+const matched = computed(() => page.value?.total ?? 0)
+const status = computed(() => instances.status.value as InstancesStatus)
+
+// Named instances of the schema, before any search; null until known.
+const unsearched = shallowRef<InstancesPage | null>(null)
+watch(page, (value) => {
+	if (value && !value.term) unsearched.value = value
+})
+const total = computed(() =>
+	unsearched.value?.schema === props.schema ? unsearched.value.total : null,
+)
+
+function load() {
+	if (!open.value || !props.schema) return
+	if (instances.pending.value || instances.status.value === 'success') return
+	void instances.execute()
+}
+
+watch([() => props.schema, term], load)
+
 function onOpen(value: boolean) {
 	open.value = value
-	if (value) void load()
+	load()
 }
 
-watchDebounced(
-	search,
-	() => {
-		if (open.value) void load()
-	},
-	{ debounce: SEARCH_DEBOUNCE_MS },
-)
-
 const items = computed(() =>
 	instanceMenu({
 		search: search.value,

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

@@ -50,10 +50,9 @@ const OPERATION_ICONS: Record<string, string> = {
 const { t, n } = useI18n()
 const route = useDmsRoute()
 const router = useDmsRouter()
-const { $authFetch } = useAuthFetch()
 const { confirm } = useConfirm()
 const toast = useToast()
-const { user } = useUserSession()
+const { user } = useDmsUserSession()
 const store = useQueryStore()
 const { schemas } = useDatabaseSchemas()
 
@@ -64,11 +63,9 @@ const failure = ref<QueryFailure | null>(null)
 const target = ref<QueryTarget>({})
 const loadedSaved = ref<SavedQuery | null>(null)
 const activeHistoryId = ref<string | null>(null)
-const libraryLoading = ref(true)
 // Named instances holding rows of a table the last read found empty in the
 // default instance.
 const elsewhere = ref<InstanceRows[]>([])
-const team = ref<SavedQuery[]>([])
 const editor = useTemplateRef<InstanceType<typeof QueryBuilderPanel>>('editor')
 
 const edited = computed(
@@ -80,24 +77,10 @@ const ownId = computed(
 )
 
 // --- library ---
-async function refreshHistory() {
-	await store.fetchHistory().catch(() => undefined)
-}
-
-async function refreshSaved() {
-	await store.fetchSaved('me').catch(() => undefined)
-	try {
-		const res = await $authFetch<{ items: SavedQuery[] }>(
-			'/api/database/query/saved',
-			{
-				query: { scope: 'shared' },
-			},
-		)
-		team.value = res.items.filter((query) => query.userId !== ownId.value)
-	} catch {
-		team.value = []
-	}
-}
+// The team's queries: the shared ones the caller did not write.
+const team = computed(() =>
+	store.sharedQueries.value.filter((query) => query.userId !== ownId.value),
+)
 
 function openSaved(query: SavedQuery) {
 	loadedSaved.value = query
@@ -151,7 +134,7 @@ async function deleteSaved(query: SavedQuery) {
 	if (!confirmed) return
 	await store.deleteSaved(query.id).catch(() => undefined)
 	if (loadedSaved.value?.id === query.id) loadedSaved.value = null
-	await refreshSaved()
+	await store.refreshSaved()
 }
 
 async function clearHistory() {
@@ -185,22 +168,25 @@ function fetchDuration(error: unknown): number | null {
 	return typeof duration === 'number' ? duration : null
 }
 
+type CountRows = (query: Record<string, string>) => Promise<{ total: number }>
+
 /**
  * The named instances of a table that hold rows, each with its count: asked
  * only when a read found the table empty in the default instance (decision
  * 11). An instance whose count fails is left out.
  */
-async function instancesWithRows(target: QueryTarget): Promise<InstanceRows[]> {
+async function instancesWithRows(
+	target: QueryTarget,
+	count: CountRows,
+): Promise<InstanceRows[]> {
 	const instances =
 		schemas.value.find((schema) => schema.id === target.schema)?.instances ?? []
 	const counts = await Promise.all(
 		instances.map((id) =>
-			$authFetch<{ total: number }>(BROWSE_COUNT, {
-				query: {
-					filter_schema: `is:${target.schema}`,
-					filter_table: `is:${target.table}`,
-					filter_instance: `is:${id}`,
-				},
+			count({
+				filter_schema: `is:${target.schema}`,
+				filter_table: `is:${target.table}`,
+				filter_instance: `is:${id}`,
 			}).then(
 				(res) => ({ id, count: res.total }),
 				() => ({ id, count: 0 }),
@@ -210,6 +196,29 @@ async function instancesWithRows(target: QueryTarget): Promise<InstanceRows[]> {
 	return counts.filter((entry) => entry.count > 0)
 }
 
+// The table the last read found empty, whose instances are counted: in the
+// browser, after a run.
+const emptyTarget = shallowRef<QueryTarget | null>(null)
+const elsewhereRead = useApiData<InstanceRows[]>(
+	() =>
+		emptyTarget.value
+			? `dms-database:elsewhere:${JSON.stringify([
+					emptyTarget.value.schema,
+					emptyTarget.value.table,
+				])}`
+			: null,
+	({ $authFetch, signal }) =>
+		instancesWithRows(emptyTarget.value as QueryTarget, (query) =>
+			$authFetch<{ total: number }>(BROWSE_COUNT, { query, signal }),
+		),
+	{
+		immediate: false,
+		server: false,
+		watch: false,
+		refreshOnPageRefresh: false,
+	},
+)
+
 // Each run drops the instances found for the previous one; a slow answer
 // for an older run is ignored.
 let runId = 0
@@ -228,8 +237,9 @@ async function findElsewhere(
 		!next.table
 	)
 		return
-	const found = await instancesWithRows(next)
-	if (id === runId) elsewhere.value = found
+	emptyTarget.value = next
+	await elsewhereRead.execute()
+	if (id === runId) elsewhere.value = elsewhereRead.data.value ?? []
 }
 
 // The result keeps naming the previous run's target until the new one lands.
@@ -251,7 +261,7 @@ async function execute(query: Record<string, unknown>, text: string) {
 		target.value = next
 		executing.value = false
 		activeHistoryId.value = null
-		await refreshHistory()
+		await store.refreshHistory()
 	}
 }
 
@@ -516,7 +526,7 @@ async function confirmSave() {
 			color: 'success',
 			icon: 'i-ph-check',
 		})
-		await refreshSaved()
+		await store.refreshSaved()
 	} catch (error) {
 		saveError.value =
 			error instanceof Error && !('data' in error)
@@ -570,9 +580,9 @@ async function openFromRoute(): Promise<boolean> {
 	return opened
 }
 
+// The link and the draft name queries of the library: once it is read.
 onMounted(async () => {
-	await Promise.all([refreshHistory(), refreshSaved()])
-	libraryLoading.value = false
+	await store.libraryRead
 	if (!(await openFromRoute())) restoreDraft()
 })
 </script>
@@ -590,7 +600,7 @@ onMounted(async () => {
 			:team="team"
 			:active-saved-id="loadedSaved?.id ?? null"
 			:active-history-id="activeHistoryId"
-			:loading="libraryLoading"
+			:loading="store.libraryLoading.value"
 			@open-history="openHistory"
 			@save-history="openSaveModal"
 			@open-saved="openSaved"

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

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import {
-	dayLabel,
 	groupByDay,
 	HISTORY_KEPT,
 	RUN_DOT_CLASSES,
@@ -38,7 +37,10 @@ const emit = defineEmits<{
 	'clear-history': []
 }>()
 
-const { t, n, locale } = useI18n()
+const { t, n } = useI18n()
+// Times and days in the user's time zone, which a server render writes in
+// the browser's: the HTML shows what the browser shows.
+const { dateTimeFormat } = useRegionalFormat()
 
 const tab = ref<LibraryTab>('history')
 const search = ref('')
@@ -76,15 +78,18 @@ const historyGroups = computed(() =>
 			matches(entry.source, entry.error, target),
 		),
 		({ entry }) => entry.executedAt,
-	).map((group) => ({
-		...group,
-		label: dayLabel(group.date, locale.value, {
-			today: t('dms_database.query.library.today'),
-			yesterday: t('dms_database.query.library.yesterday'),
-		}),
-	})),
+		regionalDayKey,
+	).map((group) => ({ ...group, label: dayLabel(group.date) })),
 )
 
+/** "Today", "Yesterday" or the date. */
+function dayLabel(date: Date): string {
+	const daysAgo = regionalDayNumber(new Date()) - regionalDayNumber(date)
+	if (daysAgo === 0) return t('dms_database.query.library.today')
+	if (daysAgo === 1) return t('dms_database.query.library.yesterday')
+	return dateTimeFormat({ day: 'numeric', month: 'short' }).format(date)
+}
+
 const savedItems = computed(() =>
 	(tab.value === 'team' ? props.team : props.saved).filter((query) =>
 		matches(query.name, query.description, query.source, query.ownerName),
@@ -92,10 +97,9 @@ const savedItems = computed(() =>
 )
 
 function time(iso: string): string {
-	return new Intl.DateTimeFormat(locale.value, {
-		hour: '2-digit',
-		minute: '2-digit',
-	}).format(new Date(iso))
+	return dateTimeFormat({ hour: '2-digit', minute: '2-digit' }).format(
+		new Date(iso),
+	)
 }
 
 function runMeta(entry: HistoryEntry): string {
@@ -116,10 +120,9 @@ function runMeta(entry: HistoryEntry): string {
 }
 
 function savedMeta(query: SavedQuery): string {
-	const date = new Intl.DateTimeFormat(locale.value, {
-		day: 'numeric',
-		month: 'short',
-	}).format(new Date(query.updatedAt ?? query.createdAt))
+	const date = dateTimeFormat({ day: 'numeric', month: 'short' }).format(
+		new Date(query.updatedAt ?? query.createdAt),
+	)
 	return query.ownerName ? `${query.ownerName} · ${date}` : date
 }
 

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

@@ -58,7 +58,6 @@ const props = defineProps<{
 const emit = defineEmits<{ success: [] }>()
 
 const { t, n } = useI18n()
-const { $authFetch } = useAuthFetch()
 const staged = useStagedEdits()
 
 const active = ref<DrawerTab>('fields')
@@ -169,23 +168,21 @@ function setBoolean(field: string, value: boolean) {
 }
 
 // --- referenced by ---
-const references = ref<RowReference[] | null>(null)
-const referencesFailed = ref(false)
-
-async function loadReferences() {
-	if (!props.rowId || props.readOnly) return
-	referencesFailed.value = false
-	try {
-		const res = await $authFetch<{ items: RowReference[] }>(
-			'/api/database/browse/references',
-			{
-				query: { ...browseSelectionQuery(props.tab), id: props.rowId },
-			},
-		)
-		references.value = res.items
-	} catch {
-		referencesFailed.value = true
-	}
+// Read once the drawer opens, in the browser.
+const referencesRead = useApiData<{ items: RowReference[] }>(
+	() =>
+		props.rowId && !props.readOnly ? '/api/database/browse/references' : null,
+	{
+		query: () => ({ ...browseSelectionQuery(props.tab), id: props.rowId }),
+		immediate: false,
+		server: false,
+	},
+)
+const references = computed(() => referencesRead.data.value?.items ?? null)
+const referencesFailed = computed(() => referencesRead.status.value === 'error')
+
+function loadReferences() {
+	void referencesRead.execute()
 }
 
 onMounted(loadReferences)