Add number formatting to formatted-values display (directus#6186)

* Render number values as formatted numbers * Allow for 0 in formatted-values display * Use isNil for empty check
baranelitez · Jun 10, 2021 · 976baa7 · 976baa7
1 parent 34d0d2d
commit 976baa7
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/app/src/displays/formatted-value/formatted-value.vue b/app/src/displays/formatted-value/formatted-value.vue
@@ -1,5 +1,5 @@
 <template>
-	<value-null v-if="!displayValue" />
+	<value-null v-if="displayValue === null || displayValue === undefined" />
 
 	<span v-else class="display-formatted-text" :class="[{ bold }, font]" :style="{ color }">
 		{{ displayValue }}
@@ -10,6 +10,8 @@
 import { defineComponent, computed } from 'vue';
 import formatTitle from '@directus/format-title';
 import { decode } from 'html-entities';
+import { useI18n } from 'vue-i18n';
+import { isNil } from 'lodash';
 
 export default defineComponent({
 	props: {
@@ -36,8 +38,15 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
+		const { n } = useI18n();
+
 		const displayValue = computed(() => {
-			if (!props.value) return null;
+			if (isNil(props.value) || props.value === '') return null;
+
+			if (typeof props.value === 'number') {
+				return n(props.value);
+			}
+
 			let value = String(props.value);
 
 			// Strip out all HTML tags