@itrocks/list 0.0.15 → 0.0.17

package/build.js

@@ -1,11 +1,14 @@
 import { build } from '../build/build.js';
 import { xTargetCall } from '../xtarget/xtarget.js';
+import { TableFeed } from '../table/feed.js';
 import { TableFreeze } from '../table/freeze.js';
 import { TableFreezeInheritBackground } from '../table/freeze/inherit-background.js';
 import { TableFreezeInheritBorder } from '../table/freeze/inherit-border.js';
 import { tableByElement } from '../table/table.js';
 build('article[data-action="list"] > form > table.objects', element => {
-    tableByElement(element, { plugins: [TableFreeze, TableFreezeInheritBackground, TableFreezeInheritBorder] });
+    tableByElement(element, {
+        plugins: [TableFeed, TableFreeze, TableFreezeInheritBackground, TableFreezeInheritBorder]
+    });
     element.querySelector(':scope > tbody')?.addEventListener('click', async (event) => {
         const td = event.target;
         if (!(td instanceof HTMLTableCellElement))

package/cjs/feed.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head><title>list feed</title></head>
+<body>
+	<table class="objects">
+	<!--BEGIN-->
+
+		<!--objects-->
+		<tr>
+			<th class="select"><input name="id" type="checkbox" value="{id}"></th>
+			<!--%listProperties-->
+			<td>{outputOptionalContainer}</td>
+			<!--end-->
+		</tr>
+		<!--end-->
+
+	<!--END-->
+	</table>
+</body>
+</html>

package/cjs/list.d.ts

@@ -1,6 +1,7 @@
 import { Action } from '@itrocks/action';
 import { Request } from '@itrocks/action-request';
 export declare class List<T extends object = object> extends Action<T> {
+    lineHeight: number;
     html(request: Request<T>): Promise<import("@itrocks/core-responses").HtmlResponse>;
     json(request: Request<T>): Promise<import("@itrocks/core-responses").JsonResponse>;
 }

package/cjs/list.html

@@ -17,7 +17,7 @@
 	<article data-action="list" data-class="{type.name}" data-route="{type.@route}">
 		<header>
 			<h2>{type.@output.ucFirst} list</h2>
-			<section class="summary">{objects.length} elements</section>
+			<section class="summary">{count} elements</section>
 			<ul class="general actions">
 				<!--generalActions-->
 				<li class="{action}">{{template}}</li>
@@ -26,7 +26,7 @@
 		</header>
 		<form action="app://(type.@route)" autocomplete="off" method="post" target="main">
 			<table class="objects">
-				<thead>
+			<thead>
 					<tr class="properties">
 						<th class="select" data-fix><input name="select" type="checkbox" value="all"></th>
 						<!--type.%listProperties-->
@@ -35,14 +35,7 @@
 					</tr>
 				</thead>
 				<tbody>
-					<!--objects-->
-					<tr>
-						<th class="select"><input name="id" type="checkbox" value="{id}"></th>
-						<!--%listProperties-->
-						<td>{outputOptionalContainer}</td>
-						<!--end-->
-					</tr>
-					<!--end-->
+					{./feed.html}
 				</tbody>
 			</table>
 			<footer>

package/cjs/list.js

@@ -42,6 +42,7 @@ const route_1 = require("@itrocks/route");
 const route_2 = require("@itrocks/route");
 const storage_1 = require("@itrocks/storage");
 const storage_2 = require("@itrocks/storage");
+const storage_3 = require("@itrocks/storage");
 let List = (() => {
     let _classDecorators = [(0, action_3.Need)('Store', 'new'), (0, route_1.Route)('/list')];
     let _classDescriptor;
@@ -57,17 +58,28 @@ let List = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        lineHeight = 30;
         async html(request) {
+            const header = request.request.headers['xhr-info'];
+            const xhrInfo = header ? JSON.parse(header) : {};
+            const limit = xhrInfo.targetHeight
+                ? Math.ceil(xhrInfo.targetHeight / this.lineHeight)
+                : +(request.request.headers['xhr-visible-rows'] ?? 50);
+            const offset = request.request.data.offset;
             const type = request.type;
-            const objects = await (0, storage_1.dataSource)().readAll(type, storage_2.Sort);
+            const objects = await (0, storage_1.dataSource)().readAll(type, [new storage_2.Limit(limit, +offset), storage_3.Sort]);
+            if (offset !== undefined) {
+                return this.htmlTemplateResponse({ objects, type }, request, __dirname + '/feed.html');
+            }
+            const count = await (0, storage_1.dataSource)().count(type);
+            const route = (0, route_2.routeOf)(this);
             const generalActions = [];
             const selectionActions = [];
-            const route = (0, route_2.routeOf)(this);
             for (const action of (0, action_2.getActions)(type, route.slice(route.lastIndexOf('/') + 1))) {
                 const actions = (action.need === 'object') ? selectionActions : generalActions;
                 actions.push(action);
             }
-            return this.htmlTemplateResponse({ generalActions, objects, selectionActions, type }, request, __dirname + '/list.html');
+            return this.htmlTemplateResponse({ count, generalActions, objects, selectionActions, type }, request, __dirname + '/list.html');
         }
         async json(request) {
             const objects = await (0, storage_1.dataSource)().search(request.type);

package/package.json

@@ -63,5 +63,5 @@
 		"build:front": "tsc -p esm/tsconfig.json && ../prepare-module/prepare-module.js esm"
 	},
 	"types": "./cjs/list.d.ts",
-	"version": "0.0.15"
+	"version": "0.0.17"
 }