db-model-router 1.0.5 → 1.0.7

package/db-manager/utils/parse-filters.js

@@ -0,0 +1,93 @@
+"use strict";
+
+/**
+ * Parses filter query parameters into adapter-compatible filter arrays.
+ *
+ * Supports two formats:
+ * 1. New format: filter[0][col]=name&filter[0][op]=like&filter[0][val]=ali
+ *    → [['name', 'like', 'ali']]
+ * 2. Legacy format: filter[column_name]=value (defaults to 'like' operator)
+ *    → [['column_name', 'like', 'value']]
+ *
+ * @param {object} queryParams - The query parameters object (e.g., req.query)
+ * @returns {Array<[string, string, string]>} Array of [column, operator, value] tuples
+ */
+function parseFilters(queryParams) {
+  var filters = [];
+
+  if (!queryParams || typeof queryParams !== "object") {
+    return filters;
+  }
+
+  var filterParam = queryParams.filter;
+
+  if (!filterParam || typeof filterParam !== "object") {
+    // Try flat key format: { 'filter[name]': 'ali' }
+    var keys = Object.keys(queryParams);
+    for (var i = 0; i < keys.length; i++) {
+      var key = keys[i];
+      var match = key.match(/^filter\[(.+)\]$/);
+      if (match) {
+        var column = match[1];
+        var value = queryParams[key];
+        if (typeof value === "string" && value.length > 0) {
+          filters.push([column, "like", value]);
+        }
+      }
+    }
+    return filters;
+  }
+
+  // Check if it's the new indexed format: filter[0][col], filter[0][op], filter[0][val]
+  // Express parses this as: { filter: { '0': { col: 'name', op: 'like', val: 'ali' }, ... } }
+  // or as: { filter: [ { col: 'name', op: 'like', val: 'ali' } ] }
+  if (Array.isArray(filterParam)) {
+    // Array format
+    for (var j = 0; j < filterParam.length; j++) {
+      var item = filterParam[j];
+      if (
+        item &&
+        item.col &&
+        item.op &&
+        item.val !== undefined &&
+        item.val !== ""
+      ) {
+        filters.push([item.col, item.op, item.val]);
+      }
+    }
+    return filters;
+  }
+
+  // Object format — could be indexed { '0': { col, op, val } } or legacy { name: 'ali' }
+  var filterKeys = Object.keys(filterParam);
+
+  // Check if first key is numeric (indexed format)
+  if (filterKeys.length > 0 && /^\d+$/.test(filterKeys[0])) {
+    for (var k = 0; k < filterKeys.length; k++) {
+      var entry = filterParam[filterKeys[k]];
+      if (
+        entry &&
+        entry.col &&
+        entry.op &&
+        entry.val !== undefined &&
+        entry.val !== ""
+      ) {
+        filters.push([entry.col, entry.op, entry.val]);
+      }
+    }
+    return filters;
+  }
+
+  // Legacy nested object format: { filter: { name: 'ali', email: 'gmail' } }
+  for (var m = 0; m < filterKeys.length; m++) {
+    var col = filterKeys[m];
+    var val = filterParam[col];
+    if (typeof val === "string" && val.length > 0) {
+      filters.push([col, "like", val]);
+    }
+  }
+
+  return filters;
+}
+
+module.exports = { parseFilters };

package/db-manager/utils/sort-state.js

@@ -0,0 +1,35 @@
+"use strict";
+
+/**
+ * Computes the next sort state given the current state and the clicked column.
+ *
+ * Sort state cycles: null → 'asc' → 'desc' → null
+ * Clicking a different column resets to ascending on the new column.
+ *
+ * @param {{ column: string|null, dir: string|null }} currentState - Current sort state
+ * @param {string} clickedColumn - The column header that was clicked
+ * @returns {{ column: string|null, dir: string|null }} The new sort state
+ */
+function nextSortState(currentState, clickedColumn) {
+  var currentColumn = currentState && currentState.column;
+  var currentDir = currentState && currentState.dir;
+
+  // Clicking a different column → start ascending on new column
+  if (clickedColumn !== currentColumn) {
+    return { column: clickedColumn, dir: "asc" };
+  }
+
+  // Same column clicked — cycle through states
+  if (currentDir === null || currentDir === undefined) {
+    return { column: clickedColumn, dir: "asc" };
+  }
+
+  if (currentDir === "asc") {
+    return { column: clickedColumn, dir: "desc" };
+  }
+
+  // currentDir === 'desc' → clear sort
+  return { column: null, dir: null };
+}
+
+module.exports = { nextSortState };

package/db-manager/views/.gitkeep

