quar 1.1.0

package/README.md

@@ -0,0 +1,93 @@
+# Quar Studio – Quick UI for Mongoose Models
+
+<p align="center">
+    <img src="./public/assets/icon.png" alt="logo" width="200px"/>
+</p>
+
+Instantly spin up a web-based editor for your Mongoose models.
+Built for developers who loves quick database interaction!
+
+## Install & Run
+```bash
+npx quar --model <path-to-model-folder> --db <db-name>
+```
+This will load all Mongoose models from the folder and start a local web UI to Create, view, update, and delete documents.
+
+## What it does
+- Loads your Mongoose models dynamically
+- Connects to your MongoDB database
+- Gives a tabbed UI for each model
+- View nested documents in a tree-style
+- Supports Create, Read, update and delete
+
+## Folder Structure
+Your models folder can contain files like this:
+
+```js
+// ./models/Post.js
+import mongoose from "mongoose"
+
+const postSchema = new mongoose.Schema({
+  title: String,
+  body: String,
+  author: {
+    name: String,
+    age: Number
+  }
+});
+
+export default mongoose.model("Post", postSchema);
+```
+
+## Configuration
+
+1. Install Quar as dev deps
+    ```bash
+    npm i quar --save-dev
+    ```
+
+2. Execute Command
+    ```bash
+    npx quar
+    ```
+
+3. Set Models Folder
+    ```bash
+    npx quar --model <folder-path>
+    ```
+
+4. Set Database Name
+    ```bash
+    npx quar --model <folder-path> --db <db-name>
+    ```
+
+5. Set Database URI `(Optional)`
+    ```bash
+    npx quar --model <folder-path> --db <db-name> --uri <db-uri>
+    ```
+    > ***Note:** By default it will try to connect local mongodb if uri not provided
+
+## Usage Tips
+- Supports nested schemas & subdocuments
+- Clean tabbed navigation per model
+- Auto-refreshes data after updates
+- Keyboard shortcuts support
+
+    | Command | Performs |
+    |---------|----------|
+    | <kbd>ctrl + o</kbd> | Toggles Insert Tab |
+    | <kbd>ctrl + r</kbd> | Refresh Model |
+    | <kbd>ctrl + ></kbd> | Go To Next Page |
+    | <kbd>ctrl + <</kbd> | Go To Previous Page |
+
+
+
+## Dev Notes
+
+- Built for development use
+- Doesn’t expose MONGO_URI publicly
+- Uses Mongoose’s model.schema.tree for schema info
+- Modular and extendable
+
+## Contribute
+Pull requests, suggestions, and ideas are welcome!

package/index.js

@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+import path from 'path';
+import minimist from 'minimist';
+import app from './server.js';
+import loadModels from './utils/loadModels.js';
+import open from 'open';
+import chalk from 'chalk';
+import mongoose from 'mongoose';
+
+const args = minimist(process.argv.slice(2));
+
+if (!args.model) {
+    console.log(
+        chalk.red.bold('[ERROR]') + ' Missing required flag: ' + chalk.yellow('--model')
+    );
+    console.log('Usage: ' + chalk.cyan('quar --model <model-folder> --db <database-name>'));
+    process.exit(1);
+}
+
+if (typeof args.model !== 'string') {
+    console.log(
+        chalk.red.bold('[ERROR]') + ' The value for ' + chalk.yellow('--model') + ' must be a string.'
+    );
+    process.exit(1);
+}
+
+if (!args.db) {
+    console.log(
+        chalk.red.bold('[ERROR]') + ' Missing required flag: ' + chalk.yellow('--db')
+    );
+    console.log('Usage: ' + chalk.cyan('quar --model <model-folder> --db <database-name>'));
+    process.exit(1);
+}
+
+if (typeof args.db !== 'string') {
+    console.log(
+        chalk.red.bold('[ERROR]') + ' The value for ' + chalk.yellow('--db') + ' must be a string.'
+    );
+    process.exit(1);
+}
+
+const modelDir = path.resolve(process.cwd(), args.model);
+const fullModelPath = path.resolve(modelDir);
+
+// 🔃 Load Models and Start Server
+try {
+    loadModels(fullModelPath);
+    app.locals.modelPath = fullModelPath;
+
+    (async () => {
+
+        await mongoose.connect(`${args.uri || "mongodb://localhost:27017/"}${args.db}`)
+        app.listen(app.get('port'), () => {
+            const url = `http://127.0.0.1:${app.get('port')}`;
+            console.log(chalk.green.bold('[SUCCESS]') + ` Server is running on ${chalk.underline(url)}`);
+            open(url);
+        });
+    })();
+} catch (err) {
+    console.log(chalk.red.bold('[FATAL ERROR]') + ' Failed to launch the server.');
+    console.error(chalk.red(err.stack));
+    process.exit(1);
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "quar",
+  "version": "1.1.0",
+  "description": "This will load all Mongoose models from the folder and start a local web UI to Create, view, update, and delete documents.",
+  "main": "index.js",
+  "type": "module",
+  "bin": {
+    "quar": "./index.js"
+  },
+  "scripts": {
+    "start": "node index.js"
+  },
+  "author": "@IsmailBinMujeeb (IsmailBinMujeeb@gmail.com)",
+  "license": "MIT",
+  "dependencies": {
+    "chalk": "^5.4.1",
+    "express": "^5.1.0",
+    "minimist": "^1.2.8",
+    "mongoose": "^8.14.1",
+    "open": "^10.1.2",
+    "zare": "^2.1.1"
+  }
+}

