@protobase/ui 0.19.6 → 0.19.8

package/dist/app/export/use-export-flow.js

@@ -0,0 +1,139 @@
+import { formatInt } from "../../format/number.js";
+import { keys } from "../../data/query-keys.js";
+import { useClient } from "../../data/api-provider.js";
+import { useToast } from "../../toasts/toast-provider.js";
+import { listLabels } from "../../live/relation-labels.js";
+import { runExport } from "./run-export.js";
+import { defaultExportColumns, exportColumns, exportHeaders, exportLimit, exportableFields, exportsSelection, selectionFilters } from "./export-options.js";
+import { createWorkerPort } from "./builder-port.js";
+import { ExportDialog, ExportProgressDialog, countedRows } from "./export-dialog.js";
+import { canSaveAsBuilt, createDownloadSink, exportFileName, pickFileSink } from "./sink.js";
+import { useRef, useState } from "react";
+import { isApiError } from "@protobase/client";
+import { jsx } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+//#region src/app/export/use-export-flow.tsx
+const defaultSink = (name, format) => canSaveAsBuilt() ? pickFileSink(name, format) : Promise.resolve(createDownloadSink(name, format));
+const selectedKey = (model, row) => {
+	const value = row[model.primaryKey[0]];
+	return typeof value === "object" && value !== null && "id" in value ? value.id : value;
+};
+/**
+* The list's Export: `open` shows its settings, with the selected rows when there are some, and `dialogs` draws them and
+* the progress while the file is built. Rows come through the list API as the user may read them; the file is built in
+* a worker and written as it goes.
+*/
+const useExportFlow = ({ model, view, resources, views, plural, filter, orderBy, createPort = createWorkerPort, createSink = defaultSink }) => {
+	const client = useClient();
+	const toast = useToast();
+	const [stage, setStage] = useState({ kind: "closed" });
+	const abort = useRef(void 0);
+	const count = useQuery({
+		queryKey: keys.exportCount(model.name, filter),
+		enabled: stage.kind === "settings",
+		queryFn: async () => {
+			const page = await client.list(model.name, {
+				filter: filter || void 0,
+				pageSize: 1,
+				count: "exact",
+				fields: model.primaryKey
+			});
+			return page.totalSize === void 0 ? {
+				kind: "estimate",
+				rows: page.totalSizeEstimate
+			} : {
+				kind: "exact",
+				rows: page.totalSize
+			};
+		}
+	}).data ?? { kind: "counting" };
+	const open = (rows = []) => setStage({
+		kind: "settings",
+		selected: exportsSelection(model) ? rows.map((row) => selectedKey(model, row)) : []
+	});
+	const start = async (settings, selected) => {
+		const name = exportFileName(plural, settings.format);
+		const sink = await createSink(name, settings.format);
+		if (!sink) return;
+		const limit = exportLimit(view, settings.format);
+		const rows = settings.scope === "selected" ? selected.length : countedRows(count);
+		const total = rows === void 0 ? void 0 : Math.min(rows, limit);
+		const controller = new AbortController();
+		abort.current = controller;
+		setStage({
+			kind: "running",
+			done: 0,
+			total
+		});
+		try {
+			const result = await runExport({
+				client,
+				resource: model.name,
+				filters: settings.scope === "selected" ? selectionFilters(model, selected) : [filter],
+				orderBy,
+				plan: {
+					format: settings.format,
+					mode: settings.mode,
+					name: plural,
+					columns: exportColumns(model, view, settings.columns)
+				},
+				labels: settings.mode === "shown" ? listLabels(resources, views, model, settings.columns) : {},
+				limit,
+				port: createPort(),
+				sink,
+				signal: controller.signal,
+				onProgress: (done) => controller.signal.aborted || setStage({
+					kind: "running",
+					done,
+					total
+				})
+			});
+			toast.show({
+				state: "success",
+				title: `Exported ${formatInt(result.rows)} ${plural.toLowerCase()}`,
+				description: result.truncated ? `${name}: the first ${formatInt(result.rows)} rows, as many as a file holds.` : name
+			});
+		} catch (error) {
+			if (error instanceof DOMException && error.name === "AbortError") return;
+			if (!isApiError(error)) throw error;
+			toast.show({
+				state: "error",
+				title: `Could not export ${plural.toLowerCase()}`,
+				description: error.message
+			});
+		} finally {
+			abort.current = void 0;
+			setStage((current) => current.kind === "running" ? { kind: "closed" } : current);
+		}
+	};
+	const cancel = () => {
+		abort.current?.abort();
+		setStage({ kind: "closed" });
+	};
+	const fields = exportableFields(model);
+	const labels = exportHeaders(model, view, fields);
+	return {
+		open,
+		dialogs: stage.kind === "settings" ? /* @__PURE__ */ jsx(ExportDialog, {
+			plural,
+			view,
+			fields: fields.map((name) => ({
+				name,
+				label: labels[name]
+			})),
+			initialColumns: defaultExportColumns(model, view),
+			count,
+			selected: stage.selected.length > 0 ? stage.selected.length : void 0,
+			open: true,
+			onExport: (settings) => void start(settings, stage.selected),
+			onClose: () => setStage({ kind: "closed" })
+		}) : stage.kind === "running" ? /* @__PURE__ */ jsx(ExportProgressDialog, {
+			plural,
+			done: stage.done,
+			total: stage.total,
+			onCancel: cancel
+		}) : null
+	};
+};
+//#endregion
+export { useExportFlow };

