From d7c0877403f4f26b93fc0ee6dc539dc8d53d6646 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Mon, 31 Jan 2022 15:45:36 -0800 Subject: [PATCH] Refactor archive tabs & navigation improvements (#123) closes #112 --- frontend/src/index.ts | 7 +- frontend/src/pages/archive/crawl-detail.ts | 2 +- .../pages/archive/crawl-templates-detail.ts | 12 ++- .../src/pages/archive/crawl-templates-list.ts | 4 +- frontend/src/pages/archive/crawls-list.ts | 2 +- frontend/src/pages/archive/index.ts | 100 ++++++++++-------- frontend/src/routes.ts | 4 +- 7 files changed, 75 insertions(+), 56 deletions(-) diff --git a/frontend/src/index.ts b/frontend/src/index.ts index bf8b3d4f..3b1d87e9 100644 --- a/frontend/src/index.ts +++ b/frontend/src/index.ts @@ -383,9 +383,7 @@ export class App extends LiteElement { .userInfo=${this.userInfo} .viewStateData=${this.viewState.data} archiveId=${this.viewState.params.id} - archiveTab=${this.viewState.params.crawlConfigId - ? "crawl-templates" - : (this.viewState.params.tab as ArchiveTab)} + archiveTab=${this.viewState.params.tab as ArchiveTab} crawlConfigId=${this.viewState.params.crawlConfigId} crawlId=${this.viewState.params.crawlId} ?isAddingMember=${this.viewState.route === "archiveAddMember"} @@ -480,6 +478,9 @@ export class App extends LiteElement { event.stopPropagation(); this.navigate(event.detail.url, event.detail.state); + + // Scroll to top of page + window.scrollTo({ top: 0 }); } onUserInfoChange(event: CustomEvent>) { diff --git a/frontend/src/pages/archive/crawl-detail.ts b/frontend/src/pages/archive/crawl-detail.ts index f553b5a1..804c2e72 100644 --- a/frontend/src/pages/archive/crawl-detail.ts +++ b/frontend/src/pages/archive/crawl-detail.ts @@ -153,7 +153,7 @@ export class CrawlDetail extends LiteElement { ? html` ${this.crawl.configName} diff --git a/frontend/src/pages/archive/crawl-templates-detail.ts b/frontend/src/pages/archive/crawl-templates-detail.ts index 00dcb561..ecb59d3d 100644 --- a/frontend/src/pages/archive/crawl-templates-detail.ts +++ b/frontend/src/pages/archive/crawl-templates-detail.ts @@ -218,9 +218,11 @@ export class CrawlTemplatesDetail extends LiteElement { ? html` { const hasChanges = this.isEditing && this.editedSchedule; @@ -470,7 +472,9 @@ export class CrawlTemplatesDetail extends LiteElement { }); this.navTo( - `/archives/${this.archiveId}/crawl-templates/${this.crawlTemplate!.id}` + `/archives/${this.archiveId}/crawl-templates/config/${ + this.crawlTemplate!.id + }` ); } catch (e: any) { console.error(e); diff --git a/frontend/src/pages/archive/crawl-templates-list.ts b/frontend/src/pages/archive/crawl-templates-list.ts index d28aa653..0716beaf 100644 --- a/frontend/src/pages/archive/crawl-templates-list.ts +++ b/frontend/src/pages/archive/crawl-templates-list.ts @@ -95,13 +95,13 @@ export class CrawlTemplatesList extends LiteElement { role="button" @click=${() => { this.navTo( - `/archives/${this.archiveId}/crawl-templates/${t.id}` + `/archives/${this.archiveId}/crawl-templates/config/${t.id}` ); }} >
{ diff --git a/frontend/src/pages/archive/crawls-list.ts b/frontend/src/pages/archive/crawls-list.ts index e813e065..8eef4044 100644 --- a/frontend/src/pages/archive/crawls-list.ts +++ b/frontend/src/pages/archive/crawls-list.ts @@ -412,7 +412,7 @@ export class CrawlsList extends LiteElement { role="menuitem" @click=${(e: any) => { this.navTo( - `/archives/${this.archiveId}/crawl-templates/${crawl.cid}` + `/archives/${this.archiveId}/crawl-templates/config/${crawl.cid}` ); }} > diff --git a/frontend/src/pages/archive/index.ts b/frontend/src/pages/archive/index.ts index 474a5797..0a3647bb 100644 --- a/frontend/src/pages/archive/index.ts +++ b/frontend/src/pages/archive/index.ts @@ -89,6 +89,29 @@ export class Archive extends LiteElement { const showMembersTab = Boolean(this.archive.users); + let tabPanelContent = "" as any; + + switch (this.archiveTab) { + case "crawls": + tabPanelContent = this.renderCrawls(); + break; + case "crawl-templates": + tabPanelContent = this.renderCrawlTemplates(); + break; + case "members": + if (this.isAddingMember) { + tabPanelContent = this.renderAddMember(); + } else { + tabPanelContent = this.renderMembers(); + } + break; + default: + tabPanelContent = html``; + break; + } + return html`
`; } - private renderSettings() { - return html` TODO `; + private renderNavTab({ + tabName, + label, + }: { + tabName: ArchiveTab; + label: string; + }) { + const isActive = this.archiveTab === tabName; + + return html` + + ${label} + + `; } private renderCrawls() { diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts index 5d07232f..1d2dab68 100644 --- a/frontend/src/routes.ts +++ b/frontend/src/routes.ts @@ -15,8 +15,8 @@ export const ROUTES = { archiveNewResourceTab: "/archives/:id/:tab/new", archiveAddMember: "/archives/:id/:tab/add-member", crawl: "/archives/:id/:tab/crawl/:crawlId", - crawlTemplate: "/archives/:id/crawl-templates/:crawlConfigId", - crawlTemplateEdit: "/archives/:id/crawl-templates/:crawlConfigId?edit", + crawlTemplate: "/archives/:id/:tab/config/:crawlConfigId", + crawlTemplateEdit: "/archives/:id/:tab/config/:crawlConfigId?edit", users: "/users", usersInvite: "/users/invite", } as const;