diff --git a/packages/design-system/src/components/index.js b/packages/design-system/src/components/index.js index 9bd2f05c99..c472e04f66 100644 --- a/packages/design-system/src/components/index.js +++ b/packages/design-system/src/components/index.js @@ -12,6 +12,7 @@ import Switch from 'element-ui/lib/switch'; import Select from 'element-ui/lib/select'; import Option from 'element-ui/lib/option'; import OptionGroup from 'element-ui/lib/option-group'; +import Pagination from 'element-ui/lib/pagination'; import ButtonGroup from 'element-ui/lib/button-group'; import Table from 'element-ui/lib/table'; import TableColumn from 'element-ui/lib/table-column'; @@ -115,6 +116,7 @@ export { Select, Option, OptionGroup, + Pagination, ButtonGroup, Table, TableColumn, diff --git a/packages/design-system/theme/src/index.scss b/packages/design-system/theme/src/index.scss index 5ac0d3af96..2bc1d28de4 100644 --- a/packages/design-system/theme/src/index.scss +++ b/packages/design-system/theme/src/index.scss @@ -2,7 +2,7 @@ @use "./tokens.dark.scss" as dark; @use "./reset.scss"; @use "./base.scss"; -// @use "./pagination.scss"; +@use "./pagination.scss"; @use "./dialog.scss"; // @use "./autocomplete.scss"; @use "./dropdown.scss"; diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue index 3a224e38af..66aa9f58ce 100644 --- a/packages/editor-ui/src/components/RunData.vue +++ b/packages/editor-ui/src/components/RunData.vue @@ -175,6 +175,19 @@ +
+ + +
@@ -245,12 +258,13 @@ export default mixins( runIndex: 0, showData: false, outputIndex: 0, - maxDisplayItems: 25 as number | null, binaryDataDisplayVisible: false, binaryDataDisplayData: null as IBinaryDisplayData | null, MAX_DISPLAY_DATA_SIZE, MAX_DISPLAY_ITEMS_AUTO_ALL, + currentPage: 1, + pageSize: 10, }; }, mounted() { @@ -289,13 +303,6 @@ export default mixins( const executionData: IRunExecutionData = this.workflowExecution.data; return executionData.resultData.runData; }, - maxDisplayItemsOptions (): number[] { - const options = [25, 50, 100, 250, 500, 1000].filter(option => option <= this.dataCount); - if (!options.includes(this.dataCount)) { - options.push(this.dataCount); - } - return options; - }, node (): INodeUi | null { return this.$store.getters.activeNode; }, @@ -372,9 +379,8 @@ export default mixins( return []; } - if (this.maxDisplayItems !== null) { - inputData = inputData.slice(0, this.maxDisplayItems); - } + const offset = this.pageSize * (this.currentPage - 1); + inputData = inputData.slice(offset, offset + this.pageSize); return inputData; }, @@ -459,7 +465,6 @@ export default mixins( init() { // Reset the selected output index every time another node gets selected this.outputIndex = 0; - this.maxDisplayItems = 25; this.refreshDataSize(); if (this.displayMode === 'binary') { this.closeBinaryDataDisplay(); @@ -641,7 +646,8 @@ export default mixins( // Check how much data there is to display const inputData = this.getNodeInputData(this.node, this.runIndex, this.outputIndex); - const jsonItems = inputData.slice(0, this.maxDisplayItems || inputData.length).map(item => item.json); + const offset = this.pageSize * (this.currentPage - 1); + const jsonItems = inputData.slice(offset, offset + this.pageSize).map(item => item.json); this.dataSize = JSON.stringify(jsonItems).length; @@ -796,6 +802,15 @@ export default mixins( z-index: 10; } +.pagination { + position: absolute; + width: 100%; + display: flex; + justify-content: center; + bottom: 0; + padding: 5px; +} + diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts index 1082cf9fac..90668f76b8 100644 --- a/packages/editor-ui/src/plugins/components.ts +++ b/packages/editor-ui/src/plugins/components.ts @@ -41,6 +41,7 @@ import { Message, Notification, CollapseTransition, + Pagination, Popover, N8nActionBox, @@ -135,6 +136,7 @@ Vue.use(Badge); Vue.use(Card); Vue.use(ColorPicker); Vue.use(Container); +Vue.use(Pagination); Vue.use(Popover); Vue.use(VueAgile);