feat: some more things

src/lib/components/index.ts

@@ -6,6 +6,7 @@ export { default as InputNumber } from './inputNumber.svelte';
 export { default as InputBoolean } from './inputBoolean.svelte';
 export { default as InputTags } from './inputTags.svelte';
 export { default as InputFile } from './inputFile.svelte';
+export { default as InputCustomId } from './inputCustomId.svelte';
 export { default as Modal } from './modal.svelte';
 export { default as Table } from './table/table.svelte';
 export { default as Pagination } from './pagination.svelte';

src/lib/components/inputCustomId.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	export let label: string;
+	export let value = '';
+	export let placeholder = '';
+	export let required = false;
+	export let disabled = false;
+	export let autofocus = false;
+
+	let element: HTMLInputElement;
+	let unique = true;
+
+	$: {
+		if (unique) {
+			value = 'unique()';
+			disabled = true;
+		} else {
+			value = '';
+			disabled = false;
+		}
+	}
+
+	onMount(() => {
+		if (element && autofocus) {
+			element.focus();
+		}
+	});
+</script>
+
+<label>
+	<span>{label} <span role="button" on:click={() => (unique = !unique)}>Switch</span></span>
+	<input {placeholder} {disabled} {required} type="text" bind:value bind:this={element} />
+</label>

src/routes/console/[project]/settings.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Button, InputText } from '$lib/components';
+	import { sdkForConsole } from '$lib/stores/sdk';
+	import { project } from './store';
+
+	const update = async () => {
+		try {
+			await sdkForConsole.projects.update($project.$id, $project.name);
+			await project.load($project.$id);
+		} catch (error) {
+			alert(error.message);
+		}
+	};
+</script>
+
+{#if $project}
+	<h2>Overview</h2>
+	<article>
+		<form on:submit|preventDefault={update}>
+			<InputText label="Name" bind:value={$project.name} required />
+			<Button submit>Update</Button>
+		</form>
+	</article>
+{/if}
+
+<style>
+	h2 {
+		margin-bottom: 0;
+	}
+</style>

src/routes/console/__layout.svelte

@@ -36,6 +36,9 @@
 			<li>
 				<a href={`/console/${project}/storage`}>Storage</a>
 			</li>
+			<li>
+				<a href={`/console/${project}/settings`}>Settings</a>
+			</li>
 		{/if}
 	</ul>
 	{#if $user}

src/routes/console/_create.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-	import { Modal } from '$lib/components';
-	export let show = false;
-</script>
-
-<Modal bind:show>
-	<span slot="header">Create Project</span>
-	Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis est earum sed impedit sunt molestias
-	asperiores commodi, error quas laborum in fugit distinctio laboriosam dolore quia. Dolorum id quo doloremque!
-</Modal>

src/routes/console/_createOrganization.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Modal, InputText, Button } from '$lib/components';
+	import { sdkForConsole } from '$lib/stores/sdk';
+	import { createEventDispatcher } from 'svelte';
+
+	export let show = false;
+
+	const dispatch = createEventDispatcher();
+
+	let name: string;
+
+	const create = async () => {
+		try {
+			await sdkForConsole.teams.create('unique()', name);
+			name = null;
+			dispatch('created');
+		} catch (error) {
+			alert(error.message);
+		}
+	};
+</script>
+
+<form on:submit|preventDefault={create}>
+	<Modal bind:show>
+		<span slot="header">Create Project</span>
+		<InputText label="Name" bind:value={name} required />
+		<footer>
+			<Button secondary on:click={() => (show = false)}>Cancel</Button>
+			<Button submit>Create</Button>
+		</footer>
+	</Modal>
+</form>

src/routes/console/_createProject.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Modal, InputText, Button, InputCustomId } from '$lib/components';
+	import { sdkForConsole } from '$lib/stores/sdk';
+	import { createEventDispatcher } from 'svelte';
+
+	export let show = false;
+	export let teamId: string;
+
+	const dispatch = createEventDispatcher();
+
+	let id: string;
+	let name: string;
+
+	const create = async () => {
+		try {
+			await sdkForConsole.projects.create(id, name, teamId);
+			id = name = null;
+			dispatch('created');
+		} catch (error) {
+			alert(error.message);
+		}
+	};
+</script>
+
+<form on:submit|preventDefault={create}>
+	<Modal bind:show>
+		<span slot="header">Create Project</span>
+		<InputCustomId label="ID" bind:value={id} required />
+		<InputText label="Name" bind:value={name} required />
+		<footer>
+			<Button secondary on:click={() => (show = false)}>Cancel</Button>
+			<Button submit>Create</Button>
+		</footer>
+	</Modal>
+</form>

src/routes/console/index.svelte

@@ -1,22 +1,58 @@
 <script lang="ts">
 	import { Button } from '$lib/components';
 	import { sdkForConsole } from '$lib/stores/sdk';
-	import Create from './_create.svelte';
+	import type { Models } from 'src/sdk';
+	import CreateOrganization from './_createOrganization.svelte';
+	import CreateProject from './_createProject.svelte';
 
-	const request = sdkForConsole.projects.list();
+	type Organization = Models.Team & {
+		projects: Models.Project[];
+	};
+
+	const request: Promise<Organization[]> = Promise.all([
+		sdkForConsole.projects.list(),
+		sdkForConsole.teams.list()
+	]).then(([{ projects }, { teams }]) => {
+		return teams.map((team) => {
+			return {
+				...team,
+				projects: projects.filter((a) => a.teamId === team.$id)
+			};
+		});
+	});
 
 	let addProject = false;
+	let addOrganization = false;
+	let currentOrganization = '';
+
+	const createProject = (teamId: string) => {
+		currentOrganization = teamId;
+		addProject = true;
+	};
 </script>
 
-<h1>Your Projects</h1>
+<h1>Your Organizations</h1>
 
 {#await request}
 	<div aria-busy="true" />
-{:then response}
-	{#each response.projects as project}
-		<a href={`/console/${project.$id}`}><article>{project.name}</article></a>
+{:then organizations}
+	{#each organizations as organization}
+		<h2>{organization.name}</h2>
+		{#each organization.projects as project}
+			<a href={`/console/${project.$id}`}><article>{project.name}</article></a>
+		{/each}
+		<article class="new-project" on:click={() => createProject(organization.$id)}>
+			New Project
+		</article>
 	{/each}
-	<Button on:click={() => (addProject = true)}>New Project</Button>
+	<Button on:click={() => (addOrganization = true)}>Add Organization</Button>
 {/await}
 
-<Create bind:show={addProject} />
+<CreateOrganization bind:show={addOrganization} />
+<CreateProject bind:show={addProject} bind:teamId={currentOrganization} />
+
+<style>
+	article.new-project {
+		cursor: pointer;
+	}
+</style>