quar 1.2.1 → 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.1",
+  "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 = "";
@@ -267,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.');
     }

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

@@ -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>