mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
feat: initial breadcrumbs
This commit is contained in:
Torsten Dittmann
@@ -9,8 +9,14 @@
|
||||
import LightMode from '$lib/images/mode/light-mode.svg';
|
||||
import DarkMode from '$lib/images/mode/dark-mode.svg';
|
||||
import SystemMode from '$lib/images/mode/system-mode.svg';
|
||||
import { breadcrumbs as breadcrumbsStore, level } from '$lib/stores/layout';
|
||||
|
||||
let showDropdown = false;
|
||||
|
||||
$: breadcrumbs = [...$breadcrumbsStore]
|
||||
.map(([level, value]) => ({ level, value }))
|
||||
.sort((a, b) => (a.level > b.level ? 1 : -1))
|
||||
.filter((n) => n.level <= $level);
|
||||
</script>
|
||||
|
||||
<a class="logo" href={`${base}/console`}>
|
||||
@@ -18,9 +24,11 @@
|
||||
</a>
|
||||
<nav class="breadcrumbs is-only-desktop" aria-label="breadcrumb">
|
||||
<ol class="breadcrumbs-list">
|
||||
<li class="breadcrumbs-item">
|
||||
<a href="#/">Home</a>
|
||||
</li>
|
||||
{#each breadcrumbs as breadcrumb}
|
||||
<li class="breadcrumbs-item">
|
||||
<a href={breadcrumb.value.href}>{breadcrumb.value.title}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
|
||||
+34
-12
@@ -6,18 +6,18 @@ export type Tab = {
|
||||
title: string;
|
||||
};
|
||||
|
||||
export const title = writable<string>('');
|
||||
export const backButton = writable<string>('');
|
||||
export const copyData = writable({
|
||||
text: '',
|
||||
value: ''
|
||||
});
|
||||
export const tabs = writable<Tab[]>([]);
|
||||
|
||||
export function updateLayout(args: {
|
||||
export type Breadcrumb = {
|
||||
href: string;
|
||||
title: string;
|
||||
level?: number;
|
||||
};
|
||||
|
||||
export type updateLayoutArguments = {
|
||||
title: string;
|
||||
level?: number;
|
||||
tabs?: Tab[];
|
||||
back?: string;
|
||||
breadcrumbs?: Breadcrumb[] | Breadcrumb;
|
||||
copy?: {
|
||||
text: string;
|
||||
value: string;
|
||||
@@ -26,13 +26,25 @@ export function updateLayout(args: {
|
||||
from: URL | null;
|
||||
to: URL;
|
||||
};
|
||||
}) {
|
||||
};
|
||||
|
||||
export const level = writable<number>();
|
||||
export const title = writable<string>('');
|
||||
export const backButton = writable<string>('');
|
||||
export const tabs = writable<Tab[]>([]);
|
||||
export const breadcrumbs = writable<Map<number, Breadcrumb>>(new Map());
|
||||
export const copyData = writable({
|
||||
text: '',
|
||||
value: ''
|
||||
});
|
||||
|
||||
export function updateLayout(args: updateLayoutArguments) {
|
||||
const projectId = get(project)?.$id;
|
||||
const base = projectId ? `/console/${projectId}` : `/console`;
|
||||
|
||||
if (args?.navigate?.to) {
|
||||
const oldTabs = get(tabs);
|
||||
if (oldTabs.some((t) => `${base}/${t.href}` === args.navigate.to.pathname)) {
|
||||
const previousTabs = get(tabs);
|
||||
if (previousTabs.some((t) => `${base}/${t.href}` === args.navigate.to.pathname)) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
@@ -40,5 +52,15 @@ export function updateLayout(args: {
|
||||
title.set(args.title);
|
||||
backButton.set(args.back ?? null);
|
||||
copyData.set(args.copy ?? null);
|
||||
level.set(args.level ?? null);
|
||||
tabs.set(args.tabs ?? []);
|
||||
|
||||
if (args.breadcrumbs) {
|
||||
if (!Array.isArray(args.breadcrumbs)) {
|
||||
args.breadcrumbs = [args.breadcrumbs];
|
||||
}
|
||||
for (const breadcrumb of args.breadcrumbs) {
|
||||
breadcrumbs.update((n) => n.set(breadcrumb.level ?? args.level, breadcrumb));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
import { collection } from './databases/database/[database]/collection/[collection]/store';
|
||||
import { UploadBox } from '$lib/components';
|
||||
import { project } from './store';
|
||||
import { onMount } from 'svelte';
|
||||
import { afterNavigate } from '$app/navigation';
|
||||
import { updateLayout } from '$lib/stores/layout';
|
||||
import type { Models } from '@aw-labs/appwrite-console';
|
||||
|
||||
type Attributes =
|
||||
@@ -18,14 +21,7 @@
|
||||
| Models.AttributeUrl;
|
||||
|
||||
$: projectId = $page.params.project;
|
||||
$: {
|
||||
if ($project?.$id !== projectId) {
|
||||
setProject(projectId);
|
||||
if (browser) {
|
||||
project.load(projectId);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (browser) {
|
||||
sdkForConsole.client.subscribe<Attributes | Models.Index>('console', (message) => {
|
||||
if (message.events.includes('collections.*.attributes.*.create')) {
|
||||
@@ -47,11 +43,43 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
onMount(handle);
|
||||
afterNavigate(handle);
|
||||
|
||||
let loaded = false;
|
||||
async function handle(event = null) {
|
||||
if ($project?.$id !== projectId) {
|
||||
setProject(projectId);
|
||||
if (browser) {
|
||||
await project.load(projectId);
|
||||
}
|
||||
}
|
||||
// TODO: make this part of state
|
||||
const organisation = await sdkForConsole.teams.get($project.teamId);
|
||||
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: $project.name,
|
||||
level: 2,
|
||||
breadcrumbs: [
|
||||
{
|
||||
href: '#',
|
||||
title: organisation.name
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
title: $project.name
|
||||
}
|
||||
]
|
||||
});
|
||||
loaded = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if $project}
|
||||
{#if loaded}
|
||||
<slot />
|
||||
{:else}
|
||||
loading
|
||||
{/if}
|
||||
|
||||
<UploadBox />
|
||||
|
||||
@@ -11,7 +11,12 @@
|
||||
function handle(event = null) {
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: 'Databases'
|
||||
title: 'Databases',
|
||||
level: 3,
|
||||
breadcrumbs: {
|
||||
href: '#',
|
||||
title: 'Databases'
|
||||
}
|
||||
});
|
||||
loaded = true;
|
||||
}
|
||||
|
||||
@@ -22,6 +22,11 @@
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: $database.name,
|
||||
level: 4,
|
||||
breadcrumbs: {
|
||||
href: '#',
|
||||
title: $database.name
|
||||
},
|
||||
tabs: [
|
||||
{
|
||||
href: path,
|
||||
|
||||
+5
@@ -22,6 +22,11 @@
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: $collection.name,
|
||||
level: 5,
|
||||
breadcrumbs: {
|
||||
href: '#',
|
||||
title: $collection.name
|
||||
},
|
||||
back: `${base}/console/${$page.params.project}/database`,
|
||||
tabs: [
|
||||
{
|
||||
|
||||
+7
-1
@@ -17,9 +17,15 @@
|
||||
if ($doc?.$id !== documentId) {
|
||||
await doc.load(collectionId, documentId);
|
||||
}
|
||||
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: `Document - ${$doc.$id}`,
|
||||
title: $doc.$id,
|
||||
level: 6,
|
||||
breadcrumbs: {
|
||||
title: $doc.$id,
|
||||
href: '#'
|
||||
},
|
||||
tabs: [
|
||||
{
|
||||
href: path,
|
||||
|
||||
@@ -9,7 +9,12 @@
|
||||
function handle(event = null) {
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: 'Functions'
|
||||
title: 'Functions',
|
||||
level: 3,
|
||||
breadcrumbs: {
|
||||
href: '#',
|
||||
title: 'Functions'
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -19,6 +19,11 @@
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: $func.name,
|
||||
level: 4,
|
||||
breadcrumbs: {
|
||||
title: $func.name,
|
||||
href: '#'
|
||||
},
|
||||
tabs: [
|
||||
{
|
||||
href: path,
|
||||
|
||||
@@ -9,7 +9,12 @@
|
||||
function handle(event = null) {
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: 'API Keys'
|
||||
title: 'API Keys',
|
||||
level: 3,
|
||||
breadcrumbs: {
|
||||
href: '#',
|
||||
title: 'API Keys'
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -12,6 +12,11 @@
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: 'Settings',
|
||||
level: 3,
|
||||
breadcrumbs: {
|
||||
title: 'Settings',
|
||||
href: '#'
|
||||
},
|
||||
tabs: [
|
||||
{
|
||||
href: path,
|
||||
|
||||
@@ -12,6 +12,11 @@
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: 'Storage',
|
||||
level: 3,
|
||||
breadcrumbs: {
|
||||
title: 'Storage',
|
||||
href: '#'
|
||||
},
|
||||
tabs: [
|
||||
{
|
||||
href: path,
|
||||
|
||||
@@ -19,6 +19,11 @@
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: $bucket.name,
|
||||
level: 4,
|
||||
breadcrumbs: {
|
||||
title: $bucket.name,
|
||||
href: '#'
|
||||
},
|
||||
copy: {
|
||||
text: 'Bucket ID',
|
||||
value: bucketId
|
||||
|
||||
@@ -19,6 +19,11 @@
|
||||
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
level: 5,
|
||||
breadcrumbs: {
|
||||
href: '#',
|
||||
title: $file.name
|
||||
},
|
||||
back: `${base}/console/${$page.params.project}/storage/bucket/${bucketId}`,
|
||||
title: $file.name,
|
||||
copy: {
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
</svelte:fragment>
|
||||
<p>
|
||||
If you want to assign permissions specific to this file, you will need to
|
||||
update your <a class="link" href="#"> Bucket Settings</a> to enable File Level
|
||||
update your <a class="link" href="#/"> Bucket Settings</a> to enable File Level
|
||||
permissions.
|
||||
</p>
|
||||
</Alert>
|
||||
|
||||
@@ -14,6 +14,11 @@
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: 'Users',
|
||||
level: 3,
|
||||
breadcrumbs: {
|
||||
title: 'Users',
|
||||
href: '#'
|
||||
},
|
||||
tabs: [
|
||||
{
|
||||
href: path,
|
||||
|
||||
@@ -19,8 +19,13 @@
|
||||
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
level: 4,
|
||||
title: $team.name,
|
||||
back: `${base}/console/${$page.params.project}/users/teams`,
|
||||
breadcrumbs: {
|
||||
title: $team.name,
|
||||
href: '#'
|
||||
},
|
||||
copy: {
|
||||
text: 'Team ID',
|
||||
value: teamId
|
||||
|
||||
@@ -20,6 +20,11 @@
|
||||
updateLayout({
|
||||
navigate: event,
|
||||
title: $user.name,
|
||||
level: 4,
|
||||
breadcrumbs: {
|
||||
title: $user.name,
|
||||
href: '#'
|
||||
},
|
||||
back: `${base}/console/${$page.params.project}/users`,
|
||||
copy: {
|
||||
text: 'User ID',
|
||||
|
||||
Reference in New Issue
Block a user