appflare 0.2.7 → 0.2.9

package/cli/commands/index.ts

@@ -93,7 +93,6 @@ export async function runMigrate(
 	options: MigrateOptions = {},
 ): Promise<void> {
 	const loadedConfig = await loadConfig(configPath);
-	const npxCommand = process.platform === "win32" ? "npx.cmd" : "npx";
 	const packageDir = findNearestPackageDir(process.cwd());
 	const selectedTargetCount = [
 		Boolean(options.local),
@@ -110,7 +109,7 @@ export async function runMigrate(
 		"drizzle.config.ts",
 	);
 	const drizzleGenerate = Bun.spawn(
-		[npxCommand, "drizzle-kit", "generate", "--config", drizzleConfigPath],
+		["drizzle-kit", "generate", "--config", drizzleConfigPath],
 		{
 			cwd: packageDir,
 			stdin: "inherit",
@@ -119,7 +118,6 @@ export async function runMigrate(
 		},
 	);
 
-	console.log(`npx drizzle-kit generate --config ${drizzleConfigPath}`);
 	const drizzleExitCode = await drizzleGenerate.exited;
 	if (drizzleExitCode !== 0) {
 		throw new Error(
@@ -128,14 +126,7 @@ export async function runMigrate(
 	}
 
 	const databaseName = loadedConfig.config.database[0].databaseName;
-	const wranglerArgs = [
-		npxCommand,
-		"wrangler",
-		"d1",
-		"migrations",
-		"apply",
-		databaseName,
-	];
+	const wranglerArgs = ["wrangler", "d1", "migrations", "apply", databaseName];
 
 	if (options.local) {
 		wranglerArgs.push("--local");
@@ -171,7 +162,6 @@ export async function runAddAdmin(
 	} = { name: "", email: "", password: "" },
 ): Promise<void> {
 	const loadedConfig = await loadConfig(configPath);
-	const npxCommand = process.platform === "win32" ? "npx.cmd" : "npx";
 
 	const selectedTargetCount = [
 		Boolean(options.local),
@@ -192,22 +182,20 @@ export async function runAddAdmin(
 	const safeName = options.name.replace(/'/g, "''");
 	const safeEmail = options.email.replace(/'/g, "''");
 
-	const sqlQuery = `
-		INSERT INTO users (id, name, email, email_verified, created_at, updated_at, role, banned)
-		VALUES ('${userId}', '${safeName}', '${safeEmail}', 1, ${now}, ${now}, 'admin', 0);
-		INSERT INTO accounts (id, account_id, provider_id, user_id, password, created_at, updated_at)
-		VALUES ('${accountId}', '${safeEmail}', 'credential', '${userId}', '${passwordHash}', ${now}, ${now});
-	`;
+	const sqlQuery = [
+		"INSERT INTO users (id, name, email, email_verified, created_at, updated_at, role, banned)",
+		`VALUES ('${userId}', '${safeName}', '${safeEmail}', 1, ${now}, ${now}, 'admin', 0);`,
+		"INSERT INTO accounts (id, account_id, provider_id, user_id, password, created_at, updated_at)",
+		`VALUES ('${accountId}', '${safeEmail}', 'credential', '${userId}', '${passwordHash}', ${now}, ${now});`,
+	].join(" ");
 
 	const databaseName = loadedConfig.config.database[0].databaseName;
 	const wranglerArgs = [
-		npxCommand,
 		"wrangler",
 		"d1",
 		"execute",
 		databaseName,
-		"--command",
-		sqlQuery,
+		`--command=${sqlQuery}`,
 	];
 
 	if (options.local) {

package/cli/templates/dashboard/builders/table-routes/table/get-route.ts

@@ -1,11 +1,6 @@
 import { DiscoveredTable } from "../../../types";
-import { buildColumnHeaders, buildRowCells } from "../fragments";
 import { buildPaginationHtml } from "../common/pagination";
 import { buildSearchBarHtml } from "../common/search-bar";
-import { buildActionsCell } from "./actions-cell";
-import { resolvePrimaryKey } from "../helpers";
-import { buildFieldInput, buildSearchConditions } from "../fragments";
-import { shouldIncludeEditField, shouldIncludeCreateField } from "../helpers";
 
 /**
  * Builds the GET route handler code string for /admin/table/:tableName
@@ -14,6 +9,8 @@ import { shouldIncludeEditField, shouldIncludeCreateField } from "../helpers";
 export function buildTableGetRoute(
 	table: DiscoveredTable,
 	defaultSort: string,
+	primaryKey: string,
+	hasPrimaryKey: boolean,
 	columns: string[],
 	searchConditions: string,
 	headers: string,
@@ -28,6 +25,133 @@ export function buildTableGetRoute(
 		`/admin/table/${table.exportName}`,
 		"Search term or filter...",
 	);
+	const headerSelectionCell = hasPrimaryKey
+		? `<th class="w-10"><input id="select-all-${table.exportName}" type="checkbox" class="checkbox checkbox-xs" /></th>`
+		: `<th class="w-10"><input type="checkbox" class="checkbox checkbox-xs opacity-30" disabled /></th>`;
+	const rowSelectionCell = hasPrimaryKey
+		? `<td><input type="checkbox" class="checkbox checkbox-xs row-select-checkbox" value="\${String((row as any).${primaryKey} ?? '')}" /></td>`
+		: `<td><input type="checkbox" class="checkbox checkbox-xs opacity-30" disabled /></td>`;
+	const bulkDeleteUi = hasPrimaryKey
+		? `
+\t\t\t\t\t\t<div id="bulk-delete-bar-${table.exportName}" class="fixed bottom-4 left-1/2 -translate-x-1/2 z-40 hidden">
+\t\t\t\t\t\t\t<div class="bg-base-100 border border-base-200 rounded-xl shadow-lg px-3 py-2 flex items-center gap-3">
+\t\t\t\t\t\t\t\t<div class="text-xs text-base-content/70">
+\t\t\t\t\t\t\t\t\t<span id="bulk-selected-count-${table.exportName}" class="font-medium text-base-content">0</span> selected
+\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t<label class="label cursor-pointer gap-2 py-0 px-1">
+\t\t\t\t\t\t\t\t\t<span class="label-text text-xs">All matching (\${total})</span>
+\t\t\t\t\t\t\t\t\t<input id="bulk-all-matching-${table.exportName}" type="checkbox" class="checkbox checkbox-xs" />
+\t\t\t\t\t\t\t\t</label>
+\t\t\t\t\t\t\t\t<button id="bulk-delete-trigger-${table.exportName}" type="button" class="btn btn-error btn-xs gap-1">
+\t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:delete-outline" width="14" height="14"></iconify-icon>
+\t\t\t\t\t\t\t\t\tDelete selected
+\t\t\t\t\t\t\t\t</button>
+\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t</div>
+
+\t\t\t\t\t\t<dialog id="bulk-delete-modal-${table.exportName}" class="modal">
+\t\t\t\t\t\t\t<div class="modal-box max-w-sm p-6 space-y-4">
+\t\t\t\t\t\t\t\t<h3 class="font-semibold text-base">Delete selected rows?</h3>
+\t\t\t\t\t\t\t\t<p class="text-sm text-base-content/70" id="bulk-delete-description-${table.exportName}">This action cannot be undone.</p>
+\t\t\t\t\t\t\t\t<form id="bulk-delete-form-${table.exportName}" hx-post="/admin/table/${table.exportName}/delete-bulk" hx-target="#main-content" hx-swap="outerHTML" class="space-y-3">
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="bulkMode" id="bulk-delete-mode-${table.exportName}" value="selected" />
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="selectedIds" id="bulk-delete-ids-${table.exportName}" value="" />
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="sort" value="\${sort}" />
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="order" value="\${order}" />
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="search" value="\${search}" />
+\t\t\t\t\t\t\t\t\t<input type="hidden" name="page" value="\${page}" />
+\t\t\t\t\t\t\t\t\t<div class="flex justify-end gap-2 pt-1">
+\t\t\t\t\t\t\t\t\t\t<button type="button" class="btn btn-ghost btn-sm" onclick="this.closest('dialog')?.close()">Cancel</button>
+\t\t\t\t\t\t\t\t\t\t<button type="submit" class="btn btn-error btn-sm">Delete</button>
+\t\t\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t\t</form>
+\t\t\t\t\t\t\t</div>
+\t\t\t\t\t\t\t<form method="dialog" class="modal-backdrop"><button>close</button></form>
+\t\t\t\t\t\t</dialog>
+
+\t\t\t\t\t\t<script>
+\t\t\t\t\t\t\t(() => {
+\t\t\t\t\t\t\t\tconst container = document.querySelector('#main-content');
+\t\t\t\t\t\t\t\tif (!container) return;
+
+\t\t\t\t\t\t\t\tconst rowCheckboxes = Array.from(container.querySelectorAll('.row-select-checkbox')).filter((node) => node instanceof HTMLInputElement);
+\t\t\t\t\t\t\t\tif (rowCheckboxes.length === 0) return;
+
+\t\t\t\t\t\t\t\tconst selectAll = container.querySelector('#select-all-${table.exportName}');
+\t\t\t\t\t\t\t\tconst bar = container.querySelector('#bulk-delete-bar-${table.exportName}');
+\t\t\t\t\t\t\t\tconst selectedCount = container.querySelector('#bulk-selected-count-${table.exportName}');
+\t\t\t\t\t\t\t\tconst allMatching = container.querySelector('#bulk-all-matching-${table.exportName}');
+\t\t\t\t\t\t\t\tconst trigger = container.querySelector('#bulk-delete-trigger-${table.exportName}');
+\t\t\t\t\t\t\t\tconst modal = container.querySelector('#bulk-delete-modal-${table.exportName}');
+\t\t\t\t\t\t\t\tconst modeInput = container.querySelector('#bulk-delete-mode-${table.exportName}');
+\t\t\t\t\t\t\t\tconst idsInput = container.querySelector('#bulk-delete-ids-${table.exportName}');
+\t\t\t\t\t\t\t\tconst description = container.querySelector('#bulk-delete-description-${table.exportName}');
+
+\t\t\t\t\t\t\t\tif (!(selectAll instanceof HTMLInputElement) ||
+\t\t\t\t\t\t\t\t\t!(bar instanceof HTMLElement) ||
+\t\t\t\t\t\t\t\t\t!(selectedCount instanceof HTMLElement) ||
+\t\t\t\t\t\t\t\t\t!(allMatching instanceof HTMLInputElement) ||
+\t\t\t\t\t\t\t\t\t!(trigger instanceof HTMLButtonElement) ||
+\t\t\t\t\t\t\t\t\t!(modal instanceof HTMLDialogElement) ||
+\t\t\t\t\t\t\t\t\t!(modeInput instanceof HTMLInputElement) ||
+\t\t\t\t\t\t\t\t\t!(idsInput instanceof HTMLInputElement) ||
+\t\t\t\t\t\t\t\t\t!(description instanceof HTMLElement)) {
+\t\t\t\t\t\t\t\t\treturn;
+\t\t\t\t\t\t\t\t}
+
+\t\t\t\t\t\t\t\tconst totalRows = Number(\${total});
+\t\t\t\t\t\t\t\tconst getSelectedIds = () => rowCheckboxes.filter((checkbox) => checkbox.checked).map((checkbox) => checkbox.value).filter((value) => value.length > 0);
+
+\t\t\t\t\t\t\t\tconst updateUi = () => {
+\t\t\t\t\t\t\t\t\tconst ids = getSelectedIds();
+\t\t\t\t\t\t\t\t\tconst selected = allMatching.checked ? totalRows : ids.length;
+\t\t\t\t\t\t\t\t\tselectedCount.textContent = String(selected);
+\t\t\t\t\t\t\t\t\tbar.classList.toggle('hidden', selected === 0);
+\t\t\t\t\t\t\t\t\tconst checkedCount = ids.length;
+\t\t\t\t\t\t\t\t\tselectAll.checked = checkedCount > 0 && checkedCount === rowCheckboxes.length;
+\t\t\t\t\t\t\t\t\tselectAll.indeterminate = checkedCount > 0 && checkedCount < rowCheckboxes.length;
+\t\t\t\t\t\t\t\t};
+
+\t\t\t\t\t\t\t\trowCheckboxes.forEach((checkbox) => {
+\t\t\t\t\t\t\t\t\tcheckbox.addEventListener('change', () => {
+\t\t\t\t\t\t\t\t\t\tif (allMatching.checked) allMatching.checked = false;
+\t\t\t\t\t\t\t\t\t\tupdateUi();
+\t\t\t\t\t\t\t\t\t});
+\t\t\t\t\t\t\t\t});
+
+\t\t\t\t\t\t\t\tselectAll.addEventListener('change', () => {
+\t\t\t\t\t\t\t\t\trowCheckboxes.forEach((checkbox) => {
+\t\t\t\t\t\t\t\t\t\tcheckbox.checked = selectAll.checked;
+\t\t\t\t\t\t\t\t\t});
+\t\t\t\t\t\t\t\t\tif (allMatching.checked && !selectAll.checked) allMatching.checked = false;
+\t\t\t\t\t\t\t\t\tupdateUi();
+\t\t\t\t\t\t\t\t});
+
+\t\t\t\t\t\t\t\tallMatching.addEventListener('change', () => {
+\t\t\t\t\t\t\t\t\tif (allMatching.checked) {
+\t\t\t\t\t\t\t\t\t\trowCheckboxes.forEach((checkbox) => {
+\t\t\t\t\t\t\t\t\t\t\tcheckbox.checked = true;
+\t\t\t\t\t\t\t\t\t\t});
+\t\t\t\t\t\t\t\t\t}
+\t\t\t\t\t\t\t\t\tupdateUi();
+\t\t\t\t\t\t\t\t});
+
+\t\t\t\t\t\t\t\ttrigger.addEventListener('click', () => {
+\t\t\t\t\t\t\t\t\tconst ids = getSelectedIds();
+\t\t\t\t\t\t\t\t\tif (!allMatching.checked && ids.length === 0) return;
+\t\t\t\t\t\t\t\t\tmodeInput.value = allMatching.checked ? 'all-matching' : 'selected';
+\t\t\t\t\t\t\t\t\tidsInput.value = ids.join(',');
+\t\t\t\t\t\t\t\t\tdescription.textContent = allMatching.checked
+\t\t\t\t\t\t\t\t\t\t? 'This will permanently delete all rows matching the current search context.'
+\t\t\t\t\t\t\t\t\t\t: 'This action cannot be undone.';
+\t\t\t\t\t\t\t\t\tmodal.showModal();
+\t\t\t\t\t\t\t\t});
+
+\t\t\t\t\t\t\t\tupdateUi();
+\t\t\t\t\t\t\t})();
+\t\t\t\t\t\t</script>
+`
+		: "";
 
 	return `
 \tadminApp.get('/table/${table.exportName}', async (c) => {
@@ -69,7 +193,7 @@ export function buildTableGetRoute(
 \t\t\t\t\t<table class="table table-sm md:table-md w-full">
 \t\t\t\t\t\t<thead>
 \t\t\t\t\t\t\t<tr class="border-b border-base-200">
-\t\t\t\t\t\t\t\t<th class="w-10"><input type="checkbox" class="checkbox checkbox-xs opacity-30" disabled /></th>
+\t\t\t\t\t\t\t\t${headerSelectionCell}
 \t\t\t\t\t\t\t\t${headers}
 \t\t\t\t\t\t\t\t<th class="w-[100px] text-right">
 \t\t\t\t\t\t\t\t\t<iconify-icon icon="mdi:dots-horizontal" width="16" height="16" class="opacity-30"></iconify-icon>
@@ -79,7 +203,7 @@ export function buildTableGetRoute(
 \t\t\t\t\t\t<tbody>
 \t\t\t\t\t\t\t\${data.map((row, rowIndex) => html\`
 \t\t\t\t\t\t\t<tr class="hover:bg-base-200/30 transition-colors">
-\t\t\t\t\t\t\t\t<td><input type="checkbox" class="checkbox checkbox-xs" /></td>
+\t\t\t\t\t\t\t\t${rowSelectionCell}
 \t\t\t\t\t\t\t\t${rowCells}
 \t\t\t\t\t\t\t\t${actionsCell}
 \t\t\t\t\t\t\t</tr>
@@ -130,6 +254,7 @@ export function buildTableGetRoute(
 \t\t\t\t\t\t\t${searchBarHtml}
 \t\t\t\t\t\t</div>
 \t\t\t\t\t\t\${tableHtml}
+\t\t\t\t\t\t${bulkDeleteUi}
 \t\t\t\t\t</div>
 \t\t\t\t\t<div class="drawer-side z-50">
 \t\t\t\t\t\t<label for="create-drawer-${table.exportName}" aria-label="close sidebar" class="drawer-overlay"></label>

package/cli/templates/dashboard/builders/table-routes/table/index.ts

@@ -56,6 +56,8 @@ export function buildTableRoute(table: DiscoveredTable): string {
 		buildTableGetRoute(
 			table,
 			defaultSort,
+			primaryKey,
+			hasPrimaryKey,
 			columns,
 			searchConditions,
 			headers,
@@ -70,6 +72,7 @@ export function buildTableRoute(table: DiscoveredTable): string {
 			primaryKey,
 			primaryKeyType,
 			hasPrimaryKey,
+			searchConditions,
 			createAssignments,
 			editAssignments,
 		)

package/cli/templates/dashboard/builders/table-routes/table/post-routes.ts

@@ -8,6 +8,7 @@ export function buildTablePostRoutes(
 	primaryKey: string,
 	primaryKeyType: string | undefined,
 	hasPrimaryKey: boolean,
+	searchConditions: string,
 	createAssignments: string,
 	editAssignments: string,
 ): string {
@@ -20,6 +21,11 @@ export function buildTablePostRoutes(
 \t\t`
 			: "";
 
+	const parseBulkIds =
+		primaryKeyType === "number"
+			? "idValues.map((value) => Number(value)).filter((value) => !Number.isNaN(value))"
+			: "idValues";
+
 	const editRoute = hasPrimaryKey
 		? `
 \tadminApp.post('/table/${exportName}/edit', async (c) => {
@@ -74,6 +80,52 @@ export function buildTablePostRoutes(
 \t\t\t.where(eq(tableSchema.${primaryKey}, idValue as any))
 \t\t\t.execute();
 
+\t\tconst query = new URLSearchParams({
+\t\t\tpage: getValue(body.page) || '1',
+\t\t\tsort: getValue(body.sort) || '${defaultSort}',
+\t\t\torder: getValue(body.order) || 'desc',
+\t\t\tsearch: getValue(body.search) || '',
+\t\t});
+\t\treturn c.redirect('/admin/table/${exportName}?' + query.toString());
+\t});
+
+\tadminApp.post('/table/${exportName}/delete-bulk', async (c) => {
+\t\tconst db = drizzle(c.env[options.databaseBinding], { schema });
+\t\tconst tableSchema = (schema as any).${exportName};
+\t\tif (!tableSchema) return c.text('Table missing', 404);
+
+\t\tconst body = await c.req.parseBody();
+\t\tconst getValue = (value: unknown) => (typeof value === 'string' ? value : '');
+\t\tconst mode = getValue(body.bulkMode);
+\t\tconst selectedIdsRaw = getValue(body.selectedIds);
+\t\tconst search = getValue(body.search);
+
+\t\tif (mode === 'all-matching') {
+\t\t\tlet deleteQuery = db.delete(tableSchema);
+\t\t\tif (search) {
+\t\t\t\tconst searchConditions = [];
+\t\t\t\t${searchConditions}
+\t\t\t\tif (searchConditions.length > 0) {
+\t\t\t\t\tdeleteQuery = deleteQuery.where(or(...searchConditions)) as any;
+\t\t\t\t}
+\t\t\t}
+\t\t\tawait deleteQuery.execute();
+\t\t} else {
+\t\t\tconst idValues = selectedIdsRaw
+\t\t\t\t.split(',')
+\t\t\t\t.map((value) => value.trim())
+\t\t\t\t.filter((value) => value.length > 0);
+\t\t\tif (idValues.length === 0) return c.text('No rows selected', 400);
+
+\t\t\tconst parsedIds: unknown[] = ${parseBulkIds};
+\t\t\tif (parsedIds.length === 0) return c.text('No valid selected rows', 400);
+
+\t\t\tawait db
+\t\t\t\t.delete(tableSchema)
+\t\t\t\t.where(inArray(tableSchema.${primaryKey}, parsedIds as any))
+\t\t\t\t.execute();
+\t\t}
+
 \t\tconst query = new URLSearchParams({
 \t\t\tpage: getValue(body.page) || '1',
 \t\t\tsort: getValue(body.sort) || '${defaultSort}',

package/cli/templates/dashboard/index.ts

@@ -31,7 +31,7 @@ export function generateDashboardSource(
 	return `import { Hono } from "hono";
 import { html, raw } from "hono/html";
 import { drizzle } from "drizzle-orm/d1";
-import { eq, desc, asc, sql, like, or } from "drizzle-orm";
+import { eq, desc, asc, sql, like, or, inArray } from "drizzle-orm";
 import { createAuth } from "./auth.config";
 import * as schema from "${schemaImportPath}";
 import { users } from "./auth.schema";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "appflare",
-	"version": "0.2.7",
+	"version": "0.2.9",
 	"bin": {
 		"appflare": "./cli/index.ts"
 	},