Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

add: refresh support.

Browse Source
This commit is contained in:
Darshan
2025-11-10 11:33:04 +05:30
parent 49bdca652c
commit d12547cf10
1 changed files with 77 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
+77 -26
View File
@@ -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}
class="small-button-dimensions"
on:click={async () => {
isRefreshing = true;
await invalidate(Dependencies.TABLE);
isRefreshing = false;
}}>
<div
class={isRefreshing ? 'rotating' : ''}
style:line-height="0px">
<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>