quar 1.2.0 → 1.2.2

package/index.js

@@ -51,9 +51,11 @@ try {
     (async () => {
 
         await mongoose.connect(`${args.uri || "mongodb://localhost:27017/"}${args.db}`)
+        console.log( chalk.blue.bold('[INFO]'), chalk.gray("Quar: Database connection established"))
+
         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)}`);
+            console.log(chalk.green.bold('[SUCCESS]') + chalk.gray(` Server is running on ${chalk.underline(url)}`));
             open(url);
         });
     })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quar",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "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",
@@ -8,7 +8,8 @@
     "quar": "./index.js"
   },
   "scripts": {
-    "start": "node index.js"
+    "start": "node index.js",
+    "dev": "node .\\index.js --model .\\models\\ --db shopDB"
   },
   "author": "@IsmailBinMujeeb (IsmailBinMujeeb@gmail.com)",
   "license": "MIT",

package/public/scripts/insertTab.js

@@ -25,6 +25,18 @@ async function toggleInsertTab() {
             const formData = new FormData(e.target);
             const data = Object.fromEntries(formData.entries());
 
+            const checkboxes = e.target.querySelectorAll('input[type="checkbox"]');
+            checkboxes.forEach(cb => {
+                data[cb.name] = cb.checked;
+            });
+
+            const textareas = e.target.querySelectorAll('textarea');
+            textareas.forEach(async tarea => {
+                
+                data[tarea.name] = JSON.parse(tarea.value)
+                
+            })
+
             const res = await fetch(`/insert/${modelName}`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -40,8 +52,12 @@ async function toggleInsertTab() {
             loadDocuments();
         });
 
+
         for (const key in schema) {
+
+            if (/\.\$\*$/.test(key)) continue;
             const field = schema[key];
+            let inputType = null;
 
             const label = document.createElement('label');
             label.innerHTML = `${key}:`;
@@ -73,8 +89,44 @@ async function toggleInsertTab() {
                 continue;
             }
 
+            if (field.type === 'String') inputType = 'text';
+            else if (field.type === 'Number') inputType = 'number';
+            else if (field.type === 'Boolean') inputType = 'checkbox';
+            else if (field.type === 'Date') inputType = 'date';
+            else if (field.type === 'Array' || field.type === "Map" || field.type === "Object" || field.type == "Mixed" || field.type === "Buffer") {
+                const input = document.createElement('textarea');
+
+                input.placeholder = field.type;
+                input.id = key;
+                input.name = key;
+                input.className = 'input';
+                field.type === "Array" ? input.textContent = "[ ]" : input.textContent = "{ }";
+                input.required = isRequired(field.require);
+                if (field.default !== undefined) input.value = field.default;
+
+                form.append(label, input);
+                continue;
+            };
+
+            if (field.enum) {
+                const select = document.createElement('select');
+                select.id = key;
+                select.name = key;
+                select.className = 'input';
+
+                field.enum.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.type = inputType || 'text';
             input.placeholder = field.type;
             input.id = key;
             input.name = key;

package/public/scripts/main.js

@@ -35,6 +35,8 @@ async function activateTab(modelName) {
 
     content.dataset.modelName = modelName;
     document.getElementById("page-value").innerText = 1;
+    document.querySelectorAll(".operations .btn")?.forEach( btn => btn.disabled = false )
+    document.querySelector(".operations select").disabled = false;
 
     const insertTab = document.querySelector('.insert-tab');
     insertTab.classList.remove('active');
@@ -62,9 +64,18 @@ function closeTab(event, modelName) {
         const keys = Object.keys(openTabs);
         const modelName = keys[keys.length - 1] || null;
         if (modelName) activateTab(modelName);
+        else disableAllOptions();
     }
 }
 
+function disableAllOptions() {
+    content.dataset.modelName = '';
+
+    document.querySelectorAll(".operations .btn")?.forEach( btn => btn.disabled = true );
+    document.getElementById("document-count").innerText = 0;
+    document.querySelector(".operations select").disabled = true;
+}
+
 async function loadDocuments() {
 
     content.innerHTML = "";
@@ -100,12 +111,9 @@ async function loadDocuments() {
     data.documents.forEach((doc, index) => {
         const wrapper = document.createElement('div');
         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>`;
@@ -191,7 +199,6 @@ document.addEventListener('click', function (e) {
 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) {
@@ -243,8 +250,6 @@ async function updateDocument(index) {
 
     updatedDoc = { ...updatedDoc, ...updatedDoc[""] }
 
-    console.log(updatedDoc)
-
     const res = await fetch(`/update/${currentModelName}/${id}`, {
         method: "PUT",
         headers: { "Content-Type": "application/json" },
@@ -273,6 +278,7 @@ async function deleteDoc(modelName, id) {
         openModel(modelName);
         const data = await res.json();
         document.getElementById(`${modelName}-doc-count`).innerText = data.count || 0;
+        loadDocuments()
     } else {
         showModal('error', 'Delete Failed', await res.json().error || 'Delete failed, please try again.');
     }
@@ -356,9 +362,4 @@ async function refreshSideBar() {
     } catch (error) {
         showModal('error', 'Error Occurred!', error.message || 'Something went wrong, please try again.');
     }
-}
-
-function autoResize(textarea) {
-    textarea.style.height = 'auto'; // Reset the height
-    textarea.style.height = textarea.scrollHeight + 'px'; // Set to scrollHeight
 }

package/public/styles/insertTab.css

@@ -31,7 +31,9 @@
     color: var(--text-color);
 }
 
-#insert-form input, select {
+#insert-form input,
+select,
+textarea {
     width: 100%;
     padding: 10px;
     border: 1px solid var(--muted-color);
@@ -40,6 +42,21 @@
     color: var(--text-color);
 }
 
+#insert-form textarea {
+    resize: vertical;
+    min-height: fit-content;
+}
+
+#insert-form input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--green-color);
+    background-color: var(--bg-color);
+    border: 1px solid var(--muted-color);
+    border-radius: 10px;
+    cursor: pointer;
+}
+
 #insert-form .btn {
     background: transparent;
     color: var(--text-color);
@@ -54,4 +71,4 @@
         background: var(--blue-color);
         color: var(--bg-color);
     }
-}
+}

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;
 