package/dist/app/export/xlsx.js

@@ -0,0 +1,91 @@
+import { Zip, ZipDeflate } from "fflate";
+//#region src/app/export/xlsx.ts
+/** The most data rows a sheet holds: Excel's 1,048,576 rows, less the header. */
+const xlsxMaxRows = 1048575;
+const maxCellText = 32767;
+const invalidXml = /[\u0000-\u0008\u000b\u000c\u000e-\u001f￾￿]/g;
+const escapeXml = (text) => text.replace(invalidXml, "").replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
+/** A column's letters: 0 is A, 25 is Z, 26 is AA. */
+const columnLetters = (index) => {
+	const letter = String.fromCharCode(65 + index % 26);
+	return index < 26 ? letter : columnLetters(Math.floor(index / 26) - 1) + letter;
+};
+const textCell = (ref, text, style = "") => `<c r="${ref}"${style} t="inlineStr"><is><t xml:space="preserve">${escapeXml(text.slice(0, maxCellText))}</t></is></c>`;
+const xml = "<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"yes\"?>\n";
+const mainNs = "http://schemas.openxmlformats.org/spreadsheetml/2006/main";
+const relNs = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+const packageRelNs = "http://schemas.openxmlformats.org/package/2006/relationships";
+const contentTypes = `${xml}<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/><Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/><Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/></Types>`;
+const rootRels = `${xml}<Relationships xmlns="${packageRelNs}"><Relationship Id="rId1" Type="${relNs}/officeDocument" Target="xl/workbook.xml"/></Relationships>`;
+const workbookRels = `${xml}<Relationships xmlns="${packageRelNs}"><Relationship Id="rId1" Type="${relNs}/worksheet" Target="worksheets/sheet1.xml"/><Relationship Id="rId2" Type="${relNs}/styles" Target="styles.xml"/></Relationships>`;
+const sheetName = (name) => name.replace(/[:\\/?*[\]]/g, " ").slice(0, 31).trim() || "Sheet1";
+const workbook = (name) => `${xml}<workbook xmlns="${mainNs}" xmlns:r="${relNs}"><sheets><sheet name="${escapeXml(sheetName(name))}" sheetId="1" r:id="rId1"/></sheets></workbook>`;
+const styles = (formats) => {
+	const numFmts = formats.map((code, index) => `<numFmt numFmtId="${164 + index}" formatCode="${escapeXml(code)}"/>`).join("");
+	const xfs = formats.map((_, index) => `<xf numFmtId="${164 + index}" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/>`).join("");
+	return `${xml}<styleSheet xmlns="${mainNs}">${formats.length > 0 ? `<numFmts count="${formats.length}">${numFmts}</numFmts>` : ""}<fonts count="2"><font><sz val="11"/><name val="Calibri"/></font><font><b/><sz val="11"/><name val="Calibri"/></font></fonts><fills count="2"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="${2 + formats.length}"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/><xf numFmtId="0" fontId="1" fillId="0" borderId="0" xfId="0" applyFont="1"/>${xfs}</cellXfs><cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles></styleSheet>`;
+};
+const encoder = new TextEncoder();
+/**
+* Writes a one-sheet .xlsx file as it goes, handing each compressed piece to `onChunk`: a bold, frozen header row, then
+* `rows` as often as they come, and `finish` once. Text is written inline in its cell rather than in a table of shared
+* strings, so the writer holds no more than the rows it is given.
+*/
+const createXlsxWriter = (sheet, onChunk) => {
+	const zip = new Zip((error, chunk, final) => {
+		if (error) throw error;
+		onChunk(chunk, final);
+	});
+	const add = (path, text) => {
+		const file = new ZipDeflate(path, { level: 6 });
+		zip.add(file);
+		file.push(encoder.encode(text), true);
+	};
+	add("[Content_Types].xml", contentTypes);
+	add("_rels/.rels", rootRels);
+	add("xl/workbook.xml", workbook(sheet.name));
+	add("xl/_rels/workbook.xml.rels", workbookRels);
+	const worksheet = new ZipDeflate("xl/worksheets/sheet1.xml", { level: 6 });
+	zip.add(worksheet);
+	const cols = sheet.widths.map((width, index) => `<col min="${index + 1}" max="${index + 1}" width="${width}" customWidth="1"/>`).join("");
+	const frozen = "<sheetViews><sheetView workbookViewId=\"0\"><pane ySplit=\"1\" topLeftCell=\"A2\" activePane=\"bottomLeft\" state=\"frozen\"/></sheetView></sheetViews>";
+	const header = `<row r="1">${sheet.headers.map((text, index) => textCell(`${columnLetters(index)}1`, text, " s=\"1\"")).join("")}</row>`;
+	worksheet.push(encoder.encode(`${xml}<worksheet xmlns="${mainNs}">${frozen}${cols ? `<cols>${cols}</cols>` : ""}<sheetData>${header}`));
+	const letters = sheet.headers.map((_, index) => columnLetters(index));
+	const formats = [];
+	const styleOf = (format) => {
+		const index = formats.indexOf(format);
+		if (index >= 0) return index + 2;
+		formats.push(format);
+		return formats.length + 1;
+	};
+	const cellXml = (cell, ref) => {
+		switch (cell.kind) {
+			case "empty": return "";
+			case "text": return textCell(ref, cell.value);
+			case "boolean": return `<c r="${ref}" t="b"><v>${cell.value ? 1 : 0}</v></c>`;
+			case "number": return `<c r="${ref}"${cell.format ? ` s="${styleOf(cell.format)}"` : ""}><v>${cell.value}</v></c>`;
+		}
+	};
+	let rowNumber = 1;
+	const rows = (cells) => {
+		let text = "";
+		for (const row of cells) {
+			rowNumber += 1;
+			if (rowNumber > 1048576) throw new Error(`A sheet holds at most ${xlsxMaxRows} rows`);
+			text += `<row r="${rowNumber}">${row.map((cell, index) => cellXml(cell, `${letters[index]}${rowNumber}`)).join("")}</row>`;
+		}
+		worksheet.push(encoder.encode(text));
+	};
+	const finish = () => {
+		worksheet.push(encoder.encode("</sheetData></worksheet>"), true);
+		add("xl/styles.xml", styles(formats));
+		zip.end();
+	};
+	return {
+		rows,
+		finish
+	};
+};
+//#endregion
+export { columnLetters, createXlsxWriter, xlsxMaxRows };

