New CustomerInventory,

New Mitgliederverwaltung für Vereine
New Bank Auto Complete

frontend/components/EntityShowSubInformation.vue

@@ -1,4 +1,5 @@
 <script setup>
+import dayjs from "dayjs";
 
 const props = defineProps({
   queryStringData: {
@@ -28,6 +29,33 @@ const dataType = dataStore.dataTypes[props.topLevelType]
 // const selectedColumns = ref(tempStore.columns[props.topLevelType] ? tempStore.columns[props.topLevelType] : dataType.templateColumns.filter(i => !i.disabledInTable))
 // const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
 
+const getDatapointValue = (datapoint) => {
+  if (datapoint.key.includes(".")) {
+    const [parentKey, childKey] = datapoint.key.split(".")
+    return props.item?.[parentKey]?.[childKey]
+  }
+  return props.item?.[datapoint.key]
+}
+
+const renderDatapointValue = (datapoint) => {
+  const value = getDatapointValue(datapoint)
+  if (value === null || value === undefined || value === "") return "-"
+
+  if (datapoint.inputType === "date") {
+    return dayjs(value).isValid() ? dayjs(value).format("DD.MM.YYYY") : String(value)
+  }
+
+  if (datapoint.inputType === "datetime") {
+    return dayjs(value).isValid() ? dayjs(value).format("DD.MM.YYYY HH:mm") : String(value)
+  }
+
+  if (datapoint.inputType === "bool" || typeof value === "boolean") {
+    return value ? "Ja" : "Nein"
+  }
+
+  return `${value}${datapoint.unit ? datapoint.unit : ""}`
+}
+
 </script>
 
 <template>
@@ -53,8 +81,7 @@ const dataType = dataStore.dataTypes[props.topLevelType]
           <td>
             <component v-if="datapoint.component" :is="datapoint.component" :row="props.item" :in-show="true"></component>
             <div v-else>
-              <span v-if="datapoint.key.includes('.')">{{props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]}}{{datapoint.unit}}</span>
-              <span v-else>{{props.item[datapoint.key]}} {{datapoint.unit}}</span>
+              <span>{{ renderDatapointValue(datapoint) }}</span>
             </div>
           </td>
         </tr>
@@ -74,4 +101,4 @@ td {
   padding-bottom: 0.15em;
   padding-top: 0.15em;
 }
-</style>
+</style>