flfeders/FEDEO
2
1
Fork 0
Code Issues 62 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

Added Mobile Rendering to EntityShow

Browse Source
This commit is contained in:
florianfederspiel
2025-03-28 17:25:31 +01:00
parent a3bec6a9b1
commit 7a986189df
10 changed files with 178 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
components/EntityShow.vue
View File

@@ -11,6 +11,9 @@ const props = defineProps({
},
inModal: {
type: Boolean,
},
platform: {
type: String,
}
})
@@ -89,7 +92,27 @@ const getAvailableQueryStringData = (keys) => {
<template>
<UDashboardNavbar
v-if="!props.inModal"
v-if="props.inModal"
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
>
<template #center>
<h1
v-if="item"
:class="['text-xl','font-medium']"
>{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
</template>
<template #right>
<UButton
@click="modal.close()"
color="red"
class="ml-2"
icon="i-heroicons-x-mark"
variant="outline"
/>
</template>
</UDashboardNavbar>
<UDashboardNavbar
v-else-if="!props.inModal && platform !== 'mobile'"
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
>
<template #left>
@@ -123,28 +146,46 @@ const getAvailableQueryStringData = (keys) => {
</template>
</UDashboardNavbar>
<UDashboardNavbar
v-else
v-else-if="!props.inModal && platform === 'mobile'"
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
>
<!-- <template #left>
<UButton
icon="i-heroicons-chevron-left"
variant="outline"
@click="router.back()/*router.push(`/standardEntity/${type}`)*/"
>
Zurück
</UButton>
<UButton
icon="i-heroicons-chevron-left"
variant="outline"
@click="router.push(`/standardEntity/${type}`)"
>
Übersicht
</UButton>
</template>-->
<template #toggle>
<div></div>
</template>
<template #center>
<h1
v-if="item"
:class="['text-xl','font-medium']"
:class="['text-xl','font-medium','text-truncate']"
>{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
</template>
<template #right>
<UButton
@click="modal.close()"
color="red"
class="ml-2"
icon="i-heroicons-x-mark"
variant="outline"
/>
@click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
>
Bearbeiten
</UButton>
</template>
</UDashboardNavbar>
<UTabs
:items="dataType.showTabs"
v-if="props.item.id"
v-if="props.item.id && platform !== 'mobile'"
class="p-5"
v-model="openTab"
>
@@ -155,9 +196,15 @@ const getAvailableQueryStringData = (keys) => {
:top-level-type="type"
:item="props.item"
class="w-1/2 mr-5"
:platform="platform"
/>
<EntityShowSubHistoryDisplay :top-level-type="type" :item="props.item" class="w-1/2"/>
<EntityShowSubHistoryDisplay
:top-level-type="type"
:item="props.item"
class="w-1/2"
:platform="platform"
/>
</div>
<EntityShowSubFiles
@@ -167,6 +214,7 @@ const getAvailableQueryStringData = (keys) => {
:top-level-type="type"
type="files"
@updateNeeded="emit('updateNeeded')"
:platform="platform"
/>
<EntityShowSubPhases
:item="props.item"
@@ -174,17 +222,20 @@ const getAvailableQueryStringData = (keys) => {
v-else-if="tab.label === 'Phasen'"
:query-string-data="getAvailableQueryStringData()"
@updateNeeded="emit('updateNeeded')"
:platform="platform"
/>
<EntityShowSubCreatedDocuments
:item="props.item"
:top-level-type="type"
v-else-if="tab.label === 'Ausgangsbelege'"
:query-string-data="getAvailableQueryStringData()"
:platform="platform"
/>
<EntityShowSubCostCentreReport
:top-level-type="type"
:item="props.item"
v-else-if="tab.label === 'Auswertung Kostenstelle'"
:platform="platform"
/>
<EntityShowSub
@@ -193,9 +244,69 @@ const getAvailableQueryStringData = (keys) => {
:tab-label="tab.label"
:top-level-type="type"
v-else
:platform="platform"
/>
</template>
</UTabs>
<UDashboardPanelContent v-else style="overflow-x: hidden;">
<div v-for="sub in dataType.showTabs" :key="sub.key">
<div v-if="sub.label === 'Informationen'">
<EntityShowSubInformation
:top-level-type="type"
:item="props.item"
:platform="platform"
/>
<EntityShowSubHistoryDisplay
:top-level-type="type"
:item="props.item"
:platform="platform"
/>
</div>
<EntityShowSubFiles
:item="props.item"
:query-string-data="getAvailableQueryStringData()"
v-else-if="sub.label === 'Dateien'"
:top-level-type="type"
type="files"
@updateNeeded="emit('updateNeeded')"
:platform="platform"
/>
<EntityShowSubPhases
:item="props.item"
:top-level-type="type"
v-else-if="sub.label === 'Phasen'"
:query-string-data="getAvailableQueryStringData()"
@updateNeeded="emit('updateNeeded')"
:platform="platform"
/>
<EntityShowSubCreatedDocuments
:item="props.item"
:top-level-type="type"
v-else-if="sub.label === 'Ausgangsbelege'"
:query-string-data="getAvailableQueryStringData()"
:platform="platform"
/>
<EntityShowSubCostCentreReport
:top-level-type="type"
:item="props.item"
v-else-if="sub.label === 'Auswertung Kostenstelle'"
:platform="platform"
/>
<EntityShowSub
:item="props.item"
:query-string-data="getAvailableQueryStringData()"
:tab-label="sub.label"
:top-level-type="type"
v-else
:platform="platform"
/>
</div>
</UDashboardPanelContent>
</template>