admindb 2.4.0 → 2.5.0

package/dist/views/pages/query.hbs

@@ -1 +1 @@
-<div class="space-y-6">
  <div class="page-header">
    <div class="page-header-row">
      <div>
        <div class="page-pretitle">Workspace</div>
        <h1 class="page-title">Query editor</h1>
        <p class="mt-0.5 text-xs text-base-content/60">Run arbitrary SQL — SELECT results render as a table, COUNT gives a summary, and write statements execute.</p>
      </div>
      <div class="page-actions">
        {{#unless readonly}}
          <button id="save-query" type="button" class="btn btn-outline btn-sm gap-1.5">
            {{{icon "save" class="h-4 w-4"}}}
            Save query
          </button>
        {{/unless}}
        <button id="run-query" type="button" class="btn btn-primary btn-sm gap-1.5">
          {{{icon "run" class="h-4 w-4"}}}
          Run query
        </button>
      </div>
    </div>
  </div>
  <div class="flex flex-wrap items-end gap-3">
    <div class="form-control w-full max-w-xs">
      <label class="field-label" for="saved-query-select">Saved queries</label>
      <select id="saved-query-select" class="field-select">
        <option value="">— select a saved query —</option>
        {{#each savedQueries}}
          <option value="{{this.id}}">{{this.name}}</option>
        {{/each}}
      </select>
    </div>
    {{#unless readonly}}
      <button id="delete-query" type="button" class="btn btn-ghost btn-sm mb-0.5 text-error" disabled>Delete saved</button>
      <div class="form-control w-full max-w-xs">
        <label class="field-label" for="save-query-name">Save current SQL as</label>
        <div class="join w-full">
          <input id="save-query-name" type="text" class="field-input join-item !rounded-r-none" placeholder="query name" autocomplete="off" />
          <button id="save-query-inline" type="button" class="btn btn-outline join-item">Save</button>
        </div>
      </div>
    {{/unless}}
  </div>
  <div class="app-card overflow-hidden">
    <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>
        <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 class="sql-editor-wrap">
      <div id="query-gutter" class="sql-gutter" aria-hidden="true">
        <div class="sql-gutter-line">1</div>
      </div>
      <div class="sql-editor-stage">
        <pre id="query-highlight" class="sql-code-highlight" aria-hidden="true"><code id="query-code"></code></pre>
        <textarea id="query-sql" class="sql-code-input" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="-- Write SQL here or choose a snippet/saved query&#10;SELECT * FROM table_name WHERE …"></textarea>
      </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>
    <div id="query-message" class="p-3"></div>
  </div>
  <div id="query-result" class="hidden">
    <div class="app-card overflow-hidden">
      <div class="flex items-center gap-2 border-b border-base-200 px-4 py-3">
        <span id="result-kind" class="grid h-6 w-6 place-items-center rounded-md bg-success/10 text-success">
          {{{icon "check" class="h-4 w-4"}}}
        </span>
        <span id="result-summary" class="text-sm font-medium text-base-content/60"></span>
        <div class="ml-auto flex items-center gap-1.5">
          <button id="export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
            {{{icon "export" class="h-3.5 w-3.5"}}}
            CSV
          </button>
          <button id="export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
            {{{icon "export" class="h-3.5 w-3.5"}}}
            JSON
          </button>
        </div>
      </div>
      <div class="overflow-x-auto">
        <table class="table table-sm table-pin-rows">
          <thead id="query-result-head" class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50"></thead>
          <tbody id="query-result-body"></tbody>
        </table>
      </div>
    </div>
  </div>
+<div class="space-y-6">
  <div class="page-header">
    <div class="page-header-row">
      <div>
        <div class="page-pretitle">Workspace</div>
        <h1 class="page-title">Query editor</h1>
        <p class="mt-0.5 text-xs text-base-content/60">Run arbitrary SQL — SELECT results render as a table, COUNT gives a summary, and write statements execute.</p>
      </div>
      <div class="page-actions">
        {{#unless readonly}}
          <button id="save-query" type="button" class="btn btn-outline btn-sm gap-1.5">
            {{{icon "save" class="h-4 w-4"}}}
            Save query
          </button>
        {{/unless}}
        <button id="run-query" type="button" class="btn btn-primary btn-sm gap-1.5">
          {{{icon "run" class="h-4 w-4"}}}
          Run query
        </button>
      </div>
    </div>
  </div>
  <div class="flex flex-wrap items-end gap-3">
    <div class="form-control w-full max-w-xs">
      <label class="field-label" for="saved-query-select">Saved queries</label>
      <select id="saved-query-select" class="field-select">
        <option value="">— select a saved query —</option>
      </select>
    </div>
    {{#unless readonly}}
      <button id="delete-query" type="button" class="btn btn-ghost btn-sm mb-0.5 text-error" disabled>Delete saved</button>
      <div class="form-control w-full max-w-xs">
        <label class="field-label" for="save-query-name">Save current SQL as</label>
        <div class="join w-full">
          <input id="save-query-name" type="text" class="field-input join-item !rounded-r-none" placeholder="query name" autocomplete="off" />
          <button id="save-query-inline" type="button" class="btn btn-outline join-item">Save</button>
        </div>
      </div>
    {{/unless}}
  </div>
  <div class="app-card overflow-hidden">
    <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>
        <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 class="sql-editor-wrap">
      <div id="query-gutter" class="sql-gutter" aria-hidden="true">
        <div class="sql-gutter-line">1</div>
      </div>
      <div class="sql-editor-stage">
        <pre id="query-highlight" class="sql-code-highlight" aria-hidden="true"><code id="query-code"></code></pre>
        <textarea id="query-sql" class="sql-code-input" spellcheck="false" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="-- Write SQL here or choose a snippet/saved query&#10;SELECT * FROM table_name WHERE …"></textarea>
      </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>
    <div id="query-message" class="p-3"></div>
  </div>
  <div id="query-result" class="hidden">
    <div class="app-card overflow-hidden">
      <div class="flex items-center gap-2 border-b border-base-200 px-4 py-3">
        <span id="result-kind" class="grid h-6 w-6 place-items-center rounded-md bg-success/10 text-success">
          {{{icon "check" class="h-4 w-4"}}}
        </span>
        <span id="result-summary" class="text-sm font-medium text-base-content/60"></span>
        <div class="ml-auto flex items-center gap-1.5">
          <button id="export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
            {{{icon "export" class="h-3.5 w-3.5"}}}
            CSV
          </button>
          <button id="export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary" disabled>
            {{{icon "export" class="h-3.5 w-3.5"}}}
            JSON
          </button>
        </div>
      </div>
      <div class="overflow-x-auto">
        <table class="table table-sm table-pin-rows">
          <thead id="query-result-head" class="bg-base-200/70 text-xs uppercase tracking-wide text-base-content/50"></thead>
          <tbody id="query-result-body"></tbody>
        </table>
      </div>
    </div>
  </div>