From 88fb7b0e337fa647507130ea1136d6385bd69563 Mon Sep 17 00:00:00 2001
From: Tommaso Bartolucci <tommasobartolucci11@gmail.com>
Date: Sun, 4 Jul 2021 13:27:08 +0200
Subject: [PATCH] Support arrays in formatted-json-value display (#6640)

* support arrays in formatted-json-value display

* remove 100+ logic
---
 .../formatted-json-value.vue                  | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/app/src/displays/formatted-json-value/formatted-json-value.vue b/app/src/displays/formatted-json-value/formatted-json-value.vue
index 782e6e6f55..fbf179ed67 100644
--- a/app/src/displays/formatted-json-value/formatted-json-value.vue
+++ b/app/src/displays/formatted-json-value/formatted-json-value.vue
@@ -1,19 +1,37 @@
 <template>
 	<value-null v-if="!displayValue" />
+	<v-menu v-else-if="displayValue.length > 1" show-arrow>
+		<template #activator="{ toggle }">
+			<span @click.stop="toggle" class="toggle">
+				<span class="label">
+					{{ displayValue.length }}
+					{{ t('items') }}
+				</span>
+			</span>
+		</template>
 
+		<v-list class="links">
+			<v-list-item v-for="(item, index) in displayValue" :key="index">
+				<v-list-item-content>
+					{{ item }}
+				</v-list-item-content>
+			</v-list-item>
+		</v-list>
+	</v-menu>
 	<span v-else>
-		{{ displayValue }}
+		{{ displayValue[0] }}
 	</span>
 </template>
 
 <script lang="ts">
 import { render } from 'micromustache';
 import { defineComponent, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
 	props: {
 		value: {
-			type: Object,
+			type: [Object, Array],
 			default: null,
 		},
 		format: {
@@ -22,16 +40,22 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const { t } = useI18n();
 		const displayValue = computed(() => {
 			if (!props.value) return null;
+
 			try {
-				return render(props.format || '', props.value);
+				if (Array.isArray(props.value)) {
+					return props.value.map((item: any) => render(props.format || '', item));
+				} else {
+					return [render(props.format || '', props.value)];
+				}
 			} catch (error) {
 				return null;
 			}
 		});
 
-		return { displayValue };
+		return { displayValue, t };
 	},
 });
 </script>