Merge pull request #2577 from appwrite/add-refresh

Author: ItzNotABug

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte

@@ -26,16 +26,24 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { isSmallViewport } from '$lib/stores/viewport';
-    import { IconChevronDown, IconChevronUp, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import {
+        IconChevronDown,
+        IconChevronUp,
+        IconPlus,
+        IconRefresh
+    } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
     import EmptySheet from './layout/emptySheet.svelte';
     import CreateRow from './rows/create.svelte';
     import { onDestroy } from 'svelte';
     import { isCloud } from '$lib/system';
     import { Empty as SuggestionsEmptySheet, tableColumnSuggestions } from '../(suggestions)';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     export let data: PageData;
 
+    let isRefreshing = false;
     let showImportCSV = false;
 
     // todo: might need a type fix here.
@@ -147,36 +155,66 @@
                         <svelte:fragment slot="tooltip">Filters</svelte:fragment>
                     </Tooltip>
                 </Layout.Stack>
-                <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-                    <Button
-                        secondary
-                        event={Click.DatabaseImportCsv}
-                        disabled={!(hasColumns && hasValidColumns)}
-                        on:click={() => (showImportCSV = true)}>
-                        Import CSV
-                    </Button>
-                    {#if !$isSmallViewport}
+                <Layout.Stack
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="flex-end"
+                    style="padding-right: 40px;">
+                    <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                         <Button
                             secondary
-                            event="create_row"
+                            event={Click.DatabaseImportCsv}
                             disabled={!(hasColumns && hasValidColumns)}
-                            on:click={() => ($showRowCreateSheet.show = true)}>
-                            <Icon icon={IconPlus} slot="start" size="s" />
-                            Create row
+                            on:click={() => (showImportCSV = true)}>
+                            Import CSV
                         </Button>
+                        {#if !$isSmallViewport}
+                            <Button
+                                secondary
+                                event="create_row"
+                                disabled={!(hasColumns && hasValidColumns)}
+                                on:click={() => ($showRowCreateSheet.show = true)}>
+                                <Icon icon={IconPlus} slot="start" size="s" />
+                                Create row
+                            </Button>
 
-                        <Button
-                            icon
-                            size="s"
-                            secondary
-                            class="small-button-dimensions"
-                            on:click={() => {
-                                $expandTabs = !$expandTabs;
-                                preferences.setKey('tableHeaderExpanded', $expandTabs);
-                            }}>
-                            <Icon icon={!$expandTabs ? IconChevronDown : IconChevronUp} size="s" />
-                        </Button>
-                    {/if}
+                            <Button
+                                icon
+                                size="s"
+                                secondary
+                                class="small-button-dimensions"
+                                on:click={() => {
+                                    $expandTabs = !$expandTabs;
+                                    preferences.setKey('tableHeaderExpanded', $expandTabs);
+                                }}>
+                                <Icon
+                                    icon={!$expandTabs ? IconChevronDown : IconChevronUp}
+                                    size="s" />
+                            </Button>
+
+                            <Tooltip disabled={isRefreshing || !data.rows.total} placement="top">
+                                <Button
+                                    icon
+                                    size="s"
+                                    secondary
+                                    disabled={isRefreshing ||
+                                        !data.rows.total ||
+                                        !(hasColumns && hasValidColumns)}
+                                    class="small-button-dimensions"
+                                    on:click={async () => {
+                                        isRefreshing = true;
+                                        await invalidate(Dependencies.TABLE);
+                                        isRefreshing = false;
+                                    }}>
+                                    <div style:line-height="0px" class:rotating={isRefreshing}>
+                                        <Icon icon={IconRefresh} size="s" />
+                                    </div>
+                                </Button>
+
+                                <svelte:fragment slot="tooltip">Refresh</svelte:fragment>
+                            </Tooltip>
+                        {/if}
+                    </Layout.Stack>
                 </Layout.Stack>
             </Layout.Stack>
             {#if $isSmallViewport}
@@ -282,4 +320,17 @@
         width: 32px !important;
         height: 32px !important;
     }
+
+    :global(.rotating) {
+        animation: rotate 1s linear infinite;
+    }
+
+    @keyframes rotate {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
 </style>