From c35b469b0ad9a5dcbf57188810dfcb396201be25 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Fri, 18 Jun 2021 13:56:14 -0400
Subject: [PATCH] Fix defaults rendering in list, add defaults to metric

---
 app/src/components/v-input/v-input.vue        |  2 +-
 app/src/interfaces/list/list.vue              | 15 ++++++++++-
 app/src/panels/metric/index.ts                |  6 +++++
 app/src/panels/metric/metric.vue              | 25 +++++++++++++------
 .../render-template/render-template.vue       |  3 ++-
 package-lock.json                             |  3 +++
 6 files changed, 43 insertions(+), 11 deletions(-)

diff --git a/app/src/components/v-input/v-input.vue b/app/src/components/v-input/v-input.vue
index 2c4612314d..be4a981f69 100644
--- a/app/src/components/v-input/v-input.vue
+++ b/app/src/components/v-input/v-input.vue
@@ -217,7 +217,7 @@ export default defineComponent({
 		function emitValue(event: InputEvent) {
 			let value = (event.target as HTMLInputElement).value;
 
-			if (props.nullable === true && !value) {
+			if (props.nullable === true && value === '') {
 				emit('update:modelValue', null);
 				return;
 			}
diff --git a/app/src/interfaces/list/list.vue b/app/src/interfaces/list/list.vue
index 09eeac9892..dc8722357b 100644
--- a/app/src/interfaces/list/list.vue
+++ b/app/src/interfaces/list/list.vue
@@ -15,7 +15,7 @@
 				<template #item="{ element, index }">
 					<v-list-item :dense="value.length > 4" block @click="active = index">
 						<v-icon name="drag_handle" class="drag-handle" left @click.stop="() => {}" />
-						<render-template :fields="fields" :item="element" :template="templateWithDefaults" />
+						<render-template :fields="fields" :item="{ ...defaults, ...element }" :template="templateWithDefaults" />
 						<div class="spacer" />
 						<v-icon v-if="!disabled" name="close" @click.stop="removeItem(element)" />
 					</v-list-item>
@@ -119,6 +119,18 @@ export default defineComponent({
 
 		const { displayValue } = renderStringTemplate(templateWithDefaults, activeItem);
 
+		const defaults = computed(() => {
+			const values: Record<string, any> = {};
+
+			for (const field of props.fields) {
+				if (field.schema?.default_value !== undefined && field.schema?.default_value !== null) {
+					values[field.field!] = field.schema.default_value;
+				}
+			}
+
+			return values;
+		});
+
 		return {
 			t,
 			updateValues,
@@ -133,6 +145,7 @@ export default defineComponent({
 			closeDrawer,
 			onSort,
 			templateWithDefaults,
+			defaults,
 		};
 
 		function updateValues(index: number, updatedValues: any) {
diff --git a/app/src/panels/metric/index.ts b/app/src/panels/metric/index.ts
index 8ee9bf0c05..df31b17acf 100644
--- a/app/src/panels/metric/index.ts
+++ b/app/src/panels/metric/index.ts
@@ -185,6 +185,9 @@ export default definePanel({
 							field: 'operator',
 							name: '$t:operator',
 							type: 'string',
+							schema: {
+								default_value: '>=',
+							},
 							meta: {
 								interface: 'select-dropdown',
 								options: {
@@ -222,6 +225,9 @@ export default definePanel({
 							field: 'value',
 							name: '$t:value',
 							type: 'integer',
+							schema: {
+								default_value: 0,
+							},
 							meta: {
 								interface: 'input',
 								width: 'half',
diff --git a/app/src/panels/metric/metric.vue b/app/src/panels/metric/metric.vue
index 6f7b7af62d..ba172ba0c3 100644
--- a/app/src/panels/metric/metric.vue
+++ b/app/src/panels/metric/metric.vue
@@ -74,24 +74,33 @@ export default defineComponent({
 		const color = computed(() => {
 			if (!metric.value) return null;
 
-			const matchingFormat = (props.options.conditionalFormatting || []).find(matchesOperator);
+			let matchingFormat: MetricOptions['conditionalFormatting'][number] | null = null;
+
+			for (const format of props.options.conditionalFormatting || []) {
+				if (matchesOperator(format)) {
+					matchingFormat = format;
+				}
+			}
 
 			return matchingFormat?.color || null;
 
 			function matchesOperator(format: MetricOptions['conditionalFormatting'][number]) {
-				switch (format.operator) {
+				const value = Number(metric.value);
+				const compareValue = Number(format.value ?? 0);
+
+				switch (format.operator || '>=') {
 					case '=':
-						return metric.value === format.value;
+						return value === compareValue;
 					case '!=':
-						return metric.value !== format.value;
+						return value !== compareValue;
 					case '>':
-						return metric.value > format.value;
+						return value > compareValue;
 					case '>=':
-						return metric.value >= format.value;
+						return value >= compareValue;
 					case '<':
-						return metric.value < format.value;
+						return value < compareValue;
 					case '<=':
-						return metric.value < format.value;
+						return value < compareValue;
 				}
 			}
 		});
diff --git a/app/src/views/private/components/render-template/render-template.vue b/app/src/views/private/components/render-template/render-template.vue
index 7290a16423..311ea4f263 100644
--- a/app/src/views/private/components/render-template/render-template.vue
+++ b/app/src/views/private/components/render-template/render-template.vue
@@ -85,6 +85,7 @@ export default defineComponent({
 
 					// Try getting the value from the item, return some question marks if it doesn't exist
 					const value = get(props.item, fieldKey);
+
 					if (value === undefined) return null;
 
 					if (!field) return value;
@@ -116,7 +117,7 @@ export default defineComponent({
 						field: field.field,
 					};
 				})
-				.map((p) => p || null)
+				.map((p) => p ?? null)
 		);
 
 		return { parts, templateEl };
diff --git a/package-lock.json b/package-lock.json
index 8fc1a52338..f5004b9d82 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -497,7 +497,10 @@
 				"mitt": "2.1.0",
 				"nanoid": "3.1.23",
 				"pinia": "2.0.0-beta.3",
+				"prettier": "2.3.1",
+				"pretty-ms": "7.0.1",
 				"qrcode": "1.4.4",
+				"rimraf": "3.0.2",
 				"sass": "1.35.1",
 				"tinymce": "5.8.1",
 				"typescript": "4.3.4",