admindb 2.1.1 → 2.2.1

package/dist/views/pages/home.hbs

@@ -69,11 +69,96 @@
       <span class="text-sm text-base-content/45">{{tables.length}} total</span>
     </div>
     {{#if tables.length}}
+      {{#unless readonly}}
+      <div id="home-bulk-toolbar"
+        style="max-height: 0; overflow: hidden; transition: max-height 0.22s cubic-bezier(0.4,0,0.2,1), opacity 0.18s ease; opacity: 0;"
+        aria-hidden="true">
+        <div class="mb-3 flex flex-wrap items-center gap-3 rounded-xl border border-base-300 bg-base-100 px-4 py-3 shadow-soft">
+          <span id="home-bulk-count"
+            class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 px-3 py-1 text-xs font-bold text-primary">
+            <span id="home-bulk-count-num">0</span> selected
+          </span>
+          <div class="h-4 w-px bg-base-300"></div>
+          <div class="dropdown dropdown-bottom" id="home-dd-clear">
+            <button tabindex="0" id="home-btn-clear"
+              class="btn btn-sm btn-warning gap-1.5 font-semibold">
+              {{{icon "refresh" class="h-3.5 w-3.5"}}}
+              Clear Rows
+              {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
+            </button>
+            <ul tabindex="0"
+              class="dropdown-content menu bg-base-100 rounded-xl border border-base-300 shadow-lift z-30 mt-1 w-64 p-2 text-sm">
+              <li>
+                <button id="home-clear-normal" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-base-200 text-left w-full">
+                  <span class="mt-0.5 text-warning shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
+                  <span>
+                    <span class="block font-semibold">Clear rows</span>
+                    <span class="block text-xs text-base-content/50">Deletes all rows; fails if FK references exist</span>
+                  </span>
+                </button>
+              </li>
+              <li>
+                <button id="home-clear-force" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-error/10 text-left w-full text-error">
+                  <span class="mt-0.5 shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
+                  <span>
+                    <span class="block font-semibold">Force Clear <span class="text-[10px] font-bold uppercase tracking-wide rounded bg-error/15 px-1 py-0.5 ml-1">ignore FK</span></span>
+                    <span class="block text-xs text-error/60">Disables FK checks; deletes regardless of references</span>
+                  </span>
+                </button>
+              </li>
+            </ul>
+          </div>
+          <div class="dropdown dropdown-bottom" id="home-dd-drop">
+            <button tabindex="0" id="home-btn-drop"
+              class="btn btn-sm btn-error gap-1.5 font-semibold text-white">
+              {{{icon "warning" class="h-3.5 w-3.5"}}}
+              Drop Tables
+              {{{icon "chevronDown" class="h-3 w-3 opacity-60"}}}
+            </button>
+            <ul tabindex="0"
+              class="dropdown-content menu bg-base-100 rounded-xl border border-base-300 shadow-lift z-30 mt-1 w-64 p-2 text-sm">
+              <li>
+                <button id="home-drop-normal" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-base-200 text-left w-full">
+                  <span class="mt-0.5 text-error shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
+                  <span>
+                    <span class="block font-semibold">Drop tables</span>
+                    <span class="block text-xs text-base-content/50">Permanently deletes tables and all data</span>
+                  </span>
+                </button>
+              </li>
+              <li>
+                <button id="home-drop-force" class="flex items-start gap-2.5 rounded-lg px-3 py-2.5 hover:bg-error/10 text-left w-full text-error">
+                  <span class="mt-0.5 shrink-0">{{{icon "warning" class="h-4 w-4"}}}</span>
+                  <span>
+                    <span class="block font-semibold">Force Drop <span class="text-[10px] font-bold uppercase tracking-wide rounded bg-error/15 px-1 py-0.5 ml-1">ignore FK</span></span>
+                    <span class="block text-xs text-error/60">Drops with FK checks disabled; cascades on Postgres</span>
+                  </span>
+                </button>
+              </li>
+            </ul>
+          </div>
+          <div class="ml-auto">
+            <button id="home-bulk-deselect"
+              class="btn btn-ghost btn-sm gap-1 text-base-content/50 hover:text-base-content">
+              {{{icon "x" class="h-3.5 w-3.5"}}}
+              Deselect all
+            </button>
+          </div>
+        </div>
+      </div>
+      {{/unless}}
       <div class="app-card overflow-hidden">
         <div class="overflow-x-auto">
-          <table class="table table-sm">
+          <table class="table table-sm" id="home-tables-table">
             <thead>
               <tr class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50">
+                {{#unless readonly}}
+                <th class="w-10">
+                  <input type="checkbox" id="home-select-all"
+                    class="checkbox checkbox-sm checkbox-primary"
+                    title="Select all tables" />
+                </th>
+                {{/unless}}
                 <th class="font-semibold">Table</th>
                 <th class="text-right font-semibold">Columns</th>
                 <th class="text-right font-semibold">Rows</th>
@@ -82,7 +167,15 @@
             </thead>
             <tbody>
               {{#each tables}}
-                <tr class="group hover:bg-base-200/50">
+                <tr class="group hover:bg-base-200/50 home-table-row" data-table="{{this}}">
+                  {{#unless ../readonly}}
+                  <td class="w-10">
+                    <input type="checkbox"
+                      class="checkbox checkbox-sm checkbox-primary home-table-checkbox"
+                      data-table="{{this}}"
+                      title="Select {{this}}" />
+                  </td>
+                  {{/unless}}
                   <td>
                     <a href="{{../basePath}}/tables/{{this}}" class="inline-flex items-center gap-2.5 font-medium">
                       <span class="grid h-8 w-8 place-items-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20">
@@ -122,3 +215,6 @@
     {{/if}}
   </div>
 </div>
+{{#unless readonly}}
+<script src="{{basePath}}/js/home.js" defer></script>
+{{/unless}}

package/dist/views/pages/info.hbs

@@ -0,0 +1,107 @@
+<div class="space-y-6">
+  <div class="flex flex-wrap items-center justify-between gap-3">
+    <div>
+      <p class="text-sm font-semibold uppercase tracking-wider text-primary">{{dialect}} Database</p>
+      <h1 class="mt-1 text-3xl font-extrabold tracking-tight">Info & Settings</h1>
+      <p class="mt-1.5 text-sm text-base-content/55">Database configuration, settings, and schema DDL overview.</p>
+    </div>
+  </div>
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <div class="lg:col-span-1 space-y-6">
+      <div class="app-card overflow-hidden">
+        <div class="border-b border-base-200 bg-base-200/40 px-4 py-3">
+          <h2 class="text-sm font-bold uppercase tracking-wider text-base-content/80">Settings / Configuration</h2>
+        </div>
+        <div class="p-0">
+          <table class="table table-sm w-full">
+            <tbody>
+              {{#each settings}}
+              <tr class="hover:bg-base-200/20">
+                <td class="font-medium text-base-content/70 w-1/2">{{@key}}</td>
+                <td class="font-mono text-xs">{{this}}</td>
+              </tr>
+              {{else}}
+              <tr>
+                <td colspan="2" class="p-4 text-center text-sm text-base-content/40">No settings available</td>
+              </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div class="lg:col-span-2 space-y-6">
+      <div class="app-card overflow-hidden flex flex-col h-[75vh]">
+        <div class="border-b border-base-200 bg-base-200/40 px-4 py-3 flex items-center justify-between">
+          <div class="flex items-center gap-3">
+            <h2 class="text-sm font-bold uppercase tracking-wider text-base-content/80">Schema DDL</h2>
+            <span class="badge badge-sm badge-ghost font-mono text-[10px] uppercase font-bold">{{dialect}}</span>
+          </div>
+          <button id="btn-copy-ddl" class="btn btn-sm btn-ghost gap-1.5" disabled>
+            {{{icon "copy" class="h-4 w-4"}}}
+            Copy
+          </button>
+        </div>
+        <div class="bg-base-300 p-4 overflow-y-auto flex-1 relative">
+          <div id="ddl-loader" class="absolute inset-0 flex flex-col items-center justify-center text-base-content/50 gap-3">
+            {{{icon "spinner" class="h-6 w-6 animate-spin text-primary"}}}
+            <p class="text-sm font-medium">Extracting schema definitions...</p>
+          </div>
+          <div id="ddl-error" class="hidden absolute inset-0 flex flex-col items-center justify-center text-error gap-3 bg-base-300">
+            {{{icon "error" class="h-8 w-8"}}}
+            <p class="text-sm font-medium">Failed to load schema.</p>
+          </div>
+          <pre id="ddl-container" class="hidden m-0 h-full"><code class="language-sql text-sm text-base-content/80 whitespace-pre-wrap"></code></pre>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script>
+  document.addEventListener('DOMContentLoaded', async () => {
+    const loader = document.getElementById('ddl-loader');
+    const container = document.getElementById('ddl-container');
+    const codeBlock = container.querySelector('code');
+    const btnCopy = document.getElementById('btn-copy-ddl');
+    const errorBox = document.getElementById('ddl-error');
+    try {
+      const res = await fetch('{{basePath}}/api/info/ddl');
+      const json = await res.json();
+      loader.classList.add('hidden');
+      if (json.success && json.data) {
+        if (window.Utils && window.Utils.highlightSql) {
+          codeBlock.innerHTML = window.Utils.highlightSql(json.data);
+        } else {
+          codeBlock.textContent = json.data;
+        }
+        container.classList.remove('hidden');
+        btnCopy.disabled = false;
+        btnCopy.addEventListener('click', async () => {
+          try {
+            await navigator.clipboard.writeText(json.data);
+            const originalText = btnCopy.innerHTML;
+            btnCopy.innerHTML = `{{{icon "check" class="h-4 w-4"}}} Copied!`;
+            btnCopy.classList.add('text-success');
+            setTimeout(() => {
+              btnCopy.innerHTML = originalText;
+              btnCopy.classList.remove('text-success');
+            }, 2000);
+          } catch (err) {
+            console.error('Failed to copy', err);
+          }
+        });
+      } else {
+        if (json.success && !json.data) {
+          codeBlock.textContent = '-- No tables defined in the database.';
+          container.classList.remove('hidden');
+        } else {
+          throw new Error(json.error || 'Failed to fetch DDL');
+        }
+      }
+    } catch (err) {
+      loader.classList.add('hidden');
+      errorBox.classList.remove('hidden');
+      errorBox.querySelector('p').textContent = err.message || 'Failed to load schema.';
+    }
+  });
+</script>

package/dist/views/pages/query.hbs

@@ -40,22 +40,64 @@
     {{/unless}}
   </div>
   <div class="app-card overflow-hidden">
-    <div class="flex items-center justify-between border-b border-base-200 bg-base-200/40 px-4 py-2.5">
-      <span class="flex items-center gap-2 text-sm font-semibold text-base-content/60">
-        <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/10 text-primary">
-          {{{icon "query" class="h-3.5 w-3.5"}}}
+    <div class="flex flex-wrap items-center justify-between gap-2 border-b border-base-200 bg-base-200/40 px-4 py-2">
+      <div class="flex items-center gap-2">
+        <span class="flex items-center gap-1.5 text-xs font-semibold text-base-content/70">
+          <span class="grid h-5 w-5 place-items-center rounded bg-primary/10 text-primary">
+            {{{icon "query" class="h-3.5 w-3.5"}}}
+          </span>
+          query.sql
         </span>
-        query.sql
-      </span>
-      <span class="text-[11px] text-base-content/40">Ctrl/⌘ + Enter to run</span>
+        <span class="badge badge-sm badge-ghost font-mono text-[10px] uppercase font-bold">{{#if isPostgres}}Postgres{{else}}SQLite{{/if}}</span>
+      </div>
+      <div class="flex flex-wrap items-center gap-1.5">
+        <div class="dropdown dropdown-end">
+          <label tabindex="0" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+            {{{icon "terminal" class="h-3.5 w-3.5"}}}
+            Snippets
+          </label>
+          <ul tabindex="0" class="dropdown-content z-30 menu p-1.5 shadow-2xl bg-base-100 rounded-xl w-56 border border-base-300 text-xs">
+            <li class="menu-title text-[10px] uppercase tracking-wider text-base-content/40">Query Templates</li>
+            <li><a class="js-snippet" data-snippet="SELECT * FROM table_name\nWHERE condition\nORDER BY id DESC\nLIMIT 50;">SELECT rows</a></li>
+            <li><a class="js-snippet" data-snippet="SELECT COUNT(*) AS total\nFROM table_name;">COUNT summary</a></li>
+            <li><a class="js-snippet" data-snippet="SELECT a.*, b.*\nFROM table_a a\nJOIN table_b b ON b.a_id = a.id\nLIMIT 50;">JOIN tables</a></li>
+            <li><a class="js-snippet" data-snippet="INSERT INTO table_name (col1, col2)\nVALUES ('value1', 'value2');">INSERT row</a></li>
+            <li><a class="js-snippet" data-snippet="UPDATE table_name\nSET col1 = 'value1'\nWHERE id = 1;">UPDATE row</a></li>
+            <li><a class="js-snippet" data-snippet="DELETE FROM table_name\nWHERE id = 1;">DELETE row</a></li>
+            <li><a class="js-snippet" data-snippet="CREATE TABLE new_table (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  name TEXT NOT NULL,\n  created_at TEXT DEFAULT (datetime('now'))\n);">CREATE TABLE</a></li>
+          </ul>
+        </div>
+        <button id="format-query" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" title="Format SQL (Beautify)">
+          {{{icon "format" class="h-3.5 w-3.5"}}}
+          Format
+        </button>
+        <button id="copy-query" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" title="Copy SQL to clipboard">
+          {{{icon "copy" class="h-3.5 w-3.5"}}}
+          Copy
+        </button>
+        <button id="clear-query" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-error" title="Clear editor">
+          {{{icon "trash" class="h-3.5 w-3.5"}}}
+          Clear
+        </button>
+        <span class="hidden sm:inline-block text-[11px] text-base-content/35 border-l border-base-300 pl-2">Ctrl/⌘ + Enter to run</span>
+      </div>
     </div>
-    <div>
-      <div class="sql-editor-wrap">
-        <pre id="query-gutter" class="sql-gutter" aria-hidden="true">1</pre>
-        <textarea id="query-sql" class="sql-input" rows="10" placeholder="SELECT * FROM users WHERE …" spellcheck="false"></textarea>
+    <div class="sql-editor-wrap">
+      <div id="query-gutter" class="sql-gutter" aria-hidden="true">
+        <div class="sql-gutter-line">1</div>
+      </div>
+      <div id="query-sql" class="sql-code-editor" contenteditable="plaintext-only" spellcheck="false" data-placeholder="-- Write SQL here or choose a snippet/saved query&#10;SELECT * FROM table_name WHERE …"></div>
+    </div>
+    <div class="flex items-center justify-between border-t border-base-200 bg-base-200/30 px-3.5 py-1.5 text-[11px] font-mono text-base-content/50">
+      <div class="flex items-center gap-3">
+        <span id="editor-cursor-pos">Ln 1, Col 1</span>
+        <span id="editor-stats">0 chars</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="text-[10px] text-base-content/40">Tab to indent · Ctrl+Z / Ctrl+Y to undo/redo · Ctrl+/ to comment</span>
       </div>
-      <div id="query-message"></div>
     </div>
+    <div id="query-message" class="p-3"></div>
   </div>
   <div id="query-result" class="hidden">
     <div class="app-card overflow-hidden">