From f064fc14f4aa78573a8b978887076f5dfdb80d83 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Mon, 8 Aug 2022 14:47:20 +0200
Subject: [PATCH] make not recursive

---
 .../src/components/N8nTree/Tree.vue           | 52 ++++++++++++++++---
 1 file changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/N8nTree/Tree.vue b/packages/design-system/src/components/N8nTree/Tree.vue
index 501c484fdb..cd7b84d495 100644
--- a/packages/design-system/src/components/N8nTree/Tree.vue
+++ b/packages/design-system/src/components/N8nTree/Tree.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="n8n-tree">
-		<n8n-tree-node :input="input" :path="path">
-			<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
-				<slot :name="name" v-bind="data"></slot>
-			</template>
-		</n8n-tree-node>
+		<div v-for="row in parsedData" :style="getStyles(row)">
+			<slot name="label" v-bind:label="row.label" />
+			<span v-if="row.value">&nbsp:&nbsp;</span>
+			<span v-if="row.value" :class="$style.value">{{ row.value }}</span>
+		</div>
 	</div>
 </template>
 
@@ -12,11 +12,10 @@
 import Vue from 'vue';
 import N8nTreeNode from './TreeNode.vue';
 
+const INDENT = 24;
+
 export default Vue.extend({
 	name: 'n8n-tree',
-	components: {
-		N8nTreeNode,
-	},
 	props: {
 		input: {
 		},
@@ -26,9 +25,46 @@ export default Vue.extend({
 		},
 	},
 	computed: {
+		parsedData() {
+			const data = traverse(this.input);
+			console.log(data);
+			return data;
+		},
+	},
+	methods: {
+		getStyles(row) {
+			return {marginLeft: `${INDENT * row.depth}px`};
+		},
 	},
 });
+
+function traverse(data, parsed = [], depth = 0) {
+	Object.keys(data).forEach((label, i) => {
+		const row = {
+			label,
+			depth,
+		};
+		parsed.push(row);
+		if (typeof data[label] !== 'object') {
+			row.value = data[label];
+		}
+		else {
+			traverse(data[label], parsed, depth + 1);
+		}
+	});
+
+	return parsed;
+}
+
 </script>
 
 <style lang="scss" module>
+.simple {
+	text-indent: -24px;
+	margin-left: var(--spacing-l);
+}
+
+.value {
+	word-break: break-all;
+}
 </style>