Merge pull request #877 from appwrite/feat-file-picker

feat: file picker
appwrite · Mar 7, 2024 · dcdec17 · dcdec17
2 parents 15a021a + 5b34fb4
commit dcdec17
Show file tree

Hide file tree

Showing 16 changed files with 732 additions and 28 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,8 +19,8 @@
     },
     "dependencies": {
         "@appwrite.io/console": "^0.6.0-rc.17",
-        "@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
diff --git a/src/lib/components/id.svelte b/src/lib/components/id.svelte
@@ -47,7 +47,7 @@
     }
 </script>
 
-<Copy {value} {event}>
+<Copy {value} {event} appendTo="parent">
     <div
         class="interactive-text-output is-buttons-on-top"
         class:u-text-center={centered}

diff --git 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
@@ -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
@@ -81,3 +82,18 @@
         <slot close={closeModal} />
     {/if}
 </dialog>
+
+<style lang="scss">
+    @import '@appwrite.io/pink/src/abstract/variables/_devices.scss';
+
+    .modal.is-huge {
+        block-size: 100%;
+        min-block-size: 80vh;
+
+        @media #{$break1}, #{$break2} {
+            min-inline-size: 100%;
+            min-block-size: 100%;
+            border-radius: 0;
+        }
+    }
+</style>
diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
@@ -31,3 +31,4 @@ export { default as InputDate } from './inputDate.svelte';
 export { default as InputDateRange } from './inputDateRange.svelte';
 export { default as InputTime } from './inputTime.svelte';
 export { default as InputDigits } from './inputDigits.svelte';
