Rebuild Times in Projects

Added Icons
Rebuild Time Duration

spaces/pages/projects/[id].vue

@@ -6,12 +6,11 @@ definePageMeta({
 const supabase = useSupabaseClient()
 const route = useRoute()
 
-const {getProjectById, getFormSubmitsWithLabelProp} = useDataStore()
-const {forms, formSubmits} = storeToRefs(useDataStore())
+const {getProjectById, getFormSubmitsWithLabelProp, getTimesByProjectId} = useDataStore()
+const {forms, formSubmits, times} = storeToRefs(useDataStore())
 
 const currentProject = getProjectById(Number(route.params.id))
 
-
 const formSubmissionsComposed = getFormSubmitsWithLabelProp
 const formModalOpen = ref(false)
 const newFormSubmissionData = ref({
@@ -20,6 +19,28 @@ const newFormSubmissionData = ref({
   submitted: false
 })
 
+const timeTableRows = [
+  {
+    key:"user",
+    label: "Benutzer"
+  },{
+    key:"start",
+    label: "Start"
+  },{
+    key:"end",
+    label:"Ende"
+  },{
+    key:"duration",
+    label: "Dauer"
+  },{
+    key: "type",
+    label: "Typ"
+  },{
+    key:"notes",
+    label: "Notizen"
+  },
+]
+
 const addNewFormSubmission = async () => {
   //Add Form Submission
   const {data:insertData,error:insertError} = await supabase
@@ -227,7 +248,11 @@ const phaseInfo = ref({
           <client-only><editor-js v-model="newProjectDescription" /></client-only>
         </div>
         <div v-else-if="item.key === 'timetracking'" class="space-y-3">
-          <p>Hier wird aktuell noch gearbeitet</p>
+          Projekt Zeit: {{currentProject.projectHours.toString().replace(".",":")}} Stunden
+          <UTable
+            :rows="getTimesByProjectId(currentProject.id)"
+            :columns="timeTableRows"
+          />
         </div>
         <div v-else-if="item.key === 'material'" class="space-y-3">
           <p>Hier wird aktuell noch gearbeitet</p>

spaces/pages/projects/index.vue

@@ -1,7 +1,16 @@
 <template>
   <div id="main">
-    <div id="left">
-<!-- TODO: Projekt Auflistung überarbeiten, Rechte Seite wird nicht genutzt      -->
+
+    <UTable
+        :rows="projects"
+        :columns="projectColumns"
+        @select="selectProject"
+
+    />
+
+
+
+<!--    <div id="left">
       <UButton @click="showCreateProject = true">+ Projekt</UButton>
       <UModal v-model="showCreateProject">
         <UCard>
@@ -46,11 +55,18 @@
         </UCard>
       </UModal>
 
-      <router-link v-for="item in projects" :to="`/projects/${item.id}`">
+      <UTable
+          :rows="projects"
+          @select="selectCustomer"
+
+      />
+
+
+      &lt;!&ndash;      <router-link v-for="item in projects" :to="`/projects/${item.id}`">
         <UCard class="listItem">
           <UBadge>{{item.id}}</UBadge> {{item.name}}
         </UCard>
-      </router-link>
+      </router-link>&ndash;&gt;
 
 
     </div>
@@ -67,15 +83,15 @@
         Notizen: <br>
         {{selectedItem.notes}}
 
-<!--        Lieferantenrechnungen: <br>
+&lt;!&ndash;        Lieferantenrechnungen: <br>
         <UTable :rows="dataStore.getVendorInvoicesByProjectId(selectedItem.id)"></UTable>
-        {{dataStore.getVendorInvoicesByProjectId(selectedItem.id)}}-->
+        {{dataStore.getVendorInvoicesByProjectId(selectedItem.id)}}&ndash;&gt;
 
 
 
 
       </UCard>
-    </div>
+    </div>-->
 
   </div>
 
@@ -88,10 +104,33 @@ definePageMeta({
 })
 
 const supabase = useSupabaseClient()
-
+const router = useRouter()
 const {projects,customers} = storeToRefs(useDataStore())
 const {fetchProjects} = useDataStore()
 
+const projectColumns = [
+  {
+    key: 'name',
+    label: "Name.",
+    sortable: true
+  },
+  {
+    key: "customer",
+    label: "Kundennummer",
+    sortable: true
+  },
+  {
+    key: "notes",
+    label: "Notizen",
+    sortable: true
+  }
+]
+
+const selectProject = (project) => {
+  router.push(`/projects/${project.id} `)
+}
+
+
 //const projects = (await supabase.from("projects").select()).data
 //const customers = (await supabase.from("customers").select()).data
 
@@ -125,7 +164,7 @@ const createProject = async () => {
 </script>
 
 <style scoped>
-#main {
+/*#main {
   display: flex;
   flex-direction: row;
 }
@@ -136,5 +175,5 @@ const createProject = async () => {
 #right {
   width: 60vw;
   padding-left: 3vw;
-}
+}*/
 </style>