quar 1.1.0 → 1.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ismail Bin Mujeeb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/models/user.model.js

@@ -0,0 +1,71 @@
+import mongoose from 'mongoose';
+
+const PlanetSchema = new mongoose.Schema({
+    name: String,
+    description: String,
+});
+
+const userSchema = new mongoose.Schema({
+    // String types
+    name: String,
+    email: { type: String, required: true, unique: true },
+    password: { type: String, required: true },
+
+    // Number types
+    age: Number,
+    score: { type: Number, default: 0 },
+
+    // Date types
+    birthDate: Date,
+    createdAt: { type: Date, default: Date.now },
+
+    // Boolean type
+    isActive: { type: Boolean, default: true },
+
+    // Array types
+    interests: [String],
+    scores: [Number],
+
+    planet: { type: PlanetSchema, required: true },
+
+    // Nested object
+    address: {
+        street: String,
+        city: String,
+        country: String,
+        zipCode: String
+    },
+
+    // ObjectId reference
+    friends: [{ type: mongoose.Schema.Types.ObjectId, ref: 'User' }],
+
+    // Mixed type (any data)
+    additionalInfo: mongoose.Schema.Types.Mixed,
+
+    // Buffer type (for binary data)
+    profilePicture: Buffer,
+
+    // Map type
+    metadata: {
+        type: Map,
+        of: String
+    }
+});
+
+// Add indexes
+userSchema.index({ email: 1 });
+userSchema.index({ name: 1, age: -1 });
+
+// Add a virtual property
+userSchema.virtual('fullName').get(function () {
+    return `${this.firstName} ${this.lastName}`;
+});
+
+// Add an instance method
+userSchema.methods.getAge = function () {
+    return Math.floor((Date.now() - this.birthDate.getTime()) / 31557600000);
+};
+
+const User = mongoose.model('User', userSchema);
+
+export default User;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quar",
-  "version": "1.1.0",
+  "version": "1.2.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",

package/public/scripts/main.js

@@ -99,12 +99,30 @@ async function loadDocuments() {
     // 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));
+        const divDocument = document.createElement('div');
+        wrapper.innerHTML += `<div class="top-container"><button class="editDocument" onclick="toggleEditMode('${doc._id}')">Edit</button></div>`;
+        divDocument.innerHTML += Object.entries(doc).map(([key, value]) => renderData(key, value, index)).join('');
+        wrapper.innerHTML += `<textarea class="json-data hidden" id="${doc._id}-json-data" oninput="autoResize(this)">${JSON.stringify(doc, null, 2)}</textarea>`
+
+        divDocument.classList.add('document');
+        divDocument.id = `${doc._id}-html-data`;
+
+        wrapper.appendChild(divDocument);
         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;
+
+        content.appendChild(wrapper);
     });
 }
 
+function toggleEditMode(id) {
+    const htmlData = document.getElementById(`${id}-html-data`);
+    const jsonData = document.getElementById(`${id}-json-data`);
+
+    htmlData.classList.toggle('hidden');
+    jsonData.classList.toggle('hidden');
+
+}
+
 function gotoNextPage() {
     const page = document.getElementById("page-value");
     page.innerText = Number(page.innerText) + 1;
@@ -129,33 +147,34 @@ function gotoPreviousPage() {
     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);
+function renderData(key, value, index, level = "root.", parentDataType = "object") {
+    const type = typeof value;
+    if (value === null) return `<div class="field"><span class="data-key">${key}</span>: <span class="null" data-level="${level}" data-index="${index}">null</span><span class="data-type">(null)</span></div>`;
+
+    if (Array.isArray(value)) {
+        return `
+            <details class="field">
+                <summary ><span class="data-key">${key}</span><span class="data-type"> (Array - ${value.length})</span></summary>
+                <div class="data-value">
+                    ${value.map((v, i) => renderData(`[${i}]`, v, index, level + key, "array")).join('')}
+                </div>
+            </details>
+        `;
+    } else if (type === 'object') {
+        return `
+            <details class="field">
+                <summary><span class="data-key">${key}</span><span class="data-type"> (Object)</span></summary>
+                <div class="data-value">
+                    ${Object.entries(value).map(([k, v]) => renderData(k, v, index, level + key, "object")).join('')}
+                </div>
+            </details>
+        `;
+    } else if (typeof value === 'string' && /^[a-f\d]{24}$/i.test(value)) {
+
+        return `<div class="field"><span class="data-key">${key}</span>: <span class="ObjectId">${value}</span></div>`;
+    } else {
+        return `<div class="field"><span class="data-key">${key}</span>: <span class="${type}" data-level="${level}" data-index="${index}" data-parent-data-type="${parentDataType}" contenteditable >${value}</span></div>`;
     }
-
-    moduleDocument.appendChild(container);
-    return moduleDocument;
 }
 
 // Handle collapsibles
@@ -169,22 +188,31 @@ document.addEventListener('click', function (e) {
     }
 });
 
