From e792ed39c9b800eaeee1e5fd245ce9e6f0ea8347 Mon Sep 17 00:00:00 2001
From: flfeders <f.federspiel@federspiel.tech>
Date: Thu, 21 Dec 2023 16:04:52 +0100
Subject: [PATCH] Changed Tasks List Created Time creation Added VueDatepicker
 Package

---
 spaces/app.vue                |  52 +++++---
 spaces/nuxt.config.ts         |   3 +
 spaces/package.json           |   3 +-
 spaces/pages/login.vue        |   2 +-
 spaces/pages/tasks.vue        | 216 ++++++++++++++--------------------
 spaces/pages/timetracking.vue | 127 ++++++++++++++++----
 6 files changed, 234 insertions(+), 169 deletions(-)

diff --git a/spaces/app.vue b/spaces/app.vue
index 185cbeb..546e862 100644
--- a/spaces/app.vue
+++ b/spaces/app.vue
@@ -57,25 +57,41 @@ const navLinks = [
     ]
   },
   {
-    label: "Aufgaben",
-    to: "/tasks",
-    icon: "i-heroicons-rectangle-stack"
+    label: "Aufträge",
+    icon: "i-heroicons-square-3-stack-3d",
+    children: [
+      {
+        label: "Projekte",
+        to: "/projects",
+        icon: "i-heroicons-clipboard-document-check"
+      },
+      {
+        label: "Jobs",
+        to: "/jobs",
+        icon: "i-heroicons-square-3-stack-3d"
+      },
+      {
+        label: "Verträge",
+        to: "/contracts",
+        icon: "i-heroicons-clipboard-document"
+      },
+    ]
   },
   {
-    label: "Plantafel",
-    to: "/planningBoard",
-    icon: "i-heroicons-calendar-days"
-  },
-
-  {
-    label: "Projekte",
-    to: "/projects",
-    icon: "i-heroicons-clipboard-document-check"
-  },
-  {
-    label: "Jobs",
-    to: "/jobs",
-    icon: "i-heroicons-square-3-stack-3d"
+    label: "Planung",
+    icon: "i-heroicons-square-3-stack-3d",
+    children: [
+      {
+        label: "Aufgaben",
+        to: "/tasks",
+        icon: "i-heroicons-rectangle-stack"
+      },
+      {
+        label: "Plantafel",
+        to: "/planningBoard",
+        icon: "i-heroicons-calendar-days"
+      },
+    ]
   },
   {
     label: "Dokumente",
@@ -219,7 +235,7 @@ const items = [
         />
         <img
             v-else
-            src="/spaces_hell.svg"
+            src="/spaces.svg"
             alt="Logo Dunkel"
         />
       </div>
diff --git a/spaces/nuxt.config.ts b/spaces/nuxt.config.ts
index f2e3bd4..0e43e18 100644
--- a/spaces/nuxt.config.ts
+++ b/spaces/nuxt.config.ts
@@ -7,6 +7,9 @@ export default defineNuxtConfig({
     extends: [
         '@nuxt/ui-pro'
     ],
+    build: {
+        transpile: ['@vuepic/vue-datepicker']
+    },
     modules: [
         '@pinia/nuxt',
         '@nuxt/ui',
diff --git a/spaces/package.json b/spaces/package.json
index f1fb9ef..737354b 100644
--- a/spaces/package.json
+++ b/spaces/package.json
@@ -34,6 +34,7 @@
     "@pinia/nuxt": "^0.5.1",
     "@popperjs/core": "^2.11.8",
     "@vicons/ionicons5": "^0.12.0",
+    "@vuepic/vue-datepicker": "^7.4.0",
     "@zip.js/zip.js": "^2.7.32",
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
@@ -45,6 +46,6 @@
     "pinia": "^2.1.7",
     "socket.io-client": "^4.7.2",
     "uuidv4": "^6.2.13",
-    "v-calendar": "^3.1.2",
+    "v-calendar": "^3.1.2"
   }
 }
diff --git a/spaces/pages/login.vue b/spaces/pages/login.vue
index f81538b..a8d39a8 100644
--- a/spaces/pages/login.vue
+++ b/spaces/pages/login.vue
@@ -23,7 +23,7 @@ const onSubmit = async () => {
     alert(error.toString())
   } else {
     console.log("Login Successful")
-    await fetchData()
+    fetchData()
     router.push("/")
 
 
diff --git a/spaces/pages/tasks.vue b/spaces/pages/tasks.vue
index 54ad196..9e89bbf 100644
--- a/spaces/pages/tasks.vue
+++ b/spaces/pages/tasks.vue
@@ -86,148 +86,126 @@
             />
           </UFormGroup>
 
+          <UFormGroup
+            label="Benutzer ändern:"
+          >
+            <USelectMenu
+                :options="profiles"
+                @change="updateTask"
+                v-model="taskData.user"
+                option-attribute="firstName"
+                value-attribute="id"
+            >
+              <template #label>
+                {{profiles.find(profile => profile.id === taskData.user) ? profiles.find(profile => profile.id === taskData.user).firstName : 'Kein Benutzer ausgewählt'}}
+              </template>
+            </USelectMenu>
+          </UFormGroup>
+
         </template>
       </UCard>
     </UModal>
 
-    <div id="menuBar">
-      <UButton
-          class="mb-3 mr-3"
-          @click="showCreateTask = true"
-      >
-        + Aufgabe
-      </UButton>
-      <!--      <USelectMenu
-                :options="usersForList"
-                v-model="usersSelected"
-                multiple
-                placeholder="Benutzer"
-                class="w-40"
-                v-on:change="filterTasks"
-            >
-              <template #label>
-                <span v-if="usersSelected.length" class="truncate">{{ usersSelected.join(', ') }}</span>
-                <span v-else>Benutzer auswählen</span>
-              </template>
-            </USelectMenu>-->
+    <div class="flex items-center gap-1">
+      <UButton @click="showCreateTask = true">+ Aufgabe</UButton>
+
+      <UInput
+          v-model="searchString"
+          placeholder="Suche..."
+      />
+
+      <UCheckbox
+        label="Erledigte Anzeigen"
+        v-model="showDoneTasks"
+      />
     </div>
 
-    <div v-if="viewport.isLessThan('tablet')" class="scrollList">
-      <a
-        v-for="task in tasks.filter(item => item.categorie != 'Erledigt')"
-      >
-        <UCard class="listItem">
-          <template #header>
-            <UBadge>{{task.categorie}}</UBadge> {{task.name}}
-          </template>
-          {{task.description}}
-
-        </UCard>
-      </a>
-    </div>
-    <div v-else>
-
-      <div id="taskCatList">
-        <div id="catNew">
-          <h3>Offene Aufgaben</h3>
-          <div class="taskScrollList" v-if="tasks.length > 0">
-            <a
-                v-for="taskNew in tasks.filter(task => task.categorie == 'Offen')"
-                @click="inspectTask(taskNew)"
-            >
-              <UCard class="listItem">
-                {{taskNew.name}}
-                <UBadge
-                    v-for="user in taskNew.users"
-                    class="mr-2"
-                >
-                  {{user}}
-                </UBadge>
-              </UCard>
-            </a>
-
-          </div>
+   <UTable
+     :rows="filteredRows"
+     :columns="taskColumns"
+     @select="inspectTask"
+   >
+     <template #created_at-data="{row}">
+       {{ dayjs(row.created_at).format("DD.MM.YY HH:mm") }}
+     </template>
+      <template #user-data="{row}">
+        {{profiles.find(profile => profile.id === row.user ) ? profiles.find(profile => profile.id === row.user ).firstName : row.user}}
+      </template>
+   </UTable>
 
 
-        </div>
-        <div id="catInProgress">
-          <h3>Aufgaben in Bearbeitung</h3>
-          <div class="taskScrollList" v-if="tasks.length > 0">
-            <a
-                v-for="taskNew in tasks.filter(task => task.categorie == 'In Bearbeitung')"
-                @click="inspectTask(taskNew)"
-            >
-              <UCard class="listItem">
-                {{taskNew.name}}
-                <UBadge
-                    v-for="user in taskNew.users"
-                    class="mr-2"
-                >
-                  {{user}}
-                </UBadge>
-              </UCard>
-            </a>
-          </div>
 
-        </div>
-        <div id="catUrgent">
-          <h3>Dringende Aufgaben</h3>
-          <div class="taskScrollList" v-if="tasks.length > 0">
-            <a
-                v-for="taskNew in tasks.filter(task => task.categorie == 'Dringend')"
-                @click="inspectTask(taskNew)"
-            >
-              <UCard class="listItem">
-                {{taskNew.name}}
-                <UBadge
-                    v-for="user in taskNew.users"
-                    class="mr-2"
-                >
-                  {{user}}
-                </UBadge>
-              </UCard>
-            </a>
-          </div>
 
-        </div>
-      </div>
-    </div>
   </UPage>
 </template>
 
 <script setup>
 
+import * as dayjs from "dayjs";
+
 definePageMeta({
   middleware: "auth",
 })
 
-const viewport = useViewport()
-
-watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
-  console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
-})
-
 const toast = useToast()
 const supabase = useSupabaseClient()
-const {tasks} = storeToRefs(useDataStore())
+const {tasks, profiles} = storeToRefs(useDataStore())
 const {fetchTasks} = useDataStore()
 
-let refTasks = ref([])
+const taskColumns = [
+  {
+    key:"created_at",
+    label: "Erstellt am:",
+    sortable: true
+  },
+  {
+    key:"name",
+    label: "Name:",
+    sortable: true
+  },
+  {
+    key:"user",
+    label: "Benutzer:",
+    sortable: true
+  },
+  {
+    key:"description",
+    label: "Beschreibung:",
+    sortable: true
+  },
+  {
+    key:"categorie",
+    label: "Kategorie:",
+    sortable: true
+  }
+]
 
+const showDoneTasks = ref(false)
+const searchString = ref("")
+const filteredRows = computed(() => {
 
-let usersForList = []
-//users.forEach(user => usersForList.push(user.username))
-const usersSelected = ref([])
-usersSelected.value = usersForList
+  let filteredTasks = tasks.value.filter(task =>  !showDoneTasks.value ? task.categorie !== "Erledigt" : task.categorie === "Erledigt")
 
+  if(!searchString.value) {
+    return filteredTasks
+  }
+
+  return filteredTasks.filter(item => {
+    return Object.values(item).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
+})
 
 
 const showCreateTask = ref(false)
 const taskCategories = ["Offen","In Bearbeitung", "Dringend","Erledigt"]
+
 const createTaskData = ref({
   name: "",
   description: "",
-  categorie: "Offen"
+  categorie: "Offen",
+  user: ""
   /*users: ["86e67794-0ea8-41b0-985a-1072e84f56e9"]*/
 })
 
@@ -269,31 +247,11 @@ const updateTask = async () => {
 
 }
 
-
 const inspectTask = (task) => {
   taskData.value = task
   showTaskModal.value = true
 }
 
-const filterTasks = () => {
-  refTasks.value = tasks.filter(task => usersSelected.value.some(user => (task.users ? (task.users.includes(user)) : true )))
-
-}
-
-const finishTask = async () => {
-  console.log("Start")
-  const {error} = await supabase
-      .from("tasks")
-      .update({categorie: "Erledigt"})
-      .eq('id',taskData.value.id)
-  //console.log(data)
-  console.log(error)
-  showTaskModal.value = false
-  fetchTasks()
-}
-
-//filterTasks()
-
 </script>
 
 <style scoped>
diff --git a/spaces/pages/timetracking.vue b/spaces/pages/timetracking.vue
index 751739c..3f900ce 100644
--- a/spaces/pages/timetracking.vue
+++ b/spaces/pages/timetracking.vue
@@ -1,5 +1,8 @@
 <script setup>
 import * as dayjs from "dayjs";
+import VueDatePicker from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+
 
 definePageMeta({
   middleware: "auth"
@@ -21,6 +24,15 @@ const timeInfo = ref({
   type: null
 })
 
+const createTimeInfo = ref({
+  user: "",
+  start: new Date(),
+  end: "",
+  notes: null,
+  projectId: null,
+  type: null
+})
+
 
 const columns = [
   {
@@ -80,9 +92,6 @@ const startTime = async () => {
     runningTimeInfo.value = times.value.find(time => time.user == user.value.id && !time.end)
   }
 
-  console.log(data)
-  console.log(error)
-
 }
 
 const stopStartedTime = async () => {
@@ -115,6 +124,30 @@ if(times.value.find(time => time.user == user.value.id && !time.end)) {
   runningTimeInfo.value = times.value.find(time => time.user == user.value.id && !time.end)
 }
 
+
+const createTime = async () => {
+  const {data,error} = await supabase
+      .from("times")
+      .insert([createTimeInfo.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else if(data) {
+    createTimeInfo.value = {}
+    toast.add({title: "Zeit erfolgreich erstellt"})
+    showAddTimeModal.value = false
+    await fetchTimes()
+
+  }
+}
+
+const format = (date) => {
+  let dateFormat = dayjs(date).format("DD.MM.YY HH:mm")
+
+  return `${dateFormat}`;
+}
+
 const selectStartedTime = () => {
   runningTimeInfo.value = times.value.find(time => time.user == user.value.id && !time.end)
 }
@@ -166,44 +199,95 @@ const selectStartedTime = () => {
           <UFormGroup
             label="Start:"
           >
-
+            <VueDatePicker
+                v-model="createTimeInfo.start"
+                locale="de"
+                cancel-text="Abbrechen"
+                select-text="Auswählen"
+                now-button-label="Jetzt"
+                text-input="MM.dd.yyyy HH:mm"
+                :dark="useColorMode().value !== 'light'"
+                :format="format"
+                :preview-format="format"
+            />
           </UFormGroup>
           <UFormGroup
             label="Ende:"
           >
-
+            <VueDatePicker
+                v-model="createTimeInfo.end"
+                locale="de"
+                cancel-text="Abbrechen"
+                select-text="Auswählen"
+                now-button-label="Jetzt"
+                text-input="MM.dd.yyyy HH:mm"
+                :dark="useColorMode().value !== 'light'"
+                :format="format"
+                :preview-format="format"
+            />
           </UFormGroup>
-          <UFormGroup
+<!--          <UFormGroup
             label="Dauer:"
           >
             <UInput
 
             />
-          </UFormGroup>
+          </UFormGroup>-->
           <UFormGroup
             label="Benutzer:"
           >
-            <USelectMenu/>
+            <USelectMenu
+              :options="profiles"
+              v-model="createTimeInfo.user"
+              option-attribute="firstName"
+              value-attribute="id"
+            >
+              <template #label>
+                {{profiles.find(profile => profile.id === createTimeInfo.user) ? profiles.find(profile => profile.id === createTimeInfo.user).firstName : "Benutzer auswählen"}}
+              </template>
+            </USelectMenu>
           </UFormGroup>
           <UFormGroup
             label="Projekt:"
           >
-            <USelectMenu/>
+            <USelectMenu
+              :options="projects"
+              v-model="createTimeInfo.projectId"
+              option-attribute="name"
+              value-attribute="id"
+            >
+              <template #label>
+                {{projects.find(project => project.id === createTimeInfo.projectId) ? projects.find(project => project.id === createTimeInfo.projectId).name : "Projekt auswählen"}}
+              </template>
+            </USelectMenu>
           </UFormGroup>
           <UFormGroup
             label="Typ:"
           >
-            <USelectMenu/>
+            <USelectMenu
+                v-model="runningTimeInfo.type"
+                :options="timeTypes"
+                option-attribute="label"
+                value-attribute="label"
+            >
+              <template #label>
+                {{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
+              </template>
+            </USelectMenu>
           </UFormGroup>
           <UFormGroup
             label="Notizen:"
           >
-            <UTextarea/>
+            <UTextarea
+              v-model="createTimeInfo.notes"
+            />
           </UFormGroup>
 
 
           <template #footer>
-            <UButton>
+            <UButton
+              @click="createTime"
+            >
               Erstellen
             </UButton>
           </template>
@@ -212,15 +296,12 @@ const selectStartedTime = () => {
 
       <div>
 
-        <div class="mt-3">
-          Aktuelle gestarteter Eintrag:
-          {{runningTimeInfo.id ? runningTimeInfo : "Keine Zeit gestartet"}}
 
 
+        <div v-if="runningTimeInfo.id" class="mt-3">
 
-        </div>
+          Start: {{dayjs(runningTimeInfo.start).format("DD.MM.YY HH:mm")}}
 
-        <div v-if="runningTimeInfo.id">
           <UFormGroup
               label="Notizen:"
           >
@@ -239,8 +320,7 @@ const selectStartedTime = () => {
                 v-model="runningTimeInfo.projectId"
             >
               <template #label>
-                <span v-if="runningTimeInfo.projectId">{{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "" }}</span>
-                <span v-else>Projekt auswählen</span>
+                {{ projects.find(project => project.id === runningTimeInfo.projectId) ? projects.find(project => project.id === runningTimeInfo.projectId).name : "Projekt auswählen" }}
               </template>
             </USelectMenu>
           </UFormGroup>
@@ -253,7 +333,11 @@ const selectStartedTime = () => {
                 :options="timeTypes"
                 option-attribute="label"
                 value-attribute="label"
-            />
+            >
+              <template #label>
+                {{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
+              </template>
+            </USelectMenu>
           </UFormGroup>
         </div>
 
@@ -281,6 +365,9 @@ const selectStartedTime = () => {
         <template #end-data="{row}">
           {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
         </template>
+        <template #projectId-data="{row}">
+          {{projects.find(project => project.id === row.projectId) ? projects.find(project => project.id === row.projectId).name : ""}}
+        </template>
       </UTable>
 
     </div>