fix: refactor SbaKeyValueTable to use Composition API and add filtering for null values

Author: SteKoe

spring-boot-admin-server-ui/src/main/frontend/components/sba-key-value-table.vue

@@ -1,6 +1,6 @@
 <template>
   <dl
-    v-for="(value, key, index) in map"
+    v-for="(value, key, index) in filteredMap"
     :key="key"
     class="px-4 py-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"
     :class="{ 'bg-white': index % 2 === 0, 'bg-gray-50': index % 2 !== 0 }"
@@ -17,25 +17,40 @@
   </dl>
 </template>
 
-<script>
-export default {
-  name: 'SbaKeyValueTable',
-  props: {
-    map: {
-      type: Object,
-      required: true,
-    },
-  },
-  methods: {
-    getSlotName(key, value) {
-      return value?.id || key.replace(/[^a-zA-Z]/gi, '').toLowerCase();
-    },
-    getLabel(key, value) {
-      return value?.label || key;
-    },
-    getValue(value) {
-      return value?.value || value;
-    },
-  },
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const { map, skipNullValues = false } = defineProps<{
+  map: Record<string, any>;
+  skipNullValues?: boolean;
+}>();
+
+const filteredMap = computed(() => {
+  return Object.entries(map)
+    .filter(([_, value]) => {
+      if (skipNullValues) {
+        return value && value.value !== null;
+      }
+      return true;
+    })
+    .reduce(
+      (acc, [key, value]) => {
+        acc[key] = value;
+        return acc;
+      },
+      {} as Record<string, any>,
+    );
+});
+
+const getSlotName = (key: string, value: any) => {
+  return value?.id || key.replace(/[^a-zA-Z]/gi, '').toLowerCase();
+};
+
+const getLabel = (key: string, value: any) => {
+  return value?.label || key;
+};
+
+const getValue = (value: any) => {
+  return value?.value || value;
 };
 </script>