-function setNestedValue(obj, path, value) {
+function setNestedValue(obj, path, value, parentDataType) {
     const keys = path.split(".");
     let current = obj;
+    console.log(value)
 
     keys.forEach((key, index) => {
         if (index === keys.length - 1) {
-            current[key] = value; // Set value at last key
+            const arrayIndexMatch = key.match(/\[(\d+)\]/);
+            if (arrayIndexMatch) {
+                const idx = parseInt(arrayIndexMatch[1], 10);
+                current[idx] = value;
+            } else {
+                current[key] = value;
+            }
+
         } else {
-            if (!current[key] || typeof current[key] !== "object") {
-                current[key] = {}; // Create nested object if it doesn't exist
+            if (parentDataType === "array" && !Array.isArray(current[key])) {
+                current[key] = [];
+            } else if (parentDataType === "object" && typeof current[key] !== "object") {
+                current[key] = {};
             }
+
             current = current[key]; // Go deeper
         }
     });
-
-    return obj; // Optional: return the updated object
 }
 
 async function updateDocument(index) {
@@ -199,19 +227,24 @@ async function updateDocument(index) {
     const values = document.querySelectorAll(`[data-index="${index}"]`);
 
     values.forEach(el => {
-        const key = el.previousElementSibling?.innerText?.trim();
+        const key = el.previousElementSibling?.textContent?.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);
+                setNestedValue(updatedDoc, fullPath, el.textContent, el.dataset.parentDataType);
             } else {
-                updatedDoc[key] = el.innerText;
+                updatedDoc[key] = el.textContent;
             }
         }
     });
 
+    updatedDoc = { ...updatedDoc, ...updatedDoc[""] }
+
+    console.log(updatedDoc)
+
     const res = await fetch(`/update/${currentModelName}/${id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
@@ -301,18 +334,18 @@ function dragEnd() {
 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');
@@ -325,3 +358,7 @@ async function refreshSideBar() {
     }
 }
 
+function autoResize(textarea) {
+    textarea.style.height = 'auto'; // Reset the height
+    textarea.style.height = textarea.scrollHeight + 'px'; // Set to scrollHeight
+}

package/public/styles/style.css

@@ -217,89 +217,67 @@ body {
     display: none;
 }
 
+summary::marker{
+    color: var(--muted-color);
+    font-size: 10px;
+    margin-right: 10px;
+}
+
 .document {
     padding: 10px;
     border: 1px solid var(--muted-color);
-    /* background: var(--bg-color); */
     background: #1e2124;
-    max-height: 80vh;
     border-radius: 10px;
     margin-top: 10px;
 }
 
-.tree {
-    padding-left: 20px;
-}
-
-.tree li {
-    list-style-type: none;
-    padding: 5px 5px;
-    font-size: 14px;
-    border-radius: 5px;
-    transition: background 0.1s ease-in-out;
+.field {
+    padding: 5px 20px;
 
-    &:hover {
-        background: #2E3A59;
-    }
 }
 
-.tree li .String {
+.field .string {
     color: var(--green-color);
 }
 
-.tree li .String::after {
+.field .string::after {
     content: '"';
     color: var(--green-color);
 }
 
-.tree li .String::before {
+.field .string::before {
     content: '"';
     color: var(--green-color);
 }
 
-.tree li .Number {
+.field .number {
     color: var(--blue-color);
 }
 
-.tree li .ObjectId {
+.field .ObjectId {
     color: var(--red-color);
 }
 
-.tree li .ObjectId::after {
+.field .ObjectId::after {
     content: ' )';
     color: var(--red-color);
 }
 
-.tree li .ObjectId::before {
+.field .ObjectId::before {
     content: 'ObjectId( ';
     color: var(--red-color);
 }
 
-.collapsible {
-    cursor: pointer;
-    user-select: none;
-}
-
-.tree li .nested {
-    display: none;
-}
-
-.tree li .active {
-    display: block;
-}
-
-.caret::before {
-    content: "▶";
-    color: #555;
-    display: inline-block;
-    font-size: 10px;
-    margin-right: 6px;
-    transform: rotate(0deg);
-    transition: transform 0.3s ease;
-}
-
-.caret-down::before {
-    transform: rotate(90deg);
+.json-data {
+    width: 100%;
+    height: auto;
+    margin-top: 10px;
+    background: #1e2124;
+    border: none;
+    color: #E0E0E0;
+    padding: 10px;
+    border-radius: 10px;
+    resize: none;
 }
 
 .document-actions {
@@ -338,4 +316,27 @@ body {
         background: var(--red-color);
         color: var(--bg-color);
     }
+}
+
+.top-container {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+    padding:  0 10px;
+}
+
+.top-container .editDocument {
+    background: transparent;
+    color: #E0E0E0;
+    border: none;
+    padding: 5px 10px;
+    border: 1px solid var(--muted-color);
+    border-radius: 5px;
+    transition: background 0.1s ease-in-out;
+    cursor: pointer;
+
+    &:hover {
+        background: var(--blue-color);
+        color: var(--bg-color);
+    }
 }

package/seeds/user.seed.js

@@ -0,0 +1,68 @@
+import User from '../models/user.model.js';
+
+;(async function seedUsers() {
+    try {
+        // Clear existing users
+        await User.deleteMany({});
+
+        // Create two users
+        const user1 = await User.create({
+            firstName: 'John',
+            lastName: 'Doe',
+            email: 'john.doe@example.com',
+            password: 'password123',
+            birthDate: new Date('1990-01-15'),
+            isActive: true,
+            interests: ['reading', 'hiking', 'photography'],
+            scores: [85, 92, 78],
+            planet: {
+                name: 'Earth',
+                description: 'Our home planet'
+            },
+            address: {
+                street: '123 Main St',
+                city: 'Boston',
+                country: 'USA',
+                zipCode: '02108'
+            },
+            metadata: new Map([
+                ['occupation', 'Software Engineer'],
+                ['department', 'Engineering']
+            ])
+        });
+
+        const user2 = await User.create({
+            firstName: 'Jane',
+            lastName: 'Smith',
+            email: 'jane.smith@example.com',
+            password: 'password456',
+            birthDate: new Date('1988-06-22'),
+            isActive: true,
+            interests: ['painting', 'music', 'travel'],
+            scores: [95, 88, 90],
+            planet: {
+                name: 'Mars',
+                description: 'The red planet'
+            },
+            address: {
+                street: '456 Park Ave',
+                city: 'New York',
+                country: 'USA',
+                zipCode: '10022'
+            },
+            metadata: new Map([
+                ['occupation', 'Product Manager'],
+                ['department', 'Product']
+            ])
+        });
+
+        console.log('Users seeded successfully');
+        return [user1, user2];
+    } catch (error) {
+        console.error('Error seeding users:', error);
+        throw error;
+    }
+})();
+
+export default 1;
+

package/server.js

@@ -2,7 +2,7 @@ import express from 'express';
 import mongoose from 'mongoose';
 import path from "path"
 import loadModels from './utils/loadModels.js';
-
+import seedUsers from './seeds/user.seed.js';
 const app = express();
 const PORT = 8319;
 
@@ -198,6 +198,7 @@ app.put("/update/:modelName/:id", async (req, res) => {
         const { modelName, id } = req.params;
         const model = mongoose.model(modelName);
         const updatedDoc = req.body;
+        
         delete updatedDoc._id;
         const result = await model.findByIdAndUpdate(id, updatedDoc, { new: true });