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

feat(frontend): add table actions navigation (#1298)

Browse Source 
* feat(frontend): add table actions navigation

* feat(frontend): add table actions navigation

* feat(frontend): add table actions navigation
This commit is contained in:
Faton Ramadani
2023-03-16 12:36:33 +01:00
committed by GitHub
parent a0c5864a7d
commit 6fd1c704ea
4 changed files with 108 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/lib/components/apps/components/buttons/AppButton.svelte
View File

@@ -26,7 +26,14 @@
export let render: boolean
export let initializing: boolean | undefined = true
const { worldStore, app } = getContext<AppViewerContext>('AppViewerContext')
export let controls: { left: () => boolean; right: () => boolean | string } | undefined =
undefined
const { worldStore, app, componentControl } = getContext<AppViewerContext>('AppViewerContext')
if (controls) {
$componentControl[id] = controls
}
let labelValue: string
let color: ButtonType.Color

105
frontend/src/lib/components/apps/components/display/table/AppTable.svelte
View File

@@ -50,7 +50,8 @@
let table = createSvelteTable(options)
const { app, worldStore } = getContext<AppViewerContext>('AppViewerContext')
const { app, worldStore, componentControl, selectedComponent } =
getContext<AppViewerContext>('AppViewerContext')
let selectedRowIndex = -1
@@ -138,6 +139,22 @@
$: result && rerender()
$: css = concatCustomCss($app.css?.tablecomponent, customCss)
$componentControl[id] = {
right: (skipActions: boolean | undefined) => {
if (skipActions) {
return false
}
const hasActions = actionButtons.length >= 1
if (hasActions) {
$selectedComponent = actionButtons[0].id
return true
}
return false
}
}
</script>
<InputValue {id} input={configuration.search} bind:value={search} />
@@ -239,31 +256,69 @@
on:keypress={() => toggleRow(row, rowIndex)}
on:click={() => toggleRow(row, rowIndex)}
>
<div class="center-center h-full w-full flex-wrap gap-1">
<div class="center-center h-full w-full flex-wrap gap-1 ">
{#each actionButtons as actionButton, actionIndex (actionIndex)}
{#if rowIndex == 0}
<AppButton
{render}
noWFull
{...actionButton}
preclickAction={async () => {
toggleRow(row, rowIndex)
}}
extraQueryParams={{ row: row.original }}
bind:componentInput={actionButton.componentInput}
/>
{:else}
<AppButton
{render}
noWFull
{...actionButton}
preclickAction={async () => {
toggleRow(row, rowIndex)
}}
extraQueryParams={{ row: row.original }}
bind:componentInput={actionButton.componentInput}
/>
{/if}
<div
class={actionButton.id === $selectedComponent
? 'outline outline-indigo-500 outline-1 outline-offset-1 relative '
: ''}
>
{#if actionButton.id === $selectedComponent}
<span
title={`Id: ${actionButton.id}`}
class={classNames(
'px-2 text-2xs font-bold w-fit absolute shadow -top-5 -left-[2px] border z-50 rounded-sm',
'bg-indigo-500/90 border-indigo-600 text-white'
)}
>
{actionButton.id}
</span>
{/if}
{#if rowIndex == 0}
<AppButton
{render}
noWFull
{...actionButton}
preclickAction={async () => {
toggleRow(row, rowIndex)
}}
extraQueryParams={{ row: row.original }}
bind:componentInput={actionButton.componentInput}
controls={{
left: () => {
if (actionIndex === 0) {
$selectedComponent = id
return true
} else if (actionIndex > 0) {
$selectedComponent = actionButtons[actionIndex - 1].id
return true
}
return false
},
right: () => {
if (actionIndex === actionButtons.length - 1) {
return id
} else if (actionIndex < actionButtons.length - 1) {
$selectedComponent = actionButtons[actionIndex + 1].id
return true
}
return false
}
}}
/>
{:else}
<AppButton
{render}
noWFull
{...actionButton}
preclickAction={async () => {
toggleRow(row, rowIndex)
}}
extraQueryParams={{ row: row.original }}
bind:componentInput={actionButton.componentInput}
/>
{/if}
</div>
{/each}
</div>
</td>

16
frontend/src/lib/components/apps/editor/component/ComponentNavigation.svelte
View File

@@ -52,7 +52,15 @@
const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent)
if (currentIndex !== -1 && currentIndex > 0) {
$selectedComponent = sortedGridItems[currentIndex - 1].id
const left = sortedGridItems[currentIndex - 1]
if (left.data.type === 'tablecomponent') {
if (left.data.actionButtons.length >= 1) {
$selectedComponent = left.data.actionButtons[left.data.actionButtons.length - 1].id
} else {
$selectedComponent = left.id
}
}
}
}
@@ -61,6 +69,12 @@
function right(event: KeyboardEvent) {
let r = $componentControl[$selectedComponent!]?.right?.()
if (typeof r === 'string') {
$selectedComponent = r
r = $componentControl[r]?.right?.(true)
}
if (!r) {
const sortedGridItems = getGridItems()
const currentIndex = sortedGridItems.findIndex((item) => item.id === $selectedComponent)

6
frontend/src/lib/components/apps/types.ts
View File

@@ -134,7 +134,11 @@ export type AppViewerContext = {
componentControl: Writable<
Record<
string,
{ left?: () => boolean; right?: () => boolean; setTab?: (index: number) => void }
{
left?: () => boolean
right?: (skipTableActions?: boolean | undefined) => string | boolean
setTab?: (index: number) => void
}
>
>
}