@antelopejs/dms-database 0.0.1

package/frontend-vue/app/custom-pages/database/query.vue

@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import { prepareQueryPayload } from "../../composables/useQueryRuntime";
+import type {
+	ExecuteResult,
+	HistoryEntry,
+	QueryLanguage,
+	QueryScope,
+	SavedQuery,
+} from "../../composables/useQueryStore";
+
+const HISTORY_PAGE_SIZE = 5;
+const MUTATION_SKIP_KEY = "dms-db-query.skipMutationWarning";
+
+const route = useDmsRoute();
+const router = useDmsRouter();
+
+const {
+	savedQueries,
+	historyItems,
+	historyTotal,
+	fetchSaved,
+	fetchHistory,
+	executeQuery,
+	saveQuery,
+	updateSaved,
+	deleteSaved,
+} = useQueryStore();
+
+const { schemas: dbSchemas, refresh: refreshSchemas } = useDatabaseSchemas();
+
+const DATA_PATH = "/modules/database/data";
+
+const queryText = ref<string>("");
+const language = ref<QueryLanguage>("aql");
+const lastResult = ref<ExecuteResult | null>(null);
+const resultMode = ref<"table" | "json" | "chart">("table");
+const executing = ref(false);
+
+const savedScope = ref<QueryScope>("me");
+const historyPage = ref(0);
+
+const saveModalOpen = ref(false);
+const saveName = ref("");
+const saveDescription = ref("");
+const saveShared = ref(false);
+const saving = ref(false);
+// Non-null while the save modal edits an existing saved query instead of
+// creating a new one. The modal works on its own snapshot of the source and
+// language, so it never clobbers (or depends on) the main editor.
+const editingSaved = ref<SavedQuery | null>(null);
+const saveSource = ref("");
+const saveLanguage = ref<QueryLanguage>("aql");
+const saveError = ref<string | null>(null);
+
+const mutationModalOpen = ref(false);
+const mutationDontRemind = ref(false);
+let pendingPayload: { query: Record<string, unknown>; source: string } | null =
+	null;
+
+async function refreshSaved() {
+	try {
+		await fetchSaved(savedScope.value);
+	} catch {
+		savedQueries.value = [];
+	}
+}
+
+async function refreshHistory() {
+	try {
+		await fetchHistory(
+			HISTORY_PAGE_SIZE,
+			historyPage.value * HISTORY_PAGE_SIZE,
+		);
+	} catch {
+		historyItems.value = [];
+		historyTotal.value = 0;
+	}
+}
+
+watch(savedScope, refreshSaved);
+watch(historyPage, refreshHistory);
+
+function loadFromSaved(saved: SavedQuery) {
+	queryText.value = saved.source;
+	language.value = saved.language;
+}
+
+function loadFromHistory(entry: HistoryEntry) {
+	queryText.value = entry.source;
+	language.value = entry.language;
+}
+
+function saveFromHistory(entry: HistoryEntry) {
+	loadFromHistory(entry);
+	openSaveModal();
+}
+
+function setError(message: string) {
+	lastResult.value = {
+		rows: [],
+		executedAt: new Date().toISOString(),
+		durationMs: 0,
+		error: message,
+	};
+}
+
+function extractFetchError(err: unknown): string {
+	const { data, message } = (err ?? {}) as { data?: unknown; message?: unknown };
+	if (typeof data === "string" && data.length > 0) return data;
+	if (data && typeof data === "object") {
+		const inner = (data as { message?: unknown; error?: unknown }).message
+			?? (data as { message?: unknown; error?: unknown }).error;
+		if (typeof inner === "string" && inner.length > 0) return inner;
+	}
+	if (typeof message === "string" && message.length > 0) return message;
+	return "Query execution failed";
+}
+
+async function runPrepared(query: Record<string, unknown>, source: string) {
+	executing.value = true;
+	try {
+		const result = await executeQuery(query, source, language.value);
+		lastResult.value = result;
+		await refreshHistory();
+	} catch (err) {
+		setError(extractFetchError(err));
+	} finally {
+		executing.value = false;
+	}
+}
+
+async function onExecute() {
+	if (!queryText.value.trim() || executing.value) return;
+
+	let prepared: ReturnType<typeof prepareQueryPayload>;
+	try {
+		prepared = prepareQueryPayload(queryText.value, dbSchemas.value);
+	} catch (err) {
+		setError((err as Error).message);
+		return;
+	}
+
+	const skip =
+		typeof window !== "undefined" &&
+		window.localStorage?.getItem(MUTATION_SKIP_KEY) === "true";
+	if (prepared.hasMutations && !skip) {
+		pendingPayload = { query: prepared.query, source: prepared.source };
+		mutationDontRemind.value = false;
+		mutationModalOpen.value = true;
+		return;
+	}
+
+	await runPrepared(prepared.query, prepared.source);
+}
+
+async function confirmMutation() {
+	const payload = pendingPayload;
+	pendingPayload = null;
+	mutationModalOpen.value = false;
+	if (mutationDontRemind.value && typeof window !== "undefined") {
+		window.localStorage?.setItem(MUTATION_SKIP_KEY, "true");
+	}
+	if (payload) {
+		await runPrepared(payload.query, payload.source);
+	}
+}
+
+function cancelMutation() {
+	pendingPayload = null;
+	mutationModalOpen.value = false;
+}
+
+function openSaveModal() {
+	editingSaved.value = null;
+	saveName.value = "";
+	saveDescription.value = "";
+	saveShared.value = false;
+	// Snapshot the editor state; confirmSave only reads modal refs.
+	saveSource.value = queryText.value;
+	saveLanguage.value = language.value;
+	saveError.value = null;
+	saveModalOpen.value = true;
+}
+
+// Editing reuses the save modal: open it blank, then overlay the item.
+function openEditModal(item: SavedQuery) {
+	openSaveModal();
+	editingSaved.value = item;
+	saveName.value = item.name;
+	saveDescription.value = item.description;
+	saveShared.value = item.shared;
+	saveSource.value = item.source;
+	saveLanguage.value = item.language;
+}
+
+async function confirmSave() {
+	const name = saveName.value.trim();
+	if (!name) return;
+
+	// A metadata-only edit reuses the stored payload — re-preparing would
+	// needlessly re-evaluate the source and fail when the query's schema is
+	// no longer registered.
+	const editing = editingSaved.value;
+	let payload: { query: Record<string, unknown>; source: string };
+	if (editing && saveSource.value === editing.source) {
+		payload = { query: editing.query, source: editing.source };
+	} else {
+		try {
+			payload = prepareQueryPayload(saveSource.value, dbSchemas.value);
+		} catch (err) {
+			saveError.value = (err as Error).message;
+			return;
+		}
+	}
+
+	saving.value = true;
+	saveError.value = null;
+	try {
+		const input = {
+			name,
+			description: saveDescription.value.trim(),
+			query: payload.query,
+			source: payload.source,
+			language: saveLanguage.value,
+			shared: saveShared.value,
+		};
+		if (editing) {
+			await updateSaved(editing.id, input);
+		} else {
+			await saveQuery(input);
+		}
+		saveModalOpen.value = false;
+		await refreshSaved();
+	} catch (err) {
+		saveError.value = extractFetchError(err);
+	} finally {
+		saving.value = false;
+	}
+}
+
+async function onDeleteSaved(id: string) {
+	try {
+		await deleteSaved(id);
+		await refreshSaved();
+	} catch {
+		// swallow — re-fetch ensures the UI is consistent
+		await refreshSaved();
+	}
+}
+
+onMounted(async () => {
+	await Promise.all([refreshSaved(), refreshHistory(), refreshSchemas()]);
+	const queryParam = route.query.q;
+	const targetId = typeof queryParam === "string" ? queryParam : null;
+	if (targetId) {
+		const match = savedQueries.value.find((q) => q.id === targetId);
+		if (match) loadFromSaved(match);
+	}
+	// A raw DSL snippet forwarded from the data browser ("Open in query console")
+	// prefills the editor directly.
+	const sourceParam = route.query.source;
+	const prefill = typeof sourceParam === "string" ? sourceParam : null;
+	if (prefill) queryText.value = prefill;
+	if (targetId || prefill) {
+		router.replace({ query: { ...route.query, q: undefined, source: undefined } });
+	}
+});
+</script>
+
+<template>
+	<div class="space-y-6 pb-6">
+		<section class="flex flex-wrap items-center gap-4 pt-6 pb-2">
+			<div
+				class="rounded-lg bg-primary/10 shadow-sm shrink-0 ring ring-primary/20 flex items-center justify-center size-12"
+			>
+				<UIcon name="i-ph-code" class="text-primary" size="1.75rem" />
+			</div>
+			<div class="flex-1 min-w-0">
+				<h1 class="text-highlighted font-semibold">
+					{{ $t("dms_database.query.title") }}
+				</h1>
+				<p class="text-muted text-sm">
+					{{ $t("dms_database.query.description") }}
+				</p>
+			</div>
+			<UButton
+				:to="DATA_PATH"
+				color="neutral"
+				variant="ghost"
+				icon="i-ph-table"
+				:label="$t('dms_database.query.backToData')"
+				class="ml-auto"
+			/>
+		</section>
+
+		<div class="grid grid-cols-1 lg:grid-cols-[18rem_1fr] gap-5 items-start">
+			<aside class="flex flex-col gap-5 lg:sticky lg:top-6 lg:max-h-[calc(100vh-6rem)]">
+				<DmsDatabaseQueryHistoryPanel
+					v-model:page="historyPage"
+					:items="historyItems"
+					:total="historyTotal"
+					:page-size="HISTORY_PAGE_SIZE"
+					class="flex-1 min-h-0 max-h-96"
+					@load="loadFromHistory"
+					@save="saveFromHistory"
+				/>
+				<DmsDatabaseQueryFavoritesPanel
+					v-model:scope="savedScope"
+					:items="savedQueries"
+					class="flex-1 min-h-0 max-h-80"
+					@load="loadFromSaved"
+					@edit="openEditModal"
+					@delete="onDeleteSaved"
+				/>
+			</aside>
+
+			<div class="flex flex-col gap-5 min-w-0">
+				<DmsDatabaseQueryBuilderPanel
+					v-model="queryText"
+					v-model:language="language"
+					:executing="executing"
+					:schemas="dbSchemas"
+					@execute="onExecute"
+					@save="openSaveModal"
+				/>
+				<DmsDatabaseQueryResultPanel
+					v-model:mode="resultMode"
+					:result="lastResult"
+				/>
+			</div>
+		</div>
+
+		<UModal
+			v-model:open="saveModalOpen"
+			:title="
+				editingSaved
+					? $t('dms_database.query.editModal.title')
+					: $t('dms_database.query.saveModal.title')
+			"
+		>
+			<template #body>
+				<div class="space-y-4">
+					<UFormField :label="$t('dms_database.query.saveModal.name')" required>
+						<UInput
+							v-model="saveName"
+							autofocus
+							class="w-full"
+							:placeholder="$t('dms_database.query.saveModal.namePlaceholder')"
+						/>
+					</UFormField>
+					<UFormField :label="$t('dms_database.query.saveModal.description')">
+						<UTextarea
+							v-model="saveDescription"
+							class="w-full"
+							:placeholder="$t('dms_database.query.saveModal.descriptionPlaceholder')"
+							:rows="3"
+						/>
+					</UFormField>
+					<UFormField
+						v-if="editingSaved"
+						:label="$t('dms_database.query.editModal.query')"
+					>
+						<UTextarea
+							v-model="saveSource"
+							class="w-full font-mono"
+							:rows="4"
+						/>
+					</UFormField>
+					<UCheckbox
+						v-model="saveShared"
+						:label="$t('dms_database.query.saveModal.share')"
+						:description="$t('dms_database.query.saveModal.shareDescription')"
+					/>
+					<UAlert
+						v-if="saveError"
+						color="error"
+						variant="subtle"
+						:title="$t('dms_database.query.errorTitle')"
+						:description="saveError"
+					/>
+				</div>
+			</template>
+			<template #footer>
+				<div class="flex w-full justify-end gap-2">
+					<UButton
+						variant="outline"
+						color="neutral"
+						:disabled="saving"
+						@click="saveModalOpen = false"
+					>
+						{{ $t("dms_database.query.saveModal.cancel") }}
+					</UButton>
+					<UButton
+						color="primary"
+						:loading="saving"
+						:disabled="!saveName.trim() || saving"
+						@click="confirmSave"
+					>
+						{{ $t("dms_database.query.saveModal.save") }}
+					</UButton>
+				</div>
+			</template>
+		</UModal>
+
+		<UModal
+			v-model:open="mutationModalOpen"
+			:title="$t('dms_database.query.mutationModal.title')"
+		>
+			<template #body>
+				<div class="space-y-4">
+					<p class="text-sm text-muted">
+						{{ $t("dms_database.query.mutationModal.body") }}
+					</p>
+					<UCheckbox
+						v-model="mutationDontRemind"
+						:label="$t('dms_database.query.mutationModal.dontRemind')"
+					/>
+				</div>
+			</template>
+			<template #footer>
+				<div class="flex w-full justify-end gap-2">
+					<UButton variant="outline" color="neutral" @click="cancelMutation">
+						{{ $t("dms_database.query.mutationModal.cancel") }}
+					</UButton>
+					<UButton color="warning" @click="confirmMutation">
+						{{ $t("dms_database.query.mutationModal.confirm") }}
+					</UButton>
+				</div>
+			</template>
+		</UModal>
+	</div>
+</template>

