Added Frontend

frontend/components/EntityShowSubTimes.vue

@@ -0,0 +1,117 @@
+<script setup>
+import dayjs from "dayjs";
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const profileStore = useProfileStore()
+
+
+const props = defineProps({
+  queryStringData: {
+    type: String
+  },
+  item: {
+    type: Object,
+    required: true
+  },
+  topLevelType: {
+    type: String,
+    required: true
+  },
+  platform: {
+    type: String,
+    required: true
+  }
+})
+
+
+const setup = async () => {
+
+}
+
+setup()
+
+const columns = [
+  {
+    key:"state",
+    label: "Status",
+  },
+  {
+    key: "user",
+    label: "Benutzer",
+  },
+  {
+    key:"startDate",
+    label:"Start",
+  },
+  {
+    key: "endDate",
+    label: "Ende",
+  },
+  {
+    key: "duration",
+    label: "Dauer",
+  },
+  {
+    key:"type",
+    label:"Typ",
+  },
+  {
+    key: "project",
+    label: "Projekt",
+  },
+  {
+    key: "notes",
+    label: "Notizen",
+  }
+]
+
+</script>
+
+<template>
+  <UCard class="mt-5">
+    <UTable
+        class="mt-3"
+        :columns="columns"
+        :rows="props.item.times"
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+    >
+      <template #state-data="{row}">
+                <span
+                    v-if="row.state === 'Entwurf'"
+                    class="text-rose-500"
+                >{{row.state}}</span>
+        <span
+            v-if="row.state === 'Eingereicht'"
+            class="text-cyan-500"
+        >{{row.state}}</span>
+        <span
+            v-if="row.state === 'Bestätigt'"
+            class="text-primary-500"
+        >{{row.state}}</span>
+      </template>
+      <template #user-data="{row}">
+        {{row.profile ? row.profile.fullName : "" }}
+      </template>
+
+      <template #startDate-data="{row}">
+        {{dayjs(row.startDate).format("DD.MM.YY HH:mm")}}
+      </template>
+      <template #endDate-data="{row}">
+        {{dayjs(row.endDate).format("DD.MM.YY HH:mm")}}
+      </template>
+      <template #duration-data="{row}">
+        {{Math.floor(dayjs(row.endDate).diff(row.startDate, "minutes")/60)}}:{{String(dayjs(row.endDate).diff(row.startDate, "minutes") % 60).padStart(2,"0")}} h
+
+      </template>
+      <template #project-data="{row}">
+        {{row.project ? row.project.name : "" }}
+      </template>
+    </UTable>
+  </UCard>
+
+</template>
+
+<style scoped>
+
+</style>