@itrocks/list 0.2.1 → 0.3.0

package/build.js

@@ -9,7 +9,6 @@ import { xTargetCall } from '../xtarget/xtarget.js';
 build('article[data-action="list"] > form > table.objects', table => {
     const tableLink = new TableLink({
         call: url => xTargetCall(url, 'main'),
-        href: 'action',
         id: (element) => {
             const input = element.closest('tr')?.querySelector(':scope > th.select > input[name=id]');
             if (input)

package/cjs/filter.d.ts

@@ -1,9 +1,19 @@
 import { Type } from '@itrocks/class-type';
 import { Request } from '@itrocks/request-response';
 import { Option } from '@itrocks/storage';
+import { Columns } from './columns';
 import { Parameter } from './parameter';
-export declare class Filter extends Parameter {
-    getParams(_request: Request): void;
+type Search = {
+    [property: string]: string;
+};
+export declare class Filter<T extends object> extends Parameter {
+    columns: Columns<T>;
+    search: Search;
+    constructor(columns: Columns<T>);
+    getParams(request: Request): void;
     readOptions(options?: Option[]): Option[];
     searchObject(type: Type): any;
+    serialize(): Search;
+    unserialize(data: Search): void;
 }
+export {};

package/cjs/filter.js

@@ -3,13 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Filter = void 0;
 const parameter_1 = require("./parameter");
 class Filter extends parameter_1.Parameter {
-    getParams(_request) {
+    columns;
+    search = {};
+    constructor(columns) {
+        super();
+        this.columns = columns;
+    }
+    getParams(request) {
+        for (const property of this.columns.map(property => property.name)) {
+            this.search[property] = '';
+        }
+        for (const [property, search] of Object.entries(request.data.search ?? {})) {
+            if (!(property in this.search))
+                continue;
+            this.search[property] = search;
+        }
     }
     readOptions(options = new Array) {
         return options;
     }
     searchObject(type) {
-        return Object.setPrototypeOf({}, type.prototype);
+        const search = {};
+        for (const [property, value] of Object.entries(this.search)) {
+            if (value === '')
+                continue;
+            search[property] = value;
+        }
+        return Object.setPrototypeOf(search, type.prototype);
+    }
+    serialize() {
+        return this.search;
+    }
+    unserialize(data) {
+        this.search = data;
     }
 }
 exports.Filter = Filter;

package/cjs/list.d.ts

@@ -7,7 +7,7 @@ import { Sort } from './sort';
 export declare class List<T extends object = object> extends Action<T> {
     columns: Columns<object>;
     feed: Feed;
-    filter: Filter;
+    filter: Filter<object>;
     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

@@ -24,15 +24,21 @@
 				<!--end-->
 			</ul>
 		</header>
-		<form action="app://(type.@route)" autocomplete="off" method="post" target="main">
-			<table class="objects">
-			<thead>
+		<form action="app://(type.@route)/list" autocomplete="off" method="post" target="main">
+			<table class="objects" data-link="{type.@route}">
+				<thead>
 					<tr class="properties">
 						<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>
+					<tr class="search">
+						<th><input name="reset" title="reset search filters" type="submit" value="reset"></th>
+						<!--columns-->
+						<th><input name="search.{name.toField}" value="{?.search.{name.toField}}"></th>
+						<!--end-->
+					</tr>
 				</thead>
 				<tbody>
 					{./feed.html}

package/cjs/list.js

@@ -64,7 +64,7 @@ let List = (() => {
         }
         columns = new columns_1.Columns;
         feed = new feed_1.Feed;
-        filter = new filter_1.Filter;
+        filter = new filter_1.Filter(this.columns);
         sort = new sort_1.Sort(this.columns);
         async html(request) {
             const columns = this.columns;
@@ -90,7 +90,7 @@ let List = (() => {
                 const actions = (action.need === 'object') ? selectionActions : generalActions;
                 actions.push(action);
             }
-            return this.htmlTemplateResponse({ columns, count, generalActions, objects, selectionActions, type }, request, __dirname + '/list.html');
+            return this.htmlTemplateResponse({ columns, count, generalActions, objects, search: filter.search, selectionActions, type }, request, __dirname + '/list.html');
         }
         async json(request) {
             const objects = await (0, storage_1.dataSource)().search(request.type);

package/cjs/sort.d.ts

@@ -1,6 +1,7 @@
 import { Type } from '@itrocks/class-type';
 import { Request } from '@itrocks/request-response';
 import { Option } from '@itrocks/storage';
+import { Sort as SortOption } from '@itrocks/storage';
 import { Columns } from './columns';
 import { Parameter } from './parameter';
 interface Serialized {
@@ -17,6 +18,7 @@ export declare class Sort<T extends object> extends Parameter {
     getParams(request: Request, type: Type<T>): void;
     readOptions(options?: Option[]): Option[];
     serialize(): Serialized | undefined;
+    sortOption(): SortOption | Type<SortOption>;
     unserialize(data: Serialized): void;
 }
 export {};

package/cjs/sort.js

@@ -56,12 +56,21 @@ class Sort extends parameter_1.Parameter {
         }
     }
     readOptions(options = new Array) {
-        options.push(storage_1.Sort);
+        options.push(this.sortOption());
         return options;
     }
     serialize() {
         return this.sorted;
     }
+    sortOption() {
+        if (!this.sorted)
+            return storage_1.Sort;
+        const properties = new Array;
+        for (const [propertyName, reverse] of Object.entries(this.sorted)) {
+            properties.push(reverse ? new sort_1.Reverse(propertyName) : propertyName);
+        }
+        return new storage_1.Sort(properties);
+    }
     unserialize(data) {
         this.sorted = data;
     }

package/filter-reset.svg

@@ -0,0 +1 @@
+<svg stroke="#666" stroke-linecap="round" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" fill="none" r="7"/><path d="M20 20l-3.5-3.5" /><path d="M8.5 8.5l5 5M13.5 8.5l-5 5"/></svg>

package/list.css

@@ -56,13 +56,13 @@ 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] {
+table.objects > thead > tr.properties > th[data-property] {
   cursor: pointer;
 }
-table.objects > thead > tr > th[data-sort] {
+table.objects > thead > tr.properties > th[data-sort] {
   padding-right: calc(0.6em + 16px);
 }
-table.objects > thead > tr > th[data-sort]::after {
+table.objects > thead > tr.properties > th[data-sort]::after {
   content: "";
   height: 24px;
   mask: url("sort.svg") right center/24px 24px no-repeat;
@@ -71,18 +71,40 @@ table.objects > thead > tr > th[data-sort]::after {
   top: calc(50% - 12px);
   width: 24px;
 }
-table.objects > thead > tr > th[data-sort][data-reverse]::after {
+table.objects > thead > tr.properties > th[data-sort][data-reverse]::after {
   transform: scaleY(-1);
 }
-table.objects > thead > tr > th[data-sort][data-sort="1"]::after {
+table.objects > thead > tr.properties > th[data-sort][data-sort="1"]::after {
   background-color: #444;
 }
-table.objects > thead > tr > th[data-sort][data-sort="2"]::after {
+table.objects > thead > tr.properties > th[data-sort][data-sort="2"]::after {
   background-color: #888;
 }
-table.objects > thead > tr > th[data-sort][data-sort="3"]::after {
+table.objects > thead > tr.properties > th[data-sort][data-sort="3"]::after {
   background-color: #ccc;
 }
+table.objects > thead > tr.search > th {
+  padding: 0;
+}
+table.objects > thead > tr.search > th > input {
+  border: none;
+  border-radius: 0;
+  width: 100%;
+}
+table.objects > thead > tr.search > th > input[type=submit] {
+  background: url("filter-reset.svg") center no-repeat;
+  color: transparent;
+  font-size: 0;
+  height: 26px;
+  min-width: 28px;
+}
+table.objects > thead > tr.search > th > input:not([type=submit]) {
+  border-left: 1px solid #d8d8d8;
+}
+table.objects > thead > tr.search > th > input:focus {
+  outline: none;
+  box-shadow: inset 0 0 0 2px Highlight;
+}
 table.objects > thead + tbody > tr:nth-child(even) > td {
   background: #f8f8f8;
 }

package/package.json

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