@itrocks/list 0.1.3 → 0.2.0

package/cjs/columns.d.ts

@@ -0,0 +1,10 @@
+import { Type } from '@itrocks/class-type';
+import { ReflectProperty } from '@itrocks/reflect';
+import { Request } from '@itrocks/request-response';
+import { Option } from '@itrocks/storage';
+export declare class Columns<T extends object> implements Iterable<ReflectProperty<T>> {
+    properties: ReflectProperty<T>[];
+    [Symbol.iterator](): ArrayIterator<ReflectProperty<T>>;
+    getParams(_request: Request, type: Type<T>): void;
+    readOptions(options?: Option[]): Option[];
+}

package/cjs/columns.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Columns = void 0;
+const list_properties_1 = require("@itrocks/list-properties");
+class Columns {
+    properties = new Array;
+    [Symbol.iterator]() {
+        return this.properties[Symbol.iterator]();
+    }
+    getParams(_request, type) {
+        this.properties = new list_properties_1.ListReflectClass(type).listProperties();
+    }
+    readOptions(options = new Array) {
+        return options;
+    }
+}
+exports.Columns = Columns;
+//# sourceMappingURL=columns.js.map

package/cjs/feed.d.ts

@@ -1,5 +1,5 @@
-import { Option } from '@itrocks/storage';
 import { Request } from '@itrocks/request-response';
