@itrocks/list 0.1.4 → 0.2.1

package/build.js

@@ -6,7 +6,7 @@ import { TableFreezeInheritBorder } from '../table/freeze/inherit-border.js';
 import { TableLink } from '../table/link.js';
 import { tableByElement } from '../table/table.js';
 import { xTargetCall } from '../xtarget/xtarget.js';
-build('article[data-action="list"] > form > table.objects', element => {
+build('article[data-action="list"] > form > table.objects', table => {
     const tableLink = new TableLink({
         call: url => xTargetCall(url, 'main'),
         href: 'action',
@@ -16,17 +16,34 @@ build('article[data-action="list"] > form > table.objects', element => {
                 return { element: input, value: input.value };
         }
     });
-    tableByElement(element, {
+    tableByElement(table, {
         plugins: [TableFeed, TableFreeze, TableFreezeInheritBackground, TableFreezeInheritBorder, tableLink]
     });
-    element.addEventListener('click', event => {
+    table.addEventListener('click', event => {
         const element = event.target;
-        if (!(element instanceof HTMLTableCellElement) || !element.classList.contains('select'))
+        if (!(element instanceof HTMLElement))
             return;
-        const input = element.querySelector('input[type=checkbox]');
+        const cell = element.closest('table, th');
+        if (!(cell instanceof HTMLTableCellElement) || !cell.classList.contains('select'))
+            return;
+        const input = cell.querySelector('input[type=checkbox]');
         if (!input)
             return;
         input.click();
         input.focus();
     });
+    table.tHead?.addEventListener('click', event => {
+        const element = event.target;
+        if (!(element instanceof HTMLElement))
+            return;
+        const cell = element.closest('table, th');
+        if (!(cell instanceof HTMLTableCellElement) || !cell.dataset.property)
+            return;
+        const form = cell.closest('form');
+        if (!form)
+            return;
+        const reverse = (cell.dataset.sort === '1') ? !cell.dataset.reverse : !!cell.dataset.reverse;
+        const url = form.action + '?sort=' + cell.dataset.property + (reverse ? '&reverse' : '');
+        xTargetCall(url, 'main');
+    });
 });

package/cjs/columns.d.ts

@@ -1,10 +1,18 @@
+import { KeyOf } from '@itrocks/class-type';
 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>> {
+import { Parameter } from './parameter';
+export declare class Columns<T extends object> extends Parameter implements Iterable<ReflectProperty<T>> {
     properties: ReflectProperty<T>[];
     [Symbol.iterator](): ArrayIterator<ReflectProperty<T>>;
     getParams(_request: Request, type: Type<T>): void;
+    get length(): number;
+    map(callback: (value: ReflectProperty<T>) => any): any[];
     readOptions(options?: Option[]): Option[];
+    remove(propertyName: string): void;
+    serialize(): Extract<keyof T, string>[];
+    unserialize(data: KeyOf<T>[], type: Type<T>): void;
+    unshift(property: ReflectProperty<T>): number;
 }

package/cjs/columns.js

@@ -2,17 +2,44 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Columns = void 0;
 const list_properties_1 = require("@itrocks/list-properties");
-class Columns {
+const reflect_1 = require("@itrocks/reflect");
+const parameter_1 = require("./parameter");
+class Columns extends parameter_1.Parameter {
     properties = new Array;
     [Symbol.iterator]() {
         return this.properties[Symbol.iterator]();
     }
     getParams(_request, type) {
-        this.properties = new list_properties_1.ListReflectClass(type).listProperties();
+        if (!this.length) {
+            this.properties = new list_properties_1.ListReflectClass(type).listProperties();
+        }
+    }
+    get length() {
+        return this.properties.length;
+    }
+    map(callback) {
+        return this.properties.map(callback);
     }
     readOptions(options = new Array) {
         return options;
     }
+    remove(propertyName) {
+        for (const property of this.properties) {
+            if (property.name !== propertyName)
+                continue;
+            this.properties.splice(this.properties.indexOf(property), 1);
+            return;
+        }
+    }
+    serialize() {
+        return this.properties.map(property => property.name);
+    }
+    unserialize(data, type) {
+        this.properties = data.map(property => new reflect_1.ReflectProperty(type, property));
+    }
+    unshift(property) {
+        return this.properties.unshift(property);
+    }
 }
 exports.Columns = Columns;
 //# sourceMappingURL=columns.js.map

package/cjs/feed.d.ts

@@ -1,6 +1,7 @@
 import { Request } from '@itrocks/request-response';
 import { Option } from '@itrocks/storage';
-export declare class Feed {
+import { Parameter } from './parameter';
+export declare class Feed extends Parameter {
     static DEFAULT_LIMIT: number;
     static DEFAULT_LINE_HEIGHT: number;
     static DEFAULT_OFFSET: number;

package/cjs/feed.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Feed = void 0;
 const storage_1 = require("@itrocks/storage");
-class Feed {
+const parameter_1 = require("./parameter");
+class Feed extends parameter_1.Parameter {
     static DEFAULT_LIMIT = 50;
     static DEFAULT_LINE_HEIGHT = 30;
     static DEFAULT_OFFSET = 0;

package/cjs/filter.d.ts

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

package/cjs/filter.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filter = void 0;
-class Filter {
+const parameter_1 = require("./parameter");
+class Filter extends parameter_1.Parameter {
     getParams(_request) {
     }
     readOptions(options = new Array) {

package/cjs/list.html

@@ -30,7 +30,7 @@
 					<tr class="properties">
 						<th class="select"><input name="select" type="checkbox" value="all"></th>
 						<!--columns-->
-						<th data-property="{name}">{@display}</th>
+						<th data-property="{name}" data-reverse="{?reverse}" data-sort="{?sort}">{@display}</th>
 						<!--end-->
 					</tr>
 				</thead>

package/cjs/list.js

@@ -44,6 +44,8 @@ const storage_1 = require("@itrocks/storage");
 const columns_1 = require("./columns");
 const feed_1 = require("./feed");
 const filter_1 = require("./filter");
+const persist_1 = require("./persist");
+const persist_2 = require("./persist");
 const sort_1 = require("./sort");
 let List = (() => {
     let _classDecorators = [(0, action_3.Need)('Store', 'new'), (0, route_1.Route)('/list')];
@@ -63,17 +65,19 @@ let List = (() => {
         columns = new columns_1.Columns;
         feed = new feed_1.Feed;
         filter = new filter_1.Filter;
-        sort = new sort_1.Sort;
+        sort = new sort_1.Sort(this.columns);
         async html(request) {
             const columns = this.columns;
             const feed = this.feed;
             const filter = this.filter;
             const sort = this.sort;
             const type = request.type;
+            (0, persist_1.load)(this, request.request, type);
             columns.getParams(request.request, type);
             feed.getParams(request.request);
             filter.getParams(request.request);
-            sort.getParams(request.request, type, columns);
+            sort.getParams(request.request, type);
+            (0, persist_2.save)(this, request.request, type);
             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);

package/cjs/parameter.d.ts

@@ -0,0 +1,9 @@
+import { Request } from '@itrocks/request-response';
+import { Option } from '@itrocks/storage';
+import { Type } from '@itrocks/class-type';
+export declare abstract class Parameter {
+    abstract getParams(request: Request, type?: Type): void;
+    readOptions(options?: Option[]): Option[];
+    serialize(): any;
+    unserialize(_data: any, _type: Type): void;
+}

package/cjs/parameter.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Parameter = void 0;
+class Parameter {
+    readOptions(options = new Array) {
+        return options;
+    }
+    serialize() { }
+    unserialize(_data, _type) { }
+}
+exports.Parameter = Parameter;
+//# sourceMappingURL=parameter.js.map

package/cjs/persist.d.ts

@@ -0,0 +1,8 @@
+import { Type } from '@itrocks/class-type';
+import { Request } from '@itrocks/request-response';
+interface Container {
+    [s: string]: any;
+}
+export declare function load(list: Container, request: Request, type: Type): {} | undefined;
+export declare function save(list: Container, request: Request, type: Type): void;
+export {};

package/cjs/persist.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.load = load;
+exports.save = save;
+const route_1 = require("@itrocks/route");
+const parameter_1 = require("./parameter");
+function load(list, request, type) {
+    if (!request.session.list)
+        return {};
+    const serialized = request.session.list[(0, route_1.routeOf)(type)];
+    if (!serialized)
+        return {};
+    for (const key of Object.keys(list)) {
+        const parameter = list[key];
+        if (!(parameter instanceof parameter_1.Parameter) || !serialized[key])
+            continue;
+        parameter.unserialize(serialized[key], type);
+    }
+}
+function save(list, request, type) {
+    if (!request.session.list) {
+        request.session.list = {};
+    }
+    const serialized = {};
+    for (const key of Object.keys(list)) {
+        const parameter = list[key];
+        if (!(parameter instanceof parameter_1.Parameter))
+            continue;
+        serialized[key] = parameter.serialize();
+    }
+    request.session.list[(0, route_1.routeOf)(type)] = serialized;
+}
+//# sourceMappingURL=persist.js.map

package/cjs/sort.d.ts

@@ -2,7 +2,21 @@ 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;
+import { Parameter } from './parameter';
+interface Serialized {
+    [key: string]: boolean;
+}
+interface Sortable {
+    reverse: boolean;
+    sort?: number;
+}
+export declare class Sort<T extends object> extends Parameter {
+    columns: Columns<T> & Sortable[];
+    sorted?: Serialized;
+    constructor(columns: Columns<T>);
+    getParams(request: Request, type: Type<T>): void;
     readOptions(options?: Option[]): Option[];
+    serialize(): Serialized | undefined;
+    unserialize(data: Serialized): void;
 }
+export {};

package/cjs/sort.js

@@ -1,14 +1,70 @@
 "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) {
+const parameter_1 = require("./parameter");
+class Sort extends parameter_1.Parameter {
+    columns;
+    sorted;
+    constructor(columns) {
+        super();
+        this.columns = columns;
+    }
+    getParams(request, type) {
+        let sortProperties;
+        let sortReverse;
+        if (this.sorted) {
+            sortProperties = Object.keys(this.sorted);
+            sortReverse = Object.values(this.sorted);
+        }
+        else {
+            for (const option of this.readOptions()) {
+                if (option instanceof storage_1.Sort) {
+                    sortProperties = option.properties.map(property => '' + property);
+                    sortReverse = option.properties.map(property => property instanceof sort_1.Reverse);
+                }
+            }
+            if (!sortProperties || !sortReverse) {
+                sortProperties = (0, sort_2.sortOf)(type).map(property => '' + property);
+                sortReverse = (0, sort_2.sortOf)(type).map(property => property instanceof sort_1.Reverse);
+            }
+        }
+        if (typeof request.data.sort === 'string') {
+            const reverse = 'reverse' in request.data;
+            const sort = request.data.sort;
+            const index = sortProperties.indexOf(sort);
+            if (index < 0)
+                return;
+            sortProperties.splice(index, 1);
+            sortProperties.unshift(sort);
+            sortReverse.splice(index, 1);
+            sortReverse.unshift(reverse);
+            this.sorted = undefined;
+        }
+        if (!this.sorted) {
+            this.sorted = {};
+            for (const index in sortProperties) {
+                this.sorted[sortProperties[index]] = sortReverse[index];
+            }
+        }
+        for (const column of this.columns) {
+            const sortIndex = sortProperties.indexOf(column.name);
+            column.reverse = sortReverse[sortIndex];
+            column.sort = (sortIndex > -1) ? (sortIndex + 1) : undefined;
+        }
     }
     readOptions(options = new Array) {
         options.push(storage_1.Sort);
         return options;
     }
+    serialize() {
+        return this.sorted;
+    }
+    unserialize(data) {
+        this.sorted = data;
+    }
 }
 exports.Sort = Sort;
 //# sourceMappingURL=sort.js.map

package/list.css

@@ -56,6 +56,33 @@ table.objects > tbody:first-child > tr:nth-child(even) > td {
 table.objects > tbody:first-child > tr:nth-child(odd) > td {
   background: #f8f8f8;
 }
+table.objects > thead > tr > th[data-property] {
+  cursor: pointer;
+}
+table.objects > thead > tr > th[data-sort] {
+  padding-right: calc(0.6em + 16px);
+}
+table.objects > thead > tr > 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 > thead > tr > th[data-sort][data-reverse]::after {
+  transform: scaleY(-1);
+}
+table.objects > thead > tr > th[data-sort][data-sort="1"]::after {
+  background-color: #444;
+}
+table.objects > thead > tr > th[data-sort][data-sort="2"]::after {
+  background-color: #888;
+}
+table.objects > thead > tr > th[data-sort][data-sort="3"]::after {
+  background-color: #ccc;
+}
 table.objects > thead + tbody > tr:nth-child(even) > td {
   background: #f8f8f8;
 }

package/package.json

@@ -30,6 +30,7 @@
 		"LICENSE",
 		"README.md",
 		"cjs/*",
+		"/*.svg",
 		"*.css",
 		"*.d.ts",
 		"*.js",
@@ -67,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.4"
+	"version": "0.2.1"
 }

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>