mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-08-20 00:02:19 +00:00
fix(frontend): fix AgGrid pagination refresh (#3773)
* feat(frontend): fix AgGrid pagination refresh * feat(frontend): fix AgGrid pagination refresh
This commit is contained in:
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user