@sfxcode/nuxt-ui-mongocamp 1.1.0

package/dist/runtime/components/MongocampCollectionInfos.vue

@@ -0,0 +1,393 @@
+<script setup>
+import { computed, h, reactive, ref, resolveComponent, watch } from "vue";
+import { useMongocampApi, useMongocampIndex, useMongocampSchema, useToast } from "#imports";
+const props = defineProps({
+  collectionName: { type: String, required: true },
+  sampleSize: { type: Number, required: false, default: 500 }
+});
+const { collectionApi, documentApi } = useMongocampApi();
+const { schemaFromSamples, schemaToTsInterface } = useMongocampSchema();
+const { listIndexes, createIndex, createUniqueIndex, createTextIndex, createExpiringIndex, deleteIndex } = useMongocampIndex();
+const UBadge = resolveComponent("UBadge");
+const UIcon = resolveComponent("UIcon");
+const UButton = resolveComponent("UButton");
+const UTooltip = resolveComponent("UTooltip");
+function withTooltip(text, node) {
+  return h(UTooltip, { text }, { default: () => node });
+}
+const info = ref(null);
+const columnDefinitions = ref([]);
+const indexes = ref([]);
+const loading = ref(false);
+async function fetchIndexes() {
+  if (!props.collectionName) return;
+  indexes.value = await listIndexes(props.collectionName);
+}
+async function fetchInfo() {
+  if (!props.collectionName) return;
+  loading.value = true;
+  try {
+    info.value = await collectionApi.getCollectionInformation({ collectionName: props.collectionName });
+    const samples = await documentApi.listDocuments({
+      collectionName: props.collectionName,
+      rowsPerPage: props.sampleSize,
+      page: 1
+    });
+    columnDefinitions.value = schemaFromSamples(samples);
+    await fetchIndexes();
+  } finally {
+    loading.value = false;
+  }
+}
+watch(() => [props.collectionName, props.sampleSize], fetchInfo, { immediate: true });
+const TYPE_COLORS = {
+  "string": "neutral",
+  "number": "warning",
+  "integer": "warning",
+  "date-time": "info",
+  "boolean": "success",
+  "object": "secondary",
+  "array": "primary"
+};
+const schemaRows = computed(
+  () => columnDefinitions.value.map((col) => ({
+    field: col.columnKey,
+    type: col.columnType,
+    required: col.required
+  }))
+);
+const schemaTitle = computed(() => props.collectionName);
+const tsInterface = computed(() => schemaToTsInterface(columnDefinitions.value, props.collectionName));
+const toast = useToast();
+async function copySchemaAsTs() {
+  await navigator.clipboard.writeText(tsInterface.value);
+  toast.add({ title: "Copied to clipboard", description: "TypeScript interface copied.", color: "success" });
+}
+const schemaTableColumns = [
+  {
+    accessorKey: "field",
+    header: "Field"
+  },
+  {
+    accessorKey: "type",
+    header: "Type",
+    cell: ({ row }) => h(UBadge, {
+      label: row.original.type,
+      color: TYPE_COLORS[row.original.type] ?? "neutral",
+      variant: "subtle"
+    })
+  },
+  {
+    accessorKey: "required",
+    header: "In all samples",
+    cell: ({ row }) => row.original.required ? h(UIcon, { name: "i-lucide-check", class: "size-4 text-success" }) : h("span", { class: "text-dimmed" }, "\u2014")
+  }
+];
+const indexRows = computed(
+  () => indexes.value.map((idx) => ({
+    name: idx.name,
+    keys: Object.entries(idx.keys ?? {}).map(([field, direction]) => `${field}: ${direction}`).join(", "),
+    unique: idx.unique,
+    text: idx.text,
+    expire: idx.expire,
+    sizeKb: Math.round((info.value?.indexSizes?.[idx.name] ?? 0) / 1024)
+  }))
+);
+const isCreateIndexModalOpen = ref(false);
+const createIndexError = ref("");
+const newIndex = ref({ fieldName: "", sortAscending: true, indexType: "standard", duration: "3600s" });
+const createIndexSchema = reactive([
+  {
+    $formkit: "nuxtUIInput",
+    name: "fieldName",
+    label: "Field Name",
+    validation: "required"
+  },
+  {
+    $formkit: "nuxtUISwitch",
+    name: "sortAscending",
+    label: "Ascending"
+  },
+  {
+    $formkit: "nuxtUISelectMenu",
+    id: "indexType",
+    name: "indexType",
+    label: "Index Type",
+    options: ["standard", "unique", "text", "expiring"],
+    validation: "required"
+  },
+  {
+    $formkit: "nuxtUIInput",
+    name: "duration",
+    label: "Expire After (e.g. 3600s)",
+    help: "Only used for the expiring index type.",
+    if: "$get(indexType).value === 'expiring'"
+  }
+]);
+function extractSelectValue(raw) {
+  if (typeof raw === "object" && raw !== null) {
+    const obj = raw;
+    return obj.value ?? obj.label ?? "";
+  }
+  return String(raw ?? "");
+}
+function openCreateIndex() {
+  createIndexError.value = "";
+  newIndex.value = { fieldName: "", sortAscending: true, indexType: "standard", duration: "3600s" };
+  isCreateIndexModalOpen.value = true;
+}
+async function handleCreateIndex() {
+  createIndexError.value = "";
+  const { fieldName, sortAscending } = newIndex.value;
+  const indexType = extractSelectValue(newIndex.value.indexType);
+  try {
+    if (indexType === "unique") {
+      await createUniqueIndex(props.collectionName, fieldName, sortAscending);
+    } else if (indexType === "text") {
+      await createTextIndex(props.collectionName, fieldName);
+    } else if (indexType === "expiring") {
+      await createExpiringIndex(props.collectionName, fieldName, newIndex.value.duration);
+    } else {
+      await createIndex(props.collectionName, { [fieldName]: sortAscending ? 1 : -1 });
+    }
+    isCreateIndexModalOpen.value = false;
+    await fetchIndexes();
+  } catch (e) {
+    createIndexError.value = e instanceof Error ? e.message : "Error creating index";
+  }
+}
+const isDeleteIndexModalOpen = ref(false);
+const deleteIndexError = ref("");
+const indexToDelete = ref(void 0);
+function confirmDeleteIndex(indexName) {
+  indexToDelete.value = indexName;
+  deleteIndexError.value = "";
+  isDeleteIndexModalOpen.value = true;
+}
+async function handleDeleteIndex() {
+  deleteIndexError.value = "";
+  if (!indexToDelete.value) return;
+  try {
+    await deleteIndex(props.collectionName, indexToDelete.value);
+    isDeleteIndexModalOpen.value = false;
+    await fetchIndexes();
+  } catch (e) {
+    deleteIndexError.value = e instanceof Error ? e.message : "Error deleting index";
+  }
+}
+const INDEX_FLAG_BADGES = [
+  { key: "unique", label: "unique", color: "warning" },
+  { key: "text", label: "text", color: "info" },
+  { key: "expire", label: "expire", color: "secondary" }
+];
+const indexTableColumns = [
+  {
+    accessorKey: "name",
+    header: "Index"
+  },
+  {
+    accessorKey: "keys",
+    header: "Keys",
+    cell: ({ row }) => h("span", { class: "font-mono text-xs" }, row.original.keys)
+  },
+  {
+    id: "flags",
+    header: "Type",
+    cell: ({ row }) => h("div", { class: "flex gap-1" }, INDEX_FLAG_BADGES.filter((flag) => row.original[flag.key]).map((flag) => h(UBadge, { label: flag.label, color: flag.color, variant: "subtle", size: "sm" })))
+  },
+  {
+    accessorKey: "sizeKb",
+    header: "Size (KB)"
+  },
+  {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => row.original.name === "_id_" ? null : h("div", { class: "flex justify-end" }, [
+      withTooltip("Delete index", h(UButton, {
+        "icon": "i-lucide-trash-2",
+        "color": "error",
+        "variant": "ghost",
+        "size": "sm",
+        "aria-label": "Delete index",
+        "onClick": () => confirmDeleteIndex(row.original.name)
+      }))
+    ])
+  }
+];
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <USkeleton
+      v-if="loading"
+      class="h-32 w-full"
+    />
+    <div
+      v-else-if="info"
+      class="grid grid-cols-2 gap-3 sm:grid-cols-3"
+    >
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">
+          Documents
+        </div>
+        <div class="text-2xl font-semibold">
+          {{ info.count }}
+        </div>
+      </UCard>
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">
+          Data Size
+        </div>
+        <div class="text-2xl font-semibold">
+          {{ Math.round(info.size / 1024) }} KB
+        </div>
+      </UCard>
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">
+          Storage Size
+        </div>
+        <div class="text-2xl font-semibold">
+          {{ Math.round(info.storageSize / 1024) }} KB
+        </div>
+      </UCard>
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">
+          Avg Doc Size
+        </div>
+        <div class="text-2xl font-semibold">
+          {{ Math.round(info.avgObjSize) }} B
+        </div>
+      </UCard>
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">
+          Indexes
+        </div>
+        <div class="text-2xl font-semibold">
+          {{ info.nindexes }}
+        </div>
+      </UCard>
+      <UCard>
+        <div class="text-sm text-gray-500 dark:text-gray-400">
+          Index Size
+        </div>
+        <div class="text-2xl font-semibold">
+          {{ Math.round(info.totalIndexSize / 1024) }} KB
+        </div>
+      </UCard>
+    </div>
+    <UCard v-if="indexRows.length">
+      <template #header>
+        <div class="flex items-center justify-between gap-2">
+          <div class="flex items-center gap-2">
+            <UIcon
+              name="i-lucide-list-tree"
+              class="size-4 text-(--ui-primary)"
+            />
+            <span class="font-semibold">Indexes</span>
+            <UBadge
+              :label="`${indexRows.length} indexes`"
+              variant="subtle"
+              color="neutral"
+              size="sm"
+            />
+          </div>
+          <UButton
+            icon="i-lucide-plus"
+            label="Create Index"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            @click="openCreateIndex"
+          />
+        </div>
+      </template>
+      <UTable
+        :data="indexRows"
+        :columns="indexTableColumns"
+      />
+    </UCard>
+
+    <UCard v-if="schemaRows.length">
+      <template #header>
+        <div class="flex items-center justify-between gap-2">
+          <div class="flex items-center gap-2">
+            <UIcon
+              name="i-lucide-braces"
+              class="size-4 text-(--ui-primary)"
+            />
+            <span class="font-semibold">{{ schemaTitle }}</span>
+            <UBadge
+              :label="`${schemaRows.length} fields`"
+              variant="subtle"
+              color="neutral"
+              size="sm"
+            />
+          </div>
+          <UButton
+            icon="i-lucide-copy"
+            label="Copy as TS Interface"
+            color="neutral"
+            variant="ghost"
+            size="sm"
+            @click="copySchemaAsTs"
+          />
+        </div>
+      </template>
+      <UTable
+        :data="schemaRows"
+        :columns="schemaTableColumns"
+      />
+    </UCard>
+
+    <UModal
+      v-model:open="isCreateIndexModalOpen"
+      title="Create Index"
+    >
+      <template #body>
+        <FUDataEdit
+          :data="newIndex"
+          :schema="createIndexSchema"
+          submit-label="Create Index"
+          submit-icon="i-lucide-plus"
+          @data-saved="handleCreateIndex"
+        />
+        <p
+          v-if="createIndexError"
+          class="mt-2 text-sm text-error-500"
+        >
+          {{ createIndexError }}
+        </p>
+      </template>
+    </UModal>
+
+    <UModal
+      v-model:open="isDeleteIndexModalOpen"
+      title="Delete Index"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #body>
+        <p>Are you sure you want to delete the index "{{ indexToDelete }}"? This action cannot be undone.</p>
+        <p
+          v-if="deleteIndexError"
+          class="mt-2 text-sm text-error-500"
+        >
+          {{ deleteIndexError }}
+        </p>
+      </template>
+      <template #footer>
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          @click="isDeleteIndexModalOpen = false"
+        />
+        <UButton
+          label="Delete"
+          color="error"
+          icon="i-lucide-trash-2"
+          @click="handleDeleteIndex"
+        />
+      </template>
+    </UModal>
+  </div>
+</template>

