Added Mobile Rendering to EntityShow

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()"
+          @click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
-          color="red"
+      >
-          class="ml-2"
+        Bearbeiten
-          icon="i-heroicons-x-mark"
+      </UButton>
-          variant="outline"
-      />
     </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>
 

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}`)"

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>
 

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"

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)"

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>

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"

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"
     >

layouts/mobile.vue

@@ -142,7 +142,7 @@ const footerLinks = [/*{
       </UDashboardSidebar>
     </UDashboardPanel>
 
-    <UDashboardPage style="height: 80vh">
+    <UDashboardPage style="height: 90vh">
       <UDashboardPanel grow>
         <slot />
       </UDashboardPanel>

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')"