package/dist/app/list-page.js

@@ -29,6 +29,8 @@ import { Sheet } from "../primitives/sheet.js";
 import { useDeleteFlow } from "./delete/use-delete-flow.js";
 import { useRestore } from "./delete/use-restore.js";
 import { ImportButton } from "./import/import-button.js";
+import { exportOffered, exportsSelection } from "./export/export-options.js";
+import { useExportFlow } from "./export/use-export-flow.js";
 import { SignInPrompt } from "../auth/sign-in-prompt.js";
 import { ListCards } from "./displays/list-cards.js";
 import { MapDisplay } from "./displays/map-display.js";
@@ -44,7 +46,7 @@ import { facetNames, filterChips } from "./searches/saved-search.js";
 import { SaveSearchButton } from "./searches/save-search-button.js";
 import { SavedSearches } from "./searches/saved-searches.js";
 import { useMemo, useState } from "react";
-import { Plus, SlidersHorizontal } from "lucide-react";
+import { Download, Plus, SlidersHorizontal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createWhere } from "@protobase/schema";
 import { tableDisplay } from "@protobase/schema/internal";
@@ -272,6 +274,23 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		chips: filterChips(model, view, filterText, facetNames(config))
 	});
 	const importButton = !scope && /* @__PURE__ */ jsx(ImportButton, { model });
