diff --git a/src/lib/Actions.ts b/src/lib/Actions.ts index 4c0cee9..3b6919d 100644 --- a/src/lib/Actions.ts +++ b/src/lib/Actions.ts @@ -49,19 +49,19 @@ export abstract class DefaultAction implements Action { /** */ export class CallbackAction extends DefaultAction { - private readonly _callback: (item?: object | undefined) => void; + private readonly _callback: (item?: unknown) => void; constructor( label: string, icon: Optional, - callback: (item?: object | undefined) => void, + callback: (item?: unknown) => void, options?: ActionOptions ) { super(label, icon, options); this._callback = callback; } - public call(item?: object | undefined): unknown { + public call(item?: unknown): unknown { return this._callback.call(null, item); } } @@ -79,6 +79,13 @@ export class UrlAction extends DefaultAction { item: object & { [key: string]: string | number | boolean } = {}, identifierFieldName: string = 'id' ): string { + if (Array.isArray(item)) { + console.warn( + 'Provided item for UrlAction is an array, and arrays are not supported. Using the first item of the array, or an empty object if not set.' + ); + item = item[0] ?? {}; + } + let url = this._url || ''; const mightNeedId = item[identifierFieldName] !== undefined; diff --git a/src/lib/Crud/Operations.ts b/src/lib/Crud/Operations.ts index c9606c1..5296917 100644 --- a/src/lib/Crud/Operations.ts +++ b/src/lib/Crud/Operations.ts @@ -33,7 +33,7 @@ export interface CrudOperation { /** */ readonly label: string; /** */ readonly displayComponentName: CrudTheme; /** */ readonly fields: Array>; - /** */ readonly actions: Array; + /** */ readonly contextActions: Array; /** */ readonly options: Record; /** */ @@ -75,7 +75,7 @@ export abstract class BaseCrudOperation implements CrudOperation { /** */ public readonly label: string, /** */ public readonly displayComponentName: CrudTheme, /** */ public readonly fields: Array>, - /** */ public readonly actions: Array, + /** */ public readonly contextActions: Array, /** */ public readonly options: Record = {} ) {} @@ -175,14 +175,14 @@ export class List extends BaseCrudOperation { /** */ constructor( fields: Array>, - actions: Array = [], + itemsActions: Array = [], options: Partial = {} ) { options.globalActions ??= []; options.batchActions ??= []; options.pagination = { ...defaultPaginationOptions(), ...(options.pagination || {}) }; options.filters ??= []; - super('list', 'crud.list.label', 'list', fields, actions, options); + super('list', 'crud.list.label', 'list', fields, itemsActions, options); this.options = options as ListOperationOptions; } } diff --git a/src/lib/themes/svelte/carbon/Crud/CrudList.svelte b/src/lib/themes/svelte/carbon/Crud/CrudList.svelte index ff209ab..294a4ff 100644 --- a/src/lib/themes/svelte/carbon/Crud/CrudList.svelte +++ b/src/lib/themes/svelte/carbon/Crud/CrudList.svelte @@ -26,7 +26,7 @@ let page: number | undefined; const configuredFilters = operation.options?.filters || []; - const actions = operation.actions; + const actions = operation.contextActions; const sortableDataTable = operation.fields.filter((field: BaseField) => !field.options?.sortable).length > 0; @@ -42,13 +42,14 @@ let showPagination = operation.options.pagination.enabled; let rows: Promise; let paginator: PaginatedResults | undefined; - let globalActions: Array = []; + let globalActions: Array = operation.options.globalActions || []; + let batchActions: Array = operation.options.batchActions || []; if (!crud.options.stateProvider) { throw new Error(`No StateProvider was given to the "${crud.name}" CRUD.`); } - if ((!operation) instanceof List) { + if (!(operation instanceof List)) { throw new Error( 'CrudList view can only accept operations that are instances of the List operation.' ); @@ -113,10 +114,6 @@ }); } - if (operation instanceof List || operation.options?.globalActions?.length) { - globalActions = operation.options.globalActions; - } - function onPaginationUpdate(event: CustomEvent<{ page: number; pageSize: number }>) { page = event.detail.page; requestParameters.page = event.detail.page; @@ -159,6 +156,7 @@ {rows} {actions} {globalActions} + {batchActions} {page} {operation} {onSort} diff --git a/src/lib/themes/svelte/carbon/DataTable/DataTable.svelte b/src/lib/themes/svelte/carbon/DataTable/DataTable.svelte index 72626cc..f80ecea 100644 --- a/src/lib/themes/svelte/carbon/DataTable/DataTable.svelte +++ b/src/lib/themes/svelte/carbon/DataTable/DataTable.svelte @@ -1,23 +1,31 @@ {#await rows} @@ -81,9 +95,12 @@ {page} {sortable} zebra + selectable={batchActions.length > 0} + batchSelection={batchSelectionIsActive} rows={resolvedRows} size="short" on:click:header={onSort} + bind:selectedRowIds {...$$restProps} > @@ -100,6 +117,19 @@ on:submitFilters={onFiltersSubmit} /> {/if} + {#if batchActions.length > 0} + + + {#each batchActions as action} + + {/each} + + + + + + {/if} + {#if !resolvedRows.length} {$_('error.crud.list.no_elements')} diff --git a/src/lib/themes/svelte/carbon/DataTable/Toolbar/DataTableToolbar.svelte b/src/lib/themes/svelte/carbon/DataTable/Toolbar/DataTableToolbar.svelte index 63ade1e..56123e3 100644 --- a/src/lib/themes/svelte/carbon/DataTable/Toolbar/DataTableToolbar.svelte +++ b/src/lib/themes/svelte/carbon/DataTable/Toolbar/DataTableToolbar.svelte @@ -11,7 +11,7 @@ import FilterReset from 'carbon-icons-svelte/lib/FilterReset.svelte'; import type { Action } from '$lib/Actions'; - import ActionComponent from '$lib/themes/svelte/carbon/DataTable/Toolbar/ToolbarAction.svelte'; + import ToolbarAction from '$lib/themes/svelte/carbon/DataTable/Toolbar/ToolbarAction.svelte'; import FilterComponent from '$lib/themes/svelte/carbon/DataTable/Toolbar/ToolbarFilter.svelte'; import type { Filter, FilterOptions } from '$lib/Filter'; import type { ThemeConfig } from '$lib/types'; @@ -58,7 +58,7 @@ {#each actions as action} - + {/each} diff --git a/src/lib/themes/svelte/carbon/DataTable/Toolbar/ToolbarAction.svelte b/src/lib/themes/svelte/carbon/DataTable/Toolbar/ToolbarAction.svelte index 2eaa36e..43462a1 100644 --- a/src/lib/themes/svelte/carbon/DataTable/Toolbar/ToolbarAction.svelte +++ b/src/lib/themes/svelte/carbon/DataTable/Toolbar/ToolbarAction.svelte @@ -7,11 +7,12 @@ import { type Action, CallbackAction, UrlAction } from '$lib/Actions'; export let action: Action; + export let action_arguments: Array = []; {#if action instanceof UrlAction}