Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implemented most of the pages

Browse Source
This commit is contained in:
Arman
2022-08-23 14:27:08 +02:00
parent 9dec0ef2db
commit 9d4ae0329a
8 changed files with 80 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/layout/shell.svelte
+23 -7
View File
@@ -4,13 +4,12 @@
import { Cover } from '.';
import { Copy, DropList, DropListItem } from '$lib/components';
import { Pill } from '$lib/elements';
import { organization } from '../../routes/console/store';
import { Button } from '$lib/elements/forms';
import { organization, newOrgModal, newMemberModal } from '../../routes/console/store';
export let isOpen = false;
export let showSideNavigation = false;
// $: base = `/console/${$page.params.project}`;
let tabsList: HTMLUListElement;
let showLeft = false;
let showRight = false;
@@ -99,19 +98,36 @@
</h1>
</button>
<svelte:fragment slot="list">
{#each $titleDropdown as organization}
<DropListItem>
{organization.name}
{#each $titleDropdown as org}
<DropListItem
on:click={() => {
showDropdown = false;
if (org.$id !== $organization.$id) {
organization.load(org.$id);
}
}}>
{org.name}
</DropListItem>
{/each}
</svelte:fragment>
<svelte:fragment slot="other">
<section class="drop-section">
<ul class="drop-list">
<DropListItem icon="plus">New Organizations</DropListItem>
<DropListItem
icon="plus"
on:click={() => {
showDropdown = false;
newOrgModal.set(true);
}}>New Organization</DropListItem>
</ul>
</section></svelte:fragment>
</DropList>
<div class="u-margin-inline-start-auto">
<Button secondary on:click={() => newMemberModal.set(true)}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Invite</span>
</Button>
</div>
{:else}
<h1 class="heading-level-4">
<span class="text"> {$title}</span>
src/routes/console/__layout-intro.svelte
+13 -2
View File
@@ -4,7 +4,11 @@
import { updateLayout } from '$lib/stores/layout';
import { onMount } from 'svelte';
import { afterNavigate } from '$app/navigation';
import { organizationList, organization } from './store';
import { organizationList, organization, newOrgModal, newMemberModal } from './store';
import CreateMember from './_createMember.svelte';
import Create from './_createOrganization.svelte';
const created = () => console.log('test');
onMount(handle);
afterNavigate(handle);
@@ -16,7 +20,7 @@
}
updateLayout({
navigate: event,
title: `${$organizationList.teams[0].name}`,
title: $organization?.name ?? `${$organizationList.teams[0].name}`,
titleDropdown: $organizationList.teams,
level: 0,
customBase: '',
@@ -40,6 +44,10 @@
]
});
}
organization.subscribe(() => {
handle();
});
</script>
<svelte:head>
@@ -55,3 +63,6 @@
<footer class="main-footer" />
</Shell>
{/if}
<Create bind:show={$newOrgModal} on:created={() => created()} />
<CreateMember bind:showCreate={$newMemberModal} on:created={() => created()} />
src/routes/console/__layout.svelte
+2 -1
View File
@@ -3,9 +3,10 @@
import SideNavigation from '$lib/layout/navigation.svelte';
import Header from '$lib/layout/header.svelte';
import { updateLayout } from '$lib/stores/layout';
import { organization } from './store';
updateLayout({
title: 'Projects',
title: $organization.name ?? 'Projects',
level: 0
});
</script>
src/routes/console/_deleteOrganization.svelte
+4 -1
View File
@@ -5,7 +5,7 @@
import { Button, Form } from '$lib/elements/forms';
import { addNotification } from '$lib/stores/notifications';
import { sdkForConsole } from '$lib/stores/sdk';
import { organization } from './store';
import { organization, organizationList } from './store';
export let showDelete = false;
@@ -17,6 +17,9 @@
type: 'success',
message: `${$organization.name} has been deleted`
});
if ($organizationList?.total) {
organization.set($organizationList.teams[0]);
}
await goto(`${base}/console/`);
} catch (error) {
addNotification({
src/routes/console/index@intro.svelte
+31 -8
View File
@@ -2,7 +2,7 @@
import { goto } from '$app/navigation';
import { base } from '$app/paths';
import { Pill } from '$lib/elements';
import { Bucket, EmptyBucket, Pagination } from '$lib/components';
import { Bucket, EmptyBucket, Empty, Pagination } from '$lib/components';
import { Button } from '$lib/elements/forms';
import { Container } from '$lib/layout';
import type { Models } from '@aw-labs/appwrite-console';
@@ -28,6 +28,12 @@
const projectCreated = async (event: CustomEvent<Models.Project>) => {
await goto(`${base}/console/${event.detail.$id}`);
};
$: if (currentOrganization !== $organization?.$id) {
currentOrganization = $organization.$id;
projectList.load();
projects = $projectList.projects.filter((a) => a.teamId === $organization.$id);
}
//TODO: fix technology icon display
</script>
@@ -69,12 +75,31 @@
</Button>
</div>
<div class="common-section">
<p>Add a new bucket</p>
<p>Create a new project</p>
</div>
</EmptyBucket>
{/if}
</ul>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {projects.length}</p>
<Pagination {limit} bind:offset sum={projects.length} />
</div>
{:else}
<Empty dashed centered>
<div class="bucket">
<div class="u-flex u-flex-vertical u-cross-center">
<div class="common-section">
<Button secondary round on:click={() => (showCreate = true)}>
<i class="icon-plus" />
</Button>
</div>
<div class="common-section">
<p>Create a new project</p>
</div>
</div>
</div>
</Empty>
<div class="u-flex u-margin-block-start-32 u-main-space-between">
<p class="text">Total results: {projects.length}</p>
<Pagination {limit} bind:offset sum={projects.length} />
@@ -84,9 +109,7 @@
<CreateOrganization bind:show={addOrganization} />
{#if projects?.length}
<CreateProject
bind:show={showCreate}
bind:teamId={currentOrganization}
on:created={projectCreated} />
{/if}
<CreateProject
bind:show={showCreate}
bind:teamId={currentOrganization}
on:created={projectCreated} />
src/routes/console/members@intro.svelte
+2 -6
View File
@@ -13,8 +13,7 @@
import { Button } from '$lib/elements/forms';
import { Container } from '$lib/layout';
import Delete from './_deleteMember.svelte';
import Create from './_createMember.svelte';
import { organization, memberList } from './store';
import { organization, memberList, newMemberModal } from './store';
import { sdkForConsole } from '$lib/stores/sdk';
import type { Models } from '@aw-labs/appwrite-console';
import { pageLimit } from '$lib/stores/layout';
@@ -23,12 +22,10 @@
let offset: number = null;
let selectedMember: Models.Membership;
let showCreate = false;
let showDelete = false;
const getAvatar = (name: string) => sdkForConsole.avatars.getInitials(name, 32, 32).toString();
const deleted = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
const created = () => memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
$: if (search) offset = 0;
$: memberList.load($organization.$id, search, $pageLimit, offset ?? 0);
@@ -41,7 +38,7 @@
<Button
on:click={() => {
showCreate = true;
newMemberModal.set(true);
}}>
<span class="icon-plus" aria-hidden="true" />
<span class="text">Invite</span>
@@ -102,7 +99,6 @@
{/if}
</Container>
<Create bind:showCreate on:created={() => created()} />
{#if selectedMember}
<Delete {selectedMember} bind:showDelete on:deleted={() => deleted()} />
{/if}
src/routes/console/settings@intro.svelte
+3 -1
View File
@@ -18,7 +18,7 @@
await sdkForConsole.teams.update($organization.$id, name);
$organization.name = name;
title.set(name);
const breadcrumb = $breadcrumbs.get($breadcrumbs.size);
const breadcrumb = $breadcrumbs.get(0);
breadcrumb.title = name;
$breadcrumbs = $breadcrumbs.set($breadcrumbs.size, breadcrumb);
addNotification({
@@ -32,6 +32,8 @@
});
}
}
organization.subscribe((org) => (name = org.name));
</script>
<Container>
src/routes/console/store.ts
+2
View File
@@ -71,6 +71,8 @@ export const organizationList = createOrganizationList();
export const organization = createOrganization();
export const projectList = createProjectList();
export const memberList = createMemberList();
export const newOrgModal = writable<boolean>(false);
export const newMemberModal = writable<boolean>(false);
if (browser) {
organizationList.subscribe((n) =>