@craftainer/crud-views 0.1.0 → 0.2.0

package/README.md

@@ -52,6 +52,28 @@ const client = createClient({ baseUrl: "https://api.example.com" });
 </CrudProvider>;
 ```
 
+### Inline edit and ETags
+
+The list endpoint returns no ETags, so the table's inline edit takes
+`ifMatch(row)` from the app. It may return a string, `undefined` (the PATCH
+goes without `If-Match`) or a promise of either, the same shape as
+`ResourceForm`'s `etag`. `fetchEtagById` stands for the app's own lookup, for
+example fetching the row through the SDK and reading its cached ETag:
+
+```tsx
+<ResourceList
+  resource="heroes"
+  editable
+  ifMatch={async (row) =>
+    (await fetchEtagById(row["id"] as number)) ?? undefined
+  }
+/>
+```
+
+The edit waits for the promise and stays in a saving state (the cell stays
+in edit mode and the table is `aria-busy`); a rejection sends nothing and shows "Could not save: ..." like
+any other save error.
+
 ## Development
 
 Open the repository in the devcontainer, then run

package/dist/index.d.mts

@@ -958,9 +958,12 @@ interface DataTableListProps {
    * The ETag of a row, sent as `If-Match` on an inline edit (a stale one fails
    * with 412 and the view reloads the row). The list endpoint returns no ETags,
    * so the app supplies them (for example from its SDK cache); without this
-   * prop the edit is unconditional.
+   * prop the edit is unconditional. May return a promise (same shape as
+   * `ResourceFormProps.etag`): the edit waits for it, stays in a saving state
+   * meanwhile, and is not sent if it rejects (the error is shown like any save
+   * error). `undefined` sends the PATCH without `If-Match`.
    */
-  readonly ifMatch?: ((row: Row$1) => string | undefined) | undefined;
+  readonly ifMatch?: ((row: Row$1) => string | undefined | Promise<string | undefined>) | undefined;
   readonly pageSizeOptions?: readonly number[] | undefined;
   readonly onRowClick?: ((row: Row$1) => void) | undefined;
   readonly renderers?: RendererOverrides | undefined;
@@ -1003,7 +1006,8 @@ interface ResourceListProps {
   readonly titleField?: string | undefined;
   /** Table only: edit cells in place. */
   readonly editable?: boolean | undefined;
-  readonly ifMatch?: ((row: Row) => string | undefined) | undefined;
+  /** Table only: a row's ETag for inline edits; may be async. See `DataTableListProps.ifMatch`. */
+  readonly ifMatch?: ((row: Row) => string | undefined | Promise<string | undefined>) | undefined;
   readonly sortableOnly?: boolean | undefined;
   /** Show the sort dropdown. Default: for the card variants, which have no header to click. */
   readonly sortDropdown?: boolean | undefined;

package/dist/index.mjs

@@ -4016,6 +4016,7 @@ function DataTableList({ ready, state, columns, sortableOnly = false, configurab
 	const update = ready.hooks.useUpdate();
 	const [hidden, setHidden] = useState(/* @__PURE__ */ new Set());
 	const [notice, setNotice] = useState(null);
+	const [saving, setSaving] = useState(0);
 	const shown = useMemo(() => resolveColumns(ready, columns).filter((c) => !sortableOnly || c.field.sortable), [
 		ready,
 		columns,
@@ -4072,14 +4073,19 @@ function DataTableList({ ready, state, columns, sortableOnly = false, configurab
 			if (canEdit(field, editable, idField) && value !== void 0 && !same(value, previous[field.name])) patch[field.name] = value;
 		}
 		if (Object.keys(patch).length === 0) return previous;
-		const tag = ifMatch?.(previous);
-		const saved = await update.mutateAsync({
-			id: previous[idField],
-			patch,
-			...tag === void 0 ? {} : { ifMatch: tag }
-		});
-		setNotice(null);
-		return saved;
+		setSaving((n) => n + 1);
+		try {
+			const tag = await ifMatch?.(previous);
+			const saved = await update.mutateAsync({
+				id: previous[idField],
+				patch,
+				...tag === void 0 ? {} : { ifMatch: tag }
+			});
+			setNotice(null);
+			return saved;
+		} finally {
+			setSaving((n) => n - 1);
+		}
 	}
 	function saveFailed(error) {
 		if (error instanceof PreconditionFailed) {
@@ -4092,51 +4098,54 @@ function DataTableList({ ready, state, columns, sortableOnly = false, configurab
 		error: list.error,
 		onRetry: () => void list.refetch()
 	});
-	return /* @__PURE__ */ jsxs(Box, { children: [
-		configurableColumns && /* @__PURE__ */ jsx(ColumnsMenu, {
-			columns: shown,
-			hidden,
-			onChange: setHidden
-		}),
-		notice !== null && /* @__PURE__ */ jsx(Alert, {
-			severity: "warning",
-			onClose: () => setNotice(null),
-			sx: { mb: 1 },
-			children: notice
-		}),
-		/* @__PURE__ */ jsx(DataGrid, {
-			"aria-label": resource.title,
-			autoHeight: true,
-			rows,
-			columns: gridColumns,
-			getRowId: (row) => row[idField],
-			loading: list.isFetching,
-			columnVisibilityModel: visibility,
-			paginationMode: "server",
-			sortingMode: "server",
-			filterMode: "server",
-			rowCount,
-			localeText: { paginationDisplayedRows: ({ from, to }) => hasNextPage ? `${from}–${to}` : `${from}–${to} of ${rowCount}` },
-			paginationModel: {
-				page: page - 1,
-				pageSize
-			},
-			pageSizeOptions: sizes,
-			onPaginationModelChange: (model) => model.pageSize === pageSize ? state.setPage(model.page + 1) : state.setPageSize(model.pageSize),
-			sortModel,
-			onSortModelChange: (model) => state.setSort(model.map((m) => ({
-				field: m.field,
-				desc: m.sort === "desc"
-			}))),
-			disableColumnFilter: true,
-			disableColumnMenu: true,
-			disableRowSelectionOnClick: true,
-			processRowUpdate: save,
-			onProcessRowUpdateError: saveFailed,
-			onRowClick: (p) => onRowClick?.(p.row),
-			...gridProps
-		})
-	] });
+	return /* @__PURE__ */ jsxs(Box, {
+		"aria-busy": saving > 0,
+		children: [
+			configurableColumns && /* @__PURE__ */ jsx(ColumnsMenu, {
+				columns: shown,
+				hidden,
+				onChange: setHidden
+			}),
+			notice !== null && /* @__PURE__ */ jsx(Alert, {
+				severity: "warning",
+				onClose: () => setNotice(null),
+				sx: { mb: 1 },
+				children: notice
+			}),
+			/* @__PURE__ */ jsx(DataGrid, {
+				"aria-label": resource.title,
+				autoHeight: true,
+				rows,
+				columns: gridColumns,
+				getRowId: (row) => row[idField],
+				loading: list.isFetching,
+				columnVisibilityModel: visibility,
+				paginationMode: "server",
+				sortingMode: "server",
+				filterMode: "server",
+				rowCount,
+				localeText: { paginationDisplayedRows: ({ from, to }) => hasNextPage ? `${from}–${to}` : `${from}–${to} of ${rowCount}` },
+				paginationModel: {
+					page: page - 1,
+					pageSize
+				},
+				pageSizeOptions: sizes,
+				onPaginationModelChange: (model) => model.pageSize === pageSize ? state.setPage(model.page + 1) : state.setPageSize(model.pageSize),
+				sortModel,
+				onSortModelChange: (model) => state.setSort(model.map((m) => ({
+					field: m.field,
+					desc: m.sort === "desc"
+				}))),
+				disableColumnFilter: true,
+				disableColumnMenu: true,
+				disableRowSelectionOnClick: true,
+				processRowUpdate: save,
+				onProcessRowUpdateError: saveFailed,
+				onRowClick: (p) => onRowClick?.(p.row),
+				...gridProps
+			})
+		]
+	});
 }
 //#endregion
 //#region src/list/LoadMoreList.tsx