+export { default as InputFilePicker } from './inputFilePicker.svelte';
diff --git a/src/lib/elements/forms/inputFilePicker.svelte b/src/lib/elements/forms/inputFilePicker.svelte
@@ -0,0 +1,104 @@
+<script lang="ts">
+    import { Drop, Trim } from '$lib/components';
+    import FilePicker from '$lib/components/filePicker.svelte';
+    import { humanFileSize } from '$lib/helpers/sizeConvertion';
+    import type { Models } from '@appwrite.io/console';
+    import { Label } from '.';
+
+    export let label: string = null;
+    export let value: Models.File = null;
+    export let disabled = false;
+
+    export let optionalText: string = null;
+    export let tooltip: string = null;
+    export let isPopoverDefined = true;
+
+    let show = false;
+
+    function onSelect(file: Models.File) {
+        value = file;
+    }
+</script>
+
+<div>
+    {#if label}
+        <Label {optionalText} {tooltip} hide={!label}>
+            {label}{#if $$slots.popover && isPopoverDefined}
+                <Drop bind:show display="inline-block">
+                    <!-- TODO: make unclicked icon greyed out and hover and clicked filled -->
+                    &nbsp;<button
+                        type="button"
+                        on:click={() => (show = !show)}
+                        class="tooltip"
+                        aria-label="input tooltip">
+                        <span
+                            class="icon-info"
+                            aria-hidden="true"
+                            style="font-size: var(--icon-size-small)" />
+                    </button>
+                    <svelte:fragment slot="list">
+                        <div
+                            class="dropped card u-max-width-250"
+                            style="--p-card-padding: .75rem; box-shadow:var(--shadow-large);">
+                            <slot name="popover" />
+                        </div>
+                    </svelte:fragment>
+                </Drop>
+            {/if}
+        </Label>
+    {/if}
+    <div
+        role="region"
+        class="box is-no-shadow u-padding-24 is-border-dashed"
+        style:--box-border-radius="var(--border-radius-xsmall)">
+        <div class="upload-file-box">
+            <div class="upload-file-box-image">
+                <span class="icon-upload" aria-hidden="true" />
+            </div>
+            <div class="u-min-width-0 u-text-center">
+                <h5 class="upload-file-box-title heading-level-7 u-inline">
+                    <span class="is-only-desktop">Select a file to upload</span>
+                    <span class="is-not-desktop">Select a file to upload</span>
+                </h5>
+            </div>
+            <div class="u-flex u-main-center u-cross-center u-gap-16 u-flex-vertical-mobile">
+                Max file size: 1MB
+                <button
+                    class="button is-secondary is-full-width-mobile"
+                    type="button"
+                    {disabled}
+                    on:click={() => (show = true)}>
+                    <span class="text">Browse</span>
+                </button>
+            </div>
+
+            {#if value}
+                {@const fileSize = humanFileSize(value.sizeOriginal)}
+                <ul class="upload-file-box-list u-min-width-0">
+                    <li class="u-flex u-cross-center u-min-width-0">
+                        <span class="icon-document" aria-hidden="true" />
+                        <span class="upload-file-box-name u-min-width-0">
+                            <Trim alternativeTrim>{value.name}</Trim>
+                        </span>
+                        <span
+                            class="upload-file-box-size u-margin-inline-start-4 u-margin-inline-end-16">
+                            {fileSize.value + fileSize.unit}
+                        </span>
+                        <button
+                            on:click={() => (value = null)}
+                            type="button"
+                            class="button is-text is-only-icon u-margin-inline-start-auto"
+                            aria-label="remove file"
+                            style="--button-size:1.5rem;">
+                            <span class="icon-x" aria-hidden="true" />
+                        </button>
+                    </li>
+                </ul>
+            {/if}
+        </div>
+    </div>
+</div>
+
+{#if show}
+    <FilePicker selectedFile={value?.$id} selectedBucket={value?.bucketId} bind:show {onSelect} />
+{/if}
diff --git a/src/lib/elements/forms/inputSearch.svelte b/src/lib/elements/forms/inputSearch.svelte
@@ -9,6 +9,7 @@
     export let disabled = false;
     export let autofocus = false;
     export let isWithEndButton = true;
+    export let style: string = '';
 
     const dispatch = createEventDispatcher();
     let element: HTMLInputElement;
@@ -53,6 +54,7 @@
         {placeholder}
         {disabled}
         {required}
+        {style}
         type="search"
         class="input-text"
         bind:this={element}

diff --git a/src/lib/elements/table/table.svelte b/src/lib/elements/table/table.svelte
@@ -3,12 +3,14 @@
     export let noStyles = false;
     export let style = '';
     export let transparent = false;
+    export let dense = false;
 </script>
 
 <div
     class="table is-selected-columns-mobile"
     class:u-margin-block-start-32={!noMargin}
     class:is-remove-outer-styles={noStyles}
+    class:is-table-row-medium-size={dense}
     {style}
     style:--p-table-bg-color={transparent ? 'var(--transparent)' : ''}
     role="table"

diff --git a/src/lib/elements/table/tableScroll.svelte b/src/lib/elements/table/tableScroll.svelte
@@ -5,6 +5,7 @@
     export let noMargin = false;
     export let style = '';
     export let transparent = false;
+    export let dense = false;
     let isOverflowing = false;
 
     const hasOverflow: Action<HTMLDivElement, unknown> = (node) => {
@@ -45,6 +46,7 @@
         <table
             class="table"
             class:is-sticky-scroll={isSticky && isOverflowing}
+            class:is-table-row-medium-size={dense}
             {style}
             style:--p-table-bg-color={transparent ? 'var(--transparent)' : ''}>
             <slot />

diff --git a/src/routes/console/project-[project]/messaging/+layout.svelte b/src/routes/console/project-[project]/messaging/+layout.svelte
@@ -13,6 +13,7 @@
     import { topicsSearcher } from '$lib/commandCenter/searchers/topics';
     import { project } from '../store';
 
+    // TODO: finalize the commands
     $: $registerCommands([
         {
             label: 'Create message',

diff --git a/src/routes/console/project-[project]/messaging/create.svelte b/src/routes/console/project-[project]/messaging/create.svelte
@@ -49,6 +49,8 @@
                     break;
                 case MessagingProviderType.Push:
                     {
+                        const file = $messageParams[MessagingProviderType.Push].file;
+                        const fileCompoundId = `${file.bucketId}:${file.bucketId}`;
                         const customData: Record<string, string> = {};
                         const { data } = $messageParams[MessagingProviderType.Push];
                         if (data && data.length > 0) {
@@ -67,7 +69,7 @@
                             $messageParams[$providerType].targets,
                             customData,
                             undefined,
-                            undefined,
+                            fileCompoundId,
                             undefined,
                             undefined,
                             undefined,

diff --git a/src/routes/console/project-[project]/messaging/message-[message]/pushMessage.svelte b/src/routes/console/project-[project]/messaging/message-[message]/pushMessage.svelte
@@ -7,6 +7,7 @@
         FormItemPart,
         FormList,
         Helper,
+        InputFilePicker,
         InputText,
         InputTextarea,
         Label
@@ -21,18 +22,26 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { validateData } from '../wizard/pushFormList.svelte';
 
-    export let message: Models.Message & { data: Record<string, string> };
+    /* eslint  @typescript-eslint/no-explicit-any: 'off' */
+    export let message: Models.Message & { data: Record<string, any> };
 
     let title = '';
     let body = '';
+    let file: Models.File = null;
     let originalCustomData: [string, string][] = [['', '']];
     let customData: [string, string][] = [['', '']];
     let dataError = '';
     let disabled = true;
 
-    onMount(() => {
+    onMount(async () => {
         title = message.data.title;
         body = message.data.body;
+        if (message.data?.image) {
+            file = await sdk.forProject.storage.getFile(
+                message.data.image?.bucketId,
+                message.data.image?.fileId
+            );
+        }
 
         const dataEntries: [string, string][] = [];
         Object.entries(message.data['data'] ?? {}).forEach(([key, value]) => {
@@ -44,6 +53,7 @@
 
     async function update() {
         try {
+            const fileCompoundId = file ? `${file.bucketId}:${file.$id}` : undefined;
             const data = customData.reduce((acc, [key, value]) => {
                 if (key) {
                     acc[key] = value;
@@ -57,7 +67,9 @@
                 undefined,
                 title,
                 body,
-                data
+                data,
+                undefined,
+                fileCompoundId
             );
             originalCustomData = structuredClone(customData);
             await invalidate(Dependencies.MESSAGING_MESSAGE);
@@ -79,6 +91,8 @@
     $: disabled =
         title === message.data.title &&
         body === message.data.body &&
+        file?.$id === message.data.image?.fileId &&
+        file?.bucketId === message.data.image?.bucketId &&
         originalCustomData.length === customData.length &&
         originalCustomData.every(
             (ocd, i) =>
@@ -99,13 +113,20 @@
                 <InputText
                     id="title"
                     label="Title"
-                    disabled={message.status != 'draft'}
-                    bind:value={title}></InputText>
+                    disabled={message.status !== 'draft'}
+                    bind:value={title} />
                 <InputTextarea
                     id="message"
                     label="Message"
-                    disabled={message.status != 'draft'}
-                    bind:value={body}></InputTextarea>
+                    disabled={message.status !== 'draft'}
+                    bind:value={body} />
+                <FormItem>
+                    <InputFilePicker
+                        disabled={message.status !== 'draft'}
+                        bind:value={file}
+                        label="Media"
+                        optionalText="(Optional)" />
+                </FormItem>
                 <form class="form">
                     <FormItem>
                         <Label
@@ -125,7 +146,6 @@
                                         placeholder="Enter key"
                                         label="Key"
                                         showLabel={false} />
-
                                     <InputText
                                         id={`${rowIndex}-value`}
                                         isMultiple