refactor(editor): Overhaul workflow level executions list (#5089)

* fix(editor): update texts and styles

* fix(editor): update texts and styles

* fix(editor): move 'No execution found' to sidebar

* fix(editor): change empty state title in executions

* fix(editor): workflow execution list delete item

* fix(editor): workflow execution always show sidebar

* fix(editor): workflow execution unify date display mode

* fix(editor): workflow execution empty list
This commit is contained in:
Csaba Tuncsik
2023-01-11 15:08:00 +01:00
committed by GitHub
parent 62d06b1e6e
commit 3c109ffab1
10 changed files with 641 additions and 637 deletions

View File

@@ -66,6 +66,11 @@
<n8n-loading :class="$style.loader" variant="p" :rows="1" />
<n8n-loading :class="$style.loader" variant="p" :rows="1" />
</div>
<div v-if="executions.length === 0 && statusFilterApplied" :class="$style.noResultsContainer">
<n8n-text color="text-base" size="medium" align="center">
{{ $locale.baseText('executionsLandingPage.noResults') }}
</n8n-text>
</div>
<execution-card
v-else
v-for="execution in executions"
@@ -224,7 +229,7 @@ export default Vue.extend({
// Find out how many execution card can fit into list
// and load more if needed
if (sidebarContainer && currentExecutionCard) {
if (sidebarContainer && currentExecutionCard?.length) {
const cardElement = currentExecutionCard[0].$el as HTMLElement;
const listCapacity = Math.ceil(sidebarContainer.clientHeight / cardElement.clientHeight);
@@ -239,7 +244,11 @@ export default Vue.extend({
`execution-${this.workflowsStore.activeWorkflowExecution?.id}`
] as Vue[];
if (executionsList && currentExecutionCard && this.workflowsStore.activeWorkflowExecution) {
if (
executionsList &&
currentExecutionCard?.length &&
this.workflowsStore.activeWorkflowExecution
) {
const cardElement = currentExecutionCard[0].$el as HTMLElement;
const cardRect = cardElement.getBoundingClientRect();
const LIST_HEADER_OFFSET = 200;
@@ -316,4 +325,10 @@ export default Vue.extend({
margin-top: 0 !important;
}
}
.noResultsContainer {
width: 100%;
margin-top: var(--spacing-2xl);
text-align: center;
}
</style>