77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<script setup>
|
|
|
|
const props = defineProps({
|
|
queryStringData: {
|
|
type: String
|
|
},
|
|
item: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
topLevelType: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
platform: {
|
|
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="props.platform !== 'mobile' ? 'height: 80vh' : ''">
|
|
<template #header v-if="props.platform === 'mobile'">
|
|
<span>Informationen</span>
|
|
</template>
|
|
<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> |