mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-17 10:02:05 +00:00
feat: Add variables feature (#5602)
* feat: add variables db models and migrations * feat: variables api endpoints * feat: add $variables to expressions * test: fix ActiveWorkflowRunner tests failing * test: a different fix for the tests broken by $variables * feat: variables licensing * fix: could create one extra variable than licensed for * feat: Add Variables UI page and $vars global property (#5750) * feat: add support for row slot to datatable * feat: add variables create, read, update, delete * feat: add vars autocomplete * chore: remove alert * feat: add variables autocomplete for code and expressions * feat: add tests for variable components * feat: add variables search and sort * test: update tests for variables view * chore: fix test and linting issue * refactor: review changes * feat: add variable creation telemetry * fix: Improve variables listing and disabled case, fix resource sorting (no-changelog) (#5903) * fix: Improve variables disabled experience and fix sorting * fix: update action box margin * test: update tests for variables row and datatable * fix: Add ee controller to base controller * fix: variables.ee routes not being added * feat: add variables validation * fix: fix vue-fragment bug that breaks everything * chore: Update lock * feat: Add variables input validation and permissions (no-changelog) (#5910) * feat: add input validation * feat: handle variables view for non-instance-owner users * test: update variables tests * fix: fix data-testid pattern * feat: improve overflow styles * test: fix variables row snapshot * feat: update sorting to take newly created variables into account * fix: fix list layout overflow * fix: fix adding variables on page other than 1. fix validation * feat: add docs link * fix: fix default displayName function for resource-list-layout * feat: improve vars expressions ux, cm-tooltip * test: fix datatable test * feat: add MATCH_REGEX validation rule * fix: overhaul how datatable pagination selector works * feat: update completer description * fix: conditionally update usage syntax based on key validation * test: update datatable snapshot * fix: fix variables-row button margins * fix: fix pagination overflow * test: Fix broken test * test: Update snapshot * fix: Remove duplicate declaration * feat: add custom variables icon --------- Co-authored-by: Alex Grozav <alex@grozav.com> Co-authored-by: Omar Ajoue <krynble@gmail.com>
This commit is contained in:
Val
@@ -1,10 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, PropType, ref, useCssModule } from 'vue';
|
||||
import {
|
||||
DatatableColumn,
|
||||
DatatableRow,
|
||||
DatatableRowDataType,
|
||||
} from '@/components/N8nDatatable/mixins';
|
||||
import { DatatableColumn, DatatableRow, DatatableRowDataType } from '../../types';
|
||||
import { getValueByPath } from '../../utils';
|
||||
import { useI18n } from '../../composables';
|
||||
import N8nSelect from '../N8nSelect';
|
||||
@@ -18,6 +14,7 @@ export default defineComponent({
|
||||
N8nOption,
|
||||
N8nPagination,
|
||||
},
|
||||
emits: ['update:currentPage', 'update:rowsPerPage'],
|
||||
props: {
|
||||
columns: {
|
||||
type: Array as PropType<DatatableColumn[]>,
|
||||
@@ -27,25 +24,31 @@ export default defineComponent({
|
||||
type: Array as PropType<DatatableRow[]>,
|
||||
required: true,
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1,
|
||||
},
|
||||
pagination: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
rowsPerPage: {
|
||||
type: Number,
|
||||
type: [Number, String] as PropType<number | '*'>,
|
||||
default: 10,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
setup(props, { emit }) {
|
||||
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);
|
||||
if (props.rowsPerPage === '*') {
|
||||
return 1;
|
||||
}
|
||||
|
||||
return Math.ceil(props.rows.length / props.rowsPerPage);
|
||||
});
|
||||
|
||||
const totalRows = computed(() => {
|
||||
@@ -53,8 +56,12 @@ export default defineComponent({
|
||||
});
|
||||
|
||||
const visibleRows = computed(() => {
|
||||
const start = (currentPage.value - 1) * currentRowsPerPage.value;
|
||||
const end = start + currentRowsPerPage.value;
|
||||
if (props.rowsPerPage === '*') {
|
||||
return props.rows;
|
||||
}
|
||||
|
||||
const start = (props.currentPage - 1) * props.rowsPerPage;
|
||||
const end = start + props.rowsPerPage;
|
||||
|
||||
return props.rows.slice(start, end);
|
||||
});
|
||||
@@ -65,18 +72,17 @@ export default defineComponent({
|
||||
[style.datatableWrapper]: true,
|
||||
};
|
||||
});
|
||||
function getTrClass() {
|
||||
return {
|
||||
[style.datatableRow]: true,
|
||||
};
|
||||
|
||||
function onUpdateCurrentPage(value: number) {
|
||||
emit('update:currentPage', value);
|
||||
}
|
||||
|
||||
function onRowsPerPageChange(value: number) {
|
||||
currentRowsPerPage.value = value;
|
||||
function onRowsPerPageChange(value: number | '*') {
|
||||
emit('update:rowsPerPage', value);
|
||||
|
||||
const maxPage = Math.ceil(totalRows.value / currentRowsPerPage.value);
|
||||
if (maxPage < currentPage.value) {
|
||||
currentPage.value = maxPage;
|
||||
const maxPage = value === '*' ? 1 : Math.ceil(totalRows.value / value);
|
||||
if (maxPage < props.currentPage) {
|
||||
onUpdateCurrentPage(maxPage);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -84,17 +90,22 @@ export default defineComponent({
|
||||
return getValueByPath<DatatableRowDataType>(row, column.path);
|
||||
}
|
||||
|
||||
function getThStyle(column: DatatableColumn) {
|
||||
return {
|
||||
...(column.width ? { width: column.width } : {}),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
t,
|
||||
classes,
|
||||
currentPage,
|
||||
totalPages,
|
||||
totalRows,
|
||||
visibleRows,
|
||||
currentRowsPerPage,
|
||||
rowsPerPageOptions,
|
||||
getTdValue,
|
||||
getTrClass,
|
||||
getThStyle,
|
||||
onUpdateCurrentPage,
|
||||
onRowsPerPageChange,
|
||||
};
|
||||
},
|
||||
@@ -106,18 +117,27 @@ export default defineComponent({
|
||||
<table :class="$style.datatable">
|
||||
<thead :class="$style.datatableHeader">
|
||||
<tr>
|
||||
<th v-for="column in columns" :key="column.id">
|
||||
<th
|
||||
v-for="column in columns"
|
||||
:key="column.id"
|
||||
:class="column.classes"
|
||||
:style="getThStyle(column)"
|
||||
>
|
||||
{{ column.label }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in visibleRows" :key="row.id" :class="getTrClass()">
|
||||
<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>
|
||||
<template v-for="row in visibleRows">
|
||||
<slot name="row" :columns="columns" :row="row" :getTdValue="getTdValue">
|
||||
<tr :key="row.id">
|
||||
<td v-for="column in columns" :key="column.id" :class="column.classes">
|
||||
<component v-if="column.render" :is="column.render" :row="row" :column="column" />
|
||||
<span v-else>{{ getTdValue(row, column) }}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</slot>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -125,23 +145,29 @@ export default defineComponent({
|
||||
<n8n-pagination
|
||||
v-if="totalPages > 1"
|
||||
background
|
||||
:current-page.sync="currentPage"
|
||||
:pager-count="5"
|
||||
:page-size="currentRowsPerPage"
|
||||
:page-size="rowsPerPage"
|
||||
layout="prev, pager, next"
|
||||
:total="totalRows"
|
||||
:currentPage="currentPage"
|
||||
@update:currentPage="onUpdateCurrentPage"
|
||||
/>
|
||||
|
||||
<div :class="$style.pageSizeSelector">
|
||||
<n8n-select
|
||||
size="mini"
|
||||
:value="currentRowsPerPage"
|
||||
:value="rowsPerPage"
|
||||
@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-option
|
||||
v-for="size in rowsPerPageOptions"
|
||||
:key="size"
|
||||
:label="`${size}`"
|
||||
:value="size"
|
||||
/>
|
||||
<n8n-option :label="`All`" value="*"> </n8n-option>
|
||||
</n8n-select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,6 +182,24 @@ export default defineComponent({
|
||||
|
||||
.datatable {
|
||||
width: 100%;
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
vertical-align: top;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.datatableHeader {
|
||||
@@ -167,28 +211,13 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
overflow: visible;
|
||||
margin-top: var(--spacing-s);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user