quar 1.1.0 → 1.2.1

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quar",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "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,27 @@ 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');
+        divDocument.innerHTML += Object.entries(doc).map(([key, value]) => renderData(key, value, index)).join('');
+
+        divDocument.classList.add('document');
+
+        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 +144,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 +185,30 @@ document.addEventListener('click', function (e) {
     }
 });
 
-function setNestedValue(obj, path, value) {
+function setNestedValue(obj, path, value, parentDataType) {
     const keys = path.split(".");
     let current = obj;
 
     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 +223,22 @@ 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[""] }
+
     const res = await fetch(`/update/${currentModelName}/${id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
@@ -301,18 +328,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');
@@ -323,5 +350,4 @@ async function refreshSideBar() {
     } catch (error) {
         showModal('error', 'Error Occurred!', error.message || 'Something went wrong, please try again.');
     }
-}
-
+}

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/server.js

@@ -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 });