@antelopejs/dms-database 0.0.1

package/frontend-vue/app/utils/databaseFieldTypeIcons.ts

@@ -0,0 +1,224 @@
+import type { FieldDescriptor } from "../composables/useDatabaseSchemas";
+
+export interface TypeIcon {
+	icon: string;
+	color: string;
+	label: string;
+}
+
+const NAMED_TYPE_ICONS: Record<string, TypeIcon> = {
+	email: { icon: "i-ph-at", color: "text-sky-500", label: "Email" },
+	password: { icon: "i-ph-lock", color: "text-amber-500", label: "Password" },
+	secret: { icon: "i-ph-lock", color: "text-amber-500", label: "Secret" },
+};
+
+const FALLBACK_ICON: TypeIcon = {
+	icon: "i-ph-question",
+	color: "text-muted",
+	label: "Unknown",
+};
+
+const STRING_ICON: TypeIcon = {
+	icon: "i-ph-text-aa",
+	color: "text-neutral-500",
+	label: "String",
+};
+const NUMBER_ICON: TypeIcon = {
+	icon: "i-ph-hash",
+	color: "text-blue-500",
+	label: "Number",
+};
+const BOOLEAN_ICON: TypeIcon = {
+	icon: "i-ph-toggle-right",
+	color: "text-emerald-500",
+	label: "Boolean",
+};
+const DATE_ICON: TypeIcon = {
+	icon: "i-ph-calendar-blank",
+	color: "text-violet-500",
+	label: "Date",
+};
+const ARRAY_ICON: TypeIcon = {
+	icon: "i-ph-brackets-square",
+	color: "text-orange-500",
+	label: "Array",
+};
+const OBJECT_ICON: TypeIcon = {
+	icon: "i-ph-brackets-curly",
+	color: "text-amber-600",
+	label: "Object",
+};
+const RECORD_ICON: TypeIcon = {
+	icon: "i-ph-brackets-curly",
+	color: "text-amber-600",
+	label: "Record",
+};
+const TUPLE_ICON: TypeIcon = {
+	icon: "i-ph-brackets-square",
+	color: "text-orange-500",
+	label: "Tuple",
+};
+const ENUM_ICON: TypeIcon = {
+	icon: "i-ph-list-checks",
+	color: "text-cyan-500",
+	label: "Enum",
+};
+const UNION_ICON: TypeIcon = {
+	icon: "i-ph-split",
+	color: "text-fuchsia-500",
+	label: "Union",
+};
+const NULL_ICON: TypeIcon = {
+	icon: "i-ph-circle-dashed",
+	color: "text-muted",
+	label: "Null",
+};
+
+const PRIMARY_KEY_NAMES = new Set(["id", "_id"]);
+const PRIMARY_KEY_INDEXES = ["pk", "primary"] as const;
+
+function literalLabel(value: string | number | boolean): string {
+	if (typeof value === "string") return `"${value}"`;
+	return String(value);
+}
+
+function describeDescriptor(d: FieldDescriptor): string {
+	switch (d.kind) {
+		case "string":
+		case "number":
+		case "boolean":
+		case "date":
+		case "any":
+		case "unknown":
+		case "null":
+		case "undefined":
+			return d.kind;
+		case "literal":
+			return literalLabel(d.value);
+		case "array":
+			return `${d.element ? describeDescriptor(d.element) : "any"}[]`;
+		case "tuple":
+			return `[${d.elements.map(describeDescriptor).join(", ")}]`;
+		case "object":
+			return d.partial ? "Partial object" : "Object";
+		case "record":
+			return `Record<${d.key ? describeDescriptor(d.key) : "string"}, ${describeDescriptor(
+				d.value,
+			)}>`;
+		case "union":
+			return d.members.map(describeDescriptor).join(" | ");
+		case "intersection":
+			return d.members.map(describeDescriptor).join(" & ");
+		case "keyof":
+			return d.keys.length > 0 ? d.keys.map((k) => `"${k}"`).join(" | ") : "keyof";
+		case "refinement":
+			return d.name;
+		case "recursive":
+			return d.name;
+	}
+}
+
+function descriptorIcon(d: FieldDescriptor): TypeIcon {
+	switch (d.kind) {
+		case "string":
+			return STRING_ICON;
+		case "number":
+			return NUMBER_ICON;
+		case "boolean":
+			return BOOLEAN_ICON;
+		case "date":
+			return DATE_ICON;
+		case "null":
+		case "undefined":
+			return NULL_ICON;
+		case "any":
+		case "unknown":
+			return FALLBACK_ICON;
+		case "array":
+			return d.element
+				? { ...ARRAY_ICON, label: `${describeDescriptor(d.element)}[]` }
+				: ARRAY_ICON;
+		case "tuple":
+			return { ...TUPLE_ICON, label: describeDescriptor(d) };
+		case "object":
+			return d.partial ? { ...OBJECT_ICON, label: "Partial object" } : OBJECT_ICON;
+		case "record":
+			return { ...RECORD_ICON, label: describeDescriptor(d) };
+		case "literal": {
+			const base =
+				typeof d.value === "string"
+					? STRING_ICON
+					: typeof d.value === "number"
+						? NUMBER_ICON
+						: BOOLEAN_ICON;
+			return { ...base, label: literalLabel(d.value) };
+		}
+		case "union": {
+			const allLiteral =
+				d.members.length > 0 && d.members.every((m) => m.kind === "literal");
+			if (allLiteral) {
+				return { ...ENUM_ICON, label: describeDescriptor(d) };
+			}
+			return { ...UNION_ICON, label: describeDescriptor(d) };
+		}
+		case "intersection":
+			return { ...UNION_ICON, label: describeDescriptor(d) };
+		case "keyof":
+			return { ...ENUM_ICON, label: describeDescriptor(d) };
+		case "refinement": {
+			const base = descriptorIcon(d.base);
+			return { ...base, label: d.name };
+		}
+		case "recursive":
+			return { ...FALLBACK_ICON, label: d.name };
+	}
+}
+
+function isDescriptor(value: unknown): value is FieldDescriptor {
+	return (
+		value !== null &&
+		typeof value === "object" &&
+		typeof (value as { kind?: unknown }).kind === "string"
+	);
+}
+
+const RUNTIME_TYPE_ICONS: Record<string, TypeIcon> = {
+	string: STRING_ICON,
+	number: NUMBER_ICON,
+	boolean: BOOLEAN_ICON,
+	array: ARRAY_ICON,
+	object: OBJECT_ICON,
+	null: NULL_ICON,
+	undefined: NULL_ICON,
+};
+
+// Icon for a COARSE RUNTIME type as sampled by the browse `/columns` endpoint
+// (string | number | boolean | object | array | null | undefined) — the data
+// grid's headers use this so runtime-sampled and schema-declared columns share
+// one icon set. Named-field overrides (email, password…) still apply.
+export function runtimeTypeIcon(type: string, fieldName: string): TypeIcon {
+	const named = NAMED_TYPE_ICONS[fieldName.toLowerCase()];
+	if (named) return named;
+	return RUNTIME_TYPE_ICONS[type] ?? FALLBACK_ICON;
+}
+
+export function inferFieldTypeIcon(
+	field: unknown,
+	fieldName: string,
+): TypeIcon {
+	const named = NAMED_TYPE_ICONS[fieldName.toLowerCase()];
+	if (named) return named;
+	if (isDescriptor(field)) return descriptorIcon(field);
+	return FALLBACK_ICON;
+}
+
+export function isPrimaryKey(
+	fieldName: string,
+	indexes: Record<string, { fields?: string[] }>,
+): boolean {
+	if (PRIMARY_KEY_NAMES.has(fieldName)) return true;
+	for (const indexName of PRIMARY_KEY_INDEXES) {
+		if (indexes[indexName]?.fields?.includes(fieldName)) return true;
+	}
+	return false;
+}

