mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-11 12:57:29 -08:00
feat: Add basic Datatable and Pagination components (#5652)
* feat: add Datatable component * feat: migrate to n8n-pagination and add datatable tests * chore: fix linting issue
This commit is contained in:
Alex Grozav
GitHub
parent
b4e60c3b47
commit
29f2629716
|
|
@ -0,0 +1,21 @@
|
|||
import N8nDatatable from './Datatable.vue';
|
||||
import type { StoryFn } from '@storybook/vue';
|
||||
import { rows, columns } from './__tests__/data';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Datatable',
|
||||
component: N8nDatatable,
|
||||
};
|
||||
|
||||
export const Default: StoryFn = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: {
|
||||
N8nDatatable,
|
||||
},
|
||||
template: '<n8n-datatable v-bind="$props"></n8n-datatable>',
|
||||
});
|
||||
|
||||
Default.args = {
|
||||
columns,
|
||||
rows,
|
||||
};
|
||||
200
packages/design-system/src/components/N8nDatatable/Datatable.vue
Normal file
200
packages/design-system/src/components/N8nDatatable/Datatable.vue
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, ref, useCssModule } from 'vue';
|
||||
import {
|
||||
DatatableColumn,
|
||||
DatatableRow,
|
||||
DatatableRowDataType,
|
||||
} from '@/components/N8nDatatable/mixins';
|
||||
import { getValueByPath } from '../../utils';
|
||||
import { useI18n } from '../../composables';
|
||||
import N8nSelect from '../N8nSelect';
|
||||
import N8nOption from '../N8nOption';
|
||||
import N8nPagination from '../N8nPagination';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'n8n-datatable',
|
||||
components: {
|
||||
N8nSelect,
|
||||
N8nOption,
|
||||
N8nPagination,
|
||||
},
|
||||
props: {
|
||||
columns: {
|
||||
type: Array as PropType<DatatableColumn[]>,
|
||||
required: true,
|
||||
},
|
||||
rows: {
|
||||
type: Array as PropType<DatatableRow[]>,
|
||||
required: true,
|
||||
},
|
||||
pagination: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
rowsPerPage: {
|
||||
type: Number,
|
||||
default: 10,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { t } = useI18n();
|
||||
const rowsPerPageOptions = ref([10, 25, 50, 100]);
|
||||
|
||||
const style = useCssModule();
|
||||
const currentPage = ref(1);
|
||||
const currentRowsPerPage = ref(props.rowsPerPage);
|
||||
|
||||
const totalPages = computed(() => {
|
||||
return Math.ceil(props.rows.length / currentRowsPerPage.value);
|
||||
});
|
||||
|
||||
const totalRows = computed(() => {
|
||||
return props.rows.length;
|
||||
});
|
||||
|
||||
const visibleRows = computed(() => {
|
||||
const start = (currentPage.value - 1) * currentRowsPerPage.value;
|
||||
const end = start + currentRowsPerPage.value;
|
||||
|
||||
return props.rows.slice(start, end);
|
||||
});
|
||||
|
||||
const classes = computed(() => {
|
||||
return {
|
||||
datatable: true,
|
||||
[style.datatableWrapper]: true,
|
||||
};
|
||||
});
|
||||
function getTrClass() {
|
||||
return {
|
||||
[style.datatableRow]: true,
|
||||
};
|
||||
}
|
||||
|
||||
function onRowsPerPageChange(value: number) {
|
||||
currentRowsPerPage.value = value;
|
||||
|
||||
const maxPage = Math.ceil(totalRows.value / currentRowsPerPage.value);
|
||||
if (maxPage < currentPage.value) {
|
||||
currentPage.value = maxPage;
|
||||
}
|
||||
}
|
||||
|
||||
function getTdValue(row: DatatableRow, column: DatatableColumn) {
|
||||
return getValueByPath<DatatableRowDataType>(row, column.path);
|
||||
}
|
||||
|
||||
return {
|
||||
t,
|
||||
classes,
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalRows,
|
||||
visibleRows,
|
||||
currentRowsPerPage,
|
||||
rowsPerPageOptions,
|
||||
getTdValue,
|
||||
getTrClass,
|
||||
onRowsPerPageChange,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="classes" v-on="$listeners">
|
||||
<table :class="$style.datatable">
|
||||
<thead :class="$style.datatableHeader">
|
||||
<tr>
|
||||
<th v-for="column in columns" :key="column.id">
|
||||
{{ column.label }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in visibleRows" :key="row.id" :class="getTrClass(row)">
|
||||
<td v-for="column in columns" :key="column.id">
|
||||
<component v-if="column.render" :is="column.render" :row="row" :column="column" />
|
||||
<span v-else>{{ getTdValue(row, column) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div :class="$style.pagination">
|
||||
<n8n-pagination
|
||||
v-if="totalPages > 1"
|
||||
background
|
||||
:current-page.sync="currentPage"
|
||||
:pager-count="5"
|
||||
:page-size="currentRowsPerPage"
|
||||
layout="prev, pager, next"
|
||||
:total="totalRows"
|
||||
/>
|
||||
|
||||
<div :class="$style.pageSizeSelector">
|
||||
<n8n-select
|
||||
size="mini"
|
||||
:value="currentRowsPerPage"
|
||||
@input="onRowsPerPageChange"
|
||||
popper-append-to-body
|
||||
>
|
||||
<template #prepend>{{ t('datatable.pageSize') }}</template>
|
||||
<n8n-option v-for="size in rowsPerPageOptions" :key="size" :label="size" :value="size" />
|
||||
<n8n-option :label="`All`" :value="totalRows"> </n8n-option>
|
||||
</n8n-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" module>
|
||||
.datatableWrapper {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.datatable {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.datatableHeader {
|
||||
background: var(--color-background-base);
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding: var(--spacing-s) var(--spacing-2xs);
|
||||
}
|
||||
}
|
||||
|
||||
.datatableRow {
|
||||
td {
|
||||
color: var(--color-text-base);
|
||||
padding: var(--spacing-s) var(--spacing-2xs);
|
||||
}
|
||||
|
||||
&:nth-of-type(even) {
|
||||
background: var(--color-background-xlight);
|
||||
}
|
||||
|
||||
&:nth-of-type(odd) {
|
||||
background: var(--color-background-light);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
overflow: auto;
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
.pageSizeSelector {
|
||||
text-transform: capitalize;
|
||||
max-width: 150px;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import { render } from '@testing-library/vue';
|
||||
import N8nDatatable from '../Datatable.vue';
|
||||
import { rows, columns } from './data';
|
||||
|
||||
const stubs = ['n8n-select', 'n8n-option', 'n8n-button', 'n8n-pagination'];
|
||||
|
||||
describe('components', () => {
|
||||
describe('N8nDatatable', () => {
|
||||
it('should render correctly', () => {
|
||||
const wrapper = render(N8nDatatable, {
|
||||
propsData: {
|
||||
columns,
|
||||
rows,
|
||||
},
|
||||
stubs,
|
||||
});
|
||||
|
||||
expect(wrapper.container.querySelectorAll('tbody tr').length).toEqual(10);
|
||||
expect(wrapper.container.querySelectorAll('thead tr').length).toEqual(1);
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
// Vitest Snapshot v1
|
||||
|
||||
exports[`components > N8nDatatable > should render correctly 1`] = `
|
||||
"<div class=\\"datatable datatableWrapper\\">
|
||||
<table class=\\"datatable\\">
|
||||
<thead class=\\"datatableHeader\\">
|
||||
<tr>
|
||||
<th> ID </th>
|
||||
<th> Name </th>
|
||||
<th> Age </th>
|
||||
<th> Action </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class=\\"datatableRow\\">
|
||||
<td><span>1</span></td>
|
||||
<td><span>Richard Hendricks</span></td>
|
||||
<td><span>29</span></td>
|
||||
<td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
|
||||
<!----><span>Button 1</span></button></td>
|
||||
</tr>
|
||||
<tr class=\\"datatableRow\\">
|
||||
<td><span>2</span></td>
|
||||
<td><span>Bertram Gilfoyle</span></td>
|
||||
<td><span>44</span></td>
|
||||
<td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
|
||||
<!----><span>Button 2</span></button></td>
|
||||
</tr>
|
||||
<tr class=\\"datatableRow\\">
|
||||
<td><span>3</span></td>
|
||||
<td><span>Dinesh Chugtai</span></td>
|
||||
<td><span>31</span></td>
|
||||
<td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
|
||||
<!----><span>Button 3</span></button></td>
|
||||
</tr>
|
||||
<tr class=\\"datatableRow\\">
|
||||
<td><span>4</span></td>
|
||||
<td><span>Jared Dunn </span></td>
|
||||
<td><span>38</span></td>
|
||||
<td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
|
||||
<!----><span>Button 4</span></button></td>
|
||||
</tr>
|
||||
<tr class=\\"datatableRow\\">
|
||||
<td><span>5</span></td>
|
||||
<td><span>Richard Hendricks</span></td>
|
||||
<td><span>29</span></td>
|
||||
<td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
|
||||
<!----><span>Button 5</span></button></td>
|
||||
</tr>
|
||||
<tr class=\\"datatableRow\\">
|
||||
<td><span>6</span></td>
|
||||
<td><span>Bertram Gilfoyle</span></td>
|
||||
<td><span>44</span></td>
|
||||
<td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
|
||||
<!----><span>Button 6</span></button></td>
|
||||
</tr>
|
||||
<tr class=\\"datatableRow\\">
|
||||
<td><span>7</span></td>
|
||||
<td><span>Dinesh Chugtai</span></td>
|
||||
<td><span>31</span></td>
|
||||
<td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
|
||||
<!----><span>Button 7</span></button></td>
|
||||
</tr>
|
||||
<tr class=\\"datatableRow\\">
|
||||
<td><span>8</span></td>
|
||||
<td><span>Jared Dunn </span></td>
|
||||
<td><span>38</span></td>
|
||||
<td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
|
||||
<!----><span>Button 8</span></button></td>
|
||||
</tr>
|
||||
<tr class=\\"datatableRow\\">
|
||||
<td><span>9</span></td>
|
||||
<td><span>Richard Hendricks</span></td>
|
||||
<td><span>29</span></td>
|
||||
<td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
|
||||
<!----><span>Button 9</span></button></td>
|
||||
</tr>
|
||||
<tr class=\\"datatableRow\\">
|
||||
<td><span>10</span></td>
|
||||
<td><span>Bertram Gilfoyle</span></td>
|
||||
<td><span>44</span></td>
|
||||
<td><button aria-disabled=\\"false\\" aria-busy=\\"false\\" aria-live=\\"polite\\" class=\\"button button primary medium\\" column=\\"[object Object]\\">
|
||||
<!----><span>Button 10</span></button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class=\\"pagination\\">
|
||||
<n8n-pagination-stub pagesize=\\"10\\" total=\\"15\\" pagercount=\\"5\\" currentpage=\\"1\\" layout=\\"prev, pager, next\\" pagesizes=\\"10,20,30,40,50,100\\" background=\\"true\\"></n8n-pagination-stub>
|
||||
<div class=\\"pageSizeSelector\\">
|
||||
<n8n-select-stub value=\\"10\\" size=\\"mini\\" popperappendtobody=\\"true\\">
|
||||
<n8n-option-stub value=\\"10\\" label=\\"10\\"></n8n-option-stub>
|
||||
<n8n-option-stub value=\\"25\\" label=\\"25\\"></n8n-option-stub>
|
||||
<n8n-option-stub value=\\"50\\" label=\\"50\\"></n8n-option-stub>
|
||||
<n8n-option-stub value=\\"100\\" label=\\"100\\"></n8n-option-stub>
|
||||
<n8n-option-stub value=\\"15\\" label=\\"All\\"></n8n-option-stub>
|
||||
</n8n-select-stub>
|
||||
</div>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
import { defineComponent, h, PropType } from 'vue';
|
||||
import { DatatableRow } from '../mixins';
|
||||
import N8nButton from '../../N8nButton';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
export const ActionComponent = defineComponent({
|
||||
props: {
|
||||
row: {
|
||||
type: Object as PropType<DatatableRow>,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
return () => h(N8nButton, {}, [`Button ${props.row.id}`]);
|
||||
},
|
||||
});
|
||||
|
||||
export const columns = [
|
||||
{ id: 'id', path: 'id', label: 'ID' },
|
||||
{ id: 'name', path: 'name', label: 'Name' },
|
||||
{ id: 'age', path: 'meta.age', label: 'Age' },
|
||||
{
|
||||
id: 'action',
|
||||
label: 'Action',
|
||||
render: ActionComponent,
|
||||
},
|
||||
];
|
||||
|
||||
export const rows = [
|
||||
{ id: 1, name: 'Richard Hendricks', meta: { age: 29 } },
|
||||
{ id: 2, name: 'Bertram Gilfoyle', meta: { age: 44 } },
|
||||
{ id: 3, name: 'Dinesh Chugtai', meta: { age: 31 } },
|
||||
{ id: 4, name: 'Jared Dunn ', meta: { age: 38 } },
|
||||
{ id: 5, name: 'Richard Hendricks', meta: { age: 29 } },
|
||||
{ id: 6, name: 'Bertram Gilfoyle', meta: { age: 44 } },
|
||||
{ id: 7, name: 'Dinesh Chugtai', meta: { age: 31 } },
|
||||
{ id: 8, name: 'Jared Dunn ', meta: { age: 38 } },
|
||||
{ id: 9, name: 'Richard Hendricks', meta: { age: 29 } },
|
||||
{ id: 10, name: 'Bertram Gilfoyle', meta: { age: 44 } },
|
||||
{ id: 11, name: 'Dinesh Chugtai', meta: { age: 31 } },
|
||||
{ id: 12, name: 'Jared Dunn ', meta: { age: 38 } },
|
||||
{ id: 13, name: 'Richard Hendricks', meta: { age: 29 } },
|
||||
{ id: 14, name: 'Bertram Gilfoyle', meta: { age: 44 } },
|
||||
{ id: 15, name: 'Dinesh Chugtai', meta: { age: 31 } },
|
||||
];
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import N8nDatatable from './Datatable.vue';
|
||||
|
||||
export default N8nDatatable;
|
||||
16
packages/design-system/src/components/N8nDatatable/mixins.ts
Normal file
16
packages/design-system/src/components/N8nDatatable/mixins.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { VNode } from 'vue';
|
||||
|
||||
export type DatatableRowDataType = string | number | boolean | null | undefined;
|
||||
|
||||
export interface DatatableRow {
|
||||
id: string | number;
|
||||
|
||||
[key: string]: DatatableRowDataType;
|
||||
}
|
||||
|
||||
export interface DatatableColumn {
|
||||
id: string | number;
|
||||
path: string;
|
||||
label: string;
|
||||
render: (row: DatatableRow) => (() => VNode | VNode[]) | DatatableRowDataType;
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
import type { StoryFn } from '@storybook/vue';
|
||||
import N8nPagination from './Pagination.vue';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Pagination',
|
||||
component: N8nPagination,
|
||||
};
|
||||
|
||||
const Template: StoryFn = (args, { argTypes }) => ({
|
||||
props: Object.keys(argTypes),
|
||||
components: {
|
||||
N8nPagination,
|
||||
},
|
||||
template: '<n8n-pagination v-bind="$props" />',
|
||||
});
|
||||
|
||||
export const Pagination: StoryFn = Template.bind({});
|
||||
Pagination.args = {
|
||||
currentPage: 1,
|
||||
pagerCount: 5,
|
||||
pageSize: 10,
|
||||
total: 100,
|
||||
};
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<script lang="ts">
|
||||
import { Pagination as ElPagination } from 'element-ui';
|
||||
|
||||
export default {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
|
||||
props: (ElPagination as any).props,
|
||||
components: {
|
||||
ElPagination,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
v-bind="[$props, $attrs]"
|
||||
v-on="$listeners"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import N8nPagination from './Pagination.vue';
|
||||
|
||||
export default N8nPagination;
|
||||
1
packages/design-system/src/composables/index.ts
Normal file
1
packages/design-system/src/composables/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './useI18n';
|
||||
7
packages/design-system/src/composables/useI18n.ts
Normal file
7
packages/design-system/src/composables/useI18n.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
import { t } from '../locale';
|
||||
|
||||
export function useI18n() {
|
||||
return {
|
||||
t: (path: string, options: string[] = []) => t(path, options),
|
||||
};
|
||||
}
|
||||
|
|
@ -18,4 +18,5 @@ export default {
|
|||
'8+ characters, at least 1 number and 1 capital letter',
|
||||
'sticky.markdownHint': `You can style with <a href="https://docs.n8n.io/workflows/sticky-notes/" target="_blank">Markdown</a>`,
|
||||
'tags.showMore': (count) => `+${count} more`,
|
||||
'datatable.pageSize': 'Page size',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
import { getValueByPath } from '@/utils';
|
||||
|
||||
describe('getValueByPath()', () => {
|
||||
const object = {
|
||||
id: '1',
|
||||
name: 'Richard Hendricks',
|
||||
address: {
|
||||
city: 'Palo Alto',
|
||||
state: 'California',
|
||||
country: 'United States',
|
||||
},
|
||||
};
|
||||
|
||||
it('should return direct field from object', () => {
|
||||
const path = 'name';
|
||||
|
||||
expect(getValueByPath(object, path)).toEqual(object.name);
|
||||
});
|
||||
|
||||
it('should return nested field from object', () => {
|
||||
const path = 'address.country';
|
||||
|
||||
expect(getValueByPath(object, path)).toEqual(object.address.country);
|
||||
});
|
||||
|
||||
it('should return undefined if direct field does not exist', () => {
|
||||
const path = 'other';
|
||||
|
||||
expect(getValueByPath(object, path)).toEqual(undefined);
|
||||
});
|
||||
|
||||
it('should return undefined if nested field does not exist', () => {
|
||||
const path = 'address.other';
|
||||
|
||||
expect(getValueByPath(object, path)).toEqual(undefined);
|
||||
});
|
||||
|
||||
it('should return undefined if path does not exist', () => {
|
||||
const path = 'other.other';
|
||||
|
||||
expect(getValueByPath(object, path)).toEqual(undefined);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,2 +1,3 @@
|
|||
export * from './markdown';
|
||||
export * from './uid';
|
||||
export * from './valueByPath';
|
||||
|
|
|
|||
14
packages/design-system/src/utils/valueByPath.ts
Normal file
14
packages/design-system/src/utils/valueByPath.ts
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access */
|
||||
|
||||
/**
|
||||
* Get a deeply nested value based on a given path string
|
||||
*
|
||||
* @param object
|
||||
* @param path
|
||||
* @returns {T}
|
||||
*/
|
||||
export function getValueByPath<T = any>(object: any, path: string): T {
|
||||
return path.split('.').reduce((acc, part) => {
|
||||
return acc && acc[part];
|
||||
}, object);
|
||||
}
|
||||
Loading…
Reference in a new issue