From 8d4ff3c88e87ffd8fd4a596d95098a83516b0344 Mon Sep 17 00:00:00 2001
From: florianfederspiel <florian@fedeo.de>
Date: Tue, 3 Jun 2025 16:35:30 +0200
Subject: [PATCH] Added Features to Mobile Styling

---
 components/EntityList.vue       |   8 ++
 components/EntityListMobile.vue | 129 ++++++++++++++++++++++++++++++++
 layouts/mobile.vue              |   4 +-
 pages/mobile/menu.vue           |  30 +++++++-
 pages/times/index.vue           |  41 +++++++++-
 stores/data.js                  |   2 +
 6 files changed, 209 insertions(+), 5 deletions(-)
 create mode 100644 components/EntityListMobile.vue

diff --git a/components/EntityList.vue b/components/EntityList.vue
index 7eb08d2..a76b031 100644
--- a/components/EntityList.vue
+++ b/components/EntityList.vue
@@ -2,6 +2,7 @@
 import {useTempStore} from "~/stores/temp.js";
 import FloatingActionButton from "~/components/mobile/FloatingActionButton.vue";
 import EntityTable from "~/components/EntityTable.vue";
+import EntityListMobile from "~/components/EntityListMobile.vue";
 
 const props = defineProps({
   type: {
@@ -181,7 +182,14 @@ const filteredRows = computed(() => {
       </USelectMenu>
     </template>
   </UDashboardToolbar>
+  <EntityListMobile
+    v-if="platform === 'mobile'"
+    :type="props.type"
+    :columns="columns"
+    :rows="filteredRows"
+  />
   <EntityTable
+    v-else
     :type="props.type"
     :columns="columns"
     :rows="filteredRows"
diff --git a/components/EntityListMobile.vue b/components/EntityListMobile.vue
new file mode 100644
index 0000000..f6baaf5
--- /dev/null
+++ b/components/EntityListMobile.vue
@@ -0,0 +1,129 @@
+<script setup>
+  /*defineShortcuts({
+    /!*'/': () => {
+      //console.log(searchinput)
+      //searchinput.value.focus()
+      document.getElementById("searchinput").focus()
+    },*!/
+    'Enter': {
+      usingInput: true,
+      handler: () => {
+        router.push(`/standardEntity/${props.type}/show/${props.rows.value[selectedItem.value].id}`)
+      }
+    },
+    'arrowdown': () => {
+      if(selectedItem.value < props.rows.length - 1) {
+        selectedItem.value += 1
+      } else {
+        selectedItem.value = 0
+      }
+    },
+    'arrowup': () => {
+      if(selectedItem.value === 0) {
+        selectedItem.value = props.rows.length - 1
+      } else {
+        selectedItem.value -= 1
+      }
+    }
+  })*/
+
+  const props = defineProps({
+    rows: {
+      type: Array,
+      required: true,
+      default: []
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    type: {
+      type: String,
+      required: true,
+    }
+  })
+
+  const dataStore = useDataStore()
+
+  const router = useRouter()
+
+  const dataType = dataStore.dataTypes[props.type]
+
+  const selectedItem = ref(0)
+
+
+</script>
+
+<template>
+  <UDashboardPanelContent class="w-full">
+    <a
+        v-for="item in props.rows"
+        class="my-1"
+        @click="router.push(`/standardEntity/${type}/show/${item.id}`)"
+    >
+      <p class="truncate text-left text-primary text-xl">{{dataType.templateColumns.find(i => i.title).key ? item[dataType.templateColumns.find(i => i.title).key] : null}}</p>
+      <p class="text-sm">
+        {{ dataType.numberRangeHolder ? item[dataType.numberRangeHolder] : null}}
+
+        <span v-for="secondInfo in dataType.templateColumns.filter(i => i.secondInfo)">{{(secondInfo.secondInfoKey && item[secondInfo.key]) ? item[secondInfo.key][secondInfo.secondInfoKey] : item[secondInfo.key]}}</span>
+
+      </p>
+    </a>
+  </UDashboardPanelContent>
+
+
+
+
+<!--  <UTable
+      v-if="dataType && columns"
+      :rows="props.rows"
+      :columns="props.columns"
+      class="w-full"
+      :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
+      @select="(i) => router.push(`/standardEntity/${type}/show/${i.id}`) "
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine ${dataType.label} anzuzeigen` }"
+  >
+    <template
+        v-for="column in dataType.templateColumns.filter(i => !i.disabledInTable)"
+        v-slot:[`${column.key}-header`]="{row}">
+      <span class="text-nowrap">{{column.label}}</span>
+    </template>
+    <template #name-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.name}}
+      </span>
+      <span v-else>
+        {{row.name}}
+      </span>
+    </template>
+    <template #fullName-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.fullName}}
+      </span>
+      <span v-else>
+        {{row.fullName}}
+      </span>
+    </template>
+    <template #licensePlate-data="{row}">
+      <span
+          v-if="row.id === props.rows[selectedItem].id"
+          class="text-primary-500 font-bold">{{row.licensePlate}}
+      </span>
+      <span v-else>
+        {{row.licensePlate}}
+      </span>
+    </template>
+    <template
+        v-for="column in dataType.templateColumns.filter(i => i.key !== 'name' && i.key !== 'fullName' && i.key !== 'licensePlate' && !i.disabledInTable)"
+        v-slot:[`${column.key}-data`]="{row}">
+      <component v-if="column.component" :is="column.component" :row="row"></component>
+      <span v-else>{{row[column.key] ? `${row[column.key]} ${column.unit ? column.unit : ''}`: ''}}</span>
+    </template>
+  </UTable>-->
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/layouts/mobile.vue b/layouts/mobile.vue
index 4f966ed..314708f 100644
--- a/layouts/mobile.vue
+++ b/layouts/mobile.vue
@@ -167,12 +167,12 @@ const footerLinks = [/*{
         variant="ghost"
         :color="route.fullPath === '/standardEntity/projects' ? 'primary' : 'gray'"
       />
-      <UButton
+<!--      <UButton
         icon="i-heroicons-clock"
         to="/workingtimes"
         variant="ghost"
         :color="route.fullPath === '/workingtimes' ? 'primary' : 'gray'"
-      />
+      />-->
       <UButton
         icon="i-heroicons-bars-4"
         to="/mobile/menu"
diff --git a/pages/mobile/menu.vue b/pages/mobile/menu.vue
index 1ecc458..ed47a15 100644
--- a/pages/mobile/menu.vue
+++ b/pages/mobile/menu.vue
@@ -10,32 +10,58 @@ const profileStore = useProfileStore()
 
 <template>
   <UDashboardPanelContent>
-
+    <UDivider class="mb-3">Weiteres</UDivider>
+    <UButton
+        class="w-full my-1"
+        to="/times"
+        icon="i-heroicons-clock"
+    >
+      Zeiten
+    </UButton>
     <UButton
         class="w-full my-1"
         to="/standardEntity/absencerequests"
+        icon="i-heroicons-document-text"
     >
       Abwesenheiten
     </UButton>
+
     <UButton
+        class="w-full my-1"
+        to="/workingtimes"
+        icon="i-heroicons-clock"
+    >
+      Anwesenheiten
+    </UButton>
+<!--    <UButton
         class="w-full my-1">
       Kalender
-    </UButton>
+    </UButton>-->
     <UButton
         class="w-full my-1"
       to="/standardEntity/customers"
+        icon="i-heroicons-user-group"
     >
       Kunden
     </UButton>
     <UButton
         class="w-full my-1"
         to="/standardEntity/vendors"
+        icon="i-heroicons-truck"
     >
       Lieferanten
     </UButton>
+    <UButton
+        class="w-full my-1"
+        to="/standardEntity/contacts"
+        icon="i-heroicons-user-group"
+    >
+      Ansprechpartner
+    </UButton>
     <UButton
         class="w-full my-1"
         to="/standardEntity/plants"
+        icon="i-heroicons-clipboard-document"
     >
       Objekte
     </UButton>
diff --git a/pages/times/index.vue b/pages/times/index.vue
index 5e56d29..5fa4b85 100644
--- a/pages/times/index.vue
+++ b/pages/times/index.vue
@@ -2,6 +2,7 @@
 import dayjs from "dayjs";
 import VueDatePicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
+import {setPageLayout} from "#app";
 
 
 definePageMeta({
@@ -32,9 +33,16 @@ const runningTimeInfo = ref({})
 const showConfigTimeModal = ref(false)
 const configTimeMode = ref("create")
 
+const platform = ref("default")
+
 const setup = async () => {
   times.value = await useSupabaseSelect("times","*, profile(*), project(id, name)")
 
+  if(await useCapacitor().getIsPhone()) {
+    platform.value = "mobile"
+    setPageLayout("mobile")
+  }
+
   runningTimeInfo.value = (await supabase
       .from("times")
       .select()
@@ -209,11 +217,23 @@ const setState = async (newState) => {
   await updateTime()
 }
 
+const getSecondInfo = (item) => {
+  let returnArray = []
+
+  if(item.type) returnArray.push(item.type)
+  if(item.project) returnArray.push(item.project.name)
+  if(item.notes) returnArray.push(item.notes)
+
+  return returnArray
+}
+
 </script>
 
 <template>
   <UDashboardNavbar title="Zeiterfassung">
-
+    <template #toggle>
+      <div v-if="platform === 'mobile'"></div>
+    </template>
   </UDashboardNavbar>
   <UDashboardToolbar>
     <template #left>
@@ -230,11 +250,13 @@ const setState = async (newState) => {
         Stop
       </UButton>
       <UButton
+          v-if="platform !== 'mobile'"
           @click="configTimeMode = 'create'; itemInfo = {start: new Date(), end: new Date(), user: user.id}; showConfigTimeModal = true"
       >
         Erstellen
       </UButton>
       <USelectMenu
+          v-if="platform !== 'mobile'"
           :options="profileStore.profiles"
           option-attribute="fullName"
           value-attribute="id"
@@ -412,7 +434,24 @@ const setState = async (newState) => {
     </UCard>
   </UModal>
 
+  <UDashboardPanelContent class="w-full" v-if="platform === 'mobile'">
+    <a
+        v-for="item in filteredRows"
+        class="my-1"
+    >
+      <p class="truncate text-left text-primary text-xl">{{dayjs(item.startDate).format("DD.MM.YYYY HH:mm")}} - {{dayjs(item.endDate).format("HH:mm")}}</p>
+      <p class="text-sm">
+        <span v-for="(i,index) in getSecondInfo(item)">
+          {{i}}{{index < getSecondInfo(item).length - 1 ? " - " : ""}}
+        </span>
+
+      </p>
+    </a>
+  </UDashboardPanelContent>
+
+
   <UTable
+      v-else
       class="mt-3"
       :columns="columns"
       :rows="filteredRows"
diff --git a/stores/data.js b/stores/data.js
index 295f516..9944e9f 100644
--- a/stores/data.js
+++ b/stores/data.js
@@ -1061,6 +1061,8 @@ export const useDataStore = defineStore('data', () => {
                     selectDataType: "customers",
                     selectOptionAttribute: "name",
                     selectSearchAttributes: ['name'],
+                    secondInfo: true,
+                    secondInfoKey: "name",
                 },{
                     key: "plant",
                     label: "Objekt",