Merge pull request #216 from appwrite/feat-empty-arrays-ui

Feat: empty arrays UI

src/lib/actions/tooltip.ts

@@ -1,17 +1,24 @@
 import type { Action } from 'svelte/action';
-import type { Props } from 'tippy.js';
+import type { Props as TippyProps } from 'tippy.js';
 import tippy from 'tippy.js';
 
+type Props = TippyProps & {
+    disabled?: boolean;
+};
+
 export const tooltip: Action<HTMLElement, Partial<Props>> = (node, config) => {
     const instance = tippy(node, config);
+    if (config.disabled) instance.disable();
 
     return {
-        update({ content }) {
+        update({ content, disabled }) {
             if (content !== instance.props.content) {
                 instance.setProps({
                     content
                 });
             }
+
+            disabled ? instance.disable() : instance.enable();
         },
         destroy() {
             instance.destroy();

src/lib/elements/forms/inputCheckbox.svelte

@@ -2,6 +2,7 @@
     import { FormItem, Helper } from '.';
 
     export let label: string;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let id: string;
     export let value = false;
@@ -26,7 +27,13 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <label class:u-hide={!showLabel} class="label" for={id}>
+        {label}
+        {#if optionalText}
+            <span class="optional">{optionalText}</span>
+        {/if}
+    </label>
+
     <div class="input-text-wrapper">
         <input
             {id}

src/lib/elements/forms/inputDateTime.svelte

@@ -4,6 +4,7 @@
 
     export let label: string;
     export let showLabel = true;
+    export let optionalText: string | undefined = undefined;
     export let id: string;
     export let value = '';
     export let required = false;
@@ -38,7 +39,13 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <label class:u-hide={!showLabel} class="label" for={id}>
+        {label}
+        <span class:u-hide={!showLabel || !optionalText} class="optional">
+            {optionalText}
+        </span>
+    </label>
+
     <div class="input-text-wrapper">
         <input
             {id}

src/lib/elements/forms/inputNumber.svelte

@@ -3,6 +3,7 @@
     import { FormItem, Helper } from '.';
 
     export let label: string;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let id: string;
     export let value: number = null;
@@ -51,7 +52,13 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <label class:u-hide={!showLabel} class="label" for={id}>
+        {label}
+        {#if optionalText}
+            <span class="optional">{optionalText}</span>
+        {/if}
+    </label>
+
     <div class="input-text-wrapper">
         <input
             {id}

src/lib/elements/forms/inputSelect.svelte

@@ -3,6 +3,7 @@
 
     export let id: string;
     export let label: string;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let value: string | number | boolean;
     export let placeholder = '';
@@ -32,7 +33,13 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
+    <label class:u-hide={!showLabel} class="label" for={id}>
+        {label}
+        {#if optionalText}
+            <span class="optional">{optionalText}</span>
+        {/if}
+    </label>
+
     <div class="select">
         <select
             {id}

src/lib/elements/forms/inputTags.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { last } from '$lib/helpers/array';
     import { onMount } from 'svelte';
     import { FormItem, Helper } from '.';
 
@@ -36,7 +37,7 @@
         }
         if (['Backspace', 'Delete'].includes(e.key)) {
             if (value.length === 0) {
-                removeValue(tags[tags.length - 1]);
+                removeValue(last(tags));
             }
         }
     };

src/lib/elements/forms/inputText.svelte

@@ -4,6 +4,7 @@
     import { FormItem, Helper } from '.';
 
     export let label: string;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let id: string;
     export let value = '';
@@ -42,8 +43,8 @@
 </script>
 
 <FormItem>
-    <label class:u-hide={!showLabel} class="label" for={id}
-        >{label}
+    <label class:u-hide={!showLabel} class="label" for={id}>
+        {label}
         {#if tooltip}
             <span
                 class="icon-info"
@@ -52,7 +53,11 @@
                     content: tooltip
                 }} />
         {/if}
+        {#if optionalText}
+            <span class="optional">{optionalText}</span>
+        {/if}
     </label>
+
     <div class="input-text-wrapper">
         <input
             {id}

src/lib/helpers/object.ts

@@ -0,0 +1,9 @@
+/**
+ * Strict typed `Object.entries`
+ * Extracted from https://github.com/antfu/utils
+ *
+ * @category Object
+ */
+export function objectEntries<T extends object>(obj: T) {
+    return Object.entries(obj) as Array<[keyof T, T[keyof T]]>;
+}

src/lib/helpers/string.ts

@@ -1,3 +1,14 @@
+/**
+ * Capitalizes the first letter of a string
+ *
+ * @export
+ * @param {string} str
+ * @returns {string}
+ */
+export function capitalize(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
 /**
  * Given a string, returns the singular version of it,
  * by removing the trailing 's'.

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/[[page]]/+page.svelte

@@ -19,6 +19,7 @@
     import { page } from '$app/stores';
     import { PAGE_LIMIT } from '$lib/constants';
     import CreateAttribute from '../createAttribute.svelte';
+    import { tooltip } from '$lib/actions/tooltip';
 
     export let data: PageData;
     let showCreateAttribute = false;
@@ -33,6 +34,44 @@
             title: attribute.key
         }))
     ];
+
+    function formatArray(array: unknown[]) {
+        if (array.length === 0) return '[ ]';
+
+        let formattedFields: string[] = [];
+        for (const item of array) {
+            if (typeof item === 'string') {
+                formattedFields.push(`"${item}"`);
+            } else {
+                formattedFields.push(`${item}`);
+            }
+        }
+
+        return `[${formattedFields.join(', ')}]`;
+    }
+
+    function formatColumn(column: unknown) {
+        let formattedColumn: string;
+
+        if (typeof column === 'string') {
+            formattedColumn = column;
+        } else if (Array.isArray(column)) {
+            formattedColumn = formatArray(column);
+        } else if (!column) {
+            formattedColumn = 'n/a';
+        } else {
+            formattedColumn = `${column}`;
+        }
+
+        return {
+            value:
+                formattedColumn.length > 20
+                    ? `${formattedColumn.slice(0, 20)}...`
+                    : formattedColumn,
+            truncated: formattedColumn.length > 20,
+            whole: formattedColumn
+        };
+    }
 </script>
 
 <Container>
@@ -70,8 +109,15 @@
                                 </Copy>
                             </TableCell>
                             {#each columns as column}
+                                {@const formatted = formatColumn(document[column.key])}
                                 <TableCell>
-                                    {document[column.key] ?? 'n/a'}
+                                    <div
+                                        use:tooltip={{
+                                            content: formatted.whole,
+                                            disabled: !formatted.truncated
+                                        }}>
+                                        {formatted.value}
+                                    </div>
                                 </TableCell>
                             {/each}
                         </TableRowLink>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/createDocument.svelte

@@ -23,7 +23,7 @@
         $createDocument.attributes = $attributes.filter((a) => a.status === 'available');
         $attributes.forEach((attr) => {
             if (attr.array) {
-                $createDocument.document[attr.key] = [null];
+                $createDocument.document[attr.key] = [];
             } else {
                 $createDocument.document[attr.key] = null;
             }
@@ -39,12 +39,15 @@
                 $createDocument.document,
                 $createDocument.permissions
             );
+
             addNotification({
                 message: 'Document has been created',
                 type: 'success'
             });
             trackEvent('submit_document_create');
             invalidate(Dependencies.DOCUMENTS);
+
+            createDocument.reset();
             wizard.hide();
         } catch (error) {
             addNotification({

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attribute.svelte

@@ -9,6 +9,7 @@
 
     export let id: string;
     export let label: string;
+    export let optionalText: string | undefined = undefined;
     export let value: string | number | boolean | null;
     export let attribute:
         | Models.AttributeBoolean
@@ -44,13 +45,15 @@
             {id}
             {label}
             {attribute}
+            {optionalText}
             bind:value />
     {:else}
         <svelte:component
             this={attributesTypeMap[attribute.type]}
             {id}
             {label}
             {attribute}
+            {optionalText}
             bind:value />
     {/if}
 {/if}