From c329540e8fc99800d126a72e1f39bb6f77926578 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Sat, 24 Feb 2024 14:32:35 +0100 Subject: [PATCH 01/16] feat: file picker --- package-lock.json | 18 +- package.json | 4 +- src/lib/components/filePicker.svelte | 240 ++++++++++++++++++ src/lib/components/modal.svelte | 2 +- src/lib/components/modalWrapper.svelte | 3 +- .../storage/bucket-[bucket]/+page.svelte | 7 +- 6 files changed, 260 insertions(+), 14 deletions(-) create mode 100644 src/lib/components/filePicker.svelte diff --git a/package-lock.json b/package-lock.json index e6751c176..b3e14960a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7,8 +7,8 @@ "name": "@appwrite/console", "dependencies": { "@appwrite.io/console": "^0.6.0-rc.12", - "@appwrite.io/pink": "0.4.0", - "@appwrite.io/pink-icons": "0.4.0", + "@appwrite.io/pink": "0.5.0", + "@appwrite.io/pink-icons": "0.5.0", "@popperjs/core": "^2.11.8", "@sentry/svelte": "^7.66.0", "@sentry/tracing": "^7.66.0", @@ -167,19 +167,19 @@ } }, "node_modules/@appwrite.io/pink": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.4.0.tgz", - "integrity": "sha512-48g2MQIFaEXPXobJ77wJK73YRUkpUZSAkRNa3XJhtC0N2WSTXD3poXBAVYb2QfjGW4e5U1tM/WYC0ZQMtjEzlQ==", + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@appwrite.io/pink/-/pink-0.5.0.tgz", + "integrity": "sha512-UVnek/tigxoU0FksVT77cCx0+JTKA+43HAslqJIZFnV4kKIbQnCQiX0hrj2hhHzuAaWTCSvSQftq0SbGORDb/A==", "dependencies": { - "@appwrite.io/pink-icons": "0.4.0", + "@appwrite.io/pink-icons": "0.5.0", "normalize.css": "^8.0.1", "the-new-css-reset": "^1.11.2" } }, "node_modules/@appwrite.io/pink-icons": { - "version": "0.4.0", - "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.4.0.tgz", - "integrity": "sha512-o1r101GRK72nBbeVL76H7NIwucrW8+vbzs41AMBPbnK+uAGhNb9ui5Na7gi6NtnBxHYnPDECg93bZhoLYlQ6XA==" + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@appwrite.io/pink-icons/-/pink-icons-0.5.0.tgz", + "integrity": "sha512-IHob3TsvBFZo6Ya78+MPm5bKBHzFZtoJDgmClRSOOTtr1K74mditZj4sA+5haBN/4N0L3g8QtOpR4gd2vV+T3g==" }, "node_modules/@babel/code-frame": { "version": "7.23.5", diff --git a/package.json b/package.json index 0d826dea2..94b8f59d1 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ }, "dependencies": { "@appwrite.io/console": "^0.6.0-rc.12", - "@appwrite.io/pink": "0.4.0", - "@appwrite.io/pink-icons": "0.4.0", + "@appwrite.io/pink": "0.5.0", + "@appwrite.io/pink-icons": "0.5.0", "@popperjs/core": "^2.11.8", "@sentry/svelte": "^7.66.0", "@sentry/tracing": "^7.66.0", diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte new file mode 100644 index 000000000..96f5ab140 --- /dev/null +++ b/src/lib/components/filePicker.svelte @@ -0,0 +1,240 @@ + + + +
+
+
+

Select file

+ +
+
+
+
+ +
+
+ +
+ + +
+
+ + {#if currentBucket} +
+
+
+ {currentBucket?.name} +
+
{currentBucket?.$id}
+
+
+
+ + + +
+
+
+
    +
  • + +
    • +
  • + +
    • +
+
+ +
+ + Upload +
+
+
+
+
+ + + + + + + + + + + {#if files} + {#await files} + loading + {:then response} + + {#each response.files as file} + + + + + + + + {/each} + + {/await} + {/if} +
+ Filename + + Type + + Size + + Created +
+
+ + + asd + + +
+ 		+
+ {file.mimeType} +
+ 		+ {calculateSize( + file.sizeOriginal + )} + + + + +
+
+ {/if} +
+
+
+
+
+ + +
+
+
+ diff --git a/src/lib/components/modal.svelte b/src/lib/components/modal.svelte index ca32c4e7e..9bcdbdc89 100644 --- a/src/lib/components/modal.svelte +++ b/src/lib/components/modal.svelte @@ -5,7 +5,7 @@ import { disableCommands } from '$lib/commandCenter'; export let show = false; - export let size: 'small' | 'big' = null; + export let size: 'small' | 'big' | 'huge' = null; export let icon: string = null; export let state: 'success' | 'warning' | 'error' | 'info' = null; export let error: string = null; diff --git a/src/lib/components/modalWrapper.svelte b/src/lib/components/modalWrapper.svelte index bd1eea5f4..bc9ca7ea8 100644 --- a/src/lib/components/modalWrapper.svelte +++ b/src/lib/components/modalWrapper.svelte @@ -4,7 +4,7 @@ import { disableCommands } from '$lib/commandCenter'; export let show = false; - export let size: 'small' | 'big' = null; + export let size: 'small' | 'big' | 'huge' = null; export let closable = true; export let headerDivider = true; export let style = ''; @@ -73,6 +73,7 @@ class:u-hide={!show} class:is-small={size === 'small'} class:is-big={size === 'big'} + class:is-huge={size === 'huge'} class:is-separate-header={headerDivider} bind:this={dialog} on:cancel|preventDefault diff --git a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte index 4175ca7ce..c0e6436b3 100644 --- a/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte +++ b/src/routes/console/project-[project]/storage/bucket-[bucket]/+page.svelte @@ -45,6 +45,7 @@ import Create from './create-file/create.svelte'; import DeleteFile from './deleteFile.svelte'; import { isCloud } from '$lib/system'; + import FilePicker from '$lib/components/filePicker.svelte'; export let data; @@ -52,6 +53,8 @@ let showDropdown = []; let selectedFile: Models.File = null; + let showCreate = false; + const projectId = $page.params.project; const bucketId = $page.params.bucket; const usedStorage = @@ -93,7 +96,7 @@ disabled: !isButtonDisabled }}> + +
+ +
+ + + {/if} + + {/if} +
+
+
+
+
+
+ Select a file to upload + Select a file to upload +
+
+
+ Max file size: 1MB + +
+ + {#if value} + {@const fileSize = humanFileSize(value.sizeOriginal)} +
    +
  • +
    • +
+ {/if} +
+
+ + +{#if show} + +{/if} diff --git a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte index 53c48900c..6565da45b 100644 --- a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte +++ b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte @@ -45,6 +45,7 @@ import { sdk } from '$lib/stores/sdk'; import PushPhone from '../pushPhone.svelte'; import { onMount } from 'svelte'; + import InputFilePicker from '$lib/elements/forms/inputFilePicker.svelte'; let showCustomId = false; let showTest = false; @@ -148,11 +149,17 @@
- - - + + + + + + + + +
    {#each customData || [] as _, rowIndex} From 9e177877354f86ed40d684c56e5a601d1eb26935 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 26 Feb 2024 12:52:43 +0100 Subject: [PATCH 04/16] fix: leftovers --- src/lib/components/filePicker.svelte | 18 +++++++++++------- src/lib/elements/forms/inputFilePicker.svelte | 2 +- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte index 3756f6b9c..0861b504b 100644 --- a/src/lib/components/filePicker.svelte +++ b/src/lib/components/filePicker.svelte @@ -225,6 +225,7 @@
+ @@ -261,13 +264,16 @@ style="--grid-gap:2rem; --grid-item-size:10rem; --grid-item-size-small-screens:8rem;"> {#each response.files as file}
  • - +
    • {/each} From 546dbce72594969501bc609916f4d05df53c6198 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Mon, 26 Feb 2024 14:04:01 +0100 Subject: [PATCH 07/16] fix button --- src/lib/components/filePicker.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte index 63a613fa8..edbee1726 100644 --- a/src/lib/components/filePicker.svelte +++ b/src/lib/components/filePicker.svelte @@ -228,7 +228,7 @@ @@ -260,30 +268,38 @@ {#if view === 'grid'}
      + style="--grid-gap:40px; --grid-item-size:120px;"> {#each response.files as file}
    • -
      selectFile(file)} - on:keyup={clickOnEnter} - tabindex="0" - style:aspect-ratio="1/1" - class="card u-height-100-percent u-flex u-flex-vertical u-gap-16" - style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-large);"> - +
      +
      selectFile(file)} + on:keyup={clickOnEnter} + tabindex="0" + style:aspect-ratio="1/1" + style:display="flex" + style:align-items="flex-end" + style:flex-direction="row-reverse" + style:border-shadow="none" + class="card u-height-100-percent u-gap-16" + style="--card-padding:0.5rem; --card-border-radius:var(--border-radius-large);"> + +
      + {file.name}
      • {/each} @@ -293,7 +309,8 @@ Filename - ID + Type Size @@ -309,6 +326,7 @@ class="u-inline-flex u-cross-center u-gap-12"> - + {file.name} + + {file.$id} + {file.mimeType} @@ -367,7 +388,7 @@ {:else} - +
      @@ -384,7 +405,7 @@

      -       + {/if} {/await} From 6ed0fdb410952f6439621e18baa3cda25b0f2152 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 29 Feb 2024 13:03:34 +0100 Subject: [PATCH 10/16] fix: linter --- src/lib/components/filePicker.svelte | 1 - .../project-[project]/messaging/wizard/pushFormList.svelte | 1 - 2 files changed, 2 deletions(-) diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte index 64755ca4d..d44df737b 100644 --- a/src/lib/components/filePicker.svelte +++ b/src/lib/components/filePicker.svelte @@ -23,7 +23,6 @@ import Heading from './heading.svelte'; import { clickOnEnter } from '$lib/helpers/a11y'; import Empty from './empty.svelte'; - import { Pill } from '$lib/elements'; export let show: boolean; export let selectedBucket: string = null; diff --git a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte index 10178ecf4..710ede8d1 100644 --- a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte +++ b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte @@ -52,7 +52,6 @@ let selected = 'self'; let otherEmail = ''; let dataError = ''; - let file: Models.File = null; let customData: [string, string][] = []; onMount(() => { From eb6f3f19b29c0a98c5d441ec6771cfa9e6d2e151 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Thu, 29 Feb 2024 13:06:15 +0100 Subject: [PATCH 11/16] fix: linter --- .../project-[project]/messaging/wizard/pushFormList.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte index 710ede8d1..1bc55c2b1 100644 --- a/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte +++ b/src/routes/console/project-[project]/messaging/wizard/pushFormList.svelte @@ -41,7 +41,7 @@ import { Modal } from '$lib/components'; import { user } from '$lib/stores/user'; import { clickOnEnter } from '$lib/helpers/a11y'; - import { ID, MessagingProviderType, type Models } from '@appwrite.io/console'; + import { ID, MessagingProviderType } from '@appwrite.io/console'; import { sdk } from '$lib/stores/sdk'; import PushPhone from '../pushPhone.svelte'; import { onMount } from 'svelte'; From 49da15e2a17839e7c6f9ba7d82cdd55ec1b94deb Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Fri, 1 Mar 2024 01:54:27 +0100 Subject: [PATCH 12/16] fix: design review --- src/lib/components/filePicker.svelte | 71 ++++++++++++++++++---------- src/lib/elements/table/table.svelte | 2 + 2 files changed, 47 insertions(+), 26 deletions(-) diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte index d44df737b..8ab23a8c7 100644 --- a/src/lib/components/filePicker.svelte +++ b/src/lib/components/filePicker.svelte @@ -7,7 +7,7 @@ import { calculateSize } from '$lib/helpers/sizeConvertion'; import { toLocaleDate } from '$lib/helpers/date'; import { - TableScroll, + Table, TableBody, TableRowButton, TableHeader, @@ -30,6 +30,7 @@ export let onSelect: (e: Models.File) => void; let search = writable(''); + let searchEnabled = false; let fileSelector: HTMLInputElement; let uploading = false; let view: 'grid' | 'list' = 'list'; @@ -59,8 +60,7 @@ fileSelector.files[0] ); search.set($search === null ? '' : null); - selectedBucket = file.bucketId; - selectedFile = file.$id; + selectFile(file); } catch (e) { console.error(e); } finally { @@ -98,11 +98,19 @@ $: files = currentBucket && - sdk.forProject.storage.listFiles( - currentBucket.$id, - [Query.startsWith('mimeType', 'image/'), Query.orderDesc('$createdAt')], - $search || undefined - ); + sdk.forProject.storage + .listFiles( + currentBucket.$id, + [Query.startsWith('mimeType', 'image/'), Query.orderDesc('$createdAt')], + $search || undefined + ) + .then((response) => { + if ($search === '') { + searchEnabled = response.total > 0; + } + + return response; + }); $: { selectedBucket = currentBucket?.$id; @@ -196,13 +204,15 @@ + disabled={!searchEnabled} + style="min-inline-size: 17.5rem; block-size: 100%" />
        • + {:else} +
      • + No buckets found +
        • {/each} {/await}
      @@ -175,260 +193,298 @@ {#await buckets} loading {:then response} - - ({ - value: n.$id, - label: n.name - }))} - bind:value={currentBucket.$id} - id="buckets" /> - + {#if currentBucket?.$id} + + ({ + value: n.$id, + label: n.name + }))} + bind:value={currentBucket.$id} + id="buckets" /> + + {/if} {/await}
      - - {#if currentBucket} -
      -
      -
      - {currentBucket?.name} -
      - - {currentBucket?.$id} - -
      + {#await buckets} +
      - -
      -
      -
        -
      • - -
        • -
      • - -
        • -
      + class="u-position-absolute u-width-full-line u-flex u-flex-vertical u-main-center u-cross-center u-gap-16 u-margin-block-start-32" + style="inset-inline-start: 0;"> +
      +

      Loading files...

      +
      +
      + {:then response} + {#if response?.total} + {#if currentBucket} +
      +
      +
      + {currentBucket?.name} +
      + + {currentBucket?.$id} +
      +
      + +
      +
      +
        +
      • + +
        • +
      • + +
        • +
      +
      + +
      +
      +
      + + {#if files} + {#await files then response} +
      + {#if response?.files?.length} + {#if view === 'grid'} +
        + {#each response?.files as file} +
      • +
        +
        + selectFile(file)} + on:keyup={clickOnEnter} + tabindex="0" + style:aspect-ratio="1/1" + style:display="flex" + style:align-items="flex-end" + style:flex-direction="row-reverse" + style:box-shadow="none" + class="card u-height-100-percent u-gap-16" + style="--card-padding:0.5rem;--card-padding-mobile:0.5rem; --card-border-radius:var(--border-radius-medium);"> + +
        + {file.name} +
        +
        • + {/each} +
      + {/if} + {#if view === 'list'} + + + Filename + + ID + + + Type + + + Size + + + Created + + + + {#each response?.files as file} + + selectFile(file)}> + +
      + + + {file.name} + + + {file.name} + +
      +       + + {file.$id} + + + {file.mimeType} + + + {calculateSize( + file.sizeOriginal + )} + + + {toLocaleDate( + file.$createdAt + )} + +       + {/each} +       +
      + {/if} + {:else if $search} + +
      +
      + Sorry we couldn't find "{$search}" +

      + There are no files that match your + search. +

      +
      +
      + +
      +
      +       + {:else} + +
      +
      + + No files found within this bucket. + +

      + Need a hand? Learn more in our + documentation. +

      +
      +
      +       + {/if} +
      + {/await} + {/if} + {/if} + {:else} + +
      + + No buckets found +
      -
      -
      - {#if files} - {#await files} -
      -
      -
      -

      Loading files...

      -
      -
      - {:then response} -
      - {#if response?.files?.length} - {#if view === 'grid'} -
        - {#each response?.files as file} -
      • -
        -
        selectFile(file)} - on:keyup={clickOnEnter} - tabindex="0" - style:aspect-ratio="1/1" - style:display="flex" - style:align-items="flex-end" - style:flex-direction="row-reverse" - style:box-shadow="none" - class="card u-height-100-percent u-gap-16" - style="--card-padding:0.5rem;--card-padding-mobile:0.5rem; --card-border-radius:var(--border-radius-medium);"> - -
        - {file.name} -
        -
        • - {/each} -
      - {/if} - {#if view === 'list'} - - - Filename - - ID - - - Type - - - Size - - - Created - - - - {#each response?.files as file} - selectFile(file)}> - -
      - - - {file.name} - - - {file.name} - -
      -       - - {file.$id} - - - {file.mimeType} - - - {calculateSize(file.sizeOriginal)} - - - {toLocaleDate(file.$createdAt)} - -       - {/each} -       -
      - {/if} - {:else if $search} - -
      -
      - Sorry we couldn't find "{$search}" -

      - There are no files that match your search. -

      -
      -
      - -
      -
      -       - {:else} - -
      -
      - - No files found within this bucket. - -

      - Need a hand? Learn more in our - documentation. -

      -
      -
      -       - {/if} -
      - {/await} + {/if} - {/if} + {/await}
      From 611b9b9d76c7c8f33f54c400420275ed65e924f7 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Fri, 8 Mar 2024 00:31:14 +0100 Subject: [PATCH 14/16] fix: design review --- src/lib/components/filePicker.svelte | 106 ++++++++++++------ src/lib/elements/forms/inputFilePicker.svelte | 6 +- .../project-[project]/messaging/create.svelte | 4 +- .../message-[message]/pushMessage.svelte | 32 ++++-- 4 files changed, 103 insertions(+), 45 deletions(-) diff --git a/src/lib/components/filePicker.svelte b/src/lib/components/filePicker.svelte index a7c0a34a2..3ec802af3 100644 --- a/src/lib/components/filePicker.svelte +++ b/src/lib/components/filePicker.svelte @@ -1,8 +1,8 @@