package/frontend-vue/app/utils/dmsTableView.ts

@@ -0,0 +1,83 @@
+// Helpers that build, by hand, the *serialised* column config the shared
+// dms-ui `DmsTableView` component expects.
+//
+// The DMS normally generates these objects on the backend from a
+// `DataController` (one fixed table per controller). The module's navigation
+// lists (overview, schema inspector) render read-only tables against module
+// endpoints without such a controller, so we reproduce the same serialised
+// shapes the DMS emits for its own tables.
+//
+// Reference shapes:
+//   DataTypeConfig  — dms-core/app/types/data-type.ts
+//   TableViewColumn — dms-ui/.../table-view/types/column.ts
+//   ComponentInfo   — { componentName, options? }
+
+// The component name a serialised `FormComponents.InputText()` resolves to.
+const TEXT_INPUT_COMPONENT = "dms-input-text";
+
+export interface DmsComponentInfo {
+	componentName: string;
+	options?: Record<string, unknown>;
+}
+
+export interface DmsDataTypeConfig {
+	id: string;
+	compareModes: string[];
+	defaultCompareMode?: string;
+	filterComponents: Record<string, DmsComponentInfo | "noInput">;
+	inputComponent: DmsComponentInfo;
+}
+
+export interface DmsTableViewColumn {
+	id: string;
+	header: string;
+	accessorKey: string;
+	listable: boolean;
+	type: DmsDataTypeConfig;
+	visible?: boolean;
+	enableSorting?: boolean;
+	enableColumnFilter?: boolean;
+	readonlyBehavior?: string;
+}
+
+// A string/text data type — the safe default for an introspected, schemaless
+// column. `id` is the load-bearing field: DmsTableView dereferences
+// `column.type.id` during setup, so every column MUST carry a valid type config
+// or the component throws immediately.
+export function stringDataType(): DmsDataTypeConfig {
+	return {
+		id: "string",
+		// Filter modes offered when column filtering is enabled; the browse backend
+		// decodes `is` (exact) and `contains` (substring).
+		compareModes: ["is", "contains"],
+		defaultCompareMode: "contains",
+		filterComponents: {
+			default: { componentName: TEXT_INPUT_COMPONENT },
+			is: { componentName: TEXT_INPUT_COMPONENT },
+			contains: { componentName: TEXT_INPUT_COMPONENT },
+		},
+		inputComponent: { componentName: TEXT_INPUT_COMPONENT },
+	};
+}
+
+export interface ReadonlyColumnSpec {
+	key: string;
+	header: string;
+	enableSorting?: boolean;
+}
+
+// Build read-only, sortable columns with explicit (i18n) headers — used by the
+// table-navigation lists, which are display-only (no form components).
+export function buildReadonlyColumns(
+	specs: ReadonlyColumnSpec[],
+): DmsTableViewColumn[] {
+	return specs.map((spec) => ({
+		id: spec.key,
+		accessorKey: spec.key,
+		header: spec.header,
+		listable: true,
+		type: stringDataType(),
+		enableSorting: spec.enableSorting ?? true,
+		enableColumnFilter: false,
+	}));
+}