package/public/scripts/insertTab.js

@@ -0,0 +1,103 @@
+async function toggleInsertTab() {
+    const modelName = content.dataset?.modelName;
+    if (!modelName) {
+        showModal('error', 'Error Occurred!', 'No model selected.');
+        return;
+    }
+
+    const insertTab = document.querySelector('.insert-tab');
+    insertTab.classList.toggle('active');
+
+    if (insertTab.innerHTML.trim() !== '') return;
+
+    try {
+        const res = await fetch(`/schema/${modelName}`);
+        if (!res.ok) throw new Error();
+
+        const schema = await res.json();
+
+        const form = document.createElement('form');
+        form.id = 'insert-form';
+
+        form.addEventListener('submit', async (e) => {
+            e.preventDefault();
+
+            const formData = new FormData(e.target);
+            const data = Object.fromEntries(formData.entries());
+
+            const res = await fetch(`/insert/${modelName}`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(data)
+            });
+
+            if (!res.ok) {
+                const error = await res.json();
+                showModal('error', 'Error Occurred!', error.error || 'Something went wrong, please try again.');
+                return;
+            }
+
+            loadDocuments();
+        });
+
+        for (const key in schema) {
+            const field = schema[key];
+
+            const label = document.createElement('label');
+            label.innerHTML = `${key}:`;
+            label.className = 'label';
+            label.htmlFor = key;
+
+            if (field.type === 'ObjectId') {
+                const idRes = await fetch(`/id/${field.ref}`);
+                if (!idRes.ok) {
+                    const error = await idRes.json();
+                    showModal('error', 'Error Occurred!', error.error || 'Something went wrong, please try again.');
+                    return;
+                };
+
+                const ids = await idRes.json();
+                const select = document.createElement('select');
+                select.id = key;
+                select.name = key;
+                select.className = 'input';
+
+                ids.forEach(id => {
+                    const option = document.createElement('option');
+                    option.value = id;
+                    option.innerText = id;
+                    select.appendChild(option);
+                });
+
+                form.append(label, select);
+                continue;
+            }
+
+            const input = document.createElement('input');
+            input.type = field.type || 'text';
+            input.placeholder = field.type;
+            input.id = key;
+            input.name = key;
+            input.className = 'input';
+            input.required = isRequired(field.require);
+            if (field.default !== undefined) input.value = field.default;
+
+            form.append(label, input);
+        }
+
+        const submitBtn = document.createElement('button');
+        submitBtn.type = 'submit';
+        submitBtn.innerHTML = 'Submit';
+        submitBtn.className = 'btn';
+        form.appendChild(submitBtn);
+
+        insertTab.appendChild(form);
+
+    } catch (error) {
+        showModal('error', 'Error Occurred!', error.message || 'Something went wrong, please try again.');
+    }
+}
+
+function isRequired(require) {
+    return Array.isArray(require) ? require[0] : require;
+}

