feat: starting on a specific tab on the dash uses url params now

This commit is contained in:
Spectralitree 2021-12-15 13:56:36 +01:00
parent b0db6cb178
commit f31e3ec577
2 changed files with 12 additions and 7 deletions

View File

@ -40,8 +40,8 @@ import { get } from 'svelte/store';
<Dropdown nav inNavbar> <Dropdown nav inNavbar>
<DropdownToggle color="transparent">Dash</DropdownToggle> <DropdownToggle color="transparent">Dash</DropdownToggle>
<DropdownMenu end> <DropdownMenu end>
<Link style="text-decoration: none;" to="/dash" state={{tab: "system"}}><DropdownItem>System</DropdownItem></Link> <Link style="text-decoration: none;" to="/dash?tab=system"><DropdownItem>System</DropdownItem></Link>
<Link style="text-decoration: none;" to="/dash" state={{tab: "members"}}><DropdownItem>Members</DropdownItem></Link> <Link style="text-decoration: none;" to="/dash?tab=members"><DropdownItem>Members</DropdownItem></Link>
<DropdownItem divider /> <DropdownItem divider />
<DropdownItem on:click={logout}>Log out</DropdownItem> <DropdownItem on:click={logout}>Log out</DropdownItem>
</DropdownMenu> </DropdownMenu>

View File

@ -6,14 +6,19 @@
import System from '../lib/system/Main.svelte'; import System from '../lib/system/Main.svelte';
import PKAPI from '../api'; import PKAPI from '../api';
import Sys from '../api/system'; import Sys from '../api/system';
import List from '../lib/member/List.svelte';
let isPublic = false; let isPublic = false;
// get the state from the navigator so that we know which tab to start on // get the state from the navigator so that we know which tab to start on
let location = useLocation(); let location = useLocation();
let tabPane = $location.state && $location.state.tab; let params = $location.search && new URLSearchParams($location.search);
// if there is no state, default to system let tabPane: string;
if (tabPane === undefined) { if (params) {
tabPane = params.get("tab");
}
if (!tabPane) {
tabPane = "system"; tabPane = "system";
} }
@ -70,10 +75,10 @@
<Col class="mx-auto" xs={12} lg={10}> <Col class="mx-auto" xs={12} lg={10}>
<TabContent class="mt-3"> <TabContent class="mt-3">
<TabPane tabId="system" tab="System" active={tabPane === "system"}> <TabPane tabId="system" tab="System" active={tabPane === "system"}>
<System bind:user={user} bind:isPublic={isPublic} /> <System bind:user={user} bind:isPublic />
</TabPane> </TabPane>
<TabPane tabId="members" tab="Members" active={tabPane === "members"}> <TabPane tabId="members" tab="Members" active={tabPane === "members"}>
alo <List bind:isPublic />
</TabPane> </TabPane>
</TabContent> </TabContent>
</Col> </Col>