From 624d35deb86d273e481275186c0e72452afdbae9 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Fri, 28 May 2021 10:23:38 +0300
Subject: [PATCH] refactor node creator list

---
 .../src/components/NodeCreateIterator.vue     | 33 +++++++++++++++++++
 .../src/components/NodeCreateList.vue         | 20 +++--------
 2 files changed, 38 insertions(+), 15 deletions(-)
 create mode 100644 packages/editor-ui/src/components/NodeCreateIterator.vue

diff --git a/packages/editor-ui/src/components/NodeCreateIterator.vue b/packages/editor-ui/src/components/NodeCreateIterator.vue
new file mode 100644
index 0000000000..4181d8f871
--- /dev/null
+++ b/packages/editor-ui/src/components/NodeCreateIterator.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <node-create-item
+      v-for="(nodeType, index) in nodeTypes"
+      :active="index === activeIndex"
+      :nodeType="nodeType"
+      v-bind:key="nodeType.name"
+      @nodeTypeSelected="nodeTypeSelected"
+    ></node-create-item>
+  </div>
+</template>
+
+
+<script lang="ts">
+
+import NodeCreateItem from '@/components/NodeCreateItem.vue';
+
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'NodeCreateIterator',
+	components: {
+		NodeCreateItem,
+	},
+	props: ['nodeTypes', 'activeIndex'],
+	methods: {
+		nodeTypeSelected (nodeTypeName: string) {
+			this.$emit('nodeTypeSelected', nodeTypeName);
+		},
+	}
+});
+
+</script>
\ No newline at end of file
diff --git a/packages/editor-ui/src/components/NodeCreateList.vue b/packages/editor-ui/src/components/NodeCreateList.vue
index 1e6f7dcc70..252ac12801 100644
--- a/packages/editor-ui/src/components/NodeCreateList.vue
+++ b/packages/editor-ui/src/components/NodeCreateList.vue
@@ -11,12 +11,10 @@
 			</el-tabs>
 		</div>
 		<div class="node-create-list-wrapper">
-			<div class="node-create-list">
-				<div v-if="filteredNodeTypes.length === 0" class="no-results">
-					🙃 no nodes matching your search criteria
-				</div>
-				<node-create-item :active="index === activeNodeTypeIndex" :nodeType="nodeType" v-for="(nodeType, index) in filteredNodeTypes" v-bind:key="nodeType.name" @nodeTypeSelected="nodeTypeSelected"></node-create-item>
+			<div v-if="filteredNodeTypes.length === 0" class="no-results">
+				🙃 no nodes matching your search criteria
 			</div>
+			<NodeCreateIterator :nodeTypes="filteredNodeTypes" :activeIndex="activeNodeTypeIndex" />
 		</div>
 	</div>
 </template>
@@ -28,11 +26,13 @@ import { INodeTypeDescription } from 'n8n-workflow';
 import NodeCreateItem from '@/components/NodeCreateItem.vue';
 
 import mixins from "vue-typed-mixins";
+import NodeCreateIterator from "./NodeCreateIterator.vue";
 
 export default mixins(externalHooks).extend({
 	name: 'NodeCreateList',
 	components: {
 		NodeCreateItem,
+		NodeCreateIterator,
 	},
 	data () {
 		return {
@@ -127,16 +127,6 @@ export default mixins(externalHooks).extend({
 	max-height: 100vh;
 }
 
-.node-create-list {
-	position: relative;
-	width: 100%;
-}
-
-.group-name {
-	font-size: 0.9em;
-	padding: 15px 0 5px 10px;
-}
-
 .el-input {
 	background-color: $--node-creator-search-background-color;
   color: $--node-creator-search-placeholder-color;