Introduced EntityShowSubComponents

components/EntityShowSubInformation.vue

@@ -0,0 +1,70 @@
+<script setup>
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  }
+})
+
+const dataStore = useDataStore()
+const tempStore = useTempStore()
+
+const router = useRouter()
+
+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)))
+
+</script>
+
+<template>
+  <UCard class="mt-5 scroll" style="height: 80vh">
+    <UAlert
+        v-if="props.item.archived"
+        color="rose"
+        variant="outline"
+        :title="`${dataType.labelSingle} archiviert`"
+        icon="i-heroicons-archive-box"
+        class="mb-5"
+    />
+    <div class="text-wrap">
+      <table class="w-full">
+        <tbody>
+        <tr
+            v-for="datapoint in dataType.templateColumns"
+        >
+          <td>{{datapoint.label}}:</td>
+          <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>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+
+      </table>
+    </div>
+
+  </UCard>
+
+</template>
+
+<style scoped>
+td {
+  border-bottom: 1px solid lightgrey;
+  vertical-align: top;
+  padding-bottom: 0.15em;
+  padding-top: 0.15em;
+}
+</style>