kalugin66/windmill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix aggrid 2 (#3548)

Browse Source 
* fix(frontend): Correctly handle undefined actions

* fix(frontend): Correctly handle undefined actions

* fix(frontend): Correctly handle undefined actions

* fix(frontend): add missinng migration code
This commit is contained in:
Faton Ramadani
2024-04-12 16:25:30 +02:00
committed by GitHub
parent a687d56d45
commit 60d686b2bf
2 changed files with 93 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
View File

@@ -365,7 +365,7 @@
bind:panes={componentSettings.item.data.panes}
bind:component={componentSettings.item.data}
/>
{:else if componentSettings.item.data.type === 'aggridcomponent' && Array.isArray(componentSettings.item.data.actions)}
{:else if componentSettings.item.data.type === 'aggridcomponent'}
<TableActions id={component.id} bind:components={componentSettings.item.data.actions} />
{:else if componentSettings.item.data.type === 'tablecomponent' && Array.isArray(componentSettings.item.data.actionButtons)}
<TableActions id={component.id} bind:components={componentSettings.item.data.actionButtons} />

166
frontend/src/lib/components/apps/editor/settingsPanel/TableActions.svelte
View File

@@ -3,21 +3,34 @@
import Button from '$lib/components/common/button/Button.svelte'
import { getNextId } from '$lib/components/flows/idUtils'
import { classNames } from '$lib/utils'
import { getContext } from 'svelte'
import { getContext, onMount } from 'svelte'
import type { AppViewerContext, BaseAppComponent } from '../../types'
import { appComponentFromType } from '../appUtils'
import type { ButtonComponent, CheckboxComponent, SelectComponent } from '../component'
import PanelSection from './common/PanelSection.svelte'
import { Inspect, List, ToggleRightIcon, Trash } from 'lucide-svelte'
export let components: (BaseAppComponent &
(ButtonComponent | CheckboxComponent | SelectComponent))[]
export let components:
| (BaseAppComponent & (ButtonComponent | CheckboxComponent | SelectComponent))[]
| undefined
// Migration code:
onMount(() => {
if (components === undefined) {
components = []
}
})
export let id: string
const { selectedComponent, app, errorByComponent } =
getContext<AppViewerContext>('AppViewerContext')
function addComponent(typ: 'buttoncomponent' | 'checkboxcomponent' | 'selectcomponent') {
if (!components) {
return
}
const actionId = getNextId(components.map((x) => x.id.split('_')[1]))
const newComponent = {
@@ -29,6 +42,9 @@
}
function deleteComponent(cid: string) {
if (!components) {
return
}
components = components.filter((x) => x.id !== cid)
delete $errorByComponent[cid]
@@ -38,77 +54,79 @@
}
</script>
<PanelSection title={`Table Actions`}>
{#if components.length == 0}
<span class="text-xs text-tertiary">No action buttons</span>
{/if}
{#each components as component}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class={classNames(
'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
'bg-surface hover:bg-surface-hover focus:border-primary text-secondary',
$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
)}
on:click={() => {
$selectedComponent = [component.id]
}}
on:keypress
>
<Badge color="dark-indigo">
{component.id}
</Badge>
{#if components}
<PanelSection title={`Table Actions`}>
{#if components.length == 0}
<span class="text-xs text-tertiary">No action buttons</span>
{/if}
{#each components as component}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class={classNames(
'w-full text-xs font-bold gap-1 truncate py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
'bg-surface hover:bg-surface-hover focus:border-primary text-secondary',
$selectedComponent?.includes(component.id) ? 'outline outline-blue-500 bg-red-400' : ''
)}
on:click={() => {
$selectedComponent = [component.id]
}}
on:keypress
>
<Badge color="dark-indigo">
{component.id}
</Badge>
<div>
{#if component.type == 'buttoncomponent'}
Button
{:else if component.type == 'selectcomponent'}
Select
{:else if component.type == 'checkboxcomponent'}
Toggle
{/if}
</div>
<div>
<Button
variant="border"
color="red"
on:click={() => deleteComponent(component.id)}
startIcon={{ icon: Trash }}
iconOnly
/>
<div>
{#if component.type == 'buttoncomponent'}
Button
{:else if component.type == 'selectcomponent'}
Select
{:else if component.type == 'checkboxcomponent'}
Toggle
{/if}
</div>
<div>
<Button
variant="border"
color="red"
on:click={() => deleteComponent(component.id)}
startIcon={{ icon: Trash }}
iconOnly
/>
</div>
</div>
{/each}
<div class="w-full flex gap-2">
<Button
btnClasses="gap-1 flex items-center text-sm text-tertiary"
wrapperClasses="w-full"
color="light"
variant="border"
on:click={() => addComponent('buttoncomponent')}
title="Add Button"
>
+ <Inspect size={14} />
</Button>
<Button
btnClasses="gap-1 flex items-center text-sm text-tertiary"
wrapperClasses="w-full"
color="light"
variant="border"
on:click={() => addComponent('checkboxcomponent')}
title="Add Toggle"
>
+ <ToggleRightIcon size={14} />
</Button>
<Button
btnClasses="gap-1 flex items-center text-sm text-tertiary"
wrapperClasses="w-full"
color="light"
variant="border"
on:click={() => addComponent('selectcomponent')}
title="Add Select"
>
+ <List size={14} />
</Button>
</div>
{/each}
<div class="w-full flex gap-2">
<Button
btnClasses="gap-1 flex items-center text-sm text-tertiary"
wrapperClasses="w-full"
color="light"
variant="border"
on:click={() => addComponent('buttoncomponent')}
title="Add Button"
>
+ <Inspect size={14} />
</Button>
<Button
btnClasses="gap-1 flex items-center text-sm text-tertiary"
wrapperClasses="w-full"
color="light"
variant="border"
on:click={() => addComponent('checkboxcomponent')}
title="Add Toggle"
>
+ <ToggleRightIcon size={14} />
</Button>
<Button
btnClasses="gap-1 flex items-center text-sm text-tertiary"
wrapperClasses="w-full"
color="light"
variant="border"
on:click={() => addComponent('selectcomponent')}
title="Add Select"
>
+ <List size={14} />
</Button>
</div>
</PanelSection>
</PanelSection>
{/if}