+	const exportFlow = useExportFlow({
+		model,
+		view,
+		resources: meta.resources,
+		views: meta.views,
+		plural,
+		filter: loadFilter,
+		orderBy
+	});
+	const exportButton = exportOffered(view) && /* @__PURE__ */ jsxs(Button, {
+		onClick: () => exportFlow.open(),
+		...!desktop && {
+			"aria-label": "Export",
+			title: "Export"
+		},
+		children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), desktop && "Export"]
+	});
 	const displaySwitch = (menu) => /* @__PURE__ */ jsx(DisplaySwitch, {
 		view,
 		value: display?.name ?? tableDisplay,
@@ -300,11 +319,14 @@ const LoadedList = ({ model, address, scope, heading }) => {
 			available: (row) => rowAllows(row, "delete"),
 			onSelect: (row) => void remove.start(target(row))
 		}] : []],
-		bulkActions: can(permissions, "delete") ? [{
+		bulkActions: [...exportOffered(view) && exportsSelection(model) ? [{
+			label: (count) => `Export ${count}`,
+			onRun: (rows) => exportFlow.open(rows)
+		}] : [], ...can(permissions, "delete") ? [{
 			label: (count) => `Delete ${count}`,
 			destructive: true,
 			onRun: (rows) => remove.startBulk(rows.map(target))
-		}] : [],
+		}] : []],
 		rowNumbers: false,
 		pinKey: auth.kind === "signed-in" ? pinnedStorageKey(auth.user.id, resource) : void 0,
 		scroll: "parent",
@@ -344,6 +366,7 @@ const LoadedList = ({ model, address, scope, heading }) => {
 		className: "flex min-h-0 flex-1 flex-col gap-3 px-5 py-4",
 		children: [
 			remove.dialogs,
+			exportFlow.dialogs,
 			/* @__PURE__ */ jsx(PageHeader, {
 				title: heading?.title ?? plural,
 				subtitle: heading ? heading.subtitle : view?.help,
@@ -352,10 +375,12 @@ const LoadedList = ({ model, address, scope, heading }) => {
 					displaySwitch(false),
 					saveSearch,
 					importButton,
+					exportButton,
 					createButton
 				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 					saveSearch,
 					importButton,
+					exportButton,
 					createButton
 				] })
 			}),

package/dist/data/query-keys.js

@@ -90,6 +90,13 @@ const keys = {
 		resource,
 		filter
 	],
+	/** How many rows an export of the list would hold, exactly up to 10,000; starts with `list`, so it refreshes with the list. */
+	exportCount: (resource, filter) => [
+		"list",
+		resource,
+		filter,
+		"export-count"
+	],
 	firstRecord: (resource, filter, orderBy) => [
 		"first-record",
 		resource,

package/dist/live/model-helpers.js

@@ -20,10 +20,14 @@ const recordTitle = (model, view, record, fallback) => {
 	if (value === null || value === void 0) return fallback;
 	return model.fields[name]?.type === "enum" ? enumLabel(String(value), view?.fields[name]?.valueLabels) : String(value);
 };
-const recordId = (model, record) => model.primaryKey.map((name) => String(record[name])).join(",");
-/** The key as the URL carries it, for `get` and `update`. */
+const keyPart = (model, record, name) => {
+	const value = record[name];
+	return model.fields[name]?.type === "relation" && typeof value === "object" && value !== null && "id" in value ? value.id : value;
+};
+const recordId = (model, record) => model.primaryKey.map((name) => String(keyPart(model, record, name))).join(",");
+/** The key as the URL carries it, for `get` and `update`, from a stored record or a list row. */
 const recordKey = (model, record) => {
-	const parts = model.primaryKey.map((name) => record[name]);
+	const parts = model.primaryKey.map((name) => keyPart(model, record, name));
 	return parts.length === 1 ? parts[0] : parts;
 };
 //#endregion

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "0.19.6";
+var version = "0.19.8";
 var protobase = { "pluginApi": 1 };
 //#endregion
 export { protobase, version };