mongoku 2.2.4 → 2.4.0

package/src/routes/servers/[server]/databases/[database]/collections/+page.svelte

@@ -15,6 +15,7 @@
 
 	let showDropModal = $state(false);
 	let collectionToDrop = $state<Collection | null>(null);
+	let isDropping = $state(false);
 
 	function openDropModal(collection: Collection) {
 		collectionToDrop = collection;
@@ -24,11 +25,13 @@
 	function closeDropModal() {
 		showDropModal = false;
 		collectionToDrop = null;
+		isDropping = false;
 	}
 
 	async function confirmDrop() {
-		if (!collectionToDrop) return;
+		if (!collectionToDrop || isDropping) return;
 
+		isDropping = true;
 		try {
 			await dropCollectionCommand({
 				server: data.server,
@@ -41,6 +44,7 @@
 			await invalidateAll();
 		} catch (error) {
 			notificationStore.notifyError(error, "Failed to drop collection");
+			isDropping = false;
 		}
 	}
 </script>
@@ -163,7 +167,13 @@
 		undone.
 	</p>
 	{#snippet footer()}
-		<button class="btn btn-default btn-sm" onclick={closeDropModal}>Cancel</button>
-		<button class="btn btn-outline-danger btn-sm" onclick={confirmDrop}>Drop Collection</button>
+		<button class="btn btn-default btn-sm" onclick={closeDropModal} disabled={isDropping}>Cancel</button>
+		<button class="btn btn-outline-danger btn-sm" onclick={confirmDrop} disabled={isDropping}>
+			{#if isDropping}
+				Dropping...
+			{:else}
+				Drop Collection
+			{/if}
+		</button>
 	{/snippet}
 </Modal>

package/src/routes/servers/[server]/databases/[database]/collections/[collection]/documents/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import {
 		deleteDocument as deleteDocumentCommand,
+		insertDocument as insertDocumentCommand,
 		loadDocuments,
 		updateDocument as updateDocumentCommand,
 		updateMany as updateManyCommand,
@@ -14,6 +15,7 @@
 	import { notificationStore } from "$lib/stores/notifications.svelte";
 	import type { MongoDocument, SearchParams } from "$lib/types";
 	import { formatNumber } from "$lib/utils/filters";
+	import { parseJSON, serializeForEditing } from "$lib/utils/jsonParser";
 	import { SvelteURLSearchParams } from "svelte/reactivity";
 	import type { PageData } from "./$types";
 
@@ -25,6 +27,7 @@
 	let editMode = $state(false);
 	let updateQuery = $state("{}");
 	let isUpdating = $state(false);
+	let showInsertEditor = $state(false);
 
 	let finalCount = $state<number | null>(null);
 	let countCount = 0;
@@ -71,7 +74,7 @@
 
 	async function editDocument(_id: { $value?: string } | undefined, json: MongoDocument, items: MongoDocument[]) {
 		const partial = Boolean(
-			params.project && params.project !== "{}" && Object.keys(JSON.parse(params.project)).length > 0,
+			params.project && params.project !== "{}" && Object.keys(parseJSON(params.project) as object).length > 0,
 		);
 		const newId = json?._id?.$value;
 		const oldId = _id?.$value;
@@ -201,53 +204,291 @@
 			isUpdating = false;
 		}
 	}
+
+	let insertJson = $state("{}");
+
+	async function executeInsert() {
+		isUpdating = true;
+		try {
+			const json = parseJSON(insertJson);
+			const result = await insertDocumentCommand({
+				server: data.server,
+				database: data.database,
+				collection: data.collection,
+				document: null,
+				value: json,
+			});
+
+			if (result.ok) {
+				notificationStore.notifySuccess("Document inserted successfully");
+				// Reset the modified items to force a refresh
+				modifiedItems = null;
+				showInsertEditor = false;
+				insertJson = "{}";
+			}
+		} catch (error) {
+			console.error(error);
+			notificationStore.notifyError(error, "Failed to insert document");
+		} finally {
+			isUpdating = false;
+		}
+	}
+
+	function handleInsertClick() {
+		showInsertEditor = true;
+		insertJson = "{}";
+	}
+
+	function cancelInsert() {
+		showInsertEditor = false;
+		insertJson = "{}";
+	}
+
+	function getReversedSort(): string {
+		const currentSort = params.sort || "{}";
+
+		// If no sort is defined, default to _id: -1
+		if (currentSort.replace(/\s/g, "") === "{}") {
+			return serializeForEditing({ _id: -1 })
+				.replace(/[\n\t]/g, " ")
+				.replace(/\s+/g, " ");
+		}
+
+		const sortObj = parseJSON(currentSort) as Record<string, unknown>;
+		const reversedSort: Record<string, number> = {};
+
+		// Reverse each sort field
+		for (const [key, value] of Object.entries(sortObj)) {
+			if (typeof value === "number") {
+				reversedSort[key] = value === 1 ? -1 : 1;
+			} else {
+				// Keep non-numeric values as-is
+				reversedSort[key] = value as number;
+			}
+		}
+
+		// Serialize and compact the output (remove newlines and extra spaces)
+		return serializeForEditing(reversedSort)
+			.replace(/[\n\t]/g, " ")
+			.replace(/\s+/g, " ");
+	}
+
+	function toggleSort(e: MouseEvent) {
+		e.preventDefault();
+		const newSort = getReversedSort();
+
+		params.sort = newSort;
+		data.params.sort = newSort;
+		data.params.skip = 0;
+		params.skip = 0;
+
+		const queryParams = new SvelteURLSearchParams();
+		queryParams.set("query", params.query || "{}");
+		queryParams.set("sort", newSort);
+		queryParams.set("project", params.project || "");
+		queryParams.set("skip", "0");
+		queryParams.set("limit", String(params.limit));
+
+		const url = `/servers/${encodeURIComponent(data.server)}/databases/${encodeURIComponent(data.database)}/collections/${encodeURIComponent(data.collection)}/documents?${queryParams.toString()}`;
+
+		/* eslint-disable-next-line svelte/no-navigation-without-resolve */
+		pushState(url, {});
+		dataPromise = loadDocuments({
+			server: data.server,
+			database: data.database,
+			collection: data.collection,
+			query: params.query,
+			sort: newSort,
+			project: params.project,
+			skip: 0,
+			limit: params.limit,
+		});
+	}
 </script>
 
+{#snippet previousButton(url: string, onClick: (e: MouseEvent) => void)}
+	<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+	<a
+		href={resolve(url as any)}
+		onclick={onClick}
+		class="px-3 py-1 rounded-lg border border-[var(--border-color)] bg-[var(--light-background)] hover:bg-[var(--color-3)] text-[13px] transition no-underline -my-2"
+		style="color: var(--text);"
+	>
+		Previous
+	</a>
+{/snippet}
+
+{#snippet nextButton(url: string, onClick: (e: MouseEvent) => void)}
+	<!-- eslint-disable @typescript-eslint/no-explicit-any -->
+	<a
+		href={resolve(url as any)}
+		onclick={onClick}
+		class="px-3 py-1 rounded-lg border border-[var(--border-color)] bg-[var(--light-background)] hover:bg-[var(--color-3)] text-[13px] transition no-underline"
+		style="color: var(--text);"
+	>
+		Next
+	</a>
+{/snippet}
+
+{#snippet sortButton()}
+	<button
+		onclick={toggleSort}
+		class="px-3 py-1 rounded-lg border border-[var(--border-color)] bg-[var(--light-background)] hover:bg-[var(--color-3)] text-[13px] transition"
+		style="color: var(--text); cursor: pointer;"
+		title="Reverse sort order"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="w-4 h-4"
+		>
+			<path d="M3 6h18" />
+			<path d="M7 12h10" />
+			<path d="M10 18h4" />
+			<path d="m7 16 3 3 3-3" />
+		</svg>
+	</button>
+{/snippet}
+
 <SearchBox bind:params bind:editMode readonly={data.readOnly} />
 
 {#if editMode}
-	<Panel title="Update Multiple Documents">
-		<div class="p-4 space-y-4">
-			<div>
-				<label for="update-filter" class="block text-sm font-medium mb-2">Filter (which documents to update):</label>
-				<input
-					type="text"
-					id="update-filter"
-					value={params.query || "{}"}
-					readonly
-					class="w-full p-2 border border-[var(--color-4)] bg-[var(--light-background)] rounded font-mono text-sm opacity-75 cursor-not-allowed"
-				/>
-				<p class="text-xs text-[var(--text-secondary,#888)] mt-1">
-					This filter is taken from the query above. Modify the query to change which documents will be updated.
-				</p>
+	<Panel title="Edit Mode">
+		<div class="p-4 sm:p-6 space-y-6">
+			<!-- Insert Document Section -->
+			<div class="rounded-xl bg-[var(--color-3)]/30 p-4 border border-[var(--border-color)]">
+				<h3 class="text-lg font-semibold mb-3" style="color: var(--text);">Insert New Document</h3>
+				{#if !showInsertEditor}
+					<button class="btn btn-success" onclick={handleInsertClick}>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="w-4 h-4 inline mr-2"
+						>
+							<path d="M12 5v14M5 12h14" />
+						</svg>
+						Insert Document
+					</button>
+				{:else}
+					<div class="space-y-3">
+						<label for="insert-document" class="block text-sm font-semibold mb-2" style="color: var(--text);">
+							Document JSON:
+						</label>
+						<textarea
+							id="insert-document"
+							bind:value={insertJson}
+							placeholder="Document JSON"
+							rows="6"
+							use:jsonTextarea={{ onsubmit: executeInsert }}
+							class="w-full p-3 rounded-xl border border-[var(--border-color)] bg-[var(--color-3)] font-mono text-sm focus:outline-none focus:ring-2"
+							style="color: var(--text); --tw-ring-color: var(--link);"
+						></textarea>
+						<div class="flex gap-3">
+							<button
+								class="btn btn-success hover:bg-[var(--button-success-l)]"
+								disabled={isUpdating}
+								onclick={executeInsert}
+							>
+								{isUpdating ? "Inserting..." : "Insert"}
+							</button>
+							<button class="btn btn-default" onclick={cancelInsert} disabled={isUpdating}>Cancel</button>
+						</div>
+					</div>
+				{/if}
 			</div>
-			<div>
-				<label for="update-operation" class="block text-sm font-medium mb-2"
-					>Update Operation (e.g., $set, $inc, $unset):</label
-				>
-				<textarea
-					bind:value={updateQuery}
-					placeholder="Update operation"
-					rows="4"
-					use:jsonTextarea={{ onsubmit: executeUpdateMany }}
-					class="w-full p-2 border border-[var(--color-4)] bg-[var(--color-3)] rounded font-mono text-sm"
-				></textarea>
+
+			<!-- Update Multiple Documents Section -->
+			<div class="rounded-xl bg-[var(--color-3)]/30 p-4 border border-[var(--border-color)]">
+				<h3 class="text-lg font-semibold mb-3" style="color: var(--text);">Update Multiple Documents</h3>
+				<div class="space-y-4">
+					<div>
+						<label for="update-filter" class="block text-sm font-semibold mb-2" style="color: var(--text);">
+							Filter (which documents to update):
+						</label>
+						<input
+							type="text"
+							id="update-filter"
+							value={params.query || "{}"}
+							readonly
+							class="w-full p-3 rounded-xl border border-[var(--border-color)] bg-[var(--color-3)] font-mono text-sm opacity-75 cursor-not-allowed"
+							style="color: var(--text);"
+						/>
+						<p class="text-xs mt-2" style="color: var(--text-secondary);">
+							This filter is taken from the query above. Modify the query to change which documents will be updated.
+						</p>
+					</div>
+					<div>
+						<label for="update-operation" class="block text-sm font-semibold mb-2" style="color: var(--text);">
+							Update Operation (e.g., $set, $inc, $unset):
+						</label>
+						<textarea
+							bind:value={updateQuery}
+							placeholder="Update operation"
+							rows="4"
+							use:jsonTextarea={{ onsubmit: executeUpdateMany }}
+							class="w-full p-3 rounded-xl border border-[var(--border-color)] bg-[var(--color-3)] font-mono text-sm focus:outline-none focus:ring-2"
+							style="color: var(--text); --tw-ring-color: var(--link);"
+						></textarea>
+					</div>
+					<div class="flex gap-3">
+						<button
+							class="btn btn-success hover:bg-[var(--button-success-l)]"
+							disabled={isUpdating}
+							onclick={executeUpdateMany}
+						>
+							{isUpdating ? "Updating..." : "Execute Update"}
+						</button>
+					</div>
+				</div>
 			</div>
-			<div class="flex gap-2">
-				<button class="btn btn-success" disabled={isUpdating} onclick={executeUpdateMany}>
-					{isUpdating ? "Updating..." : "Execute Update"}
+
+			<!-- Close Edit Mode -->
+			<div class="flex justify-end">
+				<button
+					class="btn btn-default hover:bg-[var(--color-3)]"
+					onclick={() => {
+						editMode = false;
+						showInsertEditor = false;
+					}}
+				>
+					Close Edit Mode
 				</button>
-				<button class="btn btn-default" onclick={() => (editMode = false)}>Cancel</button>
 			</div>
-			<div class="text-sm text-[var(--text-secondary,#888)]">
-				<p class="mb-1"><strong>Examples:</strong></p>
-				<p class="mb-1">
-					• Set a field: <code class="bg-[var(--color-3)] px-1 rounded">{'{"$set": {"status": "active"}}'}</code>
+
+			<!-- Update Operation Examples -->
+			<div
+				class="text-sm rounded-xl bg-[var(--color-3)]/50 p-4 border border-[var(--border-color)]"
+				style="color: var(--text-secondary);"
+			>
+				<p class="mb-2 font-semibold" style="color: var(--text);">Update Operation Examples:</p>
+				<p class="mb-2">
+					• Set a field: <code
+						class="bg-[var(--light-background)] px-2 py-1 rounded border border-[var(--border-color)] font-mono text-xs"
+						>{'{"$set": {"status": "active"}}'}</code
+					>
+				</p>
+				<p class="mb-2">
+					• Increment a value: <code
+						class="bg-[var(--light-background)] px-2 py-1 rounded border border-[var(--border-color)] font-mono text-xs"
+						>{'{"$inc": {"count": 1}}'}</code
+					>
 				</p>
-				<p class="mb-1">
-					• Increment a value: <code class="bg-[var(--color-3)] px-1 rounded">{'{"$inc": {"count": 1}}'}</code>
+				<p>
+					• Unset a field: <code
+						class="bg-[var(--light-background)] px-2 py-1 rounded border border-[var(--border-color)] font-mono text-xs"
+						>{'{"$unset": {"oldField": ""}}'}</code
+					>
 				</p>
-				<p>• Unset a field: <code class="bg-[var(--color-3)] px-1 rounded">{'{"$unset": {"oldField": ""}}'}</code></p>
 			</div>
 		</div>
 	</Panel>
@@ -258,19 +499,17 @@
 		title={finalCount !== null
 			? `${formatNumber(data.params.skip + 1)} - ${formatNumber(data.params.skip + data.params.limit)} of ${formatNumber(finalCount)} documents...`
 			: "Loading documents..."}
+		titleClass="py-1"
 	>
 		{#snippet actions()}
 			{#if finalCount !== null}
 				{#if data.params.skip > 0}
-					<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-					<a href={resolve(previousUrl as any)} onclick={navigatePrevious} class="btn btn-default btn-sm -my-2">
-						Previous
-					</a>
+					{@render previousButton(previousUrl, navigatePrevious)}
 				{/if}
 				{#if data.params.skip + data.params.limit < finalCount}
-					<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-					<a href={resolve(nextUrl as any)} onclick={navigateNext} class="btn btn-default btn-sm -my-2">Next</a>
+					{@render nextButton(nextUrl, navigateNext)}
 				{/if}
+				{@render sortButton()}
 			{/if}
 		{/snippet}
 	</Panel>
@@ -279,21 +518,19 @@
 	{@const items = resultsData?.data ?? []}
 	{#await data.count}
 		<Panel
+			titleClass="py-1"
 			title={items.length > 0
 				? `${formatNumber(data.params.skip + 1)} - ${formatNumber(data.params.skip + items.length)} Documents (counting...)`
 				: "No documents"}
 		>
 			{#snippet actions()}
 				{#if data.params.skip > 0}
-					<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-					<a href={resolve(previousUrl as any)} onclick={navigatePrevious} class="btn btn-default btn-sm -my-2">
-						Previous
-					</a>
+					{@render previousButton(previousUrl, navigatePrevious)}
 				{/if}
 				{#if items.length >= data.params.limit}
-					<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-					<a href={resolve(nextUrl as any)} onclick={navigateNext} class="btn btn-default btn-sm -my-2">Next</a>
+					{@render nextButton(nextUrl, navigateNext)}
 				{/if}
+				{@render sortButton()}
 			{/snippet}
 		</Panel>
 	{:then countData}
@@ -306,21 +543,19 @@
 			<Panel
 				title={items.length > 0
 					? count > 0
-						? `${formatNumber(data.params.skip + 1)} - ${formatNumber(data.params.skip + items.length)} of ${formatNumber(count)} Documents`
-						: `${formatNumber(data.params.skip + 1)} - ${formatNumber(data.params.skip + items.length)} Documents (count ${isTimeout ? "timeout" : "unavailable"})`
+						? `${formatNumber(data.params.skip + 1)} - ${formatNumber(data.params.skip + items.length)} of ${formatNumber(count)} documents`
+						: `${formatNumber(data.params.skip + 1)} - ${formatNumber(data.params.skip + items.length)} documents (count ${isTimeout ? "timeout" : "unavailable"})`
 					: "No documents"}
+				titleClass="py-1"
 			>
 				{#snippet actions()}
 					{#if hasPrevious}
-						<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-						<a href={resolve(previousUrl as any)} onclick={navigatePrevious} class="btn btn-default btn-sm -my-2">
-							Previous
-						</a>
+						{@render previousButton(previousUrl, navigatePrevious)}
 					{/if}
 					{#if hasNext}
-						<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-						<a href={resolve(nextUrl as any)} onclick={navigateNext} class="btn btn-default btn-sm -my-2">Next</a>
+						{@render nextButton(nextUrl, navigateNext)}
 					{/if}
+					{@render sortButton()}
 				{/snippet}
 			</Panel>
 		{/if}

package/src/routes/servers/[server]/databases/[database]/collections/[collection]/indexes/+page.server.ts

@@ -17,19 +17,19 @@ export const load: PageServerLoad = async ({ params, depends }) => {
 			const indexList = (await collection.listIndexes().toArray()) as IndexDescription[];
 
 			// Get index usage statistics
-			let indexStats: Record<string, { ops: number; since: Date }> = {};
+			let indexStats: Record<string, { ops: number; since: Date; building: boolean }> = {};
 			try {
 				const statsResult = await collection.aggregate([{ $indexStats: {} }]).toArray();
 
-				indexStats = statsResult.reduce(
-					(acc, stat) => {
-						acc[stat.name] = {
+				indexStats = Object.fromEntries(
+					statsResult.map((stat) => [
+						stat.name,
+						{
 							ops: stat.accesses?.ops || 0,
 							since: stat.accesses?.since || new Date(),
-						};
-						return acc;
-					},
-					{} as Record<string, { ops: number; since: Date }>,
+							building: stat.building || false,
+						},
+					]),
 				);
 			} catch (err) {
 				logger.error("Error fetching index stats:", err);