@antelopejs/dms-database 0.1.1 → 0.2.0

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)

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

@@ -263,13 +263,10 @@ async function load(id: string) {
 	await leaving
 	if (sync !== owner) return
 	try {
-		const [positions, notes] = await Promise.all([
-			persistence.fetchLayout(id),
-			persistence.fetchNotes(id),
-		])
+		const stored = await persistence.readDiagram(id)
 		if (sync !== owner) return
-		state.positions = positions
-		state.notes = notes.map(noteFromStored)
+		state.positions = stored.positions
+		state.notes = stored.notes.map(noteFromStored)
 	} catch {
 		if (sync !== owner) return
 		state.positions = {}
@@ -288,7 +285,10 @@ async function load(id: string) {
 	loaded.value = true
 }
 
-watch(schemaId, (id) => id && load(id), { immediate: true })
+// The canvas is drawn in the browser, from a working copy of the layout and
+// notes it reads there: a server render, which would read them without
+// handing them over, never starts it.
+onMounted(() => watch(schemaId, (id) => id && load(id), { immediate: true }))
 
 function record(op: DiagramOperation) {
 	history.push(op)

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

@@ -31,7 +31,8 @@ import { ALL_INSTANCES_PARAM, tableLink } from '../build/utils/databaseLinks'
 // The Schemas page's row drawer (D-07), also opened from the diagram: the
 // facts of one table, its columns, indexes and relations both ways, and a
 // sample row. The table view hands it the row and the means to step to the
-// next one (J / K); a relation opens the table it names in its place.
+// next one (J / K), or to show another row in place; a relation opens the
+// table it names in its place.
 
 interface TableRow {
 	schema: string
@@ -50,6 +51,7 @@ interface RowNavigation {
 const props = defineProps<{
 	rowData?: TableRow
 	navigation?: RowNavigation
+	showRow?: (row: object | string) => Promise<void>
 }>()
 
 // A link out closes the drawer.
@@ -66,7 +68,6 @@ const BROWSE_LIST = '/api/database/browse/list'
 const BROWSE_COUNT = '/api/database/browse/count'
 
 const { t, n } = useI18n()
-const { $authFetch } = useAuthFetch()
 const { copy } = useClipboard()
 const toast = useToast()
 
@@ -100,7 +101,8 @@ const failed = computed(
 	() => schemasSettled.value && schemas.value === undefined,
 )
 
-// The table a relation was followed to, in place of the row's.
+// The table a relation was followed to, in place of the row's, where the
+// container cannot show another row (the diagram's drawer).
 const followed = ref<TableRow | null>(null)
 const shown = computed(() => followed.value ?? props.rowData)
 // J / K step from the row the table view opened: its position is not the
@@ -199,8 +201,19 @@ const incoming = computed(() =>
 	),
 )
 
-// The row's own table again closes the detour.
-function follow(target: TableRow) {
+// The table view shows the relation's table as its own row: the URL, the
+// position and J / K follow it. Elsewhere, or should it fail to read the
+// row, the inspector shows it itself, and the row's own table again closes
+// the detour.
+async function follow(target: TableRow) {
+	if (props.showRow) {
+		try {
+			await props.showRow(`${target.schema}::${target.name}`)
+			return
+		} catch {
+			// Shown in place below.
+		}
+	}
 	const own =
 		target.schema === props.rowData?.schema &&
 		target.name === props.rowData?.name
@@ -208,26 +221,23 @@ function follow(target: TableRow) {
 }
 
 // --- rows: in every instance at once; the data browser shows each one's ---
-const total = ref<number | null>(null)
-
-async function loadTotal(key: string) {
-	total.value = null
-	if (!schemaId.value || !tableName.value) return
-	try {
-		const result = await $authFetch<{ total: number }>(BROWSE_COUNT, {
-			query: {
-				filter_schema: `is:${schemaId.value}`,
-				filter_table: `is:${tableName.value}`,
-				filter_instance: `is:${CROSS_INSTANCE_VALUE}`,
-			},
-		})
-		if (key === tableKey.value) total.value = result.total
-	} catch {
-		// The total the list gave, if any, stays.
-	}
-}
-
-watch(tableKey, loadTotal, { immediate: true })
+// Read with the table, on the server too when the link opens the drawer; no
+// figure shows while another table's loads, nor once it failed.
+const rowTotal = useApiData<{ total: number }>(
+	() => (schemaId.value && tableName.value ? BROWSE_COUNT : null),
+	{
+		query: () => ({
+			filter_schema: `is:${schemaId.value}`,
+			filter_table: `is:${tableName.value}`,
+			filter_instance: `is:${CROSS_INSTANCE_VALUE}`,
+		}),
+	},
+)
+const total = computed(() =>
+	rowTotal.status.value === 'success'
+		? (rowTotal.data.value?.total ?? null)
+		: null,
+)
 
 const rowsFact = computed(() => {
 	const rows = total.value
@@ -269,20 +279,94 @@ const tabs = computed(() => [
 ])
 
 // --- sample row: the latest row, or the next one on demand ---
-const sample = ref<Record<string, unknown> | null>(null)
-const sampleOffset = ref(0)
-const sampleTotal = ref(0)
-const sampleLoading = ref(false)
-const sampleFailed = ref(false)
-
 interface SamplePage {
 	results: Record<string, unknown>[]
 	total: number
 }
 
-// The instance the sample is read from: the default one, or the first named
-// instance holding rows when the default one holds none.
-const sampleInstance = ref<string | null>(null)
+/**
+ * The row asked for: its offset in an instance. No instance at offset 0 reads
+ * the default one, or the first named instance holding rows when the default
+ * one holds none.
+ */
+interface SampleRequest {
+	instance: string | null
+	offset: number
+}
+
+/** A sample read, with the table and the instance it was read from. */
+interface SampleRead {
+	table: string
+	instance: string | null
+	page: SamplePage
+}
+
+const requested = shallowRef<SampleRequest>({ instance: null, offset: 0 })
+
+type ReadSample = (instance: string | null) => Promise<SamplePage>
+
+async function firstFilledInstance(
+	read: ReadSample,
+): Promise<{ instance: string | null; page: SamplePage }> {
+	const page = await read(null)
+	if (page.total > 0) return { instance: null, page }
+	for (const instance of schema.value?.instances ?? []) {
+		const named = await read(instance)
+		if (named.total > 0) return { instance, page: named }
+	}
+	return { instance: null, page }
+}
+
+// Read once the Sample tab shows, in the browser only.
+const sampleRead = useApiData<SampleRead>(
+	() =>
+		schemaId.value && tableName.value
+			? `dms-database:sample:${JSON.stringify([
+					tableKey.value,
+					requested.value.instance,
+					requested.value.offset,
+				])}`
+			: null,
+	async ({ $authFetch, signal }) => {
+		const table = tableKey.value
+		const { instance, offset } = requested.value
+		const read: ReadSample = (from) =>
+			$authFetch<SamplePage>(BROWSE_LIST, {
+				query: {
+					filter_schema: `is:${schemaId.value}`,
+					filter_table: `is:${tableName.value}`,
+					offset,
+					limit: 1,
+					...(from ? { filter_instance: `is:${from}` } : {}),
+				},
+				signal,
+			})
+		const found =
+			instance === null && offset === 0
+				? await firstFilledInstance(read)
+				: { instance, page: await read(instance) }
+		return { table, ...found }
+	},
+	{
+		immediate: false,
+		server: false,
+		watch: false,
+		refreshOnPageRefresh: false,
+	},
+)
+
+// Another table (a relation followed) shows none of the previous one's row.
+const sampleShown = computed(() => {
+	const value = sampleRead.data.value
+	return value?.table === tableKey.value ? value : null
+})
+const sample = computed(() => sampleShown.value?.page.results?.[0] ?? null)
+const sampleTotal = computed(() => sampleShown.value?.page.total ?? 0)
+const sampleOffset = computed(() => requested.value.offset)
+const sampleLoading = computed(() => sampleRead.pending.value)
+const sampleFailed = computed(() => sampleRead.status.value === 'error')
+// The instance the sample is read from.
+const sampleInstance = computed(() => sampleShown.value?.instance ?? null)
 
 const sampleInstanceLabel = computed(() =>
 	sampleInstance.value === null
@@ -292,72 +376,34 @@ const sampleInstanceLabel = computed(() =>
 			}),
 )
 
-function fetchSample(instance: string | null) {
-	const query: Record<string, string | number> = {
-		filter_schema: `is:${schemaId.value}`,
-		filter_table: `is:${tableName.value}`,
-		offset: sampleOffset.value,
-		limit: 1,
-	}
-	if (instance) query.filter_instance = `is:${instance}`
-	return $authFetch<SamplePage>(BROWSE_LIST, { query })
-}
-
-async function firstFilledInstance(): Promise<SamplePage> {
-	const page = await fetchSample(null)
-	if (page.total > 0) return page
-	for (const instance of schema.value?.instances ?? []) {
-		const named = await fetchSample(instance)
-		if (named.total > 0) {
-			sampleInstance.value = instance
-			return named
-		}
-	}
-	return page
-}
-
-async function loadSample() {
-	if (!schemaId.value || !tableName.value) return
-	sampleLoading.value = true
-	sampleFailed.value = false
-	try {
-		const res =
-			sampleInstance.value === null && sampleOffset.value === 0
-				? await firstFilledInstance()
-				: await fetchSample(sampleInstance.value)
-		sample.value = res.results?.[0] ?? null
-		sampleTotal.value = res.total ?? 0
-	} catch {
-		sampleFailed.value = true
-		sample.value = null
-	} finally {
-		sampleLoading.value = false
-	}
+function loadSample() {
+	if (schemaId.value && tableName.value) void sampleRead.execute()
 }
 
 function nextSample() {
-	sampleOffset.value =
-		sampleTotal.value > 0 ? (sampleOffset.value + 1) % sampleTotal.value : 0
+	const total = sampleTotal.value
+	requested.value = {
+		instance: sampleInstance.value,
+		offset: total > 0 ? (requested.value.offset + 1) % total : 0,
+	}
 	loadSample()
 }
 
 // Another table (a relation followed) starts over from its latest row.
 watch(tableKey, () => {
-	sample.value = null
-	sampleOffset.value = 0
-	sampleTotal.value = 0
-	sampleInstance.value = null
-	sampleFailed.value = false
+	requested.value = { instance: null, offset: 0 }
 	if (tab.value === 'sample' && !loading.value) loadSample()
 })
 
 // The sample waits for the schemas: they name the instances to look in.
-watch(
-	() => tab.value === 'sample' && !loading.value,
-	(ready) => {
-		if (ready && !sample.value && !sampleLoading.value) loadSample()
-	},
-	{ immediate: true },
+onMounted(() =>
+	watch(
+		() => tab.value === 'sample' && !loading.value,
+		(ready) => {
+			if (ready && !sample.value && !sampleLoading.value) loadSample()
+		},
+		{ immediate: true },
+	),
 )
 
 // The `_instance` tag the store adds to rows of named instances is not a

package/frontend-vue/package.json

@@ -6,7 +6,7 @@
 	"main": "./dms.frontend.ts",
 	"packageManager": "pnpm@10.6.5",
 	"engines": {
-		"@antelopejs/dms-frontend": ">=0.5.2 <0.6.0"
+		"@antelopejs/dms-frontend": ">=0.6.0 <0.7.0"
 	},
 	"scripts": {
 		"dev": "pnpm --dir ../playground frontend:dev",
@@ -36,6 +36,7 @@
 		"@intlify/message-compiler": "^11",
 		"@nuxt/ui": "4.10.0",
 		"@typescript-eslint/parser": "^8.0.0",
+		"@vitejs/plugin-vue": "^6.0.10",
 		"eslint": "^9.0.0",
 		"eslint-plugin-vue": "^10.0.0",
 		"prettier": "^3.5.3",