InceptionDB • SPA UI (mock) — Vue3 + Tailwind

{{ pageTitle }}

{{ subtitle }}

Qué incluye este mock

  • Listar/crear/eliminar databases (campos reales del schema).
  • Listar/crear collections, ver detalles y defaults.
  • Listar/crear/eliminar indexes.
  • Gestionar API Keys y owners.
  • Consola para find/insert/remove/patch (solo mock).

/v1/databases — Listar y crear

{{ db.name }}
id: {{ db.id }}
owners_length: {{ db.owners_length }}
/v1/databases/{databaseId}

{{ currentDbDetail.name }}

id: {{ currentDbDetail.id }} · creation_date: {{ currentDbDetail.creation_date }}

API Keys (getDatabaseResponse.api_keys)

namekeycreation_date
{{ k.name }} {{ k.key }} {{ k.creation_date }}

Owners (getDatabaseResponse.owners)

  • {{ o }}

/v1/databases/{databaseId}/collections

{{ c.name }}
indexes: {{ c.indexes }} · total: {{ c.total }}
defaults: {{ toSmallJson(c.defaults) }}

(Se guarda tal cual en defaults)
/v1/databases/{databaseId}/collections/{collectionName}

{{ currentCollection.name }}

DB: {{ params.db }} · total: {{ currentCollection.total }} · indexes: {{ currentCollection.indexes }}

Defaults (CollectionResponse.defaults)

{{ pretty(currentCollection.defaults) }}

Tamaño (size)

Respuesta mock de /v1/databases/{databaseId}/collections/{collectionName}:size
{{ pretty({bytes: 24576, docs: currentCollection.total}) }}

Índices (list/get/create/drop)

DB: {{ params.db || filters.db }} · Collection: {{ params.col || currentColOf(filters.db) }}

nametypeoptionsAcciones
{{ idx.name }} {{ idx.type }} {{ toSmallJson(idx.options) }}

Consola (find / insert / remove / patch)

find (request mock)

find (response mock)

{{ pretty(results.find) }}

insert (request mock)

insert (response mock)

{{ pretty(results.insert) }}

Sobre este proyecto

SPA de ejemplo con Vue3 + Tailwind, basada en el OpenAPI de InceptionDB. De momento usa datos simulados pero los formularios y vistas reflejan los campos reales de requests/responses.

  • Endpoints cubiertos: /v1/databases, /v1/databases/{id}, /collections, :listIndexes, :getIndex, :createIndex, :dropIndex, :size, :dropCollection, :createApiKey, :deleteApiKey, :addOwner, :deleteOwner, :find, :insert (mock).
  • Siguientes pasos: conectar a API real, manejo de errores HTTP, paginación, auth (API Key), estados de carga.
{{ toast }}