package/frontend-vue/app/custom-pages/database/schemas.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import type { TableSummary } from "../../composables/useDatabaseSchemas";
+import SchemaTableInspector from "../../components/SchemaTableInspector.vue";
+import { buildReadonlyColumns } from "../../utils/dmsTableView";
+
+const TABLES_LOCATION = "/api/database/tables";
+const COMPONENT_ID = "database-schemas-tables";
+const PAGE_ID = "database.schemas";
+
+// One table summary row, as returned by /api/database/tables/list.
+interface TableListRow {
+	id: string;
+	schema: string;
+	name: string;
+	columnCount: number;
+	indexCount: number;
+	relationCount: number;
+	elementCount: number;
+}
+
+const route = useDmsRoute();
+const { t } = useI18n();
+const { schemas } = useDatabaseSchemas();
+
+const fullFormatter = new Intl.NumberFormat("en-US");
+
+// --- schema selection (pill) ---
+// Local state (not URL-bound) to avoid re-triggering the global module-routing
+// guard on every selection, which can loop. Deep links via ?schema are honoured
+// once on load; the diagram link carries the schema explicitly.
+const initialSchema = route.query.schema;
+const selectedSchemaId = ref<string | null>(
+	typeof initialSchema === "string" && initialSchema.length > 0
+		? initialSchema
+		: null,
+);
+
+const currentSchema = computed(
+	() => schemas.value.find((s) => s.id === selectedSchemaId.value) ?? null,
+);
+
+const schemaOptions = computed(() =>
+	schemas.value.map((s) => ({ label: s.id, value: s.id })),
+);
+
+watch(
+	schemas,
+	(list) => {
+		if (selectedSchemaId.value) return;
+		if (list[0]) selectedSchemaId.value = list[0].id;
+	},
+	{ immediate: true },
+);
+
+// --- list / diagram view toggle (inline alternate view, no navigation) ---
+// View is local state, diagram by default; ?view=list deep links are honoured
+// once on load without writing back to the URL.
+type SchemaView = "list" | "diagram";
+const view = ref<SchemaView>(route.query.view === "list" ? "list" : "diagram");
+const viewItems = computed(() => [
+	{ label: t("dms_database.schemas.view.diagram"), value: "diagram" as const, icon: "i-ph-graph" },
+	{ label: t("dms_database.schemas.view.list"), value: "list" as const, icon: "i-ph-table" },
+]);
+
+// --- tables list (shared DmsTableView, read-only) ---
+const columns = computed(() =>
+	buildReadonlyColumns([
+		{ key: "name", header: t("dms_database.overview.tables.cols.table") },
+		{ key: "elementCount", header: t("dms_database.overview.tables.cols.rows") },
+		{ key: "columnCount", header: t("dms_database.overview.tables.cols.columns") },
+		{ key: "indexCount", header: t("dms_database.overview.tables.cols.indexes") },
+		{ key: "relationCount", header: t("dms_database.schemas.cols.relations") },
+	]),
+);
+
+// Pin the table list to the selected schema. The table is remounted (`:key`) when
+// the schema changes so the filter is rebuilt cleanly.
+const defaultFilters = computed(() =>
+	selectedSchemaId.value
+		? [{ accessorKey: "schema", value: selectedSchemaId.value, mode: "is" }]
+		: [],
+);
+
+const collectionsLabel = computed(() =>
+	t(
+		"dms_database.schemas.collections",
+		{ count: currentSchema.value?.tables.length ?? 0 },
+		currentSchema.value?.tables.length ?? 0,
+	),
+);
+
+// --- inspector (shared dms drawer) ---
+// Opened imperatively through the dms-ui `useDrawer` composable: the shared
+// DynamicDrawer owns the themed surface, the header (table name + subtitle) and
+// the close button; SchemaTableInspector only renders the body (tabs + content).
+const { open: openDrawer } = useDrawer();
+
+function inspectorSubtitle(table: TableSummary, rows: number | null): string {
+	const parts: string[] = [];
+	if (rows != null) {
+		parts.push(
+			`${fullFormatter.format(rows)} ${t("dms_database.overview.storage.rowsUnit")}`,
+		);
+	}
+	parts.push(
+		t("dms_database.data.colCount", {
+			count: Object.keys(table.fields ?? {}).length,
+		}),
+	);
+	return parts.join(" · ");
+}
+
+function openInspectorForTable(table: TableSummary, rows: number | null) {
+	// `useDrawer` (dms-ui ≥ 0.1.3) defers the actual open until any closing
+	// row-actions menu has left the DOM, so opening from the "View details"
+	// dropdown no longer flashes the drawer in and out — no local wait needed.
+	// The schema id is captured here (at call time) into componentOptions rather
+	// than read lazily: the open may still be deferred while the menu closes, and
+	// the schema pill could change in that window.
+	openDrawer({
+		title: table.name,
+		description: inspectorSubtitle(table, rows),
+		direction: "right",
+		component: SchemaTableInspector,
+		componentOptions: {
+			schemaId: selectedSchemaId.value,
+			table,
+		},
+	});
+}
+
+function openInspector(row: TableListRow) {
+	// The list row carries display counts; the full descriptor (fields/indexes/
+	// relations) comes from the schema introspection the inspector needs.
+	const table = currentSchema.value?.tables.find((tbl) => tbl.name === row.name);
+	if (!table) return;
+	openInspectorForTable(table, row.elementCount ?? null);
+}
+
+// Double-clicking a table node in the diagram opens the same inspector drawer.
+function openInspectorByName(tableName: string) {
+	const table = currentSchema.value?.tables.find((tbl) => tbl.name === tableName);
+	if (!table) return;
+	openInspectorForTable(table, null);
+}
+
+// A row (double-)click opens the table inspector drawer.
+useTableViewRowClick<TableListRow>(COMPONENT_ID, openInspector);
+</script>
+
+<template>
+	<div class="space-y-5 pb-6">
+		<section class="flex flex-wrap items-center gap-4 pt-6 pb-2">
+			<div
+				class="rounded-lg bg-primary/10 shadow-sm shrink-0 ring ring-primary/20 flex items-center justify-center size-12"
+			>
+				<UIcon name="i-ph-tree-structure" class="text-primary" size="1.75rem" />
+			</div>
+			<div class="flex-1 min-w-0">
+				<h1 class="text-highlighted font-semibold">
+					{{ $t("dms_database.schemas.title") }}
+				</h1>
+				<p class="text-muted text-sm">
+					{{ $t("dms_database.schemas.description") }}
+				</p>
+			</div>
+			<div class="flex items-center gap-3 ml-auto">
+				<USelect
+					v-model="selectedSchemaId"
+					:items="schemaOptions"
+					icon="i-ph-database"
+					:placeholder="$t('dms_database.data.schema')"
+					class="min-w-40"
+				/>
+				<DmsSegmented
+					v-model="view"
+					:items="viewItems"
+					:aria-label="$t('dms_database.schemas.view.list')"
+				/>
+			</div>
+		</section>
+
+		<div v-show="view === 'list'" class="space-y-2">
+			<p class="text-dimmed px-1 text-xs">
+				<span class="font-mono">{{ selectedSchemaId }}</span>
+				· {{ collectionsLabel }}
+			</p>
+			<DmsTableView
+				v-if="selectedSchemaId"
+				:key="selectedSchemaId"
+				:location="TABLES_LOCATION"
+				:columns="columns"
+				:form-components="{}"
+				:form-container="{ type: 'drawer' }"
+				:row-actions="{ details: true }"
+				:default-filters="defaultFilters"
+				:default-sort="{ field: 'elementCount', desc: true }"
+				:component-id="COMPONENT_ID"
+				:page-id="PAGE_ID"
+				row-id-key="id"
+			/>
+		</div>
+
+		<!-- ClientOnly: vue-flow is not SSR-safe. Kept mounted (v-show) so toggling
+		     List/Diagram preserves un-applied diagram edits and avoids a blocking
+		     confirm dialog on every switch. -->
+		<ClientOnly>
+			<DmsDatabaseSchemaDiagram
+				v-show="view === 'diagram'"
+				:schema-id="selectedSchemaId"
+				:active="view === 'diagram'"
+				@inspect-table="openInspectorByName"
+			/>
+		</ClientOnly>
+	</div>
+</template>

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

@@ -0,0 +1,33 @@
+export interface ModifierIcon {
+	icon: string;
+	color: string;
+	label: string;
+}
+
+const MODIFIER_ICONS: Record<string, ModifierIcon> = {
+	HashModifier: {
+		icon: "i-ph-fingerprint",
+		color: "text-rose-500",
+		label: "Hashed",
+	},
+	LocalizationModifier: {
+		icon: "i-ph-translate",
+		color: "text-cyan-500",
+		label: "Localized",
+	},
+	EncryptionModifier: {
+		icon: "i-ph-lock-key",
+		color: "text-indigo-500",
+		label: "Encrypted",
+	},
+};
+
+const fallbackModifierIcon = (id: string): ModifierIcon => ({
+	icon: "i-ph-question",
+	color: "text-muted",
+	label: id,
+});
+
+export function resolveModifierIcon(modifierId: string): ModifierIcon {
+	return MODIFIER_ICONS[modifierId] ?? fallbackModifierIcon(modifierId);
+}