@antelopejs/dms-database 0.0.1

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

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from "@nuxt/ui";
+import type { QueryScope, SavedQuery } from "../composables/useQueryStore";
+import { formatRelativeTime } from "../utils/relativeTime";
+
+interface Props {
+	items: SavedQuery[];
+	scope: QueryScope;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+	"update:scope": [value: QueryScope];
+	load: [query: SavedQuery];
+	edit: [query: SavedQuery];
+	delete: [id: string];
+}>();
+
+const { t } = useI18n();
+const { user } = useUserSession();
+
+const internalScope = computed<QueryScope>({
+	get: () => props.scope,
+	set: (value) => emit("update:scope", value),
+});
+
+const scopeItems = computed(() => [
+	{ label: t("dms_database.query.scopeMe"), value: "me" as const },
+	{ label: t("dms_database.query.scopeShared"), value: "shared" as const },
+]);
+
+function menuItems(item: SavedQuery): DropdownMenuItem[][] {
+	const load: DropdownMenuItem = {
+		label: t("dms_database.query.itemMenu.load"),
+		icon: "i-ph-arrow-square-out",
+		onSelect: () => emit("load", item),
+	};
+	// The Team tab also lists other users' queries; only the owner may edit
+	// or delete them (the API enforces the same rule).
+	if (item.userId !== user.value?._id) return [[load]];
+	return [
+		[
+			load,
+			{
+				label: t("dms_database.query.itemMenu.edit"),
+				icon: "i-ph-pencil-simple",
+				onSelect: () => emit("edit", item),
+			},
+		],
+		[
+			{
+				label: t("dms_database.query.itemMenu.delete"),
+				icon: "i-ph-trash",
+				color: "error",
+				onSelect: () => emit("delete", item.id),
+			},
+		],
+	];
+}
+</script>
+
+<template>
+	<DmsCard :padded="false" class="flex flex-col">
+		<header class="flex items-center gap-2.5 px-4 pt-4 pb-2.5">
+			<UIcon name="i-ph-star" class="text-primary shrink-0" />
+			<h3 class="text-highlighted text-sm font-semibold">
+				{{ $t("dms_database.query.favorites") }}
+			</h3>
+			<DmsSegmented
+				v-model="internalScope"
+				:items="scopeItems"
+				:aria-label="$t('dms_database.query.scopeMe')"
+				class="ml-auto"
+			/>
+		</header>
+
+		<ul
+			v-if="items.length > 0"
+			class="flex-1 overflow-y-auto px-1.5 pb-2 space-y-0.5"
+		>
+			<li
+				v-for="item in items"
+				:key="item.id"
+				class="group flex items-center gap-2.5 rounded-md px-2.5 py-2.5 cursor-pointer hover:bg-elevated transition-colors"
+				@click="emit('load', item)"
+				@keydown.enter.prevent="emit('load', item)"
+			>
+				<UIcon name="i-ph-star-fill" class="text-primary shrink-0 size-3.5" />
+				<div class="min-w-0 flex-1">
+					<div
+						class="text-toned text-[12.5px] font-semibold truncate flex items-center gap-1.5"
+					>
+						<span class="truncate">{{ item.name }}</span>
+						<UIcon
+							v-if="item.shared"
+							name="i-ph-users"
+							class="text-info shrink-0 size-3.5"
+							:aria-label="$t('dms_database.query.sharedBadge')"
+						/>
+					</div>
+				</div>
+				<span class="text-dimmed font-mono text-[10.5px] shrink-0">
+					{{ formatRelativeTime(item.createdAt) }}
+				</span>
+				<UDropdownMenu :items="menuItems(item)" :content="{ align: 'end' }">
+					<UButton
+						icon="i-ph-dots-three-vertical"
+						variant="ghost"
+						color="neutral"
+						size="xs"
+						class="opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
+						:aria-label="item.name"
+						@click.stop
+					/>
+				</UDropdownMenu>
+			</li>
+		</ul>
+
+		<div
+			v-else
+			class="flex-1 flex items-center justify-center px-4 py-6 text-xs text-dimmed text-center"
+		>
+			{{ $t("dms_database.query.emptyFavorites") }}
+		</div>
+	</DmsCard>
+</template>

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

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import type { HistoryEntry } from "../composables/useQueryStore";
+import { formatRelativeTime } from "../utils/relativeTime";
+
+interface Props {
+	items: HistoryEntry[];
+	total: number;
+	page: number;
+	pageSize: number;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+	"update:page": [value: number];
+	load: [entry: HistoryEntry];
+	save: [entry: HistoryEntry];
+}>();
+
+const totalPages = computed(() =>
+	Math.max(1, Math.ceil(props.total / props.pageSize)),
+);
+
+const canPrev = computed(() => props.page > 0);
+const canNext = computed(() => props.page + 1 < totalPages.value);
+
+const QUERY_PREVIEW_LIMIT = 64;
+
+function preview(query: string): string {
+	const flat = query.replace(/\s+/g, " ").trim();
+	return flat.length > QUERY_PREVIEW_LIMIT
+		? `${flat.slice(0, QUERY_PREVIEW_LIMIT)}…`
+		: flat;
+}
+
+const { t } = useI18n();
+
+function meta(item: HistoryEntry): string {
+	const count = t(
+		"dms_database.query.rowCount",
+		{ count: item.rowCount },
+		item.rowCount,
+	);
+	return `${formatRelativeTime(item.executedAt)} · ${count}`;
+}
+
+function prev() {
+	if (canPrev.value) emit("update:page", props.page - 1);
+}
+
+function next() {
+	if (canNext.value) emit("update:page", props.page + 1);
+}
+</script>
+
+<template>
+	<DmsCard :padded="false" class="flex flex-col">
+		<header class="flex items-center gap-2.5 px-4 pt-4 pb-2.5">
+			<UIcon name="i-ph-clock" class="text-primary shrink-0" />
+			<h3 class="text-highlighted text-sm font-semibold">
+				{{ $t("dms_database.query.history") }}
+			</h3>
+		</header>
+
+		<ul
+			v-if="items.length > 0"
+			class="flex-1 overflow-y-auto px-1.5 pb-2 space-y-0.5"
+		>
+			<li
+				v-for="item in items"
+				:key="item.id"
+				class="group flex items-center gap-2.5 rounded-md px-2.5 py-2.5 cursor-pointer hover:bg-elevated transition-colors"
+				@click="emit('load', item)"
+				@keydown.enter.prevent="emit('load', item)"
+			>
+				<UIcon
+					name="i-ph-clock"
+					class="text-dimmed shrink-0 size-3.5"
+				/>
+				<div class="min-w-0 flex-1">
+					<div class="text-toned font-mono text-[11px] truncate">
+						{{ preview(item.source) }}
+					</div>
+					<div class="text-dimmed text-[10px] mt-0.5">
+						{{ meta(item) }}
+					</div>
+				</div>
+				<UButton
+					icon="i-ph-star"
+					variant="ghost"
+					color="neutral"
+					size="xs"
+					class="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity hover:text-warning"
+					:aria-label="$t('dms_database.query.saveAsFavorite')"
+					@click.stop="emit('save', item)"
+				/>
+			</li>
+		</ul>
+
+		<div
+			v-else
+			class="flex-1 flex items-center justify-center px-4 py-6 text-xs text-dimmed text-center"
+		>
+			{{ $t("dms_database.query.emptyHistory") }}
+		</div>
+
+		<footer
+			v-if="items.length > 0"
+			class="flex items-center justify-between gap-2 px-3 py-2 border-t border-default"
+		>
+			<UButton
+				size="xs"
+				variant="ghost"
+				color="neutral"
+				icon="i-ph-caret-left"
+				:disabled="!canPrev"
+				:label="$t('dms_database.query.previous')"
+				@click="prev"
+			/>
+			<span class="text-xs text-dimmed tabular-nums">
+				{{ page + 1 }} / {{ totalPages }}
+			</span>
+			<UButton
+				size="xs"
+				variant="ghost"
+				color="neutral"
+				trailing-icon="i-ph-caret-right"
+				:disabled="!canNext"
+				:label="$t('dms_database.query.next')"
+				@click="next"
+			/>
+		</footer>
+	</DmsCard>
+</template>

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

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import type { ExecuteResult } from "../composables/useQueryStore";
+
+type ResultMode = "table" | "json" | "chart";
+
+interface Props {
+	result: ExecuteResult | null;
+	mode: ResultMode;
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+	"update:mode": [value: ResultMode];
+}>();
+
+const { t } = useI18n();
+
+const internalMode = computed<ResultMode>({
+	get: () => props.mode,
+	set: (value) => emit("update:mode", value),
+});
+
+const modeItems = computed(() => [
+	{ label: t("dms_database.query.table"), value: "table" as const },
+	{ label: t("dms_database.query.json"), value: "json" as const },
+	{ label: t("dms_database.query.chart"), value: "chart" as const },
+]);
+
+const columns = computed<string[]>(() => {
+	const rows = props.result?.rows ?? [];
+	const first = rows[0];
+	if (!first || typeof first !== "object") return [];
+	return Object.keys(first as Record<string, unknown>);
+});
+
+const rows = computed(() => props.result?.rows ?? []);
+
+const jsonText = computed(() =>
+	props.result ? JSON.stringify(props.result.rows, null, 2) : "",
+);
+
+function renderCell(value: unknown): string {
+	if (value === null || value === undefined) return "—";
+	if (typeof value === "object") return JSON.stringify(value);
+	return String(value);
+}
+
+function isNumeric(value: unknown): value is number {
+	return typeof value === "number" && Number.isFinite(value);
+}
+
+// --- chart derivation (first numeric column, labelled by first string column) ---
+const numericColumn = computed<string | null>(() => {
+	const first = rows.value[0] as Record<string, unknown> | undefined;
+	if (!first) return null;
+	return columns.value.find((c) => isNumeric(first[c])) ?? null;
+});
+
+const labelColumn = computed<string | null>(() => {
+	const first = rows.value[0] as Record<string, unknown> | undefined;
+	if (!first) return null;
+	return (
+		columns.value.find(
+			(c) => c !== numericColumn.value && typeof first[c] === "string",
+		) ?? null
+	);
+});
+
+const chartAvailable = computed(
+	() => rows.value.length > 0 && numericColumn.value !== null,
+);
+
+const chartDataset = computed(() => {
+	const col = numericColumn.value;
+	if (!col) return [];
+	const label = labelColumn.value;
+	return [
+		{
+			name: col,
+			data: rows.value.map((row, index) => {
+				const record = row as Record<string, unknown>;
+				return {
+					x: label ? String(record[label]) : index + 1,
+					y: isNumeric(record[col]) ? (record[col] as number) : 0,
+				};
+			}),
+		},
+	];
+});
+</script>
+
+<template>
+	<DmsCard>
+		<!-- status bar -->
+		<div class="flex flex-wrap items-center gap-2.5 mb-4">
+			<UIcon
+				:name="
+					result?.error ? 'i-ph-x-circle-fill' : 'i-ph-check-circle-fill'
+				"
+				:class="result?.error ? 'text-error' : 'text-success'"
+				class="size-4"
+			/>
+			<b class="text-highlighted text-[15px]">
+				{{ $t("dms_database.query.result") }}
+			</b>
+			<template v-if="result && !result.error">
+				<UBadge color="success" variant="soft" size="sm" class="font-mono">
+					{{ $t("dms_database.query.rowCount", { count: rows.length }, rows.length) }}
+				</UBadge>
+				<span class="text-dimmed font-mono text-xs">
+					{{ $t("dms_database.query.runtime", { ms: result.durationMs }) }}
+				</span>
+			</template>
+			<DmsSegmented
+				v-model="internalMode"
+				:items="modeItems"
+				:aria-label="$t('dms_database.query.result')"
+				class="ml-auto"
+			/>
+		</div>
+
+		<!-- body -->
+		<div class="min-h-64">
+			<div
+				v-if="!result"
+				class="flex flex-col items-center justify-center gap-3 py-16 text-dimmed"
+			>
+				<UIcon name="i-ph-code" class="text-4xl text-dimmed/60" />
+				<p class="text-sm">{{ $t("dms_database.query.emptyResult") }}</p>
+			</div>
+
+			<div
+				v-else-if="result.error"
+				class="rounded-lg border border-error/40 bg-error/10 px-4 py-3 text-sm text-error whitespace-pre-wrap"
+			>
+				<p class="font-semibold mb-1">
+					{{ $t("dms_database.query.errorTitle") }}
+				</p>
+				<p>{{ result.error }}</p>
+			</div>
+
+			<!-- table -->
+			<div v-else-if="internalMode === 'table'" class="overflow-x-auto -mx-1">
+				<table class="w-full text-sm">
+					<thead>
+						<tr class="border-b border-default text-left">
+							<th
+								v-for="column in columns"
+								:key="column"
+								class="px-3 py-2 font-mono text-xs font-semibold text-dimmed"
+							>
+								{{ column }}
+							</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr
+							v-for="(row, rowIndex) in rows"
+							:key="rowIndex"
+							class="border-b border-default/60 last:border-0 hover:bg-elevated/40 transition-colors"
+						>
+							<td
+								v-for="(column, colIndex) in columns"
+								:key="column"
+								class="px-3 py-2 font-mono whitespace-nowrap"
+								:class="colIndex === 0 ? 'text-primary' : 'text-toned'"
+							>
+								{{ renderCell((row as Record<string, unknown>)[column]) }}
+							</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+
+			<!-- json -->
+			<pre
+				v-else-if="internalMode === 'json'"
+				class="text-xs rounded-lg border border-default bg-default p-4 overflow-auto max-h-80 whitespace-pre text-toned"
+				>{{ jsonText }}</pre
+			>
+
+			<!-- chart -->
+			<div v-else>
+				<DmsChart
+					v-if="chartAvailable"
+					type="area"
+					:static-dataset="chartDataset"
+					color="primary"
+					height="280px"
+					:show-legend="false"
+					xaxis-type="category"
+				/>
+				<div
+					v-else
+					class="flex flex-col items-center justify-center gap-2 py-16 text-dimmed text-center"
+				>
+					<UIcon name="i-ph-chart-line" class="text-4xl text-dimmed/60" />
+					<p class="text-sm">{{ $t("dms_database.query.chartUnavailable") }}</p>
+				</div>
+			</div>
+		</div>
+	</DmsCard>
+</template>