fix(dashboard): change tab query on tab change
This commit is contained in:
parent
dd7a6f0be0
commit
5985bb4f8a
@ -12,7 +12,7 @@
|
|||||||
// 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 params = $location.search && new URLSearchParams($location.search);
|
let params = $location.search && new URLSearchParams($location.search);
|
||||||
let tabPane: string;
|
let tabPane: string|number;
|
||||||
if (params) {
|
if (params) {
|
||||||
tabPane = params.get("tab");
|
tabPane = params.get("tab");
|
||||||
}
|
}
|
||||||
@ -21,6 +21,14 @@
|
|||||||
tabPane = "system";
|
tabPane = "system";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// change the URL when changing tabs
|
||||||
|
function navigateTo(tab: string|number) {
|
||||||
|
navigate(`./dash?tab=${tab}`);
|
||||||
|
tabPane = tab;
|
||||||
|
}
|
||||||
|
|
||||||
// subscribe to the cached user in the store
|
// subscribe to the cached user in the store
|
||||||
let current;
|
let current;
|
||||||
currentUser.subscribe(value => {
|
currentUser.subscribe(value => {
|
||||||
@ -77,7 +85,7 @@
|
|||||||
<Row>
|
<Row>
|
||||||
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
<Col class="mx-auto" xs={12} lg={11} xl={10}>
|
||||||
<h2 class="visually-hidden">Viewing your own system</h2>
|
<h2 class="visually-hidden">Viewing your own system</h2>
|
||||||
<TabContent class="mt-3">
|
<TabContent class="mt-3" on:tab={(e) => navigateTo(e.detail)}>
|
||||||
<TabPane tabId="system" tab="System" active={tabPane === "system"}>
|
<TabPane tabId="system" tab="System" active={tabPane === "system"}>
|
||||||
<SystemMain bind:user={user} isPublic={false} />
|
<SystemMain bind:user={user} isPublic={false} />
|
||||||
</TabPane>
|
</TabPane>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Container, Col, Row, TabContent, TabPane, Alert, Spinner } from 'sveltestrap';
|
import { Container, Col, Row, TabContent, TabPane, Alert, Spinner } from 'sveltestrap';
|
||||||
import { useParams, useLocation } from "svelte-navigator";
|
import { useParams, useLocation, navigate } from "svelte-navigator";
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
import SystemMain from '../lib/system/Main.svelte';
|
import SystemMain from '../lib/system/Main.svelte';
|
||||||
@ -29,6 +29,10 @@
|
|||||||
tabPane = "system";
|
tabPane = "system";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function navigateTo(tab: string|number) {
|
||||||
|
navigate(`./${id}?tab=${tab}`)
|
||||||
|
}
|
||||||
|
|
||||||
let err: string;
|
let err: string;
|
||||||
|
|
||||||
let title = "system"
|
let title = "system"
|
||||||
@ -66,7 +70,7 @@
|
|||||||
<Alert color="danger">{err}</Alert>
|
<Alert color="danger">{err}</Alert>
|
||||||
{:else}
|
{:else}
|
||||||
<Alert color="info" aria-hidden>You are currently <b>viewing</b> a system.</Alert>
|
<Alert color="info" aria-hidden>You are currently <b>viewing</b> a system.</Alert>
|
||||||
<TabContent class="mt-3">
|
<TabContent class="mt-3" on:tab={(e) => navigateTo(e.detail)}>
|
||||||
<TabPane tabId="system" tab="System" active={tabPane === "system"}>
|
<TabPane tabId="system" tab="System" active={tabPane === "system"}>
|
||||||
<SystemMain bind:user isPublic={true} />
|
<SystemMain bind:user isPublic={true} />
|
||||||
</TabPane>
|
</TabPane>
|
||||||
|
Loading…
Reference in New Issue
Block a user