package/dist/runtime/components/MongocampCollectionInfos.vue.d.ts

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    collectionName: string;
+    sampleSize?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    sampleSize: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MongocampCollections.d.vue.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    infoPath?: string;
+    dataPath?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MongocampCollections.vue

@@ -0,0 +1,231 @@
+<script setup>
+import { h, ref, resolveComponent } from "vue";
+import { useMongocampApi, useMongocampBucket } from "#imports";
+const props = defineProps({
+  infoPath: { type: String, required: false },
+  dataPath: { type: String, required: false }
+});
+const { collectionApi } = useMongocampApi();
+const { isBucketCollection, bucketNameFor, bucketActionInFlight, clearBucket, deleteBucket } = useMongocampBucket();
+const collections = ref([]);
+const loading = ref(false);
+async function fetchCollections() {
+  loading.value = true;
+  try {
+    const names = await collectionApi.listCollections();
+    const rows = await Promise.all(
+      names.filter((name) => !name.startsWith("mc")).map(async (name) => {
+        const info = await collectionApi.getCollectionInformation({ collectionName: name });
+        return {
+          name,
+          count: info.count,
+          sizekb: Math.round(info.storageSize / 1024),
+          indexCount: info.nindexes
+        };
+      })
+    );
+    collections.value = rows;
+  } finally {
+    loading.value = false;
+  }
+}
+const UButton = resolveComponent("UButton");
+const UBadge = resolveComponent("UBadge");
+const UTooltip = resolveComponent("UTooltip");
+function withTooltip(text, node) {
+  return h(UTooltip, { text }, { default: () => node });
+}
+const globalFilter = ref("");
+const sorting = ref([]);
+const isClearBucketModalOpen = ref(false);
+const bucketToClear = ref(void 0);
+function confirmClearBucket(bucketName) {
+  bucketToClear.value = bucketName;
+  isClearBucketModalOpen.value = true;
+}
+async function handleClearBucket() {
+  if (!bucketToClear.value) return;
+  const success = await clearBucket(bucketToClear.value);
+  isClearBucketModalOpen.value = false;
+  if (success) await fetchCollections();
+}
+const isDeleteBucketModalOpen = ref(false);
+const bucketToDelete = ref(void 0);
+function confirmDeleteBucket(bucketName) {
+  bucketToDelete.value = bucketName;
+  isDeleteBucketModalOpen.value = true;
+}
+async function handleDeleteBucket() {
+  if (!bucketToDelete.value) return;
+  const success = await deleteBucket(bucketToDelete.value);
+  isDeleteBucketModalOpen.value = false;
+  if (success) await fetchCollections();
+}
+function sortHeader(column, label) {
+  const isSorted = column.getIsSorted();
+  return h(UButton, {
+    color: "neutral",
+    variant: "ghost",
+    label,
+    icon: isSorted === "asc" ? "i-lucide-arrow-up-narrow-wide" : isSorted === "desc" ? "i-lucide-arrow-down-wide-narrow" : "i-lucide-arrow-up-down",
+    class: "-mx-2.5",
+    onClick: () => column.toggleSorting(isSorted === "asc")
+  });
+}
+const columns = [
+  {
+    accessorKey: "name",
+    header: ({ column }) => sortHeader(column, "Collection"),
+    cell: ({ row }) => h("div", { class: "flex items-center gap-2" }, [
+      h("span", row.original.name),
+      isBucketCollection(row.original.name) ? h(UBadge, { label: "bucket", color: "neutral", variant: "subtle", size: "sm" }) : null
+    ])
+  },
+  {
+    accessorKey: "count",
+    header: ({ column }) => sortHeader(column, "Documents")
+  },
+  {
+    accessorKey: "sizekb",
+    header: ({ column }) => sortHeader(column, "Size (KB)")
+  },
+  {
+    accessorKey: "indexCount",
+    header: ({ column }) => sortHeader(column, "Indexes")
+  },
+  {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => {
+      const buttons = [
+        withTooltip("Collection info", h(UButton, {
+          "icon": "i-lucide-info",
+          "color": "neutral",
+          "variant": "ghost",
+          "size": "sm",
+          "aria-label": "Collection info",
+          "to": `${props.infoPath ?? "/secured/admin/collections"}/${row.original.name}`
+        })),
+        withTooltip("Collection data", h(UButton, {
+          "icon": "i-lucide-table",
+          "color": "neutral",
+          "variant": "ghost",
+          "size": "sm",
+          "aria-label": "Collection data",
+          "to": `${props.dataPath ?? "/secured/admin/collections"}/${row.original.name}/data`
+        }))
+      ];
+      if (isBucketCollection(row.original.name)) {
+        const bucketName = bucketNameFor(row.original.name);
+        buttons.push(
+          withTooltip("Clear bucket", h(UButton, {
+            "icon": "i-lucide-eraser",
+            "color": "warning",
+            "variant": "ghost",
+            "size": "sm",
+            "aria-label": "Clear bucket",
+            "loading": bucketActionInFlight.value.has(bucketName),
+            "onClick": () => confirmClearBucket(bucketName)
+          })),
+          withTooltip("Delete bucket", h(UButton, {
+            "icon": "i-lucide-trash-2",
+            "color": "error",
+            "variant": "ghost",
+            "size": "sm",
+            "aria-label": "Delete bucket",
+            "loading": bucketActionInFlight.value.has(bucketName),
+            "onClick": () => confirmDeleteBucket(bucketName)
+          }))
+        );
+      }
+      return h("div", { class: "flex gap-1 justify-end" }, buttons);
+    }
+  }
+];
+fetchCollections();
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-center justify-between gap-4">
+      <h2 class="text-xl font-semibold">
+        Collections
+      </h2>
+      <div class="flex flex-1 items-center gap-2">
+        <UInput
+          v-model="globalFilter"
+          icon="i-lucide-search"
+          placeholder="Filter collections..."
+          size="sm"
+          class="flex-1 max-w-xs"
+        />
+        <UTooltip text="Refresh">
+          <UButton
+            icon="i-lucide-refresh-cw"
+            color="neutral"
+            variant="ghost"
+            :loading="loading"
+            aria-label="Refresh"
+            @click="fetchCollections"
+          />
+        </UTooltip>
+      </div>
+    </div>
+
+    <UTable
+      v-model:global-filter="globalFilter"
+      v-model:sorting="sorting"
+      :data="collections"
+      :columns="columns"
+      :loading="loading"
+    />
+
+    <UModal
+      v-model:open="isClearBucketModalOpen"
+      title="Clear Bucket"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #body>
+        <p>Are you sure you want to delete every file in the "{{ bucketToClear }}" bucket? The bucket itself is kept, but all files in it are permanently removed. This action cannot be undone.</p>
+      </template>
+      <template #footer>
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          @click="isClearBucketModalOpen = false"
+        />
+        <UButton
+          label="Clear Bucket"
+          color="warning"
+          icon="i-lucide-eraser"
+          @click="handleClearBucket"
+        />
+      </template>
+    </UModal>
+
+    <UModal
+      v-model:open="isDeleteBucketModalOpen"
+      title="Delete Bucket"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #body>
+        <p>Are you sure you want to delete the "{{ bucketToDelete }}" bucket? This permanently removes both the "{{ bucketToDelete }}.files" and "{{ bucketToDelete }}.chunks" collections. This action cannot be undone.</p>
+      </template>
+      <template #footer>
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          @click="isDeleteBucketModalOpen = false"
+        />
+        <UButton
+          label="Delete Bucket"
+          color="error"
+          icon="i-lucide-trash-2"
+          @click="handleDeleteBucket"
+        />
+      </template>
+    </UModal>
+  </div>
+</template>

package/dist/runtime/components/MongocampCollections.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    infoPath?: string;
+    dataPath?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/MongocampDatabases.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;