package/frontend-vue/app/utils/relativeTime.ts

@@ -0,0 +1,15 @@
+const relativeFormatter = new Intl.RelativeTimeFormat(undefined, {
+	numeric: "auto",
+});
+
+// Human "3 minutes ago" style label for an ISO timestamp, relative to now.
+// Shared by the query history and favorites panels.
+export function formatRelativeTime(iso: string): string {
+	const diffMs = new Date(iso).getTime() - Date.now();
+	const minutes = Math.round(diffMs / 60_000);
+	if (Math.abs(minutes) < 60) return relativeFormatter.format(minutes, "minute");
+	const hours = Math.round(minutes / 60);
+	if (Math.abs(hours) < 24) return relativeFormatter.format(hours, "hour");
+	const days = Math.round(hours / 24);
+	return relativeFormatter.format(days, "day");
+}

package/frontend-vue/app/utils/stagedSerialization.ts

@@ -0,0 +1,91 @@
+import {
+	Datum,
+	Query,
+	Schema,
+	SchemaInstance,
+	Selection,
+	SingleSelection,
+	Stream,
+	Table,
+	ValueProxy,
+} from '@antelopejs/interface-database/staged-query'
+
+export interface QueryStage {
+	stage: string
+	options?: unknown
+	args: unknown[]
+}
+
+type StagedCtor = new (...args: never[]) => unknown
+
+const STAGED_CLASSES: Record<string, StagedCtor> = {
+	Schema,
+	SchemaInstance,
+	Table,
+	Selection,
+	SingleSelection,
+	Stream,
+	Datum,
+	Query,
+	ValueProxy,
+}
+
+function classNameOf(obj: object): string | undefined {
+	for (const [name, ctor] of Object.entries(STAGED_CLASSES)) {
+		if (obj instanceof ctor) return name
+	}
+	return undefined
+}
+
+export function encodeStaged(node: unknown): unknown {
+	if (node === null || node === undefined) return node
+	if (typeof node !== 'object') return node
+	if (Array.isArray(node)) return node.map(encodeStaged)
+
+	const cls = classNameOf(node)
+	if (cls) {
+		const stages = (node as { stages?: unknown[] }).stages ?? []
+		return {
+			__cls: cls,
+			stages: stages.map(encodeStage),
+		}
+	}
+
+	const out: Record<string, unknown> = {}
+	for (const [key, value] of Object.entries(node as Record<string, unknown>)) {
+		out[key] = encodeStaged(value)
+	}
+	return out
+}
+
+function encodeStage(stage: unknown): unknown {
+	if (!stage || typeof stage !== 'object') return stage
+	const { stage: name, options, args } = stage as Partial<QueryStage>
+	const encoded: QueryStage = {
+		stage: typeof name === 'string' ? name : '',
+		args: Array.isArray(args) ? args.map(encodeStaged) : [],
+	}
+	if (options !== undefined) encoded.options = encodeStaged(options)
+	return encoded
+}
+
+const MUTATING_STAGES = new Set(['insert', 'update', 'replace', 'delete'])
+
+export function containsMutations(root: unknown): boolean {
+	if (!root || typeof root !== 'object') return false
+	const stages = (root as { stages?: unknown }).stages
+	if (!Array.isArray(stages)) return false
+	for (const stage of stages) {
+		if (!stage || typeof stage !== 'object') continue
+		const s = stage as { stage?: unknown; args?: unknown }
+		if (typeof s.stage === 'string' && MUTATING_STAGES.has(s.stage)) {
+			return true
+		}
+		if (Array.isArray(s.args)) {
+			for (const arg of s.args) {
+				if (containsMutations(arg)) return true
+			}
+		}
+	}
+	return false
+}

