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

fix: creation flows

Browse Source
This commit is contained in:
Arman
2025-01-27 17:56:24 +01:00
parent e2e11e3d39
commit b2cc177601
9 changed files with 55 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/elements/forms/inputSelect.svelte
+2
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { Input } from '@appwrite.io/pink-svelte';
import type { ComponentType } from 'svelte';
export let id: string;
export let label: string | undefined = undefined;
@@ -11,6 +12,7 @@
value: string | boolean | number | null;
label: string;
disabled?: boolean;
leadingIcon?: ComponentType;
}[];
let element: HTMLSelectElement;
src/routes/(console)/project-[project]/sites/create-site/aside.svelte
+3 -24
View File
@@ -1,16 +1,10 @@
<script lang="ts">
import { Card } from '$lib/components';
import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
import {
IconGithub,
IconReact,
IconSvelte,
IconNuxt,
IconVue,
IconGitBranch
} from '@appwrite.io/pink-icons-svelte';
import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte';
import { consoleVariables } from '$routes/(console)/store';
import type { Models } from '@appwrite.io/console';
import { getFrameworkIcon } from './store';
export let framework: Partial<Models.Framework>;
export let repositoryName: string;
@@ -18,21 +12,6 @@
export let rootDir: string;
export let domain: string = '';
export let showAfter = true;
function getIcon(fr: string) {
switch (true) {
case fr.toLocaleLowerCase().includes('sveltekit'):
return IconSvelte;
case fr.toLocaleLowerCase().includes('nuxt'):
return IconNuxt;
case fr.toLocaleLowerCase().includes('vue'):
return IconVue;
case fr.toLocaleLowerCase().includes('react'):
return IconReact;
default:
return undefined;
}
}
</script>
<Card padding="xs">
@@ -40,7 +19,7 @@
<slot />
<Layout.Stack gap="l">
{#if framework?.name}
{@const frameworkIcon = getIcon(framework.key)}
{@const frameworkIcon = getFrameworkIcon(framework.key)}
<Layout.Stack gap="xxxs">
<Typography.Caption variant="400">Framework</Typography.Caption>
<Layout.Stack gap="xs" alignItems="center" direction="row">
src/routes/(console)/project-[project]/sites/create-site/details.svelte
+5 -4
View File
@@ -1,9 +1,9 @@
<script lang="ts">
import { CustomId } from '$lib/components';
import { Pill } from '$lib/elements';
import { InputSelect, InputText } from '$lib/elements/forms';
import type { Models } from '@appwrite.io/console';
import { Fieldset, Layout } from '@appwrite.io/pink-svelte';
import { Fieldset, Layout, Tag } from '@appwrite.io/pink-svelte';
import type { ComponentType } from 'svelte';
export let name: string;
export let id: string;
@@ -12,6 +12,7 @@
export let options: {
value: string;
label: string;
leadingIcon?: ComponentType;
}[] = [];
let showCustomId = false;
@@ -31,10 +32,10 @@
<CustomId bind:id bind:show={showCustomId} name="Site" fullWidth />
{:else}
<div>
<Pill button on:click={() => (showCustomId = !showCustomId)}>
<Tag size="s" on:click={() => (showCustomId = !showCustomId)}>
<span class="icon-pencil" aria-hidden="true" />
<span class="text">Site ID </span>
</Pill>
</Tag>
</div>
{/if}
</Layout.Stack>
src/routes/(console)/project-[project]/sites/create-site/manual/configuration.svelte
+1
View File
@@ -24,6 +24,7 @@
import SecretVariableModal from '../secretVariableModal.svelte';
import ImportSiteVariablesModal from '../importSiteVariablesModal.svelte';
import type { Models } from '@appwrite.io/console';
import { getFrameworkIcon } from '../store';
export let frameworks: Models.Framework[];
export let selectedFramework: Models.Framework;
src/routes/(console)/project-[project]/sites/create-site/repositories/repository-[repository]/configuration.svelte
+3 -1
View File
@@ -24,6 +24,7 @@
import SecretVariableModal from '../../secretVariableModal.svelte';
import ImportSiteVariablesModal from '../../importSiteVariablesModal.svelte';
import type { Models } from '@appwrite.io/console';
import { getFrameworkIcon } from '../../store';
export let frameworks: Models.Framework[];
export let selectedFramework: Models.Framework;
@@ -59,7 +60,8 @@
bind:value={frameworkId}
options={frameworks.map((framework) => ({
value: framework.key,
label: framework.name
label: framework.name,
leadingIcon: getFrameworkIcon(framework.key)
}))}
on:change={() => {
selectedFramework = frameworks.find((framework) => framework.key === frameworkId);
src/routes/(console)/project-[project]/sites/create-site/store.ts
+30
View File
@@ -0,0 +1,30 @@
import {
IconAngular,
IconNuxt,
IconReact,
IconSvelte,
IconVue
} from '@appwrite.io/pink-icons-svelte';
export function getFrameworkIcon(framework: string) {
console.log(framework);
switch (true) {
case framework.toLocaleLowerCase().includes('sveltekit'):
return IconSvelte;
case framework.toLocaleLowerCase().includes('nuxt'):
return IconNuxt;
case framework.toLocaleLowerCase().includes('vue'):
return IconVue;
case framework.toLocaleLowerCase().includes('react'):
return IconReact;
case framework.toLocaleLowerCase().includes('angular'):
return IconAngular;
case framework.toLocaleLowerCase().includes('svelte'):
return IconSvelte;
case framework.toLocaleLowerCase().includes('next'):
return IconReact; //TODO: add next icon
default:
return undefined;
}
}
src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.svelte
+3 -1
View File
@@ -29,6 +29,7 @@
import { BuildRuntime, Framework, ID, Query } from '@appwrite.io/console';
import Domain from '../../domain.svelte';
import { NewRepository, Repositories, RepositoryBehaviour } from '$lib/components/git';
import { getFrameworkIcon } from '../../store';
export let data;
@@ -223,7 +224,8 @@
{@const options = data.template.frameworks.map((framework) => {
return {
value: framework.name,
label: framework.name
label: framework.name,
leadingIcon: getFrameworkIcon(framework.key)
};
})}
<Layout.Stack gap="xxl">
src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/+page.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import { sdk } from '$lib/stores/sdk';
export const load = async ({ parent, params }) => {
const { installations, frameworks } = await parent();
let { installations, frameworks } = await parent();
const template = await sdk.forProject.sites.getTemplate(params.template);
return {
src/routes/(console)/project-[project]/sites/create-site/templates/template-[template]/configuration.svelte
+7 -12
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import { Collapsible, CollapsibleItem } from '$lib/components';
import {
Button,
InputEmail,
@@ -10,7 +9,7 @@
InputURL
} from '$lib/elements/forms';
import type { Models } from '@appwrite.io/console';
import { Fieldset, Layout, Tag, Popover, Icon } from '@appwrite.io/pink-svelte';
import { Fieldset, Layout, Popover, Icon, Accordion } from '@appwrite.io/pink-svelte';
import { IconInfo } from '@appwrite.io/pink-icons-svelte';
import type { SvelteComponent } from 'svelte';
@@ -51,10 +50,9 @@
<Fieldset legend="Configuration">
<Layout.Stack gap="l">
<Collapsible>
<Layout.Stack>
{#if requiredVariables?.length}
<CollapsibleItem open>
<svelte:fragment slot="title">Required environment variables</svelte:fragment>
<Accordion title="Required environment variables" open>
<Layout.Stack>
Provide the values for the required environment variables to run this
application.
@@ -94,13 +92,10 @@
</Layout.Stack>
{/each}
</Layout.Stack>
</CollapsibleItem>
</Accordion>
{/if}
{#if optionalVariables?.length}
<CollapsibleItem>
<svelte:fragment slot="title">
Environment variables <Tag size="s">Optional</Tag>
</svelte:fragment>
<Accordion title="Environment variables" badge="Optional">
<Layout.Stack>
Set up environment variables to securely manage keys and settings for your
project.
@@ -140,8 +135,8 @@
</Layout.Stack>
{/each}
</Layout.Stack>
</CollapsibleItem>
</Accordion>
{/if}
</Collapsible>
</Layout.Stack>
</Layout.Stack>
</Fieldset>