Skip to content

Commit 9b74fb9

Browse files
TorstenDittmannTorstenDittmann
authored
Merge pull request #28 from appwrite/feat-improve-layout-stores
feat: improve layout stores
2 parents 5b6d0a8 + d46188f commit 9b74fb9

File tree

18 files changed

+1460
-1370
lines changed

18 files changed

+1460
-1370
lines changed

‎.github/workflows/tests.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ jobs:
1919
with:
2020
node-version: 16
2121
- name: Audit dependencies
22-
run: npm audit --audit-level low
22+
run: npm audit --audit-level high
2323
- name: Install dependencies
2424
run: npm ci
2525
- name: Build Console

‎package-lock.json‎

Lines changed: 1164 additions & 1060 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "@appwrite/console",
33
"version": "0.0.1",
44
"engines": {
5-
"node": ">=14"
5+
"node": ">=16"
66
},
77
"scripts": {
88
"dev": "vite dev",
@@ -24,22 +24,22 @@
2424
"echarts": "^5.3.3"
2525
},
2626
"devDependencies": {
27-
"@playwright/test": "^1.23.2",
28-
"@sveltejs/adapter-auto": "1.0.0-next.55",
29-
"@sveltejs/kit": "1.0.0-next.367",
30-
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.49",
27+
"@playwright/test": "^1.23.4",
28+
"@sveltejs/adapter-auto": "1.0.0-next.62",
29+
"@sveltejs/kit": "1.0.0-next.379",
30+
"@sveltejs/vite-plugin-svelte": "^1.0.1",
3131
"@testing-library/dom": "^8.16.0",
3232
"@testing-library/jest-dom": "^5.16.4",
3333
"@testing-library/svelte": "^3.1.3",
34-
"@testing-library/user-event": "^14.2.1",
34+
"@testing-library/user-event": "^14.3.0",
3535
"@types/gtag.js": "^0.0.10",
36-
"@typescript-eslint/eslint-plugin": "^5.30.5",
37-
"@typescript-eslint/parser": "^5.30.5",
38-
"eslint": "^8.19.0",
36+
"@typescript-eslint/eslint-plugin": "^5.30.7",
37+
"@typescript-eslint/parser": "^5.30.7",
38+
"eslint": "^8.20.0",
3939
"eslint-config-prettier": "^8.5.0",
4040
"eslint-plugin-svelte3": "^4.0.0",
41-
"jest": "^28.1.2",
42-
"jest-environment-jsdom": "^28.1.2",
41+
"jest": "^28.1.3",
42+
"jest-environment-jsdom": "^28.1.3",
4343
"pre-commit": "^1.2.2",
4444
"prettier": "^2.7.1",
4545
"prettier-plugin-svelte": "^2.7.0",
@@ -48,10 +48,10 @@
4848
"svelte-check": "^2.8.0",
4949
"svelte-jester": "^2.3.2",
5050
"svelte-preprocess": "^4.10.7",
51-
"ts-jest": "^28.0.5",
51+
"ts-jest": "^28.0.7",
5252
"tslib": "^2.4.0",
5353
"typescript": "^4.7.4",
54-
"vite": "^2.9.14"
54+
"vite": "^3.0.0"
5555
},
5656
"type": "module",
5757
"jest": {

‎src/lib/stores/layout.ts‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { writable } from 'svelte/store';
1+
import { project } from '../../routes/console/[project]/store';
2+
import { get, writable } from 'svelte/store';
23

34
export type Tab = {
45
href: string;
@@ -12,3 +13,32 @@ export const copyData = writable({
1213
value: ''
1314
});
1415
export const tabs = writable<Tab[]>([]);
16+
17+
export function updateLayout(args: {
18+
title: string;
19+
tabs?: Tab[];
20+
back?: string;
21+
copy?: {
22+
text: string;
23+
value: string;
24+
};
25+
navigate?: {
26+
from: URL | null;
27+
to: URL;
28+
};
29+
}) {
30+
const projectId = get(project)?.$id;
31+
const base = projectId ? `/console/${projectId}` : `/console`;
32+
33+
if (args?.navigate?.to) {
34+
const oldTabs = get(tabs);
35+
if (oldTabs.some((t) => `${base}/${t.href}` === args.navigate.to.pathname)) {
36+
return;
37+
}
38+
}
39+
40+
title.set(args.title);
41+
backButton.set(args.back ?? null);
42+
copyData.set(args.copy ?? null);
43+
tabs.set(args.tabs ?? []);
44+
}

‎src/routes/console/[project]/databases/__layout.svelte‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,26 @@
11
<script>
22
import { afterNavigate } from '$app/navigation';
3-
import { tabs, title, backButton, copyData } from '$lib/stores/layout';
3+
import { updateLayout } from '$lib/stores/layout';
44
import { onMount } from 'svelte';
55
66
onMount(handle);
77
afterNavigate(handle);
88
9-
function handle() {
10-
title.set('Databases');
11-
backButton.set('');
12-
tabs.set([]);
9+
let loaded = false;
1310
14-
copyData.set({
15-
text: '',
16-
value: ''
11+
function handle(event = null) {
12+
updateLayout({
13+
navigate: event,
14+
title: 'Databases'
1715
});
16+
loaded = true;
1817
}
1918
</script>
2019

2120
<svelte:head>
2221
<title>Appwrite - Databases</title>
2322
</svelte:head>
2423

25-
<slot />
24+
{#if loaded}
25+
<slot />
26+
{/if}

‎src/routes/console/[project]/databases/database/[database]/__layout.svelte‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,38 @@
11
<script>
22
import { afterNavigate } from '$app/navigation';
3-
43
import { page } from '$app/stores';
5-
6-
import { tabs, title, backButton, copyData } from '$lib/stores/layout';
4+
import { updateLayout } from '$lib/stores/layout';
75
import { setDatabase } from '$lib/stores/sdk';
86
import { onMount } from 'svelte';
97
import { database } from './store';
108
119
const databaseId = $page.params.database;
10+
1211
const path = `databases/database/${databaseId}`;
1312
1413
onMount(handle);
1514
afterNavigate(handle);
1615
17-
async function handle() {
16+
async function handle(event = null) {
1817
if ($database?.$id !== databaseId) {
1918
setDatabase($page.params.database);
2019
await database.load();
21-
title.set(`Database - ${$database.name}`);
22-
} else if ($database) {
23-
title.set(`Database - ${$database.name}`);
2420
}
25-
backButton.set('');
2621
27-
copyData.set({
28-
text: '',
29-
value: ''
22+
updateLayout({
23+
navigate: event,
24+
title: $database.name,
25+
tabs: [
26+
{
27+
href: path,
28+
title: 'Collections'
29+
},
30+
{
31+
href: `${path}/usage`,
32+
title: 'Usage'
33+
}
34+
]
3035
});
31-
32-
tabs.set([
33-
{
34-
href: path,
35-
title: 'Collections'
36-
},
37-
{
38-
href: `${path}/usage`,
39-
title: 'Usage'
40-
}
41-
]);
4236
}
4337
</script>
4438

‎src/routes/console/[project]/databases/database/[database]/collection/[collection]/__layout.svelte‎

Lines changed: 24 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { afterNavigate } from '$app/navigation';
33
import { base } from '$app/paths';
44
import { page } from '$app/stores';
5-
import { tabs, title, backButton, copyData } from '$lib/stores/layout';
5+
import { updateLayout } from '$lib/stores/layout';
66
import { onMount } from 'svelte';
77
import { collection } from './store';
88
@@ -14,39 +14,34 @@
1414
onMount(handle);
1515
afterNavigate(handle);
1616
17-
async function handle() {
17+
async function handle(event = null) {
1818
if ($collection?.$id !== collectionId) {
1919
await collection.load(collectionId);
20-
title.set($collection.name);
21-
} else if ($collection) {
22-
title.set($collection.name);
2320
}
2421
25-
backButton.set(`${base}/console/${$page.params.project}/database`);
26-
27-
copyData.set({
28-
text: '',
29-
value: ''
22+
updateLayout({
23+
navigate: event,
24+
title: $collection.name,
25+
back: `${base}/console/${$page.params.project}/database`,
26+
tabs: [
27+
{
28+
href: path,
29+
title: 'Documents'
30+
},
31+
{
32+
href: `${path}/attributes`,
33+
title: 'Attributes'
34+
},
35+
{
36+
href: `${path}/indexes`,
37+
title: 'Indexes'
38+
},
39+
{
40+
href: `${path}/settings`,
41+
title: 'Settings'
42+
}
43+
]
3044
});
31-
32-
tabs.set([
33-
{
34-
href: path,
35-
title: 'Documents'
36-
},
37-
{
38-
href: `${path}/attributes`,
39-
title: 'Attributes'
40-
},
41-
{
42-
href: `${path}/indexes`,
43-
title: 'Indexes'
44-
},
45-
{
46-
href: `${path}/settings`,
47-
title: 'Settings'
48-
}
49-
]);
5045
}
5146
</script>
5247

‎src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/__layout.svelte‎

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { page } from '$app/stores';
3-
import { tabs, title, backButton, copyData } from '$lib/stores/layout';
3+
import { updateLayout } from '$lib/stores/layout';
44
import { doc } from './store';
55
import { onMount } from 'svelte';
66
import { afterNavigate } from '$app/navigation';
@@ -13,36 +13,31 @@
1313
onMount(handle);
1414
afterNavigate(handle);
1515
16-
async function handle() {
16+
async function handle(event = null) {
1717
if ($doc?.$id !== documentId) {
1818
await doc.load(collectionId, documentId);
19-
title.set(`Document - ${$doc.$id}`);
20-
} else if ($doc) {
21-
title.set(`Document - ${$doc.$id}`);
2219
}
23-
24-
backButton.set('');
25-
26-
copyData.set({
27-
text: '',
28-
value: ''
20+
updateLayout({
21+
navigate: event,
22+
title: `Document - ${$doc.$id}`,
23+
tabs: [
24+
{
25+
href: path,
26+
title: 'Overview'
27+
},
28+
{
29+
href: `${path}/activity`,
30+
title: 'Activity'
31+
}
32+
]
2933
});
30-
31-
tabs.set([
32-
{
33-
href: path,
34-
title: 'Overview'
35-
},
36-
{
37-
href: `${path}/activity`,
38-
title: 'Activity'
39-
}
40-
]);
4134
}
4235
</script>
4336

4437
<svelte:head>
4538
<title>Appwrite - Database Document</title>
4639
</svelte:head>
4740

48-
<slot />
41+
{#if $doc}
42+
<slot />
43+
{/if}

‎src/routes/console/[project]/functions/__layout.svelte‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,15 @@
11
<script>
22
import { afterNavigate } from '$app/navigation';
3-
4-
import { tabs, title, backButton, copyData } from '$lib/stores/layout';
3+
import { updateLayout } from '$lib/stores/layout';
54
import { onMount } from 'svelte';
65
76
onMount(handle);
87
afterNavigate(handle);
98
10-
function handle() {
11-
title.set('Functions');
12-
backButton.set('');
13-
tabs.set([]);
14-
15-
copyData.set({
16-
text: '',
17-
value: ''
9+
function handle(event = null) {
10+
updateLayout({
11+
navigate: event,
12+
title: 'Functions'
1813
});
1914
}
2015
</script>

0 commit comments

Comments
 (0)