Added Mobile Rendering to EntityShow

2025-03-28 17:25:31 +01:00
parent a3bec6a9b1
commit 7a986189df
10 changed files with 178 additions and 19 deletions
--- a/components/EntityShow.vue
+++ b/components/EntityShow.vue
@@ -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>

--- a/components/EntityShowSub.vue
+++ b/components/EntityShowSub.vue
@@ -18,6 +18,10 @@ const props = defineProps({
  topLevelType: {
    type: String,
    required: true
+  },
+  platform: {
+    type: String,
+    required: true
  }
 })

@@ -71,7 +75,10 @@ setup()
 </script>

 <template>
-  <UCard class="mt-5" v-if="loaded" style="height: 80vh">
+  <UCard class="mt-5" v-if="loaded" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>{{dataType.label}}</span>
+    </template>
    <Toolbar>
      <UButton
          @click="router.push(`/standardEntity/${type}/create?${props.queryStringData}`)"
--- a/components/EntityShowSubCostCentreReport.vue
+++ b/components/EntityShowSubCostCentreReport.vue
@@ -11,13 +11,20 @@ const props = defineProps({
  topLevelType: {
    type: String,
    required: true
+  },
+  platform: {
+    type: String,
+    required: true
  }
 })

 </script>

 <template>
-  <UCard class="mt-5 scroll" style="height: 80vh">
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Auswertung</span>
+    </template>
    <costcentre-display :item="props.item"/>
  </UCard>

--- a/components/EntityShowSubCreatedDocuments.vue
+++ b/components/EntityShowSubCreatedDocuments.vue
@@ -46,6 +46,10 @@ const props = defineProps({
  topLevelType: {
    type: String,
    required: true
+  },
+  platform: {
+    type: String,
+    required: true
  }
 })

@@ -122,7 +126,10 @@ const invoiceDeliveryNotes = () => {
 </script>

 <template>
-  <UCard class="mt-5" style="height: 80vh">
+  <UCard class="mt-5" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Ausgangsbelege</span>
+    </template>
    <Toolbar>
      <UButton
          @click="invoiceDeliveryNotes"
--- a/components/EntityShowSubFiles.vue
+++ b/components/EntityShowSubFiles.vue
@@ -15,6 +15,10 @@ const props = defineProps({
  topLevelType: {
    type: String,
    required: true
+  },
+  platform: {
+    type: String,
+    required: true
  }
 })

@@ -36,7 +40,10 @@ setup()
 </script>

 <template>
-  <UCard class="mt-5" style="height: 80vh">
+  <UCard class="mt-5" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Dateien</span>
+    </template>
    <Toolbar>
      <DocumentUpload
          :type="props.type.substring(0,props.type.length-1)"
--- a/components/EntityShowSubHistoryDisplay.vue
+++ b/components/EntityShowSubHistoryDisplay.vue
@@ -11,6 +11,10 @@ const props = defineProps({
  topLevelType: {
    type: String,
    required: true
+  },
+  platform: {
+    type: String,
+    required: true
  }
 })

@@ -21,13 +25,14 @@ const dataType = dataStore.dataTypes[props.topLevelType]
 </script>

 <template>
-  <UCard class="mt-5 scroll" style="height: 80vh">
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
    <HistoryDisplay
        :type="props.topLevelType.substring(0,props.topLevelType.length-1)"
        v-if="props.item.id"
        :element-id="props.item.id"
        render-headline
    />
+<!--TODO Workaround für die Höhe finden? Evt unterseite oder Modal oder ganz nach unten    -->
  </UCard>

 </template>
--- a/components/EntityShowSubInformation.vue
+++ b/components/EntityShowSubInformation.vue
@@ -11,6 +11,10 @@ const props = defineProps({
  topLevelType: {
    type: String,
    required: true
+  },
+  platform: {
+    type: String,
+    required: true
  }
 })

@@ -27,7 +31,10 @@ const dataType = dataStore.dataTypes[props.topLevelType]
 </script>

 <template>
-  <UCard class="mt-5 scroll" style="height: 80vh">
+  <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"
--- a/components/EntityShowSubPhases.vue
+++ b/components/EntityShowSubPhases.vue
@@ -13,6 +13,10 @@ const props = defineProps({
  topLevelType: {
    type: String,
    required: true
+  },
+  platform: {
+    type: String,
+    required: true
  }
 })

@@ -90,7 +94,10 @@ const changeActivePhase = async (key) => {
 </script>

 <template>
-  <UCard class="mt-5 scroll" style="height: 80vh">
+  <UCard class="mt-5 scroll" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
+    <template #header v-if="props.platform === 'mobile'">
+      <span>Phasen</span>
+    </template>
    <UAccordion
        :items="renderedPhases"
    >
--- a/layouts/mobile.vue
+++ b/layouts/mobile.vue
@@ -142,7 +142,7 @@ const footerLinks = [/*{
      </UDashboardSidebar>
    </UDashboardPanel>

-    <UDashboardPage style="height: 80vh">
+    <UDashboardPage style="height: 90vh">
      <UDashboardPanel grow>
        <slot />
      </UDashboardPanel>
--- a/pages/standardEntity/[type]/[[mode]]/[[id]].vue
+++ b/pages/standardEntity/[type]/[[mode]]/[[id]].vue
@@ -63,6 +63,7 @@ setupPage()
      :item="item"
      @updateNeeded="setupPage"
      :key="item"
+      :platform="platform"
  />
  <EntityEdit
      v-else-if="loaded && (mode === 'edit' || mode === 'create')"