chore: adjust query

n8n-io · Jan 14, 2022 · c5d7b18 · c5d7b18
1 parent eefb2a3
commit c5d7b18
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 24 deletions.
diff --git a/packages/editor-ui/src/api/templates.ts b/packages/editor-ui/src/api/templates.ts
@@ -8,7 +8,7 @@ export async function getTemplates(
 	limit: number,
 	skip: number,
 	category: number[] | null,
-	search: string | null,
+	search: string,
 	allData = true,
 	searchQuery = false,
 ): Promise<ISearchPayload> {
@@ -23,7 +23,7 @@ export async function getTemplates(
 			# search parameter in string,default: null
 			search: "${search}",
 			# array of category id eg: [1,2] ,default: null
-			category: ${category}) @include(if: ${allData}){
+			category: ${queryCategory}) @include(if: ${allData}){
 			id
 			name
 			nodes{
@@ -34,9 +34,7 @@ export async function getTemplates(
 				iconData
 				typeVersion: version
 			}
-			workflows{
-				id
-			}
+			workflows
 			totalViews: views
 		}
 		totalworkflow: getWorkflowCount(search: "${search}", category: ${queryCategory})
@@ -45,7 +43,7 @@ export async function getTemplates(
 			# search parameter in string,default: null
 			search: "${search}",
 			# array of category id eg: [1,2] ,default: null
-			category: ${category}){
+			category: ${queryCategory}){
 			id
 			name
 			description
@@ -64,5 +62,6 @@ export async function getTemplates(
 			created_at
 		}
 	}`;
+	console.log(query);
 	return await post(stagingHost, `/graphql`, { query });
 }
diff --git a/packages/editor-ui/src/components/CollectionsCard.vue b/packages/editor-ui/src/components/CollectionsCard.vue
@@ -20,7 +20,7 @@ export default mixins(
 		title: String,
 	},
 	computed: {
-		shortTitle() {
+		shortTitle(): string {
 			// todo decide the length
 			if (this.title.length > 90) {
 				return this.title.slice(0, 87) + '...';

diff --git a/packages/editor-ui/src/components/CollectionsCarousel.vue b/packages/editor-ui/src/components/CollectionsCarousel.vue
@@ -1,8 +1,8 @@
 <template>
 	<div>
-		<n8n-heading size="large">Collections</n8n-heading>
+		<n8n-heading size="large">Collections ({{collectionsUI.length}})</n8n-heading>
 
-		<agile :slidesToShow="3" :navButtons="true" :dots="false" :infinite="false">
+		<agile v-if="collectionsUI.length" :slidesToShow="3" :navButtons="true" :dots="false" :infinite="false">
 
 			<CollectionsCard v-for="collection in collectionsUI" :key="collection.id" :title="collection.name">
 			  <template v-slot:footer>
@@ -27,6 +27,10 @@
 			</template>
 		</agile>
 
+		<div v-else class="emptyText">
+			<n8n-text>No collections found. Try adjusting your search to see more.</n8n-text>
+		</div>
+
 	</div>
 </template>
 
@@ -269,9 +273,13 @@ export default mixins(
 		},
 	},
 	watch: {
-		collections(newCollections) {
-			this.collectionsUI = newCollections;
-			// console.log(this.collectionsUI);
+		collections(newCollections): void {
+			if (newCollections) {
+				this.$data.collectionsUI = newCollections;
+			} else {
+				this.$data.collectionsUI = [];
+
+			}
 		},
 	},
 	methods: {
@@ -284,10 +292,10 @@ export default mixins(
 .agile {
 	padding-top: 8px;
 
-	// .agile__slides {
-	// 	width: 260px;
+	.agile__slide {
+		width: 260px;
 	// 	height: 140px;
-	// }
+	}
 
 		&__nav-button {
 			background: transparent;
@@ -320,4 +328,8 @@ export default mixins(
 
 }
 
+.emptyText {
+	padding-top: 12px;
+}
+
 </style>
diff --git a/packages/editor-ui/src/components/TemplateCard.vue b/packages/editor-ui/src/components/TemplateCard.vue
@@ -31,7 +31,7 @@ export default mixins(
 		};
 	},
 	computed: {
-		shortTitle() {
+		shortTitle(): string {
 			// todo decide the length
 			if (this.title.length > 70) {
 				return this.title.slice(0, 67) + '...';

diff --git a/packages/editor-ui/src/components/TemplateFilters.vue b/packages/editor-ui/src/components/TemplateFilters.vue
@@ -18,7 +18,7 @@
 			</li>
 		</ul>
 
-		<div v-if="sortedCategories.length > 4 && collapsed">
+		<div :class="$style.expandButton" v-if="sortedCategories.length > 4 && collapsed">
 			<n8n-button icon="plus" type="text" float="left" :label="`${sortedCategories.length - 4} more`" @click="collapseAction"></n8n-button>
 		</div>
 
@@ -124,11 +124,11 @@ export default mixins(
 	li {
 		margin-top: 8px;
 	}
-
-	button {
-		padding-left: 0px;
-	}
 }
 
+.expandButton {
+	margin-left: -12px;
+	height: auto;
+}
 
 </style>
diff --git a/packages/editor-ui/src/components/TemplateList.vue b/packages/editor-ui/src/components/TemplateList.vue
@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.listWrapper">
-		<n8n-heading size="large">Workflows</n8n-heading>
-			<div id="infiniteList" :class="$style.listContainer">
+		<n8n-heading size="large">Workflows ({{workflowsUI.length}})</n8n-heading>
+		<div v-if="workflowsUI.length" id="infiniteList" :class="$style.listContainer">
 			<div :class="$style.templateList">
 				<div v-for="workflow in workflowsUI" :key="workflow.id">
 					<TemplateCard :title="workflow.name">
@@ -39,6 +39,11 @@
 			</div>
 
 		</div>
+
+		<div v-else class="emptyText">
+			<n8n-text>No workflows found. Try adjusting your search to see more.</n8n-text>
+		</div>
+
 	</div>
 </template>
 
@@ -74,7 +79,7 @@ export default mixins(
 		},
 	},
 	methods: {
-		truncate(views: number) {
+		truncate(views: number): string {
 			return new Intl.NumberFormat('en-GB', {
 				notation: "compact",
 				compactDisplay: "short",