admindb 1.2.1 → 2.0.0

package/dist/views/pages/seed.hbs

@@ -1,86 +1,232 @@
-<div class="space-y-5">
+{{!-- Page: Mock & Seed Data Generator · URL: /tables/:table/seed --}}
+<div class="space-y-6">
+
   <!-- Header -->
-  <div class="flex flex-wrap items-center justify-between gap-3">
+  <div class="flex flex-wrap items-center justify-between gap-4 border-b border-base-200 pb-5">
     <div class="flex items-center gap-3">
       <a href="{{basePath}}/tables/{{table}}" class="btn btn-circle btn-ghost btn-sm" aria-label="Back to table">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" /></svg>
+        {{{icon "arrowLeft" class="h-5 w-5"}}}
       </a>
       <div>
-        <h1 class="font-mono text-2xl font-bold tracking-tight">{{table}}</h1>
-        <p class="text-sm text-base-content/55">Data generator — fill the table with realistic rows in one transaction.</p>
+        <div class="flex flex-wrap items-center gap-2">
+          <h1 class="font-mono text-2xl font-bold tracking-tight">{{table}}</h1>
+          <span class="badge badge-sm badge-neutral font-mono">{{rowCount}} rows in DB</span>
+          <span class="badge badge-sm badge-ghost font-mono">{{colCount}} columns</span>
+        </div>
+        <p class="mt-0.5 text-xs text-base-content/55">Data generator — fill the table with realistic mock data, simulate sparse records, and preview in real time.</p>
       </div>
     </div>
