Rotimi Best
b96d91cd7c
* chore: migration to SvelteKit 2 * stage 1: migrate to svelte 5 and fix rerendering issues * stage 2: fix more $: reactivity across dashboard * fix merge conflicts * chore: migrate code in main to svelte 5 * chore: update preventDefault * chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte * chore: enforce .ts across dashboard * rename from classroomio-com to website * stage-3: Replace carbon icon svelte with lucide icon * update lock file * chore: finish icon replacement * fix: settings and setup page multiple rerender * stage 3: More icon and rerendering fixes * feat: setup drizzle and better auth * fix: onboarding validation error showing translation key #586 (#593) * fix: onboarding validation error showing translation key #586 * fix: remove debug log for profile update errors * chore: add a clean command * fix: remove message from email verification response
104 lines
2.7 KiB
Svelte
104 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/state';
|
|
import { Tabs, Tab, TabContent } from 'carbon-components-svelte';
|
|
import Profile from './Profile.svelte';
|
|
import LandingpageSettings from './LandingpageSettings.svelte';
|
|
// import Account from './Account.svelte';
|
|
import OrgSettings from './OrgSettings.svelte';
|
|
import Billing from './Billing.svelte';
|
|
import { goto } from '$app/navigation';
|
|
import { isOrgAdmin } from '$lib/utils/store/org';
|
|
import Integrations from './Integrations.svelte';
|
|
import { t } from '$lib/utils/functions/translations';
|
|
|
|
interface TabItem {
|
|
key: number;
|
|
label: string;
|
|
tabKey: string;
|
|
href: string;
|
|
disabled: boolean;
|
|
}
|
|
|
|
let query = $derived(new URLSearchParams(page.url.search));
|
|
let tabKey = $derived(query.get('tab') || '');
|
|
|
|
let tabs: TabItem[] = $derived([
|
|
{
|
|
key: 0,
|
|
label: $t('settings.tabs.profile_tab'),
|
|
tabKey: '',
|
|
href: page.url.pathname,
|
|
disabled: false
|
|
},
|
|
{
|
|
key: 1,
|
|
label: $t('settings.tabs.organization_tab'),
|
|
tabKey: 'org',
|
|
href: `${page.url.pathname}?tab=org`,
|
|
disabled: !$isOrgAdmin
|
|
},
|
|
{
|
|
key: 2,
|
|
label: $t('settings.tabs.landing_page_tab'),
|
|
tabKey: 'landingpage',
|
|
href: `${page.url.pathname}?tab=landingpage`,
|
|
disabled: !$isOrgAdmin
|
|
},
|
|
{
|
|
key: 3,
|
|
label: $t('settings.tabs.billing_tab'),
|
|
tabKey: 'billing',
|
|
href: `${page.url.pathname}?tab=billing`,
|
|
disabled: !$isOrgAdmin
|
|
},
|
|
{
|
|
key: 4,
|
|
label: $t('settings.tabs.integrations_tab'),
|
|
tabKey: 'integrations',
|
|
href: `${page.url.pathname}?tab=integrations`,
|
|
disabled: false
|
|
}
|
|
]);
|
|
let selected = $derived(getSelectedByTab(tabs, tabKey));
|
|
|
|
function getSelectedByTab(_tabs: TabItem[], tabKey = '') {
|
|
const tab = _tabs.find((t) => t.tabKey === tabKey);
|
|
return tab ? tab.key : 0;
|
|
}
|
|
|
|
function onTabChange(e: CustomEvent<number>) {
|
|
const key = e.detail;
|
|
const tab = tabs.find((t) => t.key === key);
|
|
if (tab) {
|
|
goto(tab.href);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<Tabs autoWidth bind:selected on:change={onTabChange}>
|
|
{#each tabs as tab}
|
|
<Tab label={tab.label} href={tab.href} disabled={tab.disabled} />
|
|
{/each}
|
|
<!-- <Tab label="Account" /> -->
|
|
<svelte:fragment slot="content">
|
|
<TabContent class="w-full p-0">
|
|
<Profile />
|
|
</TabContent>
|
|
<!-- <TabContent>
|
|
<Account />
|
|
</TabContent> -->
|
|
<TabContent class="w-full p-0">
|
|
<OrgSettings />
|
|
</TabContent>
|
|
<TabContent class="w-full p-0">
|
|
<LandingpageSettings />
|
|
</TabContent>
|
|
<TabContent class="w-full p-0">
|
|
<Billing />
|
|
</TabContent>
|
|
<TabContent class="w-full p-0">
|
|
<Integrations />
|
|
</TabContent>
|
|
</svelte:fragment>
|
|
</Tabs>
|