@@ -0,0 +1 @@
+

package/db-manager/views/dashboard.ejs

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="system">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DB Manager - Dashboard</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/css/style.css" />
+    <script>
+      (function () {
+        var saved = localStorage.getItem("dbm-theme") || "system";
+        document.documentElement.setAttribute("data-theme", saved);
+      })();
+    </script>
+  </head>
+  <body>
+    <%- include('partials/header') %>
+    <main class="app-container">
+      <aside class="sidebar"><%- include('partials/sidebar') %></aside>
+      <section class="data-panel">
+        <div class="dashboard-content">
+          <h2 class="dashboard-title">Database Overview</h2>
+          <div class="dashboard-table-wrapper">
+            <table class="dashboard-table">
+              <thead>
+                <tr>
+                  <th>Table Name</th>
+                  <th>Columns</th>
+                  <th>Indexes</th>
+                  <th>Rows</th>
+                  <th>Size (MB)</th>
+                </tr>
+              </thead>
+              <tbody class="dashboard-table-body">
+                <!-- Populated by client-side JS -->
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+    </main>
+    <script src="/js/app.js"></script>
+  </body>
+</html>

package/db-manager/views/history.ejs

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="system">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DB Manager - History</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/css/style.css" />
+    <script>
+      (function () {
+        var saved = localStorage.getItem("dbm-theme") || "system";
+        document.documentElement.setAttribute("data-theme", saved);
+      })();
+    </script>
+  </head>
+  <body>
+    <%- include('partials/header') %>
+    <main class="app-container">
+      <aside class="sidebar"><%- include('partials/sidebar') %></aside>
+      <section class="data-panel">
+        <div class="history-content">
+          <h2 class="history-title">Query History</h2>
+          <div class="history-table-wrapper">
+            <table class="history-table">
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>Query</th>
+                  <th>Rows</th>
+                  <th>Executed At</th>
+                </tr>
+              </thead>
+              <tbody class="history-table-body">
+                <!-- Populated by client-side JS -->
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+    </main>
+    <script src="/js/app.js"></script>
+  </body>
+</html>

package/db-manager/views/index.ejs

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="system">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DB Manager</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/css/style.css" />
+    <script>
+      (function () {
+        var saved = localStorage.getItem("dbm-theme") || "system";
+        document.documentElement.setAttribute("data-theme", saved);
+      })();
+    </script>
+  </head>
+  <body>
+    <%- include('partials/header') %>
+    <main class="app-container">
+      <aside class="sidebar"><%- include('partials/sidebar') %></aside>
+      <section class="data-panel">
+        <%- include('partials/data-panel') %>
+      </section>
+    </main>
+    <script src="/js/app.js"></script>
+  </body>
+</html>

package/db-manager/views/layout.ejs

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="system">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DB Manager</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/css/style.css" />
+    <script>
+      // Apply saved theme immediately to prevent flash
+      (function () {
+        var saved = localStorage.getItem("dbm-theme") || "system";
+        document.documentElement.setAttribute("data-theme", saved);
+      })();
+    </script>
+  </head>
+  <body>
+    <%- include('partials/header') %>
+    <main class="app-container"><%- body %></main>
+    <script src="/js/app.js"></script>
+  </body>
+</html>

package/db-manager/views/partials/data-panel.ejs

@@ -0,0 +1,74 @@
+<div class="data-panel-content">
+  <div class="data-toolbar">
+    <button class="btn btn-filter" type="button">
+      <span class="material-icons">filter_list</span> Filter
+    </button>
+    <button class="btn btn-add" type="button">
+      <span class="material-icons">add</span> Add
+    </button>
+    <button class="btn btn-delete" type="button" disabled>
+      <span class="material-icons">delete</span> Delete
+    </button>
+    <button class="btn btn-export" type="button" disabled>
+      <span class="material-icons">file_download</span> Export
+    </button>
+  </div>
+  <div class="filter-tags"></div>
+  <div class="data-table-wrapper">
+    <table class="data-table">
+      <thead>
+        <tr class="column-headers"></tr>
+      </thead>
+      <tbody class="data-rows"></tbody>
+    </table>
+  </div>
+  <div class="pagination-controls">
+    <button class="btn btn-prev" type="button" disabled>&laquo; Prev</button>
+    <span class="page-info"></span>
+    <button class="btn btn-next" type="button" disabled>Next &raquo;</button>
+    <select class="page-size" aria-label="Page size">
+      <option value="30">30</option>
+      <option value="50">50</option>
+      <option value="100">100</option>
+      <option value="0">No limit</option>
+    </select>
+  </div>
+</div>
+
+<!-- Filter Popup Modal -->
+<div class="filter-modal-overlay" style="display: none">
+  <div class="filter-modal">
+    <div class="filter-modal-header">
+      <h3>Add Filter</h3>
+      <button class="filter-modal-close" type="button">
+        <span class="material-icons">close</span>
+      </button>
+    </div>
+    <div class="filter-modal-body">
+      <div class="filter-modal-row">
+        <select class="filter-col-select" aria-label="Column">
+          <option value="">Column...</option>
+        </select>
+        <select class="filter-op-select" aria-label="Operator">
+          <option value="=">=</option>
+          <option value="!=">!=</option>
+          <option value="like">like</option>
+          <option value="not like">not like</option>
+          <option value="<">&lt;</option>
+          <option value=">">&gt;</option>
+          <option value="<=">&lt;=</option>
+          <option value=">=">>=</option>
+        </select>
+        <input
+          type="text"
+          class="filter-val-input"
+          placeholder="Value..."
+          aria-label="Filter value"
+        />
+        <button class="btn-filter-add" type="button">
+          <span class="material-icons">add</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

