2d55abfc44
* feat(frontend): Properly support resource * feat(frontend): remove unused import * feat(frontend): Fix build errors * feat(frontend): Fix table actions * feat(frontend): Fix table parameters * feat(frontend): Fix runnable inputs sync * feat(frontend): Done * fix * fix * feat(frontend): Fix typing issues * feat(frontend): Fix id generation Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
96 lines
2.6 KiB
Svelte
96 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { Badge } from '$lib/components/common'
|
|
import Button from '$lib/components/common/button/Button.svelte'
|
|
import { getNextId } from '$lib/components/flows/flowStateUtils'
|
|
import { classNames } from '$lib/utils'
|
|
import { faPlus } from '@fortawesome/free-solid-svg-icons'
|
|
import { getContext } from 'svelte'
|
|
import type { ButtonComponent, AppEditorContext, BaseAppComponent } from '../../types'
|
|
import PanelSection from './common/PanelSection.svelte'
|
|
import TableActionLabel from './TableActionLabel.svelte'
|
|
|
|
export let components: (BaseAppComponent & ButtonComponent)[]
|
|
|
|
const { app, selectedComponent } = getContext<AppEditorContext>('AppEditorContext')
|
|
|
|
function addComponent() {
|
|
const grid = $app.grid ?? []
|
|
const id = getNextId(grid.map((gridItem) => gridItem.data.id))
|
|
|
|
const newComponent: BaseAppComponent & ButtonComponent = {
|
|
id,
|
|
type: 'buttoncomponent',
|
|
configuration: {
|
|
label: {
|
|
type: 'static',
|
|
visible: true,
|
|
value: 'Action',
|
|
fieldType: 'textarea',
|
|
defaultValue: 'Action'
|
|
},
|
|
color: {
|
|
fieldType: 'select',
|
|
type: 'static',
|
|
visible: true,
|
|
value: 'dark',
|
|
optionValuesKey: 'buttonColorOptions',
|
|
defaultValue: 'dark'
|
|
},
|
|
size: {
|
|
fieldType: 'select',
|
|
type: 'static',
|
|
visible: true,
|
|
value: 'xs',
|
|
optionValuesKey: 'buttonSizeOptions',
|
|
defaultValue: 'xs'
|
|
}
|
|
},
|
|
componentInput: {
|
|
type: 'runnable',
|
|
fieldType: 'any',
|
|
fields: {},
|
|
runnable: undefined,
|
|
defaultValue: undefined
|
|
},
|
|
recomputeIds: undefined,
|
|
card: false
|
|
}
|
|
|
|
components = [...components, newComponent]
|
|
}
|
|
</script>
|
|
|
|
<PanelSection title={`Table actions ${components.length > 0 ? `(${components.length})` : ''}`}>
|
|
<svelte:fragment slot="action">
|
|
<Button
|
|
size="xs"
|
|
color="light"
|
|
variant="border"
|
|
startIcon={{ icon: faPlus }}
|
|
on:click={addComponent}
|
|
iconOnly
|
|
/>
|
|
</svelte:fragment>
|
|
|
|
{#each components as component}
|
|
<div
|
|
class={classNames(
|
|
'w-full text-xs font-bold py-1.5 px-2 cursor-pointer transition-all justify-between flex items-center border border-gray-3 rounded-md',
|
|
'bg-white border-gray-300 hover:bg-gray-100 focus:bg-gray-100 text-gray-700',
|
|
$selectedComponent === component.id ? 'outline outline-blue-500 bg-red-400' : ''
|
|
)}
|
|
on:click={() => {
|
|
$selectedComponent = component.id
|
|
}}
|
|
on:keypress
|
|
>
|
|
<div>
|
|
<TableActionLabel componentInput={component.configuration.label} />
|
|
</div>
|
|
<Badge color="dark-blue">
|
|
Component: {component.id}
|
|
</Badge>
|
|
</div>
|
|
{/each}
|
|
</PanelSection>
|