05003abdf3
* feat(frontend): Fix UI * feat(frontend): Set correct default value when adding a new element to a typed array * feat(frontend): add refresh all * feat(frontend): add inline delete button * feat(frontend): fix alignment * feat(frontend): clean up * feat(frontend): rework editor * feat(frontend): Fix component dimensions * feat(frontend): Fix default min dimensions * feat(frontend): add missing alert * feat(frontend): Fix default data * feat(frontend): Support frontend/backend search * feat(frontend): finish picker
56 lines
1.6 KiB
Svelte
56 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import Badge from '$lib/components/common/badge/Badge.svelte'
|
|
import { getContext } from 'svelte'
|
|
import type { AppEditorContext } from '../../types'
|
|
import PanelSection from './common/PanelSection.svelte'
|
|
|
|
export let recomputeIds: string[] | undefined = undefined
|
|
export let ownId: string
|
|
|
|
const { runnableComponents } = getContext<AppEditorContext>('AppEditorContext')
|
|
|
|
function onChange(
|
|
event: Event & {
|
|
currentTarget: EventTarget & HTMLInputElement
|
|
},
|
|
id: string
|
|
) {
|
|
if (event.currentTarget.checked) {
|
|
recomputeIds = [...(recomputeIds ?? []), id]
|
|
} else {
|
|
recomputeIds = recomputeIds?.filter((id) => id !== id)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<PanelSection title="Recompute">
|
|
{#if Object.keys($runnableComponents ?? {}).length > 0}
|
|
<table class="divide-y divide-gray-300 border w-full">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500">
|
|
Component
|
|
</th>
|
|
<th scope="col" class="px-4 py-2 text-left text-xs font-medium text-gray-500">
|
|
Recompute
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{#each Object.keys($runnableComponents ?? {}).filter((id) => id !== ownId) as id}
|
|
<tr>
|
|
<td class="whitespace-nowrap px-4 py-2 text-xs">
|
|
<Badge color="blue">{id}</Badge>
|
|
</td>
|
|
<td class="relative whitespace-nowrap px-4 py-2 ">
|
|
<input type="checkbox" on:change={(event) => onChange(event, id)} />
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
{:else}
|
|
<div class="text-xs">No components to recompute</div>
|
|
{/if}
|
|
</PanelSection>
|