From 7f43b6957305a9f0c5aa034ed31c698a0f58cc30 Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 22 Aug 2022 12:36:03 +0200 Subject: [PATCH 1/4] feat: update error handling, set default size to mb & dynamic placeholder for size --- src/lib/helpers/sizeConvertion.ts | 10 +- .../storage/bucket/[bucket]/_create.svelte | 4 +- .../bucket/[bucket]/file/[file]/index.svelte | 4 +- .../storage/bucket/[bucket]/index.svelte | 6 +- .../storage/bucket/[bucket]/settings.svelte | 451 +++++++++--------- 5 files changed, 234 insertions(+), 241 deletions(-) diff --git a/src/lib/helpers/sizeConvertion.ts b/src/lib/helpers/sizeConvertion.ts index e62d7a9f0..c64f1579a 100644 --- a/src/lib/helpers/sizeConvertion.ts +++ b/src/lib/helpers/sizeConvertion.ts @@ -1,9 +1,10 @@ -export function bytesToSize(bytes: number, decimals = 1) { +const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + +export function calculateSize(bytes: number, decimals = 1) { if (bytes === 0) return '0 Bytes'; const k = 1024; const dm = decimals < 0 ? 0 : decimals; - const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); @@ -11,7 +12,10 @@ export function bytesToSize(bytes: number, decimals = 1) { } export function sizeToBytes(value: number, unit: string) { - const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; const index = sizes.indexOf(unit); return value * Math.pow(1024, index); } +export function bytesToSize(value: number, unit: string) { + const index = sizes.indexOf(unit); + return value / Math.pow(1024, index); +} diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte index 38317a0af..a0a1c4b00 100644 --- a/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte +++ b/src/routes/console/[project]/storage/bucket/[bucket]/_create.svelte @@ -7,7 +7,7 @@ import { page } from '$app/stores'; import { uploader } from '$lib/stores/uploader'; import { bucket } from './store'; - import { bytesToSize } from '$lib/helpers/sizeConvertion'; + import { calculateSize } from '$lib/helpers/sizeConvertion'; export let showCreate = false; @@ -120,7 +120,7 @@ -

Max file size: {bytesToSize($bucket.maximumFileSize)}

+

Max file size: {calculateSize($bucket.maximumFileSize)}

{#if !showDropdown} diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte index d8dce4d29..95b977653 100644 --- a/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte +++ b/src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/index.svelte @@ -7,7 +7,7 @@ import { toLocaleDate, toLocaleDateTime } from '$lib/helpers/date'; import { sdkForProject } from '$lib/stores/sdk'; import { addNotification } from '$lib/stores/notifications'; - import { bytesToSize } from '$lib/helpers/sizeConvertion'; + import { calculateSize } from '$lib/helpers/sizeConvertion'; import Delete from './_deleteFile.svelte'; import { page } from '$app/stores'; import { onMount } from 'svelte'; @@ -101,7 +101,7 @@

MIME Type: {$file.mimeType}

-

Size: {bytesToSize($file.sizeOriginal)}

+

Size: {calculateSize($file.sizeOriginal)}

Created: {toLocaleDate($file.$createdAt)}

Last Updated: {toLocaleDate($file.$updatedAt)}

diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte index 3d8647b4e..6e248005e 100644 --- a/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte +++ b/src/routes/console/[project]/storage/bucket/[bucket]/index.svelte @@ -17,7 +17,7 @@ TableCell } from '$lib/elements/table'; import { toLocaleDate } from '$lib/helpers/date'; - import { bytesToSize } from '$lib/helpers/sizeConvertion'; + import { calculateSize } from '$lib/helpers/sizeConvertion'; import { Container } from '$lib/layout'; import { base } from '$app/paths'; import { files } from './store'; @@ -97,7 +97,7 @@ {file.mimeType} {bytesToSize(file.sizeOriginal)} + >{calculateSize(file.sizeOriginal)} {toLocaleDate(file.$createdAt)} @@ -132,7 +132,7 @@ {file.mimeType} {bytesToSize(file.sizeOriginal)} + >{calculateSize(file.sizeOriginal)} {toLocaleDate(file.$createdAt)} diff --git a/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte b/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte index fce6a9482..751db091d 100644 --- a/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte +++ b/src/routes/console/[project]/storage/bucket/[bucket]/settings.svelte @@ -2,17 +2,17 @@ import { Alert, CardGrid, Box } from '$lib/components'; import { Container } from '$lib/layout'; import { + Form, Button, InputText, InputTags, InputNumber, InputSelect, - InputSwitch, - Helper + InputSwitch } from '$lib/elements/forms'; import { bucket } from './store'; import { toLocaleDateTime } from '$lib/helpers/date'; - import { sizeToBytes } from '$lib/helpers/sizeConvertion'; + import { sizeToBytes, bytesToSize } from '$lib/helpers/sizeConvertion'; import { sdkForProject } from '$lib/stores/sdk'; import { addNotification } from '$lib/stores/notifications'; import Delete from './_deleteBucket.svelte'; @@ -20,9 +20,7 @@ import { page } from '$app/stores'; let showDelete = false; - let showError: false | 'name' | 'size' = false, - errorMessage = 'Something went wrong', - errorType: 'error' | 'warning' | 'success' = 'error'; + let enabled: boolean = null, bucketName: string = null, bucketPermissions: string = null, @@ -32,7 +30,7 @@ encryption: boolean = null, antivirus: boolean = null, maxSize: number; - let byteUnit: 'Bytes' | 'KB' | 'MB' | 'GB' = 'Bytes', + let byteUnit: 'Bytes' | 'KB' | 'MB' | 'GB' = 'MB', options = [ { label: 'Bytes', value: 'Bytes' }, { label: 'Kilobytes', value: 'KB' }, @@ -53,7 +51,7 @@ encryption ??= $bucket.encryption; antivirus ??= $bucket.antivirus; }); - + $: maxSizePlaceholder = bytesToSize($bucket.maximumFileSize, byteUnit); $: if (bucketPermissions || bucketRead || bucketWrite) { if (bucketPermissions !== $bucket.permission) { arePermsDisabled = false; @@ -73,12 +71,6 @@ } else isExtensionsDisabled = true; } - function addError(location: typeof showError, message: string, type: typeof errorType) { - showError = location; - errorMessage = message; - errorType = type; - } - async function toggleBucket() { try { await sdkForProject.storage.updateBucket( @@ -105,13 +97,15 @@ try { await sdkForProject.storage.updateBucket($bucket.$id, $bucket.name, $bucket.permission); $bucket.name = bucketName; - showError = false; addNotification({ message: 'Name has been updated', type: 'success' }); } catch (error) { - addError('name', error.message, 'error'); + addNotification({ + message: error.message, + type: 'error' + }); } } async function updatePermissions() { @@ -156,7 +150,7 @@ $bucket.encryption = encryption; $bucket.antivirus = antivirus; addNotification({ - message: `${$bucket.name} has been updatede`, + message: `${$bucket.name} has been updated`, type: 'success' }); } catch (error) { @@ -181,7 +175,7 @@ ); $bucket.maximumFileSize = maxSize; addNotification({ - message: `${$bucket.name} has been updatede`, + message: `${$bucket.name} has been updated`, type: 'success' }); } catch (error) { @@ -206,7 +200,7 @@ ); $bucket.allowedFileExtensions = extensions; addNotification({ - message: `${$bucket.name} has been updatede`, + message: `${$bucket.name} has been updated`, type: 'success' }); } catch (error) { @@ -220,230 +214,225 @@ {#if $bucket} - -

{$bucket.name}

+
+ +

{$bucket.name}

- -
    - -
-

Created: {toLocaleDateTime($bucket.$createdAt)}

-

Last Updated: {toLocaleDateTime($bucket.$updatedAt)}

- + +
    + +
+

Created: {toLocaleDateTime($bucket.$createdAt)}

+

Last Updated: {toLocaleDateTime($bucket.$updatedAt)}

+ - - - - + + + + +
- -
Update Name
+
+ +
Update Name
+ +
    + +
+ - -
    - - {#if showError === 'name'} - {errorMessage} + + + + + + +
    + +
    Update Permissions
    +

    + Assign read or write permissions at the Bucket Level or + File Level. If Bucket Level permissions are assigned, file permissions + will be ignored. +

    + +
      +
    • + +
      • +
    • + +
      • +
    + +

    + Tip: Add role:all for wildcards access. Check out our + documentation for more on Permissions +

    +     + {#if bucketPermissions === 'bucket'} +
      + + +
    {/if} -
- +
+ + + + + - - - - - -
Update Permissions
-

- Assign read or write permissions at the Bucket Level or - File Level. If Bucket Level permissions are assigned, file permissions will - be ignored. -

- -
    -
  • - -
    • -
  • - -
    • -
- -

- Tip: Add role:all for wildcards access. Check out our documentation - for more on Permissions -

- - {#if bucketPermissions === 'bucket'} +
+ +

Update Security Settings

+

+ Enable or disable security services for the bucket including Ecryption + and Antivirus scanning. +

+ +
    +
  • + +
    • +
  • + +
    • + +
  • +
+ + + + + + +
+ +
+ +

Update Maximum File Size

+

Set the maximum file size allowed in the bucket.

+ +
    + + +
+ + + + + + +
+ +
+ +
Update Allowed File Extensions
+

+ A maxiumum of 100 file extensions can be added. Leave blank to allow all file + types. +

+ + +

+ Tip: Commonly added extensions include JPG, PNG, SVG, GIF, HTML, PDF, + MP4. +

+
    - + label="Allowed file extensions" + placeholder="Allowed file extensions (mp4, jpg, pdf, etc.)" + bind:tags={extensions} />
- {/if} - - - - - - -

Update Security Settings

-

- Enable or disable security services for the bucket including Ecryption - and Antivirus scanning. -

- -
    -
  • - -
    • -
  • - -
    • - -
  • -
- - - - - -
- -

Update Maximum File Size

-

Set the maximum file size allowed in the bucket.

- -
    - - -
- - - - - - - -
Update Allowed File Extensions
-

- A maxiumum of 100 file extensions can be added. Leave blank to allow all file types. -

- - -

- Tip: Commonly added extensions include JPG, PNG, SVG, GIF, HTML, PDF, MP4. -

- -
    - -
- - - - - -
Delete Bucket

From b77a62aab4ea6b03df39f36a9842c58f1104c7ff Mon Sep 17 00:00:00 2001 From: Arman Date: Mon, 22 Aug 2022 12:48:51 +0200 Subject: [PATCH 2/4] fix: hide placeholder when there are tags --- src/lib/elements/forms/inputTags.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte index 0ad75a294..b9dc93686 100644 --- a/src/lib/elements/forms/inputTags.svelte +++ b/src/lib/elements/forms/inputTags.svelte @@ -88,7 +88,7 @@ Date: Mon, 22 Aug 2022 12:56:53 +0200 Subject: [PATCH 3/4] feat: add selected state to pill (tag) --- src/lib/elements/pill.svelte | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/lib/elements/pill.svelte b/src/lib/elements/pill.svelte index 2a175a7f7..66805f240 100644 --- a/src/lib/elements/pill.svelte +++ b/src/lib/elements/pill.svelte @@ -1,5 +1,6 @@