@@ -108,6 +108,7 @@ app.get("/schema/:modelName", async (req, res) => {
             }
         }
         getSchema(paths)
+
         res.status(200).json(schema);
     } catch (error) {
         res.status(500).json({ error: error.message || "Intenral Server Error" })

package/utils/loadModels.js

@@ -22,4 +22,6 @@ export default (modelPath) => {
             await import(moduleUrl.href);
         }
     });
+
+    console.log(chalk.blue.bold('[INFO]'), chalk.gray("Models loaded from: " + modelPath))
 }

package/views/pages/index.zare

@@ -37,12 +37,12 @@ serve (
                     <div class="text">Count</div>
                     <div class="count-div" id="document-count">0</div>
                 </div>
-                <button class="btn" id="previous-page" onclick="gotoPreviousPage()">Previous</button>
+                <button class="btn" id="previous-page" onclick="gotoPreviousPage()" disabled>Previous</button>
                 <div class="page-wrapper" id="page" data-page="1">
                     <div class="text">Page</div>
                     <div class="page-div" id="page-value">1</div>
                 </div>
-                <button class="btn" id="next-page" onclick="gotoNextPage()">Next</button>
+                <button class="btn" id="next-page" onclick="gotoNextPage()" disabled>Next</button>
                 <button class="btn" onclick="toggleInsertTab()">Add Record</button>
                 <button class="btn" onclick="deleteAllDocs()">🗑</button>
             </div>

package/models/user.model.js

@@ -1,71 +0,0 @@
-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/seeds/user.seed.js

@@ -1,68 +0,0 @@
-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;
-