package/db-manager/views/partials/header.ejs

@@ -0,0 +1,36 @@
+<header class="app-header">
+  <h1>DB Manager</h1>
+  <div class="header-right">
+    <div class="connection-info">
+      <span class="db-type"><%= dbType %></span>
+      <span class="db-name"><%= dbName %></span>
+      <span class="db-host"><%= dbHost %></span>
+    </div>
+    <div class="theme-switcher" role="radiogroup" aria-label="Theme selection">
+      <button
+        class="theme-btn"
+        data-theme-value="light"
+        aria-label="Light mode"
+        title="Light mode"
+      >
+        <span class="material-icons">light_mode</span>
+      </button>
+      <button
+        class="theme-btn"
+        data-theme-value="dark"
+        aria-label="Dark mode"
+        title="Dark mode"
+      >
+        <span class="material-icons">dark_mode</span>
+      </button>
+      <button
+        class="theme-btn"
+        data-theme-value="system"
+        aria-label="System mode"
+        title="System mode"
+      >
+        <span class="material-icons">desktop_windows</span>
+      </button>
+    </div>
+  </div>
+</header>

package/db-manager/views/partials/sidebar.ejs

@@ -0,0 +1,30 @@
+<div class="nav-links">
+  <a href="/dashboard" class="nav-link" data-page="dashboard">
+    <span class="material-icons">space_dashboard</span>
+    Dashboard
+  </a>
+  <a href="/query" class="nav-link" data-page="query">
+    <span class="material-icons">terminal</span>
+    Query
+  </a>
+  <a href="/history" class="nav-link" data-page="history">
+    <span class="material-icons">schedule</span>
+    History
+  </a>
+</div>
+<div class="sidebar-tables">
+  <button class="sidebar-tables-toggle" aria-expanded="true">
+    <span class="material-icons">storage</span>
+    Tables
+    <span class="material-icons toggle-arrow">expand_more</span>
+  </button>
+  <div class="sidebar-tables-content">
+    <input
+      type="text"
+      class="table-search"
+      placeholder="Search tables..."
+      aria-label="Search tables"
+    />
+    <ul class="table-list"></ul>
+  </div>
+</div>

package/db-manager/views/query.ejs

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="system">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DB Manager - Query</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Fira+Sans:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="/css/style.css" />
+    <script>
+      (function () {
+        var saved = localStorage.getItem("dbm-theme") || "system";
+        document.documentElement.setAttribute("data-theme", saved);
+      })();
+    </script>
+  </head>
+  <body>
+    <%- include('partials/header') %>
+    <main class="app-container">
+      <aside class="sidebar"><%- include('partials/sidebar') %></aside>
+      <section class="data-panel">
+        <div class="query-content">
+          <textarea
+            class="query-editor"
+            placeholder="Enter SQL query..."
+            aria-label="SQL query editor"
+          ></textarea>
+          <div class="query-actions">
+            <button class="btn btn-run" type="button">
+              <span class="material-icons">play_arrow</span> Run
+            </button>
+            <button class="btn btn-export-query" type="button" disabled>
+              <span class="material-icons">file_download</span> Export
+            </button>
+          </div>
+          <div class="query-error" style="display: none"></div>
+          <div class="query-results-wrapper">
+            <table class="query-results-table">
+              <thead>
+                <tr class="query-column-headers"></tr>
+              </thead>
+              <tbody class="query-data-rows"></tbody>
+            </table>
+          </div>
+        </div>
+      </section>
+    </main>
+    <script src="/js/app.js"></script>
+  </body>
+</html>