mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-24 20:24:05 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor: Migrate Pagination to composition API (no-changelog) (#9752)

Browse source
This commit is contained in:
Tomi Turtiainen 2024-06-17 13:43:06 +03:00 committed by GitHub
parent 403947a6a4
commit 7c70b782a1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 25 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/design-system/src/components/N8nDatatable/Datatable.vue
View file

@ -74,7 +74,7 @@ interface DatatableProps {
rows: DatatableRow[];
currentPage?: number;
pagination?: boolean;
rowsPerPage?: number | '*';
rowsPerPage?: number;
}
defineOptions({ name: 'N8nDatatable' });
@ -92,10 +92,6 @@ const rowsPerPageOptions = ref([10, 25, 50, 100]);
const $style = useCssModule();
const totalPages = computed(() => {
if (props.rowsPerPage === '*') {
return 1;
}
return Math.ceil(props.rows.length / props.rowsPerPage);
});
@ -104,10 +100,6 @@ const totalRows = computed(() => {
});
const visibleRows = computed(() => {
if (props.rowsPerPage === '*') {
return props.rows;
}
const start = (props.currentPage - 1) * props.rowsPerPage;
const end = start + props.rowsPerPage;
@ -123,10 +115,10 @@ function onUpdateCurrentPage(value: number) {
$emit('update:currentPage', value);
}
function onRowsPerPageChange(value: number | '*') {
function onRowsPerPageChange(value: number) {
$emit('update:rowsPerPage', value);
const maxPage = value === '*' ? 1 : Math.ceil(totalRows.value / value);
const maxPage = Math.ceil(totalRows.value / value);
if (maxPage < props.currentPage) {
onUpdateCurrentPage(maxPage);
}

8
packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts
View file

@ -3,13 +3,13 @@ import N8nDatatable from '../Datatable.vue';
import { rows, columns } from './data';
const stubs = [
// Ideally we'd like to stub N8nSelect, but it doesn't work
'n8n-option',
'n8n-button',
// Ideally we'd like to stub N8nSelect & N8nPagination, but it doesn't work
// after migrating to setup script:
// https://github.com/vuejs/vue-test-utils/issues/2048
// 'n8n-select',
'n8n-option',
'n8n-button',
'n8n-pagination',
// 'n8n-pagination',
];
describe('components', () => {

13
packages/design-system/src/components/N8nDatatable/__tests__/__snapshots__/Datatable.spec.ts.snap
View file

@ -95,7 +95,18 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
</tbody>
</table>
<div class="pagination">
<n8n-pagination-stub pagesize="10" total="15" currentpage="1" pagercount="5" layout="prev, pager, next" pagesizes="10,20,30,40,50,100" popperclass="" prevtext="" previcon="[object Object]" nexttext="" nexticon="[object Object]" small="false" background="true" disabled="false" hideonsinglepage="false"></n8n-pagination-stub>
<div class="el-pagination is-background is-background"><button type="button" class="btn-prev is-first" disabled="" aria-label="Go to previous page" aria-disabled="true"><i class="el-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path>
</svg></i></button>
<ul class="el-pager">
<li class="is-active number" aria-current="true" aria-label="page 1" tabindex="0"> 1 </li>
<!--v-if-->
<!--v-if-->
<li class="number" aria-current="false" aria-label="page 2" tabindex="0">2</li>
</ul><button type="button" class="btn-next is-last" aria-label="Go to next page" aria-disabled="false"><i class="el-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
<path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
</svg></i></button>
</div>
<div class="pageSizeSelector">
<div class="n8n-select container withPrepend">
<div class="prepend">Page size</div>

15
packages/design-system/src/components/N8nPagination/Pagination.vue
View file

@ -1,15 +1,8 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { ElPagination } from 'element-plus';
<script setup lang="ts">
import { paginationProps, ElPagination } from 'element-plus';
export default defineComponent({
name: 'N8nPagination',
components: {
ElPagination,
},
props: {
...ElPagination.props,
},
defineProps({
...paginationProps,
});
</script>

4
packages/editor-ui/src/components/layouts/ResourcesListLayout.vue
View file

@ -258,7 +258,7 @@ export default defineComponent({
const hasFilters = ref(false);
const filtersModel = ref(props.filters);
const currentPage = ref(1);
const rowsPerPage = ref<number | '*'>(10);
const rowsPerPage = ref<number>(10);
const resettingFilters = ref(false);
const search = ref<HTMLElement | null>(null);
@ -332,7 +332,7 @@ export default defineComponent({
);
};
const setRowsPerPage = (numberOfRowsPerPage: number | '*') => {
const setRowsPerPage = (numberOfRowsPerPage: number) => {
rowsPerPage.value = numberOfRowsPerPage;
};