package/frontend-vue/dms.frontend.ts

@@ -0,0 +1,38 @@
+import { defineAsyncComponent, type Component } from 'vue'
+import type { DmsFrontendModule } from '#dms-inertia/frontend-module'
+
+interface VueModule {
+	default: Component
+}
+
+const components = import.meta.glob<VueModule>('./app/components/**/*.vue')
+const pages = import.meta.glob<VueModule>('./app/custom-pages/**/*.vue')
+
+const frontendModule: DmsFrontendModule = {
+	setup(sdk) {
+		for (const [path, loader] of Object.entries(components).sort()) {
+			const name = path
+				.split('/')
+				.at(-1)!
+				.replace(/\.vue$/, '')
+			sdk.registerComponent(
+				`DmsDatabase${name}`,
+				defineAsyncComponent(async () => (await loader()).default),
+			)
+		}
+		for (const [path, loader] of Object.entries(pages).sort()) {
+			const name = path.replace('./app/custom-pages/', '').replace(/\.vue$/, '')
+			const component = defineAsyncComponent(
+				async () => (await loader()).default,
+			)
+			const componentName = name
+				.split('/')
+				.map((part) => part[0].toUpperCase() + part.slice(1))
+				.join('')
+			sdk.registerPage(name, component, loader)
+			sdk.registerComponent(`Dms${componentName}`, component)
+		}
+	},
+}
+
+export default frontendModule

package/frontend-vue/eslint.config.mjs

@@ -0,0 +1,16 @@
+import vue from 'eslint-plugin-vue'
+import typescript from '@typescript-eslint/parser'
+
+export default [
+	{ ignores: ['node_modules/**', 'dist/**'] },
+	...vue.configs['flat/essential'],
+	{
+		files: ['**/*.ts'],
+		languageOptions: { parser: typescript },
+	},
+	{
+		files: ['**/*.vue'],
+		languageOptions: { parserOptions: { parser: typescript } },
+		rules: { 'vue/multi-word-component-names': 'off' },
+	},
+]