-    <div class="flex flex-wrap gap-2">
-      {{#unless readonly}}
-        <button id="seed-preview" type="button" class="btn btn-outline btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
-          Preview SQL
+    <div class="flex flex-wrap items-center gap-2">
+      <!-- Presets dropdown -->
+      <div class="dropdown dropdown-end">
+        <button tabindex="0" type="button" class="btn btn-outline btn-sm gap-1.5">
+          {{{icon "seed" class="h-4 w-4"}}}
+          Presets
+          {{{icon "chevronDown" class="h-3.5 w-3.5 opacity-60"}}}
         </button>
-        <button id="seed-insert" type="button" class="btn btn-primary btn-sm gap-1.5">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-          Insert rows
+        <ul tabindex="0" class="dropdown-content z-20 menu p-2 shadow-lg bg-base-100 rounded-xl w-56 border border-base-200 text-xs">
+          <li><button type="button" id="preset-realistic" class="py-2">✨ Realistic Mock Data</button></li>
+          <li><button type="button" id="preset-minimal" class="py-2">⚡ Minimal (Required Only)</button></li>
+          <li><button type="button" id="preset-sparse" class="py-2">🎲 Sparse (30% Nullables)</button></li>
+          <li><button type="button" id="preset-numbered" class="py-2">🔢 Sequential & Numbered</button></li>
+          <li class="border-t border-base-200 my-1"></li>
+          <li><button type="button" id="seed-export-config" class="py-2">💾 Export Plan as JSON</button></li>
+          <li><button type="button" id="seed-import-config" class="py-2">📥 Import Plan JSON…</button></li>
+        </ul>
+      </div>
+
+      <button id="seed-preview" type="button" class="btn btn-outline btn-sm gap-1.5">
+        {{{icon "inspect" class="h-4 w-4 text-primary"}}}
+        Preview Data
+      </button>
+
+      {{#unless readonly}}
+        <button id="seed-insert" type="button" class="btn btn-primary btn-sm gap-1.5 shadow-sm">
+          {{{icon "plus" class="h-4 w-4"}}}
+          Insert Rows
         </button>
       {{else}}
-        <span class="inline-flex items-center gap-1.5 text-sm font-medium text-warning">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
-          Read-only — you can preview generated SQL but not insert rows.
+        <span class="inline-flex items-center gap-1.5 text-xs font-medium text-warning bg-warning/10 px-2.5 py-1.5 rounded-lg">
+          {{{icon "lock" class="h-4 w-4"}}}
+          Read-only database
         </span>
       {{/unless}}
     </div>
   </div>
 
-  <!-- Row count -->
-  <div class="app-card p-4">
-    <div class="flex flex-wrap items-end gap-x-5 gap-y-3">
-      <div class="form-control w-44">
-        <label class="field-label" for="seed-count">Rows to generate</label>
-        <input id="seed-count" type="number" min="1" max="{{maxRows}}" value="10" class="field-input" />
+  <!-- Configuration Bar -->
+  <div class="app-card p-5 bg-base-100">
+    <div class="grid grid-cols-1 gap-5 lg:grid-cols-12 lg:items-end">
+      <!-- Row count control -->
+      <div class="lg:col-span-4 space-y-1.5">
+        <label class="field-label !mb-0 font-medium" for="seed-count">
+          <span>Rows to generate</span>
+          <span class="text-xs text-base-content/45 font-normal">(max {{maxRows}})</span>
+        </label>
+        <div class="flex items-center gap-2">
+          <input id="seed-count" type="number" min="1" max="{{maxRows}}" value="10" class="field-input w-28 font-mono font-medium" />
+          <div class="flex flex-wrap items-center gap-1">
+            {{#each quickCounts}}
+              <button type="button" class="seed-quick btn btn-outline btn-xs px-2.5" data-n="{{this}}">{{this}}</button>
+            {{/each}}
+          </div>
+        </div>
       </div>
-      <div class="flex items-center gap-1.5 pb-0.5">
-        {{#each quickCounts}}
-          <button type="button" class="seed-quick btn btn-outline btn-xs" data-n="{{this}}">{{this}}</button>
-        {{/each}}
+
+      <!-- Column Search Filter -->
+      <div class="lg:col-span-4 space-y-1.5">
+        <label class="field-label !mb-0 font-medium" for="seed-search">
+          <span>Filter columns</span>
+        </label>
+        <div class="relative">
+          <span class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-base-content/40">
+            {{{icon "search" class="h-4 w-4"}}}
+          </span>
+          <input id="seed-search" type="text" placeholder="Search column by name or type..." class="field-input pl-9 text-xs" />
+        </div>
+      </div>
+
+      <!-- Seeding options (truncate / clear) -->
+      <div class="lg:col-span-4 flex flex-col justify-end space-y-2">
+        {{#unless readonly}}
+          <label class="cursor-pointer flex items-center gap-2 text-xs font-medium text-base-content/80 hover:text-base-content transition-colors">
+            <input id="seed-truncate" type="checkbox" class="checkbox checkbox-xs checkbox-error rounded" />
+            <span class="flex items-center gap-1 text-error/90">
+              {{{icon "trash" class="h-3.5 w-3.5"}}}
+              Clear table before inserting (DELETE all rows)
+            </span>
+          </label>
+        {{/unless}}
+        <p class="text-[11px] text-base-content/45 leading-tight">Rows are inserted in a single atomic transaction. Any constraint failure safely rolls back.</p>
       </div>
-      <p class="pb-0.5 text-xs text-base-content/45">Up to <b class="tabular-nums">{{maxRows}}</b> rows. The insert is transactional — a failed row rolls everything back.</p>
     </div>
   </div>
 
-  <!-- Column strategies -->
-  <div class="flex flex-wrap items-center justify-between gap-2">
-    <h2 class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-base-content/45">
-      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
-      Column strategies
-    </h2>
-    <div class="flex flex-wrap items-center gap-1.5">
-      <button id="seed-apply-all" type="button" class="btn btn-ghost btn-xs gap-1">Apply strategy to all…</button>
-      <button id="seed-reset" type="button" class="btn btn-ghost btn-xs gap-1">Reset defaults</button>
+  <!-- Column strategies section -->
+  <div class="space-y-3">
+    <div class="flex flex-wrap items-center justify-between gap-2">
+      <div class="flex items-center gap-2">
+        <h2 class="text-sm font-semibold uppercase tracking-wider text-base-content/50">Column Strategies</h2>
+        <span id="seed-col-count-badge" class="badge badge-sm badge-ghost font-mono"></span>
+      </div>
+      <div class="flex flex-wrap items-center gap-1.5">
+        <button id="seed-refresh-samples" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/60" title="Refresh live sample previews">
+          {{{icon "refresh" class="h-3.5 w-3.5"}}}
+          Refresh Samples
+        </button>
+        <button id="seed-apply-all" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/60">
+          {{{icon "duplicate" class="h-3.5 w-3.5"}}}
+          Apply strategy to all…
+        </button>
+        <button id="seed-reset" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/60">
+          {{{icon "refresh" class="h-3.5 w-3.5"}}}
+          Reset Defaults
+        </button>
+      </div>
+    </div>
+
+    <!-- Cards Grid -->
+    <div id="seed-columns" class="grid grid-cols-1 gap-3.5 md:grid-cols-2 2xl:grid-cols-3"></div>
+    <div id="seed-empty-search" class="hidden p-8 text-center app-card">
+      <p class="text-sm text-base-content/50">No columns match the current search query.</p>
     </div>
   </div>
-  <div id="seed-columns" class="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3"></div>
 
-  <!-- Feedback (warnings) -->
+  <!-- Feedback / Warnings Alert -->
   <div id="seed-feedback" class="hidden"></div>
 
-  <!-- Generated SQL preview -->
-  <div id="seed-sql" class="hidden">
-    <div class="app-card">
-      <div class="flex items-center justify-between border-b border-base-200 px-5 py-3.5">
-        <h2 class="flex items-center gap-2 text-sm font-semibold uppercase tracking-wide text-base-content/45">
-          <span class="grid h-6 w-6 place-items-center rounded-md bg-primary/10 text-primary">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /></svg>
-          </span>
-          Generated SQL
-        </h2>
-        <button id="seed-copy" type="button" class="btn btn-ghost btn-xs gap-1">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h9a2 2 0 002-2v-2m-4-7h3a2 2 0 012 2v9a2 2 0 01-2 2h-3" /></svg>
-          Copy
-        </button>
+  <!-- Interactive Dual-Mode Preview Section -->
+  <div id="seed-preview-card" class="hidden app-card overflow-hidden transition-all duration-200">
+    <div class="flex flex-wrap items-center justify-between border-b border-base-200 bg-base-200/40 px-5 py-3 gap-3">
+      <div class="flex items-center gap-3">
+        <div class="tabs tabs-boxed bg-base-300/40 p-0.5 rounded-lg">
+          <button id="tab-table-view" type="button" class="tab tab-sm tab-active font-medium gap-1.5">
+            {{{icon "table" class="h-3.5 w-3.5"}}}
+            Table Preview
+          </button>
+          <button id="tab-sql-view" type="button" class="tab tab-sm font-medium gap-1.5">
+            {{{icon "sql" class="h-3.5 w-3.5"}}}
+            SQL Statements
+          </button>
+        </div>
+        <span id="preview-summary-badge" class="badge badge-sm badge-ghost font-mono"></span>
       </div>
-      <div class="p-4">
-        <pre class="code-panel max-h-[32rem] overflow-auto"><code id="seed-sql-code"></code></pre>
+
+      <div class="flex flex-wrap items-center gap-1.5">
+        <button id="seed-export-csv" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+          {{{icon "export" class="h-3.5 w-3.5"}}}
+          Export CSV
+        </button>
+        <button id="seed-export-json" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+          {{{icon "export" class="h-3.5 w-3.5"}}}
+          Export JSON
+        </button>
+        <button id="seed-copy-sql" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+          {{{icon "copy" class="h-3.5 w-3.5"}}}
+          Copy SQL
+        </button>
+        <button id="seed-download-sql" type="button" class="btn btn-ghost btn-xs gap-1 text-base-content/70 hover:text-primary">
+          {{{icon "export" class="h-3.5 w-3.5"}}}
+          Download .sql
+        </button>
       </div>
     </div>
+
+    <!-- View 1: Interactive Table View -->
+    <div id="seed-table-view-container" class="overflow-x-auto max-h-[32rem]">
+      <table class="table table-sm table-pin-rows table-zebra w-full text-xs">
+        <thead id="seed-preview-thead" class="bg-base-200 font-mono text-[11px] text-base-content/70"></thead>
+        <tbody id="seed-preview-tbody"></tbody>
+      </table>
+    </div>
+
+    <!-- View 2: SQL View -->
+    <div id="seed-sql-view-container" class="hidden p-4">
+      <pre class="code-panel max-h-[32rem] overflow-auto"><code id="seed-sql-code"></code></pre>
+    </div>
   </div>
 </div>
+
+<!-- Config JSON Modal -->
+<dialog id="seed-config-dialog" class="modal">
+  <div class="modal-box app-card max-w-lg">
+    <h3 id="seed-config-dialog-title" class="text-base font-bold">Seed Plan Configuration</h3>
+    <p class="mt-1 text-xs text-base-content/60">Export or paste a JSON configuration for column generator settings.</p>
+    <textarea id="seed-config-textarea" rows="12" class="field-input mt-3 w-full font-mono text-xs" spellcheck="false"></textarea>
+    <div class="mt-4 flex justify-end gap-2">
+      <button id="seed-config-dialog-cancel" type="button" class="btn btn-ghost btn-sm">Close</button>
+      <button id="seed-config-dialog-apply" type="button" class="btn btn-primary btn-sm">Apply Configuration</button>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>
+
+<!-- Truncate Confirmation Modal -->
+<dialog id="seed-truncate-dialog" class="modal">
+  <div class="modal-box app-card max-w-md border border-error/30">
+    <div class="flex items-center gap-3 text-error">
+      <span class="grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-error/10">
+        {{{icon "warning" class="h-6 w-6"}}}
+      </span>
+      <div>
+        <h3 class="text-base font-bold text-base-content">Clear table before inserting?</h3>
+        <p class="text-xs text-error font-medium">All existing rows in "{{table}}" will be permanently deleted.</p>
+      </div>
+    </div>
+    <p class="mt-3 text-xs text-base-content/60 leading-relaxed">
+      This will execute <code>DELETE FROM "{{table}}"</code> before inserting the newly generated seed rows. This action cannot be undone.
+    </p>
+    <div class="mt-5 flex justify-end gap-2">
+      <button id="seed-truncate-cancel" type="button" class="btn btn-ghost btn-sm">Cancel</button>
+      <button id="seed-truncate-confirm" type="button" class="btn btn-error btn-sm">Yes, Clear & Insert</button>
+    </div>
+  </div>
+  <form method="dialog" class="modal-backdrop">
+    <button>close</button>
+  </form>
+</dialog>
+
 <script id="seed-config" type="application/json">{{{json seedConfig}}}</script>
 <script src="{{basePath}}/js/seed.js" defer></script>