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

Merge branch 'main' of github.com:appwrite/appwrite-console-poc into chore-unbundle-document-settings

Browse Source
This commit is contained in:
Arman
2022-11-25 16:25:13 +01:00
parent 4dbfb83b6e f29d619506
commit b0c3378ee5
8 changed files with 89 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/uploadBox.svelte
+28 -24
View File
@@ -3,11 +3,10 @@
import { Pill } from '$lib/elements';
import { sdkForProject } from '$lib/stores/sdk';
import { Avatar } from '$lib/components';
import { base } from '$app/paths';
import { page } from '$app/stores';
async function removeFile($id: string, bucketId: string) {
const file = await sdkForProject.storage.getFile(bucketId, $id);
uploader.removeFile(file);
}
let hovering = false;
const getPreview = (fileId: string, bucketId: string) =>
sdkForProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
@@ -28,7 +27,7 @@
<span class="icon-cheveron-up" aria-hidden="true" />
</button>
<button
on:click={() => uploader.close()}
on:click={() => uploader.reset()}
class="icon-button"
aria-label="close upload box">
<span class="icon-x" aria-hidden="true" />
@@ -37,8 +36,12 @@
<div class="upload-box-content" class:is-open={!$uploader.isCollapsed}>
<ul class="upload-box-list">
{#each $uploader.files as file}
{@const progress = Math.round(file.progress)}
{#if file.completed || file.progress === 100}
<li class="upload-box-item">
<a
class="upload-box-item"
href={`${base}/console/project-${$page.params.project}/storage/bucket-${$page.params.bucket}/file-${file.$id}`}>
<div class="u-margin-inline-end-16">
<Avatar
size={32}
@@ -46,50 +49,51 @@
name={file.name} />
</div>
<label for={file.name} class="file-name">{file.name}</label>
<span class="icon-check" />
</li>
<label for={file.name} class="file-name u-trim">{file.name}</label>
<button
class="icon-button"
aria-label="Failed"
on:mouseenter={() => (hovering = true)}
on:mouseleave={() => (hovering = false)}
on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
<span class:icon-check={!hovering} class:icon-x={hovering} />
</button>
</a>
{:else if file.failed}
<li class="upload-box-item">
<div class="upload-image u-margin-inline-end-16">
<div
class="progress"
role="progressbar"
aria-valuenow={file.progress}
aria-valuenow={progress}
aria-valuemin={0}
aria-valuemax={100} />
<span class="icon">{file.progress}%</span>
<span class="icon">{progress}%</span>
</div>
<label for={file.name} class="file-name">{file.name}</label>
<label for={file.name} class="file-name u-trim">{file.name}</label>
<Pill danger>Failed</Pill>
<button
class="icon-button"
aria-label="Failed"
on:click={() => removeFile(file.$id, file.bucketId)}>
on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
<span class="icon-x" />
</button>
</li>
{:else if file.cancelled}
cancelled?
{:else}
<li class="upload-box-item">
<div class="upload-image u-margin-inline-end-16">
<div
class="progress"
role="progressbar"
aria-valuenow={file.progress}
style={`--progress-value:${progress}`}
aria-valuenow={progress}
aria-valuemin={0}
aria-valuemax={100} />
<span class="icon">{file.progress}%</span>
<span class="icon">{progress}%</span>
</div>
<label for={file.name} class="file-name">{file.name}</label>
<label for={file.name} class="file-name u-trim">{file.name}</label>
<Pill warning>Pending</Pill>
<button
class="icon-button"
aria-label="Pending"
on:click={() => removeFile(file.$id, file.bucketId)}>
<span class="icon-x" />
</button>
</li>
{/if}
{/each}
src/lib/elements/forms/inputFile.svelte
+9 -5
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { Trim } from '$lib/components';
import { Button } from '.';
export let label: string = null;
@@ -47,20 +48,23 @@
on:dragover|preventDefault={dragOverHandler}
on:dragleave|preventDefault={() => (hovering = false)}>
<div class="u-flex u-main-center u-cross-center u-gap-32">
<div class="avatar is-size-large">
<div class="avatar is-size-large u-min-width-0">
<span class="icon-folder" aria-hidden="true" />
</div>
<div class="u-grid u-gap-16">
<div class="u-grid u-gap-16 u-min-width-0">
<p>Drag and drop files here to upload</p>
<div class="u-flex u-gap-8 ">
<div class="u-flex u-gap-8 u-min-width-0">
<Button secondary on:click={() => input.click()}>
<span class="icon-upload" aria-hidden="true" />
<span class="text">Choose File</span>
</Button>
{#if files?.length}
<div class="u-flex ">
{files.item(0).name}
{@const fileName = files.item(0).name.split('.')}
<div class="u-flex u-cross-center u-min-width-0">
<Trim>{fileName[0]}</Trim>
<span class="u-min-width-0 u-flex-shrink-0 u-margin-inline-end-16"
>.{fileName[1]}</span>
<button
on:click={() => (files = null)}
type="button"
src/lib/stores/uploader.ts
+32 -21
View File
@@ -1,5 +1,6 @@
import type { Models } from '@aw-labs/appwrite-console';
import { writable } from 'svelte/store';
import { sdkForProject } from './sdk';
type UploaderFile = {
$id: string;
@@ -8,7 +9,6 @@ type UploaderFile = {
progress: number;
completed: boolean;
failed: boolean;
cancelled: boolean;
error?: string;
};
export type Uploader = {
@@ -42,7 +42,6 @@ const createUploader = () => {
close: () =>
update((n) => {
n.isOpen = !n.isOpen;
return n;
}),
toggle: () =>
@@ -57,22 +56,43 @@ const createUploader = () => {
isCollapsed: false,
files: []
}),
addFile: async (file: Models.File, isOpen = true, isCollapsed = false) => {
uploadFile: async (bucketId: string, id: string, file: File, permissions: string[]) => {
const newFile: UploaderFile = {
$id: file.$id,
bucketId: file.bucketId,
$id: id,
bucketId: bucketId,
name: file.name,
progress: calculateProgress(file),
completed: calculateProgress(file) === 100 ? true : false,
failed: false,
cancelled: false
progress: 0,
completed: false,
failed: false
};
return update((n) => {
n.isOpen = isOpen;
n.isCollapsed = isCollapsed;
update((n) => {
n.isOpen = true;
n.isCollapsed = false;
n.files.unshift(newFile);
return n;
});
const uploadedFile = await sdkForProject.storage.createFile(
bucketId,
id ?? 'unique()',
file,
permissions,
(p) => {
newFile.$id = p.$id;
newFile.progress = p.progress;
newFile.completed = p.progress === 100 ? true : false;
updateFile(p.$id, newFile);
}
);
newFile.$id = uploadedFile.$id;
newFile.progress = 100;
newFile.completed = true;
updateFile(newFile.$id, newFile);
},
removeFromQueue: (id: string) => {
update((n) => {
n.files = n.files.filter((f) => f.$id !== id);
return n;
});
},
removeFile: async (file: Models.File) => {
if (file.chunksTotal === file.chunksUploaded) {
@@ -81,18 +101,9 @@ const createUploader = () => {
return n;
});
} else {
if (confirm('Are you sure you want to cancel the upload?')) {
updateFile(file.$id, { cancelled: true });
}
}
}
};
};
export const uploader = createUploader();
function calculateProgress(file: Models.File) {
const progress = file.chunksUploaded / file.chunksTotal;
return Math.round(progress * 100);
}
src/routes/console/project-[project]/auth/user-[user]/updateStatus.svelte
+3 -3
View File
@@ -19,7 +19,7 @@
invalidate(Dependencies.USER);
addNotification({
message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
$user.emailVerification ? 'verified' : 'unverified'
$user.emailVerification ? 'unverified' : 'verified'
}`,
type: 'success'
});
@@ -38,7 +38,7 @@
invalidate(Dependencies.USER);
addNotification({
message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
$user.phoneVerification ? 'verified' : 'unverified'
$user.phoneVerification ? 'unverified' : 'verified'
}`,
type: 'success'
});
@@ -56,7 +56,7 @@
invalidate(Dependencies.USER);
addNotification({
message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
$user.status ? 'unblocked' : 'blocked'
$user.status ? 'blocked' : 'unblocked'
}`,
type: 'success'
});
src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
+2 -1
View File
@@ -12,7 +12,8 @@
Choose who can access your collection and documents. For more information, check out the <a
href="https://appwrite.io/docs/permissions"
target="_blank"
rel="noopener noreferrer">Permissions Guide</a> in our documentation.
rel="noopener noreferrer"
class="link">Permissions Guide</a> in our documentation.
</svelte:fragment>
{#if $collection.documentSecurity}
<div class="common-section">
src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
+4
View File
@@ -162,11 +162,15 @@
</button>
<svelte:fragment slot="list">
<DropListLink
on:click={() => {
showDropdown[index] = false;
}}
href={`${base}/console/project-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}
icon="pencil">Update</DropListLink>
<DropListItem
icon="trash"
on:click={() => {
showDropdown[index] = false;
selectedFile = file;
showDelete = true;
}}>Delete</DropListItem>
src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
+9 -12
View File
@@ -2,7 +2,6 @@
import { Button, FormList, InputFile } from '$lib/elements/forms';
import { Pill } from '$lib/elements';
import { Modal, CustomId, Heading, Alert } from '$lib/components';
import { sdkForProject } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
import { page } from '$app/stores';
import { uploader } from '$lib/stores/uploader';
@@ -25,20 +24,15 @@
async function create() {
try {
const file = await sdkForProject.storage.createFile(
bucketId,
id ?? 'unique()',
files[0],
permissions
);
files = null;
showCreate = false;
await uploader.uploadFile(bucketId, id, files[0], permissions);
files = null;
showCustomId = false;
uploader.addFile(file);
// uploader.addFile(file);
dispatch('created');
addNotification({
type: 'success',
message: `${file.name} has been created`
message: `File has been uploaded`
});
trackEvent('submit_file_create');
} catch ({ message }) {
@@ -74,8 +68,11 @@
<Heading tag="h6" size="7">Update Permissions</Heading>
<p class="text">
Choose who can access your buckets and files. For more information, check out the
<a href="https://appwrite.io/docs/permissions" target="_blank" rel="noopener noreferrer"
>Permissions Guide</a> in our documentation.
<a
href="https://appwrite.io/docs/permissions"
target="_blank"
rel="noopener noreferrer"
class="link">Permissions Guide</a> in our documentation.
</p>
{#if $bucket.fileSecurity}
<div class="common-section">
src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
+2 -1
View File
@@ -275,7 +275,8 @@
the <a
href="https://appwrite.io/docs/permissions"
target="_blank"
rel="noopener noreferrer">Permissions Guide</a> in our documentation.
rel="noopener noreferrer"
class="link">Permissions Guide</a> in our documentation.
</p>
<svelte:fragment slot="aside">
{#if bucketPermissions}