package/public/scripts/keyboardCommands.js

@@ -0,0 +1,16 @@
+document.addEventListener("keydown", (e) => {
+
+    if (e.ctrlKey && e.key === 'o') {
+        e.preventDefault();
+        toggleInsertTab();
+    } else if (e.ctrlKey && e.key == "r") {
+        e.preventDefault()
+        loadDocuments();
+    } else if (e.ctrlKey && e.key == ".") {
+        e.preventDefault()
+        gotoNextPage();
+    } else if (e.ctrlKey && e.key == ",") {
+        e.preventDefault()
+        gotoPreviousPage();
+    }
+})

package/public/scripts/main.js

@@ -0,0 +1,327 @@
+const tabsContainer = document.getElementById("tabs");
+const content = document.getElementById("content");
+let currentModelName = "";
+let loadedDocuments = [];
+const openTabs = {};
+
+function openModel(modelName) {
+
+    if (!openTabs[modelName]) {
+        // Create a new tab
+        const tab = document.createElement("div");
+        tab.className = "tab";
+        tab.id = "tab-" + modelName;
+        tab.draggable = true;
+        tab.innerHTML = modelName + '<span class="close" onclick="closeTab(event, \'' + modelName + '\')">×</span>';
+        tab.onclick = () => activateTab(modelName);
+        tabsContainer.appendChild(tab);
+
+        tab.addEventListener("dragstart", dragStart);
+        tab.addEventListener("dragover", dragOver);
+        tab.addEventListener("drop", drop);
+        tab.addEventListener("dragend", dragEnd);
+
+        openTabs[modelName] = tab;
+    }
+
+
+    activateTab(modelName);
+}
+
+async function activateTab(modelName) {
+
+    // Prevent if tab is already active
+    if (content.dataset?.modelName == modelName) return
+
+    content.dataset.modelName = modelName;
+    document.getElementById("page-value").innerText = 1;
+
+    const insertTab = document.querySelector('.insert-tab');
+    insertTab.classList.remove('active');
+    insertTab.innerHTML = "";
+    // Remove active class from all tabs
+    document.querySelectorAll('.tab').forEach(tab => tab.classList.remove('active'));
+
+    // Set current tab active
+    const currentTab = document.getElementById("tab-" + modelName);
+    currentTab.classList.add("active");
+
+    // Update content
+    await loadDocuments();
+}
+
+function closeTab(event, modelName) {
+    event.stopPropagation(); // prevent tab click
+    const tab = document.getElementById("tab-" + modelName);
+    tab.remove();
+    delete openTabs[modelName];
+
+    // Clear content if that tab was active and check if other tabs are open to be active
+    if (tab.classList.contains("active")) {
+        content.innerHTML = "";
+        const keys = Object.keys(openTabs);
+        const modelName = keys[keys.length - 1] || null;
+        if (modelName) activateTab(modelName);
+    }
+}
+
+async function loadDocuments() {
+
+    content.innerHTML = "";
+    const limit = document.getElementById("limit").value;
+    const page = document.getElementById("page-value").innerText;
+    const modelName = content.dataset?.modelName;
+
+    if (!modelName) {
+        showModal('error', 'Error Occurred!', 'No model selected.');
+        return;
+    }
+
+    const response = await fetch(`/models/${modelName}?limit=${limit}&page=${page}`);
+    if (response.status !== 200) {
+        showModal('error', 'Error Occurred!', 'Something went wrong, please try again.');
+        return;
+    }
+    const data = await response.json();
+
+    document.getElementById("document-count").innerText = data.count;
+    document.getElementById("page-value").dataset.totalPages = data.totalPages;
+    document.getElementById(`${modelName}-doc-count`).innerText = data.totalCount;
+
+    if (Number(page) >= Number(data.totalPages)) document.getElementById("next-page").disabled = true;
+    else document.getElementById("next-page").disabled = false;
+
+    if (Number(page) <= 1) document.getElementById("previous-page").disabled = true;
+    else document.getElementById("previous-page").disabled = false;
+
+    currentModelName = modelName;
+    loadedDocuments = data.documents;
+    // Render each array element as its own tree
+    data.documents.forEach((doc, index) => {
+        const wrapper = document.createElement('div');
+        wrapper.appendChild(createTree(doc, data.schema, index));
+        wrapper.innerHTML += `<div class="document-actions"><button class="updateDocument" onclick="updateDocument(${index})">Update</button><button class="deleteDocument" onclick="deleteDoc('${modelName}', '${doc._id}')">Delete</button></div>`;
+        content.innerHTML += wrapper.innerHTML;
+    });
+}
+
+function gotoNextPage() {
+    const page = document.getElementById("page-value");
+    page.innerText = Number(page.innerText) + 1;
+
+    if (Number(page.innerText) > Number(page.dataset.totalPages)) {
+        page.innerText = Number(page.dataset.totalPages);
+        return;
+    }
+
+    loadDocuments();
+}
+
+function gotoPreviousPage() {
+    const page = document.getElementById("page-value").innerText;
+    document.getElementById("page-value").innerText = Number(page) - 1;
+
+    if (Number(page) - 1 < 1) {
+        document.getElementById("page-value").innerText = 1;
+        return;
+    }
+
+    loadDocuments();
+}
+
+function createTree(obj, schema, index, level = "root") {
+
+    const moduleDocument = document.createElement('div');
+    moduleDocument.classList.add('document');
+    const container = document.createElement('ul');
+    container.classList.add('tree');
+
+    for (let key in obj) {
+        const value = obj[key];
+        const type = schema[key]?.instance;
+        const li = document.createElement('li');
+
+        if (typeof value === 'object' && value !== null) {
+            li.innerHTML = `<span class="caret collapsible">${key} ${type || "Object"}</span>`;
+            const child = createTree(value, schema[key]?.options?.type?.paths, index, level + "." + key);
+            child.classList.add('nested');
+            child.classList.remove('document');
+            li.appendChild(child);
+        } else {
+            li.innerHTML = `<span class="key">${key}</span> : <span class="value ${type}" ${type === "ObjectId" ? "contenteditable='false'" : "contenteditable='true'"} data-level="${level}" data-index="${index}">${value}</span>`;
+        }
+
+        container.appendChild(li);
+    }
+
+    moduleDocument.appendChild(container);
+    return moduleDocument;
+}
+
+// Handle collapsibles
+document.addEventListener('click', function (e) {
+    if (e.target.classList.contains('collapsible')) {
+        e.target.classList.toggle("caret-down");
+        const nested = e.target.nextElementSibling;
+        if (nested) {
+            nested.classList.toggle("active");
+        }
+    }
+});
+
+function setNestedValue(obj, path, value) {
+    const keys = path.split(".");
+    let current = obj;
+
+    keys.forEach((key, index) => {
+        if (index === keys.length - 1) {
+            current[key] = value; // Set value at last key
+        } else {
+            if (!current[key] || typeof current[key] !== "object") {
+                current[key] = {}; // Create nested object if it doesn't exist
+            }
+            current = current[key]; // Go deeper
+        }
+    });
+
+    return obj; // Optional: return the updated object
+}
+
+async function updateDocument(index) {
+
+    const confirmUpdate = confirm("Are you sure you want to update this document?");
+    if (!confirmUpdate) return;
+
+    const doc = loadedDocuments[index];
+    const id = doc._id;
+
+    let updatedDoc = {};
+    const values = document.querySelectorAll(`[data-index="${index}"]`);
+
+    values.forEach(el => {
+        const key = el.previousElementSibling?.innerText?.trim();
+        const level = el.dataset.level;
+        if (key) {
+            if (level && level !== "root") {
+                // Build the full path
+                const fullPath = `${level.replace("root.", "")}.${key}`;
+                setNestedValue(updatedDoc, fullPath, el.innerText);
+            } else {
+                updatedDoc[key] = el.innerText;
+            }
+        }
+    });
+
+    const res = await fetch(`/update/${currentModelName}/${id}`, {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(updatedDoc),
+    });
+
+    if (res.ok) {
+        showModal('info', 'Document Updated', 'Document updated successfully.');
+        loadDocuments();
+    } else {
+        const data = await res.json();
+        showModal('error', 'Update Failed', data.error || 'Update failed, please try again.');
+    }
+}
+
+async function deleteDoc(modelName, id) {
+    const confirmDelete = confirm("Are you sure you want to delete this document?");
+    if (!confirmDelete) return;
+
+    const res = await fetch(`/delete/${modelName}/${id}`, {
+        method: "DELETE"
+    });
+
+    if (res.ok) {
+        showModal('info', 'Document Deleted', 'Document deleted successfully.');
+        openModel(modelName);
+        const data = await res.json();
+        document.getElementById(`${modelName}-doc-count`).innerText = data.count || 0;
+    } else {
+        showModal('error', 'Delete Failed', await res.json().error || 'Delete failed, please try again.');
+    }
+}
+
+async function deleteAllDocs() {
+    try {
+        const confirmDelete = confirm("Are you sure you want to delete all documents?");
+        if (!confirmDelete) return;
+
+        const modelName = content.dataset?.modelName;
+        if (!modelName) {
+            showModal('error', 'Error Occurred!', 'No model selected.');
+            return;
+        }
+
+        const res = await fetch(`/delete-all/${modelName}`, { method: "DELETE" });
+        if (res.ok) {
+            showModal('info', 'All Documents Deleted', 'All documents deleted successfully.');
+            loadDocuments();
+        } else {
+            showModal('error', 'Delete Failed', await res.json().error || 'Delete failed, please try again.');
+        }
+    } catch (error) {
+        showModal('error', 'Delete Failed', error.message || 'Delete failed, please try again.');
+    }
+}
+
+function dragStart(e) {
+    dragSrc = this;
+    e.dataTransfer.effectAllowed = "move";
+    this.classList.add("dragging");
+}
+
+function dragOver(e) {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+}
+
+function drop(e) {
+    e.preventDefault();
+    if (dragSrc !== this) {
+        // Swap positions
+        const draggedIndex = Array.from(tabsContainer.children).indexOf(dragSrc);
+        const targetIndex = Array.from(tabsContainer.children).indexOf(this);
+
+        if (draggedIndex < targetIndex) {
+            tabsContainer.insertBefore(dragSrc, this.nextSibling);
+        } else {
+            tabsContainer.insertBefore(dragSrc, this);
+        }
+    }
+}
+
+function dragEnd() {
+    this.classList.remove("dragging");
+}
+
+async function refreshSideBar() {
+    try {
+        const modelWrapper = document.querySelector('.model-wrapper');
+        
+        const res = await fetch("/models");
+    
+        if (!res.ok) {
+            const error = await res.json();
+            showModal('error', 'Error Occurred!', error.error || 'Something went wrong, please try again.');
+            return;
+        }
+    
+        modelWrapper.innerHTML = "";
+        const data = await res.json();
+        
+        data.models.forEach(model => {
+            const modelDiv = document.createElement('div');
+            modelDiv.classList.add('model');
+            modelDiv.onclick = () => openModel(model.name);
+            modelDiv.innerHTML = `${model.name} <span id="${model.name}-doc-count">${model.count}</span>`;
+            modelWrapper.appendChild(modelDiv);
+        });
+    } catch (error) {
+        showModal('error', 'Error Occurred!', error.message || 'Something went wrong, please try again.');
+    }
+}
+

package/public/scripts/popup.js

@@ -0,0 +1,26 @@
+function showModal(type, title, message) {
+    const popup = document.getElementById('popup');
+    const box = document.getElementById('popupBox');
+    const titleEl = document.getElementById('popupTitle');
+    const msgEl = document.getElementById('popupMessage');
+
+    box.className = 'popup-box';
+    if (type === 'warning') box.classList.add('warning');
+    else if (type === 'info') box.classList.add('info');
+
+    titleEl.textContent = title;
+    msgEl.textContent = message;
+
+    popup.style.display = 'flex';
+}
+
+function closePopup() {
+    document.getElementById('popup').style.display = 'none';
+}
+
+window.onclick = function (e) {
+    const popup = document.getElementById('popup');
+    if (e.target === popup) {
+        closePopup();
+    }
+}