@sfxcode/nuxt-ui-mongocamp 1.1.0

package/dist/runtime/components/MongocampCollectionData.vue

@@ -0,0 +1,511 @@
+<script setup>
+import { h, ref, resolveComponent, watch } from "vue";
+import { useMongocampApi } from "#imports";
+import useMongocampCollection from "../composables/useMongocampCollection";
+import { useMongocampBucket } from "../composables/useMongocampBucket";
+import { useMongocampSchema } from "../composables/useMongocampSchema";
+import { columnsToFormKitSchema, documentToFormData, formDataToDocument } from "../composables/useMongocampDynamicForm";
+import useMongocampDocument from "../composables/useMongocampDocument";
+import { useMongocampQuery } from "../composables/useMongocampQuery";
+const props = defineProps({
+  collectionName: { type: String, required: true }
+});
+const { documentApi } = useMongocampApi();
+const { pagination, total } = useMongocampCollection();
+const { isBucketCollection, fileIdForRow, downloadingFileIds, uploading, downloadFile, uploadFile } = useMongocampBucket();
+const { schemaFromSamples } = useMongocampSchema();
+const { ensureMetaData } = useMongocampDocument();
+const { like, or } = useMongocampQuery();
+const fileInputRef = ref(null);
+function openFilePicker() {
+  fileInputRef.value?.click();
+}
+async function handleFileSelected(event) {
+  const input = event.target;
+  const file = input.files?.[0];
+  input.value = "";
+  if (!file) return;
+  const success = await uploadFile(props.collectionName, file);
+  if (success) await fetchDocuments();
+}
+const UButton = resolveComponent("UButton");
+const UTooltip = resolveComponent("UTooltip");
+function withTooltip(text, node) {
+  return h(UTooltip, { text }, { default: () => node });
+}
+const isEditModalOpen = ref(false);
+const isDeleteModalOpen = ref(false);
+const editMode = ref("insert");
+const editDocId = ref(void 0);
+const editJson = ref("{}");
+const editError = ref("");
+const docToDelete = ref(void 0);
+const deleteError = ref("");
+const editColumns = ref([]);
+const editSchema = ref([]);
+const editFormData = ref({});
+const originalRow = ref(void 0);
+function getDocId(row) {
+  const id = row._id;
+  if (typeof id === "string") return id;
+  if (typeof id === "object" && id !== null && "$oid" in id)
+    return String(id.$oid);
+  return void 0;
+}
+function openInsert() {
+  editMode.value = "insert";
+  editDocId.value = void 0;
+  editError.value = "";
+  originalRow.value = void 0;
+  editColumns.value = schemaFromSamples(documents.value);
+  if (editColumns.value.length > 0) {
+    editSchema.value = columnsToFormKitSchema(editColumns.value);
+    editFormData.value = {};
+  } else {
+    editJson.value = "{}";
+  }
+  isEditModalOpen.value = true;
+}
+function openEdit(row) {
+  editMode.value = "update";
+  editDocId.value = getDocId(row);
+  editError.value = "";
+  originalRow.value = row;
+  editColumns.value = schemaFromSamples(documents.value);
+  if (editColumns.value.length > 0) {
+    editSchema.value = columnsToFormKitSchema(editColumns.value);
+    editFormData.value = documentToFormData(row, editColumns.value);
+  } else {
+    editJson.value = JSON.stringify(row, null, 2);
+  }
+  isEditModalOpen.value = true;
+}
+function confirmDelete(row) {
+  docToDelete.value = getDocId(row);
+  deleteError.value = "";
+  isDeleteModalOpen.value = true;
+}
+async function handleSave() {
+  editError.value = "";
+  let payload;
+  if (editColumns.value.length > 0) {
+    payload = formDataToDocument(editFormData.value, editColumns.value, editMode.value === "update" ? originalRow.value : void 0);
+  } else {
+    try {
+      payload = JSON.parse(editJson.value);
+    } catch {
+      editError.value = "Invalid JSON";
+      return;
+    }
+  }
+  ensureMetaData(payload);
+  try {
+    if (editMode.value === "insert") {
+      await documentApi.insert({ collectionName: props.collectionName, requestBody: payload });
+    } else {
+      if (!editDocId.value) return;
+      const body = { ...payload };
+      delete body._id;
+      await documentApi.update({ collectionName: props.collectionName, documentId: editDocId.value, requestBody: body });
+    }
+    isEditModalOpen.value = false;
+    await fetchDocuments();
+  } catch (e) {
+    editError.value = e instanceof Error ? e.message : "Error saving document";
+  }
+}
+async function handleDelete() {
+  deleteError.value = "";
+  if (!docToDelete.value) return;
+  try {
+    await documentApi._delete({ collectionName: props.collectionName, documentId: docToDelete.value });
+    isDeleteModalOpen.value = false;
+    await fetchDocuments();
+  } catch (e) {
+    deleteError.value = e instanceof Error ? e.message : "Error deleting document";
+  }
+}
+function makeActionsColumn() {
+  return {
+    id: "actions",
+    header: "",
+    cell: ({ row }) => {
+      const buttons = [];
+      if (isBucketCollection(props.collectionName)) {
+        const fileId = fileIdForRow(props.collectionName, row.original);
+        if (fileId) {
+          buttons.push(withTooltip("Download file", h(UButton, {
+            "icon": "i-lucide-download",
+            "color": "neutral",
+            "variant": "ghost",
+            "size": "sm",
+            "aria-label": "Download file",
+            "loading": downloadingFileIds.value.has(fileId),
+            "onClick": () => downloadFile(props.collectionName, fileId)
+          })));
+        }
+      }
+      buttons.push(
+        withTooltip("Edit document", h(UButton, {
+          "icon": "i-lucide-pencil",
+          "color": "neutral",
+          "variant": "ghost",
+          "size": "sm",
+          "aria-label": "Edit document",
+          "onClick": () => openEdit(row.original)
+        })),
+        withTooltip("Delete document", h(UButton, {
+          "icon": "i-lucide-trash-2",
+          "color": "error",
+          "variant": "ghost",
+          "size": "sm",
+          "aria-label": "Delete document",
+          "onClick": () => confirmDelete(row.original)
+        }))
+      );
+      return h("div", { class: "flex gap-1 justify-end" }, buttons);
+    }
+  };
+}
+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 = ref([]);
+const documents = ref([]);
+const loading = ref(false);
+const filterText = ref("");
+const filterableColumns = ref([]);
+const sorting = ref([]);
+const isInitializing = ref(false);
+const detailOpen = ref(false);
+const detailContent = ref("");
+let filterTimer;
+function openDetail(value) {
+  detailContent.value = JSON.stringify(value, null, 2);
+  detailOpen.value = true;
+}
+function buildLuceneFilter(term) {
+  const t = term.trim();
+  if (!t || filterableColumns.value.length === 0) return void 0;
+  return or(...filterableColumns.value.map((col) => like(col, t))) || void 0;
+}
+function onFilterInput() {
+  clearTimeout(filterTimer);
+  filterTimer = setTimeout(() => {
+    pagination.value.pageIndex = 1;
+    fetchDocuments();
+  }, 300);
+}
+function sortingToMongoSort(s) {
+  return s.map((col) => col.desc ? `-${col.id}` : col.id);
+}
+watch(sorting, () => {
+  if (isInitializing.value) return;
+  pagination.value.pageIndex = 1;
+  fetchDocuments();
+});
+function toIso(value) {
+  if (!value) return "";
+  try {
+    if (value instanceof Date) return value.toISOString();
+    if (typeof value === "string" || typeof value === "number") return new Date(value).toISOString();
+    if (typeof value === "object") {
+      const obj = value;
+      if ("$date" in obj) {
+        const d = obj.$date;
+        if (typeof d === "string" || typeof d === "number") return new Date(d).toISOString();
+        if (typeof d === "object" && d !== null && "$numberLong" in d) {
+          return new Date(Number(d.$numberLong)).toISOString();
+        }
+      }
+    }
+    return String(value);
+  } catch {
+    return String(value);
+  }
+}
+function toDateDisplay(value) {
+  const iso = toIso(value);
+  if (!iso) return "";
+  try {
+    return new Date(iso).toLocaleString();
+  } catch {
+    return iso;
+  }
+}
+function isMetaData(value) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  const obj = value;
+  return "created" in obj || "updated" in obj;
+}
+const CELL_TEXT_MAX_LENGTH = 60;
+function truncateText(value, maxLength = CELL_TEXT_MAX_LENGTH) {
+  return value.length > maxLength ? `${value.slice(0, maxLength)}...` : value;
+}
+function makeCell(key, type) {
+  return ({ row }) => {
+    const raw = row.original[key];
+    if (type === "date-time" && raw) {
+      return h("span", toDateDisplay(raw));
+    }
+    if (raw === null || raw === void 0) {
+      return h("span", "");
+    }
+    if (typeof raw === "object") {
+      if (!Array.isArray(raw)) {
+        const obj = raw;
+        if ("$oid" in obj) return h("span", { class: "font-mono text-xs" }, String(obj.$oid));
+        if ("$date" in obj) return h("span", toDateDisplay(obj));
+        if (isMetaData(obj)) {
+          const rows = [];
+          if (obj.created) {
+            rows.push(h("div", [
+              h("span", { class: "text-dimmed" }, "created: "),
+              h("span", toDateDisplay(obj.created))
+            ]));
+          }
+          if (obj.updated && obj.updated !== obj.created) {
+            rows.push(h("div", [
+              h("span", { class: "text-dimmed" }, "updated: "),
+              h("span", toDateDisplay(obj.updated))
+            ]));
+          }
+          if (obj.createdBy) {
+            rows.push(h("div", [
+              h("span", { class: "text-dimmed" }, "by: "),
+              h("span", String(obj.createdBy))
+            ]));
+          }
+          return h("div", { class: "flex flex-col gap-0.5 text-xs py-1" }, rows);
+        }
+      }
+      const viewLabel = Array.isArray(raw) ? "View array" : "View object";
+      return withTooltip(viewLabel, h(UButton, {
+        "icon": Array.isArray(raw) ? "i-lucide-list" : "i-lucide-braces",
+        "color": "neutral",
+        "variant": "ghost",
+        "size": "xs",
+        "aria-label": viewLabel,
+        "onClick": () => openDetail(raw)
+      }));
+    }
+    const text = String(raw);
+    const truncated = truncateText(text);
+    return h("span", { title: truncated !== text ? text : void 0 }, truncated);
+  };
+}
+async function fetchDocuments() {
+  loading.value = true;
+  try {
+    const res = await documentApi.listDocumentsRaw({
+      collectionName: props.collectionName,
+      rowsPerPage: pagination.value.pageSize,
+      page: pagination.value.pageIndex,
+      sort: sorting.value.length ? sortingToMongoSort(sorting.value) : void 0,
+      filter: buildLuceneFilter(filterText.value)
+    });
+    total.value = +(res.raw.headers.get("x-pagination-count-rows") ?? 0);
+    const rows = await res.value();
+    documents.value = rows;
+    const firstRow = rows[0];
+    if (columns.value.length === 0 && firstRow) {
+      const keys = Object.keys(firstRow);
+      const orderedKeys = [
+        ...keys.filter((k) => k === "_id"),
+        ...keys.filter((k) => k !== "_id" && k !== "metaData").sort(),
+        ...keys.filter((k) => k === "metaData")
+      ];
+      columns.value = orderedKeys.map((key) => ({
+        accessorKey: key,
+        header: ({ column }) => sortHeader(column, key),
+        cell: makeCell(key, "string")
+      }));
+      filterableColumns.value = orderedKeys.filter((k) => k !== "_id" && k !== "metaData" && typeof firstRow[k] === "string");
+      columns.value.push(makeActionsColumn());
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+async function init() {
+  isInitializing.value = true;
+  sorting.value = [];
+  pagination.value.pageIndex = 1;
+  filterText.value = "";
+  filterableColumns.value = [];
+  columns.value = [];
+  documents.value = [];
+  await fetchDocuments();
+  isInitializing.value = false;
+}
+watch(() => props.collectionName, init, { immediate: true });
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-center justify-between gap-4">
+      <UInput
+        v-model="filterText"
+        icon="i-lucide-search"
+        placeholder="Filter rows..."
+        size="sm"
+        class="flex-1 max-w-xs"
+        :disabled="filterableColumns.length === 0"
+        @input="onFilterInput"
+      />
+      <div class="flex items-center gap-2">
+        <span class="text-sm text-gray-500 dark:text-gray-400 shrink-0">
+          {{ total }} documents
+        </span>
+        <UTooltip
+          v-if="isBucketCollection(collectionName)"
+          text="Upload file"
+        >
+          <UButton
+            icon="i-lucide-upload"
+            color="primary"
+            variant="ghost"
+            size="sm"
+            :loading="uploading"
+            aria-label="Upload file"
+            @click="openFilePicker"
+          />
+        </UTooltip>
+        <UTooltip
+          v-else
+          text="Insert document"
+        >
+          <UButton
+            icon="i-lucide-plus"
+            color="primary"
+            variant="ghost"
+            size="sm"
+            aria-label="Insert document"
+            @click="openInsert"
+          />
+        </UTooltip>
+        <input
+          ref="fileInputRef"
+          type="file"
+          class="hidden"
+          @change="handleFileSelected"
+        >
+        <UTooltip text="Reload">
+          <UButton
+            icon="i-lucide-refresh-cw"
+            color="neutral"
+            variant="ghost"
+            :loading="loading"
+            aria-label="Reload"
+            @click="init"
+          />
+        </UTooltip>
+        <UPagination
+          v-model:page="pagination.pageIndex"
+          :total="total"
+          :items-per-page="pagination.pageSize"
+          @update:page="fetchDocuments"
+        />
+      </div>
+    </div>
+    <UTable
+      v-model:sorting="sorting"
+      :sorting-options="{ manualSorting: true }"
+      :data="documents"
+      :columns="columns"
+      :loading="loading"
+    />
+
+    <UModal
+      v-model:open="detailOpen"
+      title="Details"
+    >
+      <template #body>
+        <pre class="text-xs overflow-auto max-h-[60vh] whitespace-pre-wrap break-all">{{ detailContent }}</pre>
+      </template>
+    </UModal>
+
+    <UModal
+      v-model:open="isEditModalOpen"
+      :title="editMode === 'insert' ? 'Insert Document' : 'Edit Document'"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #body>
+        <FUDataEdit
+          v-if="editColumns.length > 0"
+          :data="editFormData"
+          :schema="editSchema"
+          :submit-label="editMode === 'insert' ? 'Insert' : 'Save'"
+          :submit-icon="editMode === 'insert' ? 'i-lucide-plus' : 'i-lucide-save'"
+          @data-saved="handleSave"
+        />
+        <textarea
+          v-else
+          v-model="editJson"
+          class="w-full h-80 font-mono text-xs p-2 border rounded bg-gray-50 dark:bg-gray-900 border-gray-200 dark:border-gray-700 focus:outline-none resize-y"
+          spellcheck="false"
+        />
+        <p
+          v-if="editError"
+          class="mt-2 text-sm text-error-500"
+        >
+          {{ editError }}
+        </p>
+      </template>
+      <template
+        v-if="editColumns.length === 0"
+        #footer
+      >
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          @click="isEditModalOpen = false"
+        />
+        <UButton
+          :label="editMode === 'insert' ? 'Insert' : 'Save'"
+          :icon="editMode === 'insert' ? 'i-lucide-plus' : 'i-lucide-save'"
+          @click="handleSave"
+        />
+      </template>
+    </UModal>
+
+    <UModal
+      v-model:open="isDeleteModalOpen"
+      title="Delete Document"
+      :ui="{ footer: 'justify-end' }"
+    >
+      <template #body>
+        <p>Are you sure you want to delete this document? This action cannot be undone.</p>
+        <p
+          v-if="deleteError"
+          class="mt-2 text-sm text-error-500"
+        >
+          {{ deleteError }}
+        </p>
+      </template>
+      <template #footer>
+        <UButton
+          label="Cancel"
+          color="neutral"
+          variant="ghost"
+          @click="isDeleteModalOpen = false"
+        />
+        <UButton
+          label="Delete"
+          color="error"
+          icon="i-lucide-trash-2"
+          @click="handleDelete"
+        />
+      </template>
+    </UModal>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    collectionName: 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/MongocampCollectionInfos.d.vue.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;