Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

kup-box: managed "Load more data" function with pagination #1788

Merged
merged 1 commit into from
Mar 1, 2024
Merged

kup-box: managed "Load more data" function with pagination #1788

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions packages/ketchup-showcase/src/views/components/advanced/box/examples/BoxDemo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,10 @@ export default {
name: 'kup-box-dragstarted',
type: 'CustomEvent',
},
{
name: 'kup-box-loadmoreclick',
type: 'click',
},
{
name: 'kup-box-selected',
type: 'CustomEvent',
Expand Down Expand Up @@ -266,6 +270,30 @@ export default {
default: 'false',
try: 'switch',
},
{
prop: 'loadMoreLimit',
description:
'Sets a maximum limit of new records which can be required by the load more functionality.',
type: 'number',
default: '1000',
try: 'field',
},
{
prop: 'loadMoreMode',
description:
'Establish the modality of how many new records will be downloaded.',
type: 'LoadMoreMode',
default: 'progressive_threshold',
try: 'field',
},
{
prop: 'loadMoreStep',
description:
'The number of records which will be requested to be downloaded when clicking on the load more button.',
type: 'number',
default: '60',
try: 'field',
},
{
prop: 'multiSelection',
description: 'Enable multi selection.',
Expand Down Expand Up @@ -317,6 +345,14 @@ export default {
default: '[]',
try: 'json',
},
{
prop: 'showLoadMore',
description:
'If set to true, displays the button to load more records.',
type: 'boolean',
default: 'false',
try: 'switch',
},
{
prop: 'showSelection',
description: 'If enabled, highlights the selected box/boxes.',
Expand Down
54 changes: 48 additions & 6 deletions packages/ketchup/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./compon
import { GenericObject, KupEventPayload } from "./types/GenericTypes";
import { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations";
import { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations";
import { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload } from "./components/kup-box/kup-box-declarations";
import { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxLoadMoreClickEventPayload, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload, LoadMoreMode } from "./components/kup-box/kup-box-declarations";
import { KupStore } from "./components/kup-state/kup-store";
import { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations";
import { FButtonProps, FButtonStyling } from "./f-components/f-button/f-button-declarations";
Expand All @@ -27,7 +27,7 @@ import { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-co
import { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations";
import { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations";
import { KupDashboardEventPayload, KupDataDashboard } from "./components/kup-dashboard/kup-dashboard-declarations";
import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
import { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
import { GenericFilter, KupGlobalFilterMode } from "./utils/filters/filters-declarations";
import { KupDatePickerEventPayload } from "./components/kup-date-picker/kup-date-picker-declarations";
import { KupDialogAutoCenter, KupDialogHeader, KupDialogModal } from "./components/kup-dialog/kup-dialog-declarations";
Expand Down Expand Up @@ -58,7 +58,7 @@ export { KupAccordionData, KupAccordionItemSelectedEventPayload } from "./compon
export { GenericObject, KupEventPayload } from "./types/GenericTypes";
export { ItemsDisplayMode, KupListEventPayload, KupListNode, KupListRole } from "./components/kup-list/kup-list-declarations";
export { KupAutocompleteEventPayload, KupAutocompleteIconClickEventPayload } from "./components/kup-autocomplete/kup-autocomplete-declarations";
export { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload } from "./components/kup-box/kup-box-declarations";
export { KupBoxAutoSelectEventPayload, KupBoxClickEventPayload, KupBoxContextMenuEventPayload, KupBoxData, KupBoxKanban, KupBoxLayout, KupBoxLoadMoreClickEventPayload, KupBoxRow, KupBoxRowActionClickEventPayload, KupBoxSelectedEventPayload, LoadMoreMode } from "./components/kup-box/kup-box-declarations";
export { KupStore } from "./components/kup-state/kup-store";
export { KupDataCell, KupDataColumn, KupDataDataset, KupDataNewColumnOptions, KupDataNewColumnTypes, KupDataNode, KupDataRowAction } from "./managers/kup-data/kup-data-declarations";
export { FButtonProps, FButtonStyling } from "./f-components/f-button/f-button-declarations";
Expand All @@ -76,7 +76,7 @@ export { KupColorPickerEventPayload } from "./components/kup-color-picker/kup-co
export { KupComboboxEventPayload, KupComboboxIconClickEventPayload } from "./components/kup-combobox/kup-combobox-declarations";
export { KupGanttPlannerProps, KupPlannerBarDisplayProps, KupPlannerBarTask, KupPlannerCalendarProps, KupPlannerClickEventPayload, KupPlannerEventOption, KupPlannerEventPayload, KupPlannerGanttEvent, KupPlannerGanttProps, KupPlannerGanttRow, KupPlannerGanttTaskN, KupPlannerItemDetail, KupPlannerPhase, KupPlannerSwitcherProps, KupPlannerTask, KupPlannerTaskGanttContentProps, KupPlannerTaskGanttProps, KupPlannerTaskItemProps, KupPlannerTaskListProps, KupPlannerTaskType, KupPlannerUnloadEventPayload, KupPlannerViewMode, PlannerProps } from "./components/kup-planner/kup-planner-declarations";
export { KupDashboardEventPayload, KupDataDashboard } from "./components/kup-dashboard/kup-dashboard-declarations";
export { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
export { GroupLabelDisplayMode, GroupObject, KupDatatableClickEventPayload, KupDatatableColumnMenuEventPayload, KupDatatableColumnMoveEventPayload, KupDatatableColumnRemoveEventPayload, KupDataTableDataset, KupDatatableDeleteRowEventPayload, KupDatatableHistoryEventPayload, KupDataTableInsertMode, KupDatatableInsertRowEventPayload, KupDatatableLoadMoreClickEventPayload, KupDataTableRow, KupDatatableRowActionClickEventPayload, KupDatatableRowSelectedEventPayload, LoadMoreMode as LoadMoreMode1, PaginatorPos, SelectionMode, ShowGrid, SortObject, TotalsMap } from "./components/kup-data-table/kup-data-table-declarations";
export { GenericFilter, KupGlobalFilterMode } from "./utils/filters/filters-declarations";
export { KupDatePickerEventPayload } from "./components/kup-date-picker/kup-date-picker-declarations";
export { KupDialogAutoCenter, KupDialogHeader, KupDialogModal } from "./components/kup-dialog/kup-dialog-declarations";
Expand Down Expand Up @@ -347,6 +347,22 @@ export namespace Components {
* When set to true, extra rows will be automatically loaded once the last row enters the viewport.
*/
"lazyLoadRows": boolean;
/**
* Sets a maximum limit of new records which can be required by the load more functionality.
*/
"loadMoreLimit": number;
/**
* Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep.
* @see loadMoreStep *
* @see loadMoreLimit
*/
"loadMoreMode": LoadMoreMode;
/**
* The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode.
* @see loadMoreMode *
* @see loadMoreLimit
*/
"loadMoreStep": number;
"loadRowActions": (row: KupBoxRow, actions: KupDataRowAction[]) => Promise<void>;
/**
* Enable multi selection
Expand Down Expand Up @@ -392,6 +408,10 @@ export namespace Components {
* @param props - Object containing props that will be set to the component.
*/
"setProps": (props: GenericObject) => Promise<void>;
/**
* If set to true, displays the button to load more records.
*/
"showLoadMore": boolean;
/**
* If enabled, highlights the selected box/boxes
* @default true
Expand Down Expand Up @@ -1357,7 +1377,7 @@ export namespace Components {
* @see loadMoreStep *
* @see loadMoreLimit
*/
"loadMoreMode": LoadMoreMode;
"loadMoreMode": LoadMoreMode1;
/**
* The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode.
* @see loadMoreMode *
Expand Down Expand Up @@ -4091,6 +4111,7 @@ declare global {
"kup-box-didload": KupEventPayload;
"kup-box-didunload": KupEventPayload;
"kup-box-contextmenu": KupBoxContextMenuEventPayload;
"kup-box-loadmoreclick": KupBoxLoadMoreClickEventPayload;
}
interface HTMLKupBoxElement extends Components.KupBox, HTMLStencilElement {
addEventListener<K extends keyof HTMLKupBoxElementEventMap>(type: K, listener: (this: HTMLKupBoxElement, ev: KupBoxCustomEvent<HTMLKupBoxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
Expand Down Expand Up @@ -5236,6 +5257,22 @@ declare namespace LocalJSX {
* When set to true, extra rows will be automatically loaded once the last row enters the viewport.
*/
"lazyLoadRows"?: boolean;
/**
* Sets a maximum limit of new records which can be required by the load more functionality.
*/
"loadMoreLimit"?: number;
/**
* Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep.
* @see loadMoreStep *
* @see loadMoreLimit
*/
"loadMoreMode"?: LoadMoreMode;
/**
* The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode.
* @see loadMoreMode *
* @see loadMoreLimit
*/
"loadMoreStep"?: number;
/**
* Enable multi selection
* @default false
Expand All @@ -5258,6 +5295,7 @@ declare namespace LocalJSX {
* Triggered when stop propagation event
*/
"onKup-box-didunload"?: (event: KupBoxCustomEvent<KupEventPayload>) => void;
"onKup-box-loadmoreclick"?: (event: KupBoxCustomEvent<KupBoxLoadMoreClickEventPayload>) => void;
/**
* When the row menu action icon is click
*/
Expand Down Expand Up @@ -5300,6 +5338,10 @@ declare namespace LocalJSX {
* @default undefined
*/
"selectedRowsState"?: string;
/**
* If set to true, displays the button to load more records.
*/
"showLoadMore"?: boolean;
/**
* If enabled, highlights the selected box/boxes
* @default true
Expand Down Expand Up @@ -6074,7 +6116,7 @@ declare namespace LocalJSX {
* @see loadMoreStep *
* @see loadMoreLimit
*/
"loadMoreMode"?: LoadMoreMode;
"loadMoreMode"?: LoadMoreMode1;
/**
* The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode.
* @see loadMoreMode *
Expand Down
15 changes: 15 additions & 0 deletions packages/ketchup/src/components/kup-box/kup-box-declarations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,31 @@ export enum KupBoxProps {
kanban = 'Displays the boxlist as a Kanban.',
layout = 'How the field will be displayed. If not present, a default one will be created.',
lazyLoadRows = 'When set to true, extra rows will be automatically loaded once the last row enters the viewport.',
loadMoreLimit = 'Sets a maximum limit of new records which can be required by the load more functionality.',
loadMoreMode = 'Establish the modality of how many new records will be downloaded. This property is regulated also by loadMoreStep.',
loadMoreStep = 'The number of records which will be requested to be downloaded when clicking on the load more button. This property is regulated also by loadMoreMode.',
multiSelection = 'Enable multi selection.',
pageSelected = 'Current page number.',
pagination = 'Enables pagination.',
rowsPerPage = 'Number of current rows per page.',
scrollOnHover = 'Activates the scroll on hover function.',
selectBox = 'Automatically selects the box at the specified index.',
selectedRowsState = 'Multiple selection.',
showLoadMore = 'If set to true, displays the button to load more records.',
showSelection = 'If enabled, highlights the selected box/boxes.',
sortBy = 'If sorting is enabled, specifies which column to sort.',
sortEnabled = 'Enable sorting.',
stateId = '',
store = '',
swipeDisabled = 'Disable swipe.',
}

//---- *NEXT functionality AKA load more ----
export enum LoadMoreMode {
CONSTANT = 'constant',
CONSTANT_INCREMENT = 'constant_increment',
PROGRESSIVE_THRESHOLD = 'progressive_threshold',
}
export interface KupBoxData {
columns?: KupDataColumn[];
rows?: KupBoxRow[];
Expand Down Expand Up @@ -120,3 +131,7 @@ export interface KupBoxRowActionClickEventPayload extends KupEventPayload {
export interface KupBoxContextMenuEventPayload extends KupEventPayload {
details: KupBoxEventHandlerDetails;
}

export interface KupBoxLoadMoreClickEventPayload extends KupEventPayload {
loadItems: number;
}
2 changes: 2 additions & 0 deletions packages/ketchup/src/components/kup-box/kup-box-state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ export class KupBoxState implements KupState {
pageSelected: number = 1;
rowsPerPage: number = 0;
load: boolean = false;
loadMoreLimit: number = 1000;
showLoadMore: boolean = false;

/*Add attribute*/

Expand Down
Loading
Loading