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: upload inv ux and pagination

Browse Source
This commit is contained in:
Harsh Mahajan
2026-03-27 11:34:29 +05:30
parent 1e4082c62d
commit 9a02248df1
4 changed files with 101 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/cardGrid.svelte
+26 -4
View File
@@ -8,8 +8,8 @@
<Card.Base>
<Layout.Stack gap="xl" justifyContent="space-around">
<Layout.GridFraction gap="xxxl" rowGap="xl" start={1} end={2}>
<Layout.Stack gap="xxs">
<div class="card-grid-content">
<Layout.Stack gap="xxs" class="card-grid-main">
<Typography.Title size="s" truncate><slot name="title" /></Typography.Title>
{#if $$slots.default}
<Typography.Text>
@@ -17,12 +17,12 @@
</Typography.Text>
{/if}
</Layout.Stack>
<div style:overflow={overflow ? 'visible' : 'hidden'}>
<div class="card-grid-aside" style:overflow={overflow ? 'visible' : 'hidden'}>
<Layout.Stack {gap}>
<slot name="aside" />
</Layout.Stack>
</div>
</Layout.GridFraction>
</div>
{#if $$slots.actions && !hideFooter}
<span
style="margin-left: calc(-1* var(--space-9));margin-right: calc(-1* var(--space-9));width:auto;">
@@ -34,3 +34,25 @@
{/if}
</Layout.Stack>
</Card.Base>
<style>
.card-grid-content {
display: grid;
gap: var(--space-10);
align-items: start;
grid-template-columns: minmax(0, 1fr);
}
.card-grid-main,
.card-grid-aside {
min-width: 0;
}
@media (min-width: 769px) {
.card-grid-content {
column-gap: var(--space-13);
row-gap: var(--space-10);
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
}
</style>
src/lib/components/variables/importVariablesModal.svelte
+29 -15
View File
@@ -6,6 +6,7 @@
import { IconInfo } from '@appwrite.io/pink-icons-svelte';
import { Icon, Layout, Selector, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
import { parse } from '$lib/helpers/envfile';
import { removeFile } from '$lib/helpers/files';
export let show = false;
export let variables: Partial<Models.Variable>[];
@@ -13,6 +14,15 @@
let files: FileList;
let error: string;
let secret = false;
$: filesList = files?.length
? Array.from(files).map((file) => ({
...file,
name: file.name,
size: file.size,
extension: file.type,
removable: true
}))
: [];
async function handleSubmit() {
try {
@@ -52,28 +62,32 @@
<Layout.Stack>
<Upload.Dropzone bind:files>
<Layout.Stack alignItems="center" gap="s">
<Layout.Stack
alignItems="center"
justifyContent="center"
direction="row"
gap="s">
<Typography.Text variant="l-500">
<Layout.Stack alignItems="center" justifyContent="center" inline>
<Typography.Text variant="l-500" align="center" inline>
Drag and drop files here or click to upload
</Typography.Text>
<Tooltip>
<Layout.Stack alignItems="center" justifyContent="center" inline>
<Icon icon={IconInfo} size="s" />
<Layout.Stack
style="display: inline-flex; vertical-align: middle;"
inline
alignItems="center"
justifyContent="center">
<Tooltip>
<Icon icon={IconInfo} size="s" />
<svelte:fragment slot="tooltip"
>Only .env files allowed</svelte:fragment>
</Tooltip>
</Layout.Stack>
<svelte:fragment slot="tooltip">
Only .env files allowed
</svelte:fragment>
</Tooltip>
</Typography.Text>
</Layout.Stack>
<Typography.Caption variant="400">
<Typography.Caption variant="400" align="center">
Up to 100 variables allowed
</Typography.Caption>
</Layout.Stack>
</Upload.Dropzone>
{#if files?.length}
<Upload.List
bind:files={filesList}
on:remove={(e) => (files = removeFile(e.detail, files))} />
{/if}
{#if variables?.length > 0}
<Alert.Inline status="info" dismissible>
This action can create and update variables but can not delete them.
src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
+15 -2
View File
@@ -84,7 +84,7 @@
<svelte:fragment slot="aside">
{#if total > 0}
<Layout.Stack gap="l">
<Layout.Stack direction="row" justifyContent="flex-end">
<div class="installations-action-row">
<FormButton
secondary
href={configureGitHub()}
@@ -94,7 +94,7 @@
<Icon icon={IconPlus} slot="start" size="s" />
Add installation
</FormButton>
</Layout.Stack>
</div>
<Table.Root
let:root
@@ -233,3 +233,16 @@
</Card.Base>
</svelte:fragment>
</CardGrid>
<style>
.installations-action-row {
display: flex;
justify-content: flex-start;
}
@media (min-width: 769px) {
.installations-action-row {
justify-content: flex-end;
}
}
</style>
src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte
+31 -9
View File
@@ -15,6 +15,7 @@
Upload
} from '@appwrite.io/pink-svelte';
import { parse } from '$lib/helpers/envfile';
import { removeFile } from '$lib/helpers/files';
export let show = false;
export let variableList: Models.VariableList;
@@ -33,6 +34,15 @@
let files: FileList;
let secret = false;
let error: string;
$: filesList = files?.length
? Array.from(files).map((file) => ({
...file,
name: file.name,
size: file.size,
extension: file.type,
removable: true
}))
: [];
async function handleSubmit() {
try {
@@ -87,21 +97,33 @@
<Upload.Dropzone bind:files>
<Layout.Stack alignItems="center" gap="s">
<Layout.Stack alignItems="center" gap="s">
<Layout.Stack alignItems="center" justifyContent="center" direction="row" gap="s">
<Typography.Text variant="l-500">
<Layout.Stack alignItems="center" justifyContent="center" inline>
<Typography.Text variant="l-500" align="center" inline>
Drag and drop files here or click to upload
</Typography.Text>
<Tooltip>
<Layout.Stack alignItems="center" justifyContent="center" inline>
<Icon icon={IconInfo} size="s" />
<Layout.Stack
style="display: inline-flex; vertical-align: middle;"
inline
alignItems="center"
justifyContent="center">
<Tooltip>
<Icon icon={IconInfo} size="s" />
<svelte:fragment slot="tooltip"
>Only .env files allowed</svelte:fragment>
</Tooltip>
</Layout.Stack>
<svelte:fragment slot="tooltip">Only .env files allowed</svelte:fragment>
</Tooltip>
</Typography.Text>
</Layout.Stack>
<Typography.Caption variant="400">Up to 100 variables allowed</Typography.Caption>
<Typography.Caption variant="400" align="center">
Up to 100 variables allowed
</Typography.Caption>
</Layout.Stack>
</Layout.Stack>
</Upload.Dropzone>
{#if files?.length}
<Upload.List
bind:files={filesList}
on:remove={(e) => (files = removeFile(e.detail, files))} />
{/if}
{#if variableList.total > 0}
<Alert.Inline>