Skip to content

Commit 2916928

Browse files
SuaYooSuaYoo
committed
paginate
1 parent 6f5adc6 commit 2916928

File tree

3 files changed

+95
-69
lines changed

3 files changed

+95
-69
lines changed

‎frontend/src/features/archived-items/item-dependency-tree/item-dependency-tree.stylesheet.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,29 @@
2222
@apply w-full;
2323
}
2424

25+
sl-tree-item:focus {
26+
@apply bg-cyan-50/50;
27+
}
28+
29+
sl-tree-item:hover .item-dependency-tree--detail,
30+
sl-tree-item:focus .item-dependency-tree--detail,
31+
sl-tree-item:hover .item-dependency-tree--detail sl-icon,
32+
sl-tree-item:focus .item-dependency-tree--detail sl-icon {
33+
@apply text-cyan-600;
34+
}
35+
2536
sl-tree-item::part(children)::before {
2637
left: calc(1rem - (var(--indent-guide-width) / 2));
2738
bottom: calc(1rem + var(--sl-border-radius-medium));
2839
}
2940

3041
.item-dependency-tree--row {
3142
grid-template-columns:
32-
1rem minmax(16rem, 1fr) minmax(8rem, 1fr) repeat(2, minmax(11rem, 1fr)) minmax(
33-
6rem,
34-
1fr
43+
1rem minmax(16rem, 1fr) minmax(8rem, 12rem) repeat(
44+
2,
45+
minmax(11rem, 13rem)
3546
)
47+
minmax(6rem, 8rem)
3648
2rem;
3749
@apply grid w-full items-center gap-2;
3850
}

‎frontend/src/features/archived-items/item-dependency-tree/item-dependency-tree.ts‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -192,23 +192,10 @@ export class ItemDependencyTree extends BtrixElement {
192192
class="item-dependency-tree--dependency"
193193
@click=${() => {
194194
const item = this.tree?.querySelector<SlTreeItem>(`#${id}`);
195-
// Highlight item
196-
const classes = [tw`bg-cyan-50`];
197195
198196
if (item) {
199197
item.scrollIntoView({ behavior: "smooth" });
200198
item.focus();
201-
item.classList.add(...classes);
202-
const removeHighlight = () => item.classList.remove(...classes);
203-
204-
item.addEventListener("click", removeHighlight, { once: true });
205-
206-
this.timerIds.push(
207-
window.setTimeout(() => {
208-
removeHighlight();
209-
item.removeEventListener("click", removeHighlight);
210-
}, 2000),
211-
);
212199
}
213200
}}
214201
>

‎frontend/src/pages/org/collection-detail.ts‎

Lines changed: 80 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import {
3838
type Collection,
3939
type PublicCollection,
4040
} from "@/types/collection";
41-
import type { ArchivedItem, Crawl, Upload, Workflow } from "@/types/crawler";
41+
import type { ArchivedItem, Crawl, Upload } from "@/types/crawler";
4242
import type { CrawlState } from "@/types/crawlState";
4343
import { SortDirection } from "@/types/utils";
4444
import { isCrawl, isCrawlReplay, renderName } from "@/utils/crawler";
@@ -95,6 +95,9 @@ export class CollectionDetail extends BtrixElement {
9595
@state()
9696
private rwpDoFullReload = false;
9797

98+
@state()
99+
private dedupeCrawlsPage = 1;
100+
98101
@consume({ context: viewStateContext })
99102
viewState?: ViewStateContext;
100103

@@ -144,25 +147,27 @@ export class CollectionDetail extends BtrixElement {
144147
return this.appState.isCrawler;
145148
}
146149

147-
private readonly dedupeWorkflowsTask = new Task(this, {
148-
task: async ([collectionId], { signal }) => {
149-
const query = queryString.stringify({
150-
dedupeCollId: collectionId,
151-
sortBy: "name",
152-
});
153-
154-
return this.api.fetch<APIPaginatedList<Workflow>>(
155-
`/orgs/${this.orgId}/crawlconfigs?${query}`,
156-
{ signal },
157-
);
158-
},
159-
args: () => [this.collectionId] as const,
160-
});
150+
// private readonly dedupeWorkflowsTask = new Task(this, {
151+
// task: async ([collectionId], { signal }) => {
152+
// const query = queryString.stringify({
153+
// dedupeCollId: collectionId,
154+
// sortBy: "name",
155+
// });
156+
157+
// return this.api.fetch<APIPaginatedList<Workflow>>(
158+
// `/orgs/${this.orgId}/crawlconfigs?${query}`,
159+
// { signal },
160+
// );
161+
// },
162+
// args: () => [this.collectionId] as const,
163+
// });
161164

162165
private readonly dedupeCrawlsTask = new Task(this, {
163-
task: async ([collectionId], { signal }) => {
166+
task: async ([collectionId, page], { signal }) => {
164167
const query = queryString.stringify({
165168
dedupeCollId: collectionId,
169+
page,
170+
pageSize: INITIAL_ITEMS_PAGE_SIZE,
166171
sortBy: "finished",
167172
sortDirection: SortDirection.Descending,
168173
});
@@ -172,7 +177,7 @@ export class CollectionDetail extends BtrixElement {
172177
{ signal },
173178
);
174179
},
175-
args: () => [this.collectionId] as const,
180+
args: () => [this.collectionId, this.dedupeCrawlsPage] as const,
176181
});
177182

178183
protected async willUpdate(
@@ -893,51 +898,73 @@ export class CollectionDetail extends BtrixElement {
893898
private renderDedupeCrawls() {
894899
const loading = () =>
895900
html`<sl-skeleton effect="sheen" class="h-9"></sl-skeleton>`;
901+
const crawls = (crawls: APIPaginatedList<Crawl>) =>
902+
crawls.items.length
903+
? html`
904+
<div class="overflow-hidden rounded border">
905+
<btrix-item-dependency-tree
906+
.items=${crawls.items}
907+
></btrix-item-dependency-tree>
908+
</div>
909+
910+
<footer class="mt-6 flex justify-center">
911+
<btrix-pagination
912+
page=${crawls.page}
913+
totalCount=${crawls.total}
914+
size=${crawls.pageSize}
915+
@page-change=${async (e: PageChangeEvent) => {
916+
this.dedupeCrawlsPage = e.detail.page;
917+
918+
await this.dedupeCrawlsTask.taskComplete;
919+
920+
// Scroll to top of list
921+
// TODO once deep-linking is implemented, scroll to top of pushstate
922+
this.scrollIntoView({ behavior: "smooth" });
923+
}}
924+
></btrix-pagination>
925+
</footer>
926+
`
927+
: panelBody({
928+
content: emptyMessage({
929+
message: msg("No crawls found."),
930+
}),
931+
});
932+
896933
return panel({
897934
heading: msg("Indexed Crawls"),
898935
body: html`${this.dedupeCrawlsTask.render({
899936
initial: loading,
900-
pending: loading,
901-
complete: ({ items }) =>
902-
items.length
903-
? html`
904-
<div class="overflow-hidden rounded border">
905-
<btrix-item-dependency-tree
906-
.items=${items}
907-
></btrix-item-dependency-tree>
908-
</div>
909-
`
910-
: panelBody({
911-
content: emptyMessage({
912-
message: msg("No crawls added."),
913-
}),
914-
}),
937+
pending: () =>
938+
this.dedupeCrawlsTask.value
939+
? crawls(this.dedupeCrawlsTask.value)
940+
: loading(),
941+
complete: crawls,
915942
})}`,
916943
});
917944
}
918945

919946
private renderDedupeWorkflows() {
920-
const loading = () =>
921-
html`<sl-skeleton effect="sheen" class="h-9"></sl-skeleton>`;
922-
return panel({
923-
heading: msg("Workflows"),
924-
body: html`${this.dedupeWorkflowsTask.render({
925-
initial: loading,
926-
pending: loading,
927-
complete: ({ items }) =>
928-
items.length
929-
? html`
930-
<btrix-dedupe-workflows
931-
.workflows=${items}
932-
></btrix-dedupe-workflows>
933-
`
934-
: panelBody({
935-
content: emptyMessage({
936-
message: msg("No crawls added."),
937-
}),
938-
}),
939-
})}`,
940-
});
947+
// const loading = () =>
948+
// html`<sl-skeleton effect="sheen" class="h-9"></sl-skeleton>`;
949+
// return panel({
950+
// heading: msg("Workflows"),
951+
// body: html`${this.dedupeWorkflowsTask.render({
952+
// initial: loading,
953+
// pending: loading,
954+
// complete: ({ items }) =>
955+
// items.length
956+
// ? html`
957+
// <btrix-dedupe-workflows
958+
// .workflows=${items}
959+
// ></btrix-dedupe-workflows>
960+
// `
961+
// : panelBody({
962+
// content: emptyMessage({
963+
// message: msg("No crawls added."),
964+
// }),
965+
// }),
966+
// })}`,
967+
// });
941968
}
942969

943970
private renderDedupeOverview() {

0 commit comments

Comments
 (0)