liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard): change tab query on tab change

Browse Source
This commit is contained in:
Jake/Rads 2022-06-23 23:45:23 +02:00
parent dd7a6f0be0
commit 5985bb4f8a
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
dashboard/src/pages/Dash.svelte
View File

@ -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>

8
dashboard/src/pages/Profile.svelte
View File

@ -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';
@ -28,6 +28,10 @@
if (!tabPane) { if (!tabPane) {
tabPane = "system"; tabPane = "system";
} }
function navigateTo(tab: string|number) {
navigate(`./${id}?tab=${tab}`)
}
let err: string; let err: string;
@ -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>