@antelopejs/dms-database 0.0.14 → 0.1.0

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

@@ -1,436 +0,0 @@
-<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>
-	<!-- The page fills the panel (`fillHeight` in src/pages/query.ts): each
-	     column scrolls on its own, and the grid scrolls when they stack. -->
-	<div class="flex min-h-0 flex-1 flex-col gap-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 min-h-0 flex-1 grid-cols-1 gap-5 pb-6 max-lg:overflow-y-auto lg:grid-cols-[18rem_1fr]"
-		>
-			<aside class="flex min-h-0 flex-col gap-5 lg:overflow-y-auto">
-				<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 min-h-0 min-w-0 flex-col gap-5 lg:overflow-y-auto">
-				<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

@@ -1,218 +0,0 @@
-<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>
-	<!-- The page fills the panel (`fillHeight` in src/pages/schemas.ts): the
-	     list scrolls under the header, the diagram takes the height left. -->
-	<div class="flex min-h-0 flex-1 flex-col gap-5">
-		<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="min-h-0 flex-1 space-y-2 overflow-y-auto">
-			<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>
-
-		<!-- DmsClientOnly: 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. -->
-		<DmsClientOnly>
-			<DmsDatabaseSchemaDiagram
-				v-show="view === 'diagram'"
-				:schema-id="selectedSchemaId"
-				:active="view === 'diagram'"
-				@inspect-table="openInspectorByName"
-			/>
-		</DmsClientOnly>
-	</div>
-</template>

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

@@ -1,33 +0,0 @@
-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);
-}