+import { Option } from '@itrocks/storage';
 export declare class Feed {
     static DEFAULT_LIMIT: number;
     static DEFAULT_LINE_HEIGHT: number;
@@ -9,5 +9,5 @@ export declare class Feed {
     offset: number;
     template: string;
     getParams(request: Request): void;
-    readOptions(options: Array<Option>): Option[];
+    readOptions(options?: Option[]): Option[];
 }

package/cjs/feed.js

@@ -18,7 +18,7 @@ class Feed {
             : (xhrInfo.visibleRows ?? Feed.DEFAULT_LIMIT);
         this.offset = +request.data.offset;
     }
-    readOptions(options) {
+    readOptions(options = new Array) {
         options.push(new storage_1.Limit(this.limit, this.offset));
         return options;
     }

package/cjs/filter.d.ts

@@ -0,0 +1,8 @@
+import { Type } from '@itrocks/class-type';
+import { Request } from '@itrocks/request-response';
+import { Option } from '@itrocks/storage';
+export declare class Filter {
+    getParams(_request: Request): void;
+    readOptions(options?: Option[]): Option[];
+    searchObject(type: Type): any;
+}

package/cjs/filter.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Filter = void 0;
+class Filter {
+    getParams(_request) {
+    }
+    readOptions(options = new Array) {
+        return options;
+    }
+    searchObject(type) {
+        return Object.setPrototypeOf({}, type.prototype);
+    }
+}
+exports.Filter = Filter;
+//# sourceMappingURL=filter.js.map

package/cjs/list.d.ts

@@ -1,8 +1,14 @@
 import { Action } from '@itrocks/action';
 import { Request } from '@itrocks/action-request';
+import { Columns } from './columns';
 import { Feed } from './feed';
+import { Filter } from './filter';
+import { Sort } from './sort';
 export declare class List<T extends object = object> extends Action<T> {
+    columns: Columns<object>;
     feed: Feed;
+    filter: Filter;
+    sort: Sort<object>;
     html(request: Request<T>): Promise<import("@itrocks/core-responses").HtmlResponse>;
     json(request: Request<T>): Promise<import("@itrocks/core-responses").JsonResponse>;
 }

package/cjs/list.html

@@ -28,9 +28,9 @@
 			<table class="objects">
 			<thead>
 					<tr class="properties">
-						<th class="select" data-fix><input name="select" type="checkbox" value="all"></th>
-						<!--type.%listProperties-->
-						<th data-property="{name}">{@display}</th>
+						<th class="select"><input name="select" type="checkbox" value="all"></th>
+						<!--columns-->
+						<th data-property="{name}" data-reverse="{?reverse}" data-sort="{?sort}">{@display}</th>
 						<!--end-->
 					</tr>
 				</thead>

package/cjs/list.js

@@ -41,8 +41,10 @@ const action_3 = require("@itrocks/action");
 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 columns_1 = require("./columns");
 const feed_1 = require("./feed");
+const filter_1 = require("./filter");
+const sort_1 = require("./sort");
 let List = (() => {
     let _classDecorators = [(0, action_3.Need)('Store', 'new'), (0, route_1.Route)('/list')];
     let _classDescriptor;
@@ -58,12 +60,21 @@ let List = (() => {
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
+        columns = new columns_1.Columns;
         feed = new feed_1.Feed;
+        filter = new filter_1.Filter;
+        sort = new sort_1.Sort;
         async html(request) {
+            const columns = this.columns;
             const feed = this.feed;
-            feed.getParams(request.request);
+            const filter = this.filter;
+            const sort = this.sort;
             const type = request.type;
-            const objects = await (0, storage_1.dataSource)().readAll(type, feed.readOptions([storage_2.Sort]));
+            columns.getParams(request.request, type);
+            feed.getParams(request.request);
+            filter.getParams(request.request);
+            sort.getParams(request.request, type, columns);
+            const objects = await (0, storage_1.dataSource)().search(type, filter.searchObject(type), feed.readOptions(filter.readOptions(sort.readOptions())));
             if (feed.offset) {
                 return this.htmlTemplateResponse({ objects, type }, request, feed.template);
             }
@@ -75,7 +86,7 @@ let List = (() => {
                 const actions = (action.need === 'object') ? selectionActions : generalActions;
                 actions.push(action);
             }
-            return this.htmlTemplateResponse({ count, generalActions, objects, selectionActions, type }, request, __dirname + '/list.html');
+            return this.htmlTemplateResponse({ columns, count, generalActions, objects, selectionActions, type }, request, __dirname + '/list.html');
         }
         async json(request) {
             const objects = await (0, storage_1.dataSource)().search(request.type);

package/cjs/sort.d.ts

@@ -0,0 +1,8 @@
+import { Type } from '@itrocks/class-type';
+import { Request } from '@itrocks/request-response';
+import { Option } from '@itrocks/storage';
+import { Columns } from './columns';
+export declare class Sort<T extends object> {
+    getParams(_request: Request, type: Type, columns: Columns<T>): void;
+    readOptions(options?: Option[]): Option[];
+}

package/cjs/sort.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sort = void 0;
+const sort_1 = require("@itrocks/sort");
+const sort_2 = require("@itrocks/sort");
+const storage_1 = require("@itrocks/storage");
+class Sort {
+    getParams(_request, type, columns) {
+        let sortProperties;
+        for (const option of this.readOptions()) {
+            if (option instanceof storage_1.Sort) {
+                sortProperties = option.properties;
+            }
+        }
+        sortProperties ??= (0, sort_2.sortOf)(type);
+        const sortPropertyNames = sortProperties.map(property => '' + property);
+        for (const column of columns) {
+            const sortIndex = sortPropertyNames.indexOf(column.name) + 1;
+            column.reverse = !!(sortIndex && (sortProperties[sortIndex - 1] instanceof sort_1.Reverse));
+            column.sort = sortIndex ? sortIndex : undefined;
+        }
+    }
+    readOptions(options = new Array) {
+        options.push(storage_1.Sort);
+        return options;
+    }
+}
+exports.Sort = Sort;
+//# sourceMappingURL=sort.js.map

package/list.css

@@ -27,6 +27,30 @@ table.objects {
 table.objects th {
   background: #f8f8f8;
 }
+table.objects th[data-sort] {
+  padding-right: calc(0.6em + 16px);
+}
+table.objects th[data-sort]::after {
+  content: "";
+  height: 24px;
+  mask: url("sort.svg") right center/24px 24px no-repeat;
+  position: absolute;
+  right: 0;
+  top: calc(50% - 12px);
+  width: 24px;
+}
+table.objects th[data-sort][data-reverse]::after {
+  transform: scaleY(-1);
+}
+table.objects th[data-sort][data-sort="1"]::after {
+  background-color: #444;
+}
+table.objects th[data-sort][data-sort="2"]::after {
+  background-color: #888;
+}
+table.objects th[data-sort][data-sort="3"]::after {
+  background-color: #ccc;
+}
 table.objects tr td, table.objects tr th {
   border-bottom: 1px solid #d8d8d8;
   border-spacing: 0;

package/package.json

@@ -6,6 +6,10 @@
 	"dependencies": {
 		"@itrocks/action-pack": "latest",
 		"@itrocks/build": "latest",
+		"@itrocks/class-type": "latest",
+		"@itrocks/list-properties": "latest",
+		"@itrocks/reflect": "latest",
+		"@itrocks/request-response": "latest",
 		"@itrocks/table": "latest",
 		"@itrocks/xtarget": "latest"
 	},
@@ -26,6 +30,7 @@
 		"LICENSE",
 		"README.md",
 		"cjs/*",
+		"/*.svg",
 		"*.css",
 		"*.d.ts",
 		"*.js",
@@ -63,9 +68,9 @@
 	"scripts": {
 		"build": "npm run build:cjs && npm run build:css && npm run build:front",
 		"build:cjs": "tsc -p tsconfig.cjs.json && cp src/*.html cjs/",
-		"build:css": "sass --no-source-map src/list.scss:list.css",
+		"build:css": "sass --no-source-map src/list.scss:list.css && cp src/*.svg ./",
 		"build:front": "tsc -p esm/tsconfig.json && ../prepare-module/prepare-module.js esm"
 	},
 	"types": "./cjs/list.d.ts",
-	"version": "0.1.3"
+	"version": "0.2.0"
 }

package/sort.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7 15l10 0-5-5z"/></svg>