feat: handle empty collections

n8n-io · Jan 14, 2022 · 9554bd2 · 9554bd2
1 parent fd314b6
commit 9554bd2
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 13 deletions.
diff --git a/packages/editor-ui/src/api/templates.ts b/packages/editor-ui/src/api/templates.ts
@@ -18,12 +18,12 @@ export async function getTemplates(
 			id
 			name
 		}
-		collections: searchCollection(rows: ${limit},
+		collections: searchCollections(rows: ${limit},
 			skip: ${skip},
 			# search parameter in string,default: null
 			search: "${search}",
 			# array of category id eg: [1,2] ,default: null
-			category: ${queryCategory}) @include(if: ${allData}){
+			category: ${queryCategory}){
 			id
 			name
 			nodes{
@@ -38,7 +38,7 @@ export async function getTemplates(
 			totalViews: views
 		}
 		totalworkflow: getWorkflowCount(search: "${search}", category: ${queryCategory})
-		workflows: searchWorkflow(rows: ${limit},
+		workflows: searchWorkflows(rows: ${limit},
 			skip: ${skip},
 			# search parameter in string,default: null
 			search: "${search}",
@@ -62,6 +62,5 @@ export async function getTemplates(
 			created_at
 		}
 	}`;
-	console.log(query);
 	return await post(stagingHost, `/graphql`, { query });
 }
diff --git a/packages/editor-ui/src/components/TemplateFilters.vue b/packages/editor-ui/src/components/TemplateFilters.vue
@@ -106,6 +106,9 @@ export default mixins(
 			selectedCategory.selected = value;
 			this.sortedCategories = this.sortCategories(this.categories);
 			const strippedCategories = this.sortedCategories.filter(({ selected }) => selected).map(({ id }) => id);
+			if (strippedCategories.length === 0) {
+				this.allSelected = true;
+			}
 			this.setCategories(strippedCategories);
 		},
 		collapseAction() {

diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
@@ -93,14 +93,16 @@ export default mixins(
 
 .listWrapper {
 	// recalc with vars
-	height: 450px;
+	// height: 450px;
 	padding-top: 20px;
 
 	.listContainer {
-	// recalc with vars
-	height: 450px;
-	padding-top: 20px;
-	overflow-y: scroll;
+		position: absolute;
+		// recalc with vars
+		height: calc(100% - 450px);
+		width: calc(100% - 340px);
+		margin-top: 20px;
+		overflow-y: scroll;
 
 		.templateList {
 			border-radius: var(--border-radius-large);

diff --git a/packages/editor-ui/src/modules/templates.ts b/packages/editor-ui/src/modules/templates.ts
@@ -65,11 +65,11 @@ const module: Module<ITemplateState, IRootState> = {
 					});
 					context.commit('setCategories', categories);
 				}
-				context.commit('setCollections', results.collections);
 				if (skip) {
 					context.commit('appendWorkflows', results.workflows);
 				} else {
 					context.commit('setWorkflows', results.workflows);
+					context.commit('setCollections', results.collections);
 				}
 				return results;
 			} catch(e) {

diff --git a/packages/editor-ui/src/views/Templates.vue b/packages/editor-ui/src/views/Templates.vue
@@ -82,6 +82,15 @@ export default mixins(
 			});
 		}
 	},
+	async updated() {
+		const infiniteList = document.getElementById('infiniteList');
+		const collections = await this.$store.getters['templates/getCollections'];
+		if (infiniteList) {
+			const calcHeight = collections.length ? 450 : 350;
+
+			infiniteList.style.height =window.innerHeight - calcHeight + "px";
+		}
+	},
 	methods: {
 		async onSearchInput(value: string) {
 			await this.doSearch();
@@ -148,18 +157,18 @@ export default mixins(
 	display: flex;
 
 	.filters {
-		width: 188px;
+		min-width: 188px;
+		margin-right: 24px;
 	}
 
 	.search {
 		width: -webkit-calc(100% - 188px);
     width:    -moz-calc(100% - 188px);
     width:         calc(100% - 188px);
-		margin-left: 24px;
 		display: flex column;
 
 		.searchInput {
-			width: calc(100% - 80px);
+			width: 100%;
 		}
 
 		.searchResults {