131 lines
3.4 KiB
Vue
131 lines
3.4 KiB
Vue
<script setup>
|
|
import dayjs from "dayjs";
|
|
|
|
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)))
|
|
|
|
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.displayFunction) {
|
|
return datapoint.displayFunction(value, props.item)
|
|
}
|
|
|
|
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 : ""}`
|
|
}
|
|
|
|
const isTelephonyDatapoint = (datapoint) => {
|
|
if (datapoint.telephonyCall) return true
|
|
|
|
const key = String(datapoint.key || "").toLowerCase()
|
|
return [
|
|
"phone",
|
|
"tel",
|
|
"mobile",
|
|
"mobiletel",
|
|
"phonemobile",
|
|
"phonehome",
|
|
"fixed_tel",
|
|
"mobile_tel",
|
|
].some((part) => key.includes(part))
|
|
}
|
|
|
|
</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="error"
|
|
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-if="isTelephonyDatapoint(datapoint) && getDatapointValue(datapoint)" class="flex flex-wrap items-center gap-2">
|
|
<TelephonyCallButton
|
|
:number="getDatapointValue(datapoint)"
|
|
:label="renderDatapointValue(datapoint)"
|
|
/>
|
|
</div>
|
|
<div v-else>
|
|
<span>{{ renderDatapointValue(datapoint) }}</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>
|