@itrocks/list 0.0.21 → 0.0.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +118 -0
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -7,3 +7,121 @@
|
|
|
7
7
|
# list
|
|
8
8
|
|
|
9
9
|
Generic action-based object list navigation in HTML and JSON.
|
|
10
|
+
|
|
11
|
+
*This documentation was written by an artificial intelligence and may contain errors or approximations.
|
|
12
|
+
It has not yet been fully reviewed by a human. If anything seems unclear or incomplete,
|
|
13
|
+
please feel free to contact the author of this package.*
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm i @itrocks/list
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
`@itrocks/list` exposes a single `List` action that you can plug into your
|
|
24
|
+
existing [@itrocks/action](https://github.com/itrocks-ts/action) workflow.
|
|
25
|
+
|
|
26
|
+
The `List` action is meant to be attached to a domain class (for example an
|
|
27
|
+
`User` entity) and is responsible for rendering either an HTML list page or a
|
|
28
|
+
JSON payload depending on the requested format.
|
|
29
|
+
|
|
30
|
+
```ts
|
|
31
|
+
import { List } from '@itrocks/list'
|
|
32
|
+
import { Request } from '@itrocks/action-request'
|
|
33
|
+
|
|
34
|
+
// The domain object you want to list
|
|
35
|
+
class User {
|
|
36
|
+
/* ... */
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// Create an action instance for this domain
|
|
40
|
+
const listUsers = new List<User>()
|
|
41
|
+
|
|
42
|
+
// In your controller / route handler
|
|
43
|
+
async function usersHtml (request: Request<User>) {
|
|
44
|
+
return listUsers.html(request)
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
async function usersJson (request: Request<User>) {
|
|
48
|
+
return listUsers.json(request)
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
The request object is typically created by
|
|
53
|
+
[@itrocks/action-request](https://github.com/itrocks-ts/action-request) from
|
|
54
|
+
an incoming HTTP request.
|
|
55
|
+
|
|
56
|
+
## API
|
|
57
|
+
|
|
58
|
+
### `class List<T extends object = object> extends Action<T>`
|
|
59
|
+
|
|
60
|
+
Main entry point of the module. It extends
|
|
61
|
+
[@itrocks/action](https://github.com/itrocks-ts/action)'s `Action` class and
|
|
62
|
+
adds list‑oriented behaviors.
|
|
63
|
+
|
|
64
|
+
#### Type parameter
|
|
65
|
+
|
|
66
|
+
- `T` – The domain object type you want to list (for example `User`).
|
|
67
|
+
|
|
68
|
+
#### Properties
|
|
69
|
+
|
|
70
|
+
- `lineHeight: number` – Estimated height of a row in pixels. This is mainly
|
|
71
|
+
used by the front‑end to compute scrollable area and virtualisation.
|
|
72
|
+
|
|
73
|
+
#### Methods
|
|
74
|
+
|
|
75
|
+
##### `html(request: Request<T>): Promise<HtmlResponse>`
|
|
76
|
+
|
|
77
|
+
Builds an HTML response for the list view.
|
|
78
|
+
|
|
79
|
+
The returned
|
|
80
|
+
[`HtmlResponse`](https://github.com/itrocks-ts/core-responses#htmlresponse)
|
|
81
|
+
contains the rendered table along with paging, filters and actions configured
|
|
82
|
+
through your `Action` stack.
|
|
83
|
+
|
|
84
|
+
Typical usage is to call this method from a route that should return HTML:
|
|
85
|
+
|
|
86
|
+
```ts
|
|
87
|
+
fastify.get('/users', async (req, reply) => {
|
|
88
|
+
const request = toActionRequest<User>(req) // project helper
|
|
89
|
+
const response = await listUsers.html(request)
|
|
90
|
+
reply
|
|
91
|
+
.status(response.status)
|
|
92
|
+
.headers(response.headers)
|
|
93
|
+
.type('text/html')
|
|
94
|
+
.send(response.body)
|
|
95
|
+
})
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
##### `json(request: Request<T>): Promise<JsonResponse>`
|
|
99
|
+
|
|
100
|
+
Builds a JSON representation of the same list data.
|
|
101
|
+
|
|
102
|
+
The returned
|
|
103
|
+
[`JsonResponse`](https://github.com/itrocks-ts/core-responses#jsonresponse)
|
|
104
|
+
typically contains the current page of results, meta‑data (page, page size,
|
|
105
|
+
total count) and any additional information configured via your
|
|
106
|
+
`Action`/`List` setup.
|
|
107
|
+
|
|
108
|
+
This is useful for API‑only endpoints, asynchronous front‑end components or
|
|
109
|
+
infinite‑scroll lists.
|
|
110
|
+
|
|
111
|
+
```ts
|
|
112
|
+
fastify.get('/api/users', async (req, reply) => {
|
|
113
|
+
const request = toActionRequest<User>(req)
|
|
114
|
+
const response = await listUsers.json(request)
|
|
115
|
+
reply
|
|
116
|
+
.status(response.status)
|
|
117
|
+
.headers(response.headers)
|
|
118
|
+
.send(response.body)
|
|
119
|
+
})
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Typical use cases
|
|
123
|
+
|
|
124
|
+
- Back‑office list screens for any business entity (users, products, orders…).
|
|
125
|
+
- Filterable / searchable tables built on top of
|
|
126
|
+
[@itrocks/table](https://github.com/itrocks-ts/table).
|
|
127
|
+
- JSON list endpoints consumed by SPA or mobile applications.
|
package/package.json
CHANGED
|
@@ -32,12 +32,14 @@
|
|
|
32
32
|
"!*.map"
|
|
33
33
|
],
|
|
34
34
|
"keywords": [
|
|
35
|
+
"action",
|
|
35
36
|
"API",
|
|
36
37
|
"backend",
|
|
37
38
|
"browse",
|
|
38
39
|
"component",
|
|
39
40
|
"display",
|
|
40
41
|
"filter",
|
|
42
|
+
"html",
|
|
41
43
|
"interactive",
|
|
42
44
|
"json",
|
|
43
45
|
"list",
|
|
@@ -47,6 +49,8 @@
|
|
|
47
49
|
"search",
|
|
48
50
|
"select",
|
|
49
51
|
"selection",
|
|
52
|
+
"standard",
|
|
53
|
+
"view",
|
|
50
54
|
"UI",
|
|
51
55
|
"UX"
|
|
52
56
|
],
|
|
@@ -63,5 +67,5 @@
|
|
|
63
67
|
"build:front": "tsc -p esm/tsconfig.json && ../prepare-module/prepare-module.js esm"
|
|
64
68
|
},
|
|
65
69
|
"types": "./cjs/list.d.ts",
|
|
66
|
-
"version": "0.0.
|
|
70
|
+
"version": "0.0.22"
|
|
67
71
|
}
|