Skip to content

Commit 2f19d1a

Browse files
bdukesbdukes
committed
Extract pagination component for Bulk Install logs
Only show about 11 pages, plus first and last with ellipsis filling gaps
1 parent 526c57d commit 2f19d1a

8 files changed

Lines changed: 199 additions & 39 deletions

File tree

‎DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components.d.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
*/
77
import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
88
import { InstallJob, PackageJob, Session, UploadStatus } from "./components/tabs/dnn-bi-install/dnn-bi-install.model";
9+
import { Pagination } from "./clients/event-log-client";
910
export { InstallJob, PackageJob, Session, UploadStatus } from "./components/tabs/dnn-bi-install/dnn-bi-install.model";
11+
export { Pagination } from "./clients/event-log-client";
1012
export namespace Components {
1113
interface DnnBiApiUsers {
1214
}
@@ -28,6 +30,12 @@ export namespace Components {
2830
}
2931
interface DnnBiIpSafelist {
3032
}
33+
interface DnnBiLogPagination {
34+
/**
35+
* The pagination
36+
*/
37+
"pagination": Pagination;
38+
}
3139
interface DnnBiLogs {
3240
}
3341
interface DnnBiPackageJob {
@@ -61,6 +69,10 @@ export namespace Components {
6169
"moduleId": number;
6270
}
6371
}
72+
export interface DnnBiLogPaginationCustomEvent<T> extends CustomEvent<T> {
73+
detail: T;
74+
target: HTMLDnnBiLogPaginationElement;
75+
}
6476
export interface DnnBiQueuedFileCustomEvent<T> extends CustomEvent<T> {
6577
detail: T;
6678
target: HTMLDnnBiQueuedFileElement;
@@ -114,6 +126,23 @@ declare global {
114126
prototype: HTMLDnnBiIpSafelistElement;
115127
new (): HTMLDnnBiIpSafelistElement;
116128
};
129+
interface HTMLDnnBiLogPaginationElementEventMap {
130+
"pageSelected": number;
131+
}
132+
interface HTMLDnnBiLogPaginationElement extends Components.DnnBiLogPagination, HTMLStencilElement {
133+
addEventListener<K extends keyof HTMLDnnBiLogPaginationElementEventMap>(type: K, listener: (this: HTMLDnnBiLogPaginationElement, ev: DnnBiLogPaginationCustomEvent<HTMLDnnBiLogPaginationElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
134+
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
135+
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
136+
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
137+
removeEventListener<K extends keyof HTMLDnnBiLogPaginationElementEventMap>(type: K, listener: (this: HTMLDnnBiLogPaginationElement, ev: DnnBiLogPaginationCustomEvent<HTMLDnnBiLogPaginationElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
138+
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
139+
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
140+
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
141+
}
142+
var HTMLDnnBiLogPaginationElement: {
143+
prototype: HTMLDnnBiLogPaginationElement;
144+
new (): HTMLDnnBiLogPaginationElement;
145+
};
117146
interface HTMLDnnBiLogsElement extends Components.DnnBiLogs, HTMLStencilElement {
118147
}
119148
var HTMLDnnBiLogsElement: {
@@ -158,6 +187,7 @@ declare global {
158187
"dnn-bi-install": HTMLDnnBiInstallElement;
159188
"dnn-bi-install-job": HTMLDnnBiInstallJobElement;
160189
"dnn-bi-ip-safelist": HTMLDnnBiIpSafelistElement;
190+
"dnn-bi-log-pagination": HTMLDnnBiLogPaginationElement;
161191
"dnn-bi-logs": HTMLDnnBiLogsElement;
162192
"dnn-bi-package-job": HTMLDnnBiPackageJobElement;
163193
"dnn-bi-queued-file": HTMLDnnBiQueuedFileElement;
@@ -187,6 +217,13 @@ declare namespace LocalJSX {
187217
}
188218
interface DnnBiIpSafelist {
189219
}
220+
interface DnnBiLogPagination {
221+
"onPageSelected"?: (event: DnnBiLogPaginationCustomEvent<number>) => void;
222+
/**
223+
* The pagination
224+
*/
225+
"pagination": Pagination;
226+
}
190227
interface DnnBiLogs {
191228
}
192229
interface DnnBiPackageJob {
@@ -240,6 +277,7 @@ declare namespace LocalJSX {
240277
"dnn-bi-install": DnnBiInstall;
241278
"dnn-bi-install-job": DnnBiInstallJob;
242279
"dnn-bi-ip-safelist": DnnBiIpSafelist;
280+
"dnn-bi-log-pagination": DnnBiLogPagination;
243281
"dnn-bi-logs": DnnBiLogs;
244282
"dnn-bi-package-job": Omit<DnnBiPackageJob, keyof DnnBiPackageJobAttributes> & { [K in keyof DnnBiPackageJob & keyof DnnBiPackageJobAttributes]?: DnnBiPackageJob[K] } & { [K in keyof DnnBiPackageJob & keyof DnnBiPackageJobAttributes as `attr:${K}`]?: DnnBiPackageJobAttributes[K] } & { [K in keyof DnnBiPackageJob & keyof DnnBiPackageJobAttributes as `prop:${K}`]?: DnnBiPackageJob[K] } & OneOf<"attempted", DnnBiPackageJob["attempted"], DnnBiPackageJobAttributes["attempted"]>;
245283
"dnn-bi-queued-file": Omit<DnnBiQueuedFile, keyof DnnBiQueuedFileAttributes> & { [K in keyof DnnBiQueuedFile & keyof DnnBiQueuedFileAttributes]?: DnnBiQueuedFile[K] } & { [K in keyof DnnBiQueuedFile & keyof DnnBiQueuedFileAttributes as `attr:${K}`]?: DnnBiQueuedFileAttributes[K] } & { [K in keyof DnnBiQueuedFile & keyof DnnBiQueuedFileAttributes as `prop:${K}`]?: DnnBiQueuedFile[K] } & OneOf<"maxUploadFileSize", DnnBiQueuedFile["maxUploadFileSize"], DnnBiQueuedFileAttributes["maxUploadFileSize"]>;
@@ -258,6 +296,7 @@ declare module "@stencil/core" {
258296
"dnn-bi-install": LocalJSX.IntrinsicElements["dnn-bi-install"] & JSXBase.HTMLAttributes<HTMLDnnBiInstallElement>;
259297
"dnn-bi-install-job": LocalJSX.IntrinsicElements["dnn-bi-install-job"] & JSXBase.HTMLAttributes<HTMLDnnBiInstallJobElement>;
260298
"dnn-bi-ip-safelist": LocalJSX.IntrinsicElements["dnn-bi-ip-safelist"] & JSXBase.HTMLAttributes<HTMLDnnBiIpSafelistElement>;
299+
"dnn-bi-log-pagination": LocalJSX.IntrinsicElements["dnn-bi-log-pagination"] & JSXBase.HTMLAttributes<HTMLDnnBiLogPaginationElement>;
261300
"dnn-bi-logs": LocalJSX.IntrinsicElements["dnn-bi-logs"] & JSXBase.HTMLAttributes<HTMLDnnBiLogsElement>;
262301
"dnn-bi-package-job": LocalJSX.IntrinsicElements["dnn-bi-package-job"] & JSXBase.HTMLAttributes<HTMLDnnBiPackageJobElement>;
263302
"dnn-bi-queued-file": LocalJSX.IntrinsicElements["dnn-bi-queued-file"] & JSXBase.HTMLAttributes<HTMLDnnBiQueuedFileElement>;

‎DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/dnn-bulk-install/readme.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ graph TD;
4444
dnn-bi-queued-file --> dnn-bi-checkmark-icon
4545
dnn-button --> dnn-modal
4646
dnn-button --> dnn-button
47+
dnn-bi-logs --> dnn-select
48+
dnn-bi-logs --> dnn-bi-log-pagination
49+
dnn-select --> dnn-fieldset
4750
dnn-bi-api-users --> dnn-button
4851
dnn-bi-api-users --> dnn-modal
4952
dnn-bi-api-users --> dnn-input

‎DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/tabs/dnn-bi-logs/dnn-bi-log-pagination/dnn-bi-log-pagination.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
:host {
2+
.pagination {
3+
display: flex;
4+
margin: 0;
5+
padding: 1em;
6+
gap: 1em;
7+
li {
8+
flex: 0 0 fit-content;
9+
list-style: none;
10+
margin: 0;
11+
padding: 0;
12+
button {
13+
border: 1px solid transparent;
14+
background: none;
15+
}
16+
&.ellipsis {
17+
color: var(--dnn-color-neutral, #ededee);
18+
}
19+
&.active {
20+
button {
21+
border-bottom-color: var(--dnn-color-neutral, #ededee);
22+
}
23+
}
24+
}
25+
}
26+
}

‎DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/tabs/dnn-bi-logs/dnn-bi-log-pagination/dnn-bi-log-pagination.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import { Component, Host, h, Prop, Event, EventEmitter, Fragment } from '@stencil/core';
2+
import { Pagination } from '../../../../clients/event-log-client';
3+
4+
type PageItem = { type: 'page'; index: number; isCurrent: boolean } | { type: 'ellipsis' };
5+
6+
const ellipsisItem: PageItem = { type: 'ellipsis' };
7+
function toPageItem(index: number, current: number): PageItem {
8+
return {
9+
type: 'page',
10+
index: index,
11+
isCurrent: index === current,
12+
};
13+
}
14+
15+
function* makePagesIterator(current: number, lastIndex: number) {
16+
const start = Math.max(current - 5, 0);
17+
const end = Math.min(start + 10, lastIndex);
18+
if (start !== 0) {
19+
yield toPageItem(0, current);
20+
if (start === 2) {
21+
yield toPageItem(1, current);
22+
} else if (start !== 1) {
23+
yield ellipsisItem;
24+
}
25+
}
26+
27+
for (let i = start; i <= end; i++) {
28+
yield toPageItem(i, current);
29+
}
30+
31+
if (end !== lastIndex) {
32+
if (end === lastIndex - 2) {
33+
yield toPageItem(lastIndex - 1, current);
34+
} else if (end !== lastIndex - 1) {
35+
yield ellipsisItem;
36+
}
37+
38+
yield toPageItem(lastIndex, current);
39+
}
40+
}
41+
42+
@Component({
43+
tag: 'dnn-bi-log-pagination',
44+
styleUrl: 'dnn-bi-log-pagination.scss',
45+
shadow: true,
46+
})
47+
export class DnnBiLogPagination {
48+
/** The pagination */
49+
@Prop() public pagination!: Pagination;
50+
51+
@Event() public pageSelected: EventEmitter<number>;
52+
53+
private getPages(): PageItem[] {
54+
return Array.from(makePagesIterator(this.pagination.currentPage, this.pagination.pages - 1));
55+
}
56+
57+
render() {
58+
return (
59+
<Host>
60+
{this.pagination.pages > 1 && (
61+
<ol class="pagination">
62+
{this.getPages().map(item => (
63+
<>
64+
{item.type === 'page' && (
65+
<li class={item.isCurrent ? 'active' : ''}>
66+
<button
67+
disabled={item.isCurrent}
68+
onClick={e => {
69+
e.preventDefault();
70+
this.pageSelected.emit(item.index);
71+
}}
72+
>
73+
{item.index + 1}
74+
</button>
75+
</li>
76+
)}
77+
{item.type === 'ellipsis' && <li class="ellipsis">…</li>}
78+
</>
79+
))}
80+
</ol>
81+
)}
82+
</Host>
83+
);
84+
}
85+
}

‎DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/tabs/dnn-bi-logs/dnn-bi-log-pagination/readme.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# dnn-bi-log-pagination
2+
3+
4+
5+
<!-- Auto Generated Below -->
6+
7+
8+
## Properties
9+
10+
| Property | Attribute | Description | Type | Default |
11+
| ------------------------- | --------- | -------------- | ------------ | ----------- |
12+
| `pagination` _(required)_ | -- | The pagination | `Pagination` | `undefined` |
13+
14+
15+
## Events
16+
17+
| Event | Description | Type |
18+
| -------------- | ----------- | --------------------- |
19+
| `pageSelected` | | `CustomEvent<number>` |
20+
21+
22+
## Dependencies
23+
24+
### Used by
25+
26+
- [dnn-bi-logs](..)
27+
28+
### Graph
29+
```mermaid
30+
graph TD;
31+
dnn-bi-logs --> dnn-bi-log-pagination
32+
style dnn-bi-log-pagination fill:#f9f,stroke:#333,stroke-width:4px
33+
```
34+
35+
----------------------------------------------
36+
37+
*Built with [StencilJS](https://stenciljs.com/)*

‎DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/tabs/dnn-bi-logs/dnn-bi-logs.scss‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -80,26 +80,4 @@
8080
background-color: var(--dnn-color-neutral-dark, #999999);
8181
color: var(--dnn-color-neutral, #ededee);
8282
}
83-
84-
.pagination {
85-
display: flex;
86-
margin: 0;
87-
padding: 1em;
88-
gap: 1em;
89-
li {
90-
flex: 0 0 fit-content;
91-
list-style: none;
92-
margin: 0;
93-
padding: 0;
94-
button {
95-
border: 1px solid transparent;
96-
background: none;
97-
}
98-
&.active {
99-
button {
100-
border-bottom-color: var(--dnn-color-neutral, #ededee);
101-
}
102-
}
103-
}
104-
}
10583
}

‎DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/tabs/dnn-bi-logs/dnn-bi-logs.tsx‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -101,23 +101,7 @@ export class DnnBiLogs {
101101
))}
102102
</tbody>
103103
</table>
104-
{this.pagination.pages > 1 && (
105-
<ol class="pagination">
106-
{[...Array(this.pagination.pages)].map((_, index) => (
107-
<li class={index === this.pagination.currentPage ? 'active' : ''}>
108-
<button
109-
disabled={index === this.pagination.currentPage}
110-
onClick={e => {
111-
e.preventDefault();
112-
this.loadPage(index).catch(console.error);
113-
}}
114-
>
115-
{index + 1}
116-
</button>
117-
</li>
118-
))}
119-
</ol>
120-
)}
104+
<dnn-bi-log-pagination pagination={this.pagination} onPageSelected={e => this.loadPage(e.detail).catch(console.error)} />
121105
</div>
122106
</div>
123107
</div>

‎DNN Platform/Modules/BulkInstall/BulkInstall.Web/src/components/tabs/dnn-bi-logs/readme.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,17 @@
99

1010
- [dnn-bulk-install](../../dnn-bulk-install)
1111

12+
### Depends on
13+
14+
- dnn-select
15+
- [dnn-bi-log-pagination](dnn-bi-log-pagination)
16+
1217
### Graph
1318
```mermaid
1419
graph TD;
20+
dnn-bi-logs --> dnn-select
21+
dnn-bi-logs --> dnn-bi-log-pagination
22+
dnn-select --> dnn-fieldset
1523
dnn-bulk-install --> dnn-bi-logs
1624
style dnn-bi-logs fill:#f9f,stroke:#333,stroke-width:4px
1725
```

0 commit comments

Comments
 (0)