fix(frontend): fix AgGrid pagination refresh (#3773)

* feat(frontend): fix AgGrid pagination refresh

* feat(frontend): fix AgGrid pagination refresh
This commit is contained in:
Faton Ramadani
2024-05-20 15:25:18 +02:00
committed by GitHub
parent 73ddc46ce7
commit ccc2699d4e
2 changed files with 97 additions and 81 deletions
@@ -284,6 +284,7 @@
: undefined,
onPaginationChanged: (event) => {
outputs?.page.set(event.api.paginationGetCurrentPage())
footerRenderCount++
},
initialState: state,
suppressRowDeselection: true,
@@ -422,6 +423,7 @@
}
let loading = false
let refreshCount: number = 0
let footerRenderCount: number = 0
</script>
{#each Object.keys(components['aggridcomponent'].initialData.configuration) as key (key)}
@@ -488,88 +490,91 @@
{/key}
</div>
{#if resolvedConfig.footer}
<div class="flex gap-1 w-full justify-between items-center text-sm text-secondary/80 p-2">
<div>
<Popover>
<svelte:fragment slot="text">Download</svelte:fragment>
<Button
startIcon={{ icon: Download }}
color="light"
size="xs2"
on:click={() => {
api?.exportDataAsCsv()
}}
iconOnly
/>
</Popover>
</div>
<div class="flex flex-row gap-1 items-center">
{#if resolvedConfig?.pagination}
{#key refreshCount}
<div class="text-xs mx-2 text-primary">
{(api?.paginationGetPageSize() ?? 0) * (api?.paginationGetCurrentPage() ?? 0) + 1}
to {Math.min(
api?.paginationGetRowCount() ?? 0,
((api?.paginationGetCurrentPage() ?? 0) + 1) *
(api?.paginationGetPageSize() ?? 0)
)}
of {api?.paginationGetRowCount()}
</div>
{#key footerRenderCount}
<div class="flex gap-1 w-full justify-between items-center text-sm text-secondary/80 p-2">
<div>
<Popover>
<svelte:fragment slot="text">Download</svelte:fragment>
<Button
startIcon={{ icon: Download }}
color="light"
size="xs2"
on:click={() => {
api?.exportDataAsCsv()
}}
iconOnly
/>
</Popover>
</div>
<div class="flex flex-row gap-1 items-center">
{#if resolvedConfig?.pagination}
{#key refreshCount}
<div class="text-xs mx-2 text-primary">
{(api?.paginationGetPageSize() ?? 0) * (api?.paginationGetCurrentPage() ?? 0) +
1}
to {Math.min(
api?.paginationGetRowCount() ?? 0,
((api?.paginationGetCurrentPage() ?? 0) + 1) *
(api?.paginationGetPageSize() ?? 0)
)}
of {api?.paginationGetRowCount()}
</div>
<Button
iconOnly
startIcon={{ icon: SkipBack }}
color="light"
size="xs2"
disabled={api?.paginationGetCurrentPage() == 0}
on:click={() => {
api?.paginationGoToFirstPage()
refreshCount++
}}
/>
<Button
iconOnly
startIcon={{ icon: ChevronLeft }}
color="light"
size="xs2"
disabled={api?.paginationGetCurrentPage() == 0}
on:click={() => {
api?.paginationGoToPreviousPage()
refreshCount++
}}
/>
<div class="text-xs mx-2 text-primary">
Page {(api?.paginationGetCurrentPage() ?? 0) + 1} of {api?.paginationGetTotalPages() ??
0}
</div>
<Button
iconOnly
startIcon={{ icon: ChevronRight }}
color="light"
size="xs2"
disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
api?.paginationGetTotalPages()}
on:click={() => {
api?.paginationGoToNextPage()
refreshCount++
}}
/>
<Button
iconOnly
startIcon={{ icon: SkipForward }}
color="light"
size="xs2"
disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
api?.paginationGetTotalPages()}
on:click={() => {
api?.paginationGoToLastPage()
refreshCount++
}}
/>
{/key}
{/if}
<Button
iconOnly
startIcon={{ icon: SkipBack }}
color="light"
size="xs2"
disabled={api?.paginationGetCurrentPage() == 0}
on:click={() => {
api?.paginationGoToFirstPage()
refreshCount++
}}
/>
<Button
iconOnly
startIcon={{ icon: ChevronLeft }}
color="light"
size="xs2"
disabled={api?.paginationGetCurrentPage() == 0}
on:click={() => {
api?.paginationGoToPreviousPage()
refreshCount++
}}
/>
<div class="text-xs mx-2 text-primary">
Page {(api?.paginationGetCurrentPage() ?? 0) + 1} of {api?.paginationGetTotalPages() ??
0}
</div>
<Button
iconOnly
startIcon={{ icon: ChevronRight }}
color="light"
size="xs2"
disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
api?.paginationGetTotalPages()}
on:click={() => {
api?.paginationGoToNextPage()
refreshCount++
}}
/>
<Button
iconOnly
startIcon={{ icon: SkipForward }}
color="light"
size="xs2"
disabled={(api?.paginationGetCurrentPage() ?? 0) + 1 ==
api?.paginationGetTotalPages()}
on:click={() => {
api?.paginationGoToLastPage()
refreshCount++
}}
/>
{/key}
{/if}
</div>
</div>
</div>
{/key}
{/if}
</div>
</SyncColumnDefs>
@@ -14,7 +14,8 @@
export let customCss: ComponentCustomCSS<'fileinputcomponent'> | undefined = undefined
export let render: boolean
const { app, worldStore, componentControl } = getContext<AppViewerContext>('AppViewerContext')
const { app, worldStore, componentControl, mode } =
getContext<AppViewerContext>('AppViewerContext')
let acceptedFileTypes: string[] | undefined = undefined
let allowMultiple: boolean | undefined = undefined
@@ -48,6 +49,16 @@
}
let files: File[] | undefined = undefined
function preFillFiles() {
const data = outputs?.result?.peak()
if (data && Array.isArray(data) && data.length > 0) {
files = data.map((file: { name: any }) => new File([], file?.name))
}
}
$: outputs.result && files === undefined && $mode === 'dnd' && preFillFiles()
</script>
{#each Object.keys(css ?? {}) as key (key)}