Many Changes

Introduced Plants Some Polishing Some Resources got Query Params Extended GlobalSearch.vue Removed Jobs
2024-01-05 18:06:09 +01:00
parent 991cac18f2
commit 61793838bb
19 changed files with 1166 additions and 542 deletions
--- a/spaces/pages/contacts/[mode]/[[id]].vue
+++ b/spaces/pages/contacts/[mode]/[[id]].vue
@@ -30,7 +30,13 @@ const setupPage = () => {

  if(mode.value === "edit") itemInfo.value = currentContact

+  if(mode.value === "create") {
+    let query = route.query

+    if(query.customer) itemInfo.value.customer = Number(query.customer)
+    if(query.vendor) itemInfo.value.vendor = Number(query.vendor)
+
+  }

 }

--- a/spaces/pages/customers/[mode]/[[id]].vue
+++ b/spaces/pages/customers/[mode]/[[id]].vue
@@ -112,6 +112,20 @@ setupPage()
      {{currentCustomer.name}}
    </template>

+    <InputGroup>
+      <UButton
+        @click="router.push(`/projects/create?customer=${currentCustomer.id}`)"
+      >
+        + Projekt
+      </UButton>
+      <UButton
+        @click="router.push(`/contacts/create?customer=${currentCustomer.id}`)"
+      >
+        + Ansprechpartner
+      </UButton>
+    </InputGroup>
+
+
    Kundennummer: {{currentCustomer.customerNumber}} <br>

    <UDivider
--- a/spaces/pages/employees/timetracking.vue
+++ b/spaces/pages/employees/timetracking.vue
@@ -70,10 +70,6 @@ const columns = [
    key: "projectId",
    label: "Projekt"
  },
-  {
-    key: "job",
-    label: "Job"
-  },
  {
    key: "notes",
    label: "Notizen"
@@ -211,20 +207,6 @@ const format = (date) => {
      </USelectMenu>
    </UFormGroup>

-    <UFormGroup
-        label="Job:"
-    >
-      <USelectMenu
-          :options="dataStore.jobs"
-          option-attribute="title"
-          value-attribute="id"
-          v-model="runningTimeInfo.job"
-      >
-        <template #label>
-          {{ dataStore.jobs.find(job => job.id === runningTimeInfo.job) ? dataStore.jobs.find(job => job.id === runningTimeInfo.job).title : "Job auswählen" }}
-        </template>
-      </USelectMenu>
-    </UFormGroup>

    <UFormGroup
        label="Kategorie:"
@@ -315,20 +297,6 @@ const format = (date) => {
          </template>
        </USelectMenu>
      </UFormGroup>
-      <UFormGroup
-          label="Job:"
-      >
-        <USelectMenu
-            :options="dataStore.jobs"
-            option-attribute="title"
-            value-attribute="id"
-            v-model="createTimeInfo.job"
-        >
-          <template #label>
-            {{ dataStore.jobs.find(job => job.id === runningTimeInfo.job) ? dataStore.jobs.find(job => job.id === runningTimeInfo.job).title : "Job auswählen" }}
-          </template>
-        </USelectMenu>
-      </UFormGroup>
      <UFormGroup
          label="Typ:"
      >
@@ -380,12 +348,12 @@ const format = (date) => {
    <template #end-data="{row}">
      {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
    </template>
+    <template #duration-data="{row}">
+      {{`${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h`}}
+    </template>
    <template #projectId-data="{row}">
      {{dataStore.projects.find(project => project.id === row.projectId) ? dataStore.projects.find(project => project.id === row.projectId).name : ""}}
    </template>
-    <template #job-data="{row}">
-      {{dataStore.jobs.find(job => job.id === row.job) ? dataStore.jobs.find(job => job.id === row.job).title : ""}}
-    </template>
  </UTable>
 </template>

--- a/spaces/pages/plants/[mode]/[[id]].vue
+++ b/spaces/pages/plants/[mode]/[[id]].vue
@@ -0,0 +1,185 @@
+<script setup>
+definePageMeta({
+  middleware: "auth"
+})
+
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+let currentItem = null
+
+//Working
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+  name: "",
+  customer: 0,
+
+})
+
+//Functions
+const setupPage = () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    currentItem = dataStore.getPlantById(Number(useRoute().params.id))
+  }
+
+  if(mode.value === "edit") itemInfo.value = currentItem
+
+
+
+}
+
+const createItem = async () => {
+  const {data,error} = await supabase
+      .from("plants")
+      .insert([itemInfo.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    itemInfo.value = {
+      id: 0,
+      title: "",
+    }
+    toast.add({title: "Anlage erfolgreich erstellt"})
+    await dataStore.fetchPlants()
+    router.push(`/plants/show/${data[0].id}`)
+    setupPage()
+  }
+}
+
+const editItem = async () => {
+  router.push(`/plants/edit/${currentItem.id}`)
+  setupPage()
+}
+
+const cancelEditorCreate = () => {
+  mode.value = "show"
+  itemInfo.value = {
+    id: 0,
+    infoData: {}
+  }
+}
+
+const updateItem = async () => {
+  const {error} = await supabase
+      .from("plants")
+      .update(itemInfo.value)
+      .eq('id',itemInfo.value.id)
+
+  if(error) {
+    console.log(error)
+  }
+
+
+  router.push(`/plants/show/${currentItem.id}`)
+  toast.add({title: "Anlage erfolgreich gespeichert"})
+  dataStore.fetchPlants()
+}
+
+
+
+setupPage()
+</script>
+
+<template>
+  <UCard v-if="currentItem && mode == 'show'" class="h-full">
+    <template #header>
+      {{currentItem.name}}
+    </template>
+
+    <InputGroup>
+      <UButton
+        @click="router.push(`/projects/create?plant=${currentItem.id}`)"
+      >
+        + Projekt
+      </UButton>
+    </InputGroup>
+
+    {{currentItem}}
+
+    <template #footer>
+      <UButton
+          v-if="mode == 'show' && currentItem.id"
+          @click="editItem"
+      >
+        Bearbeiten
+      </UButton>
+      <UButton
+          color="red"
+          class="ml-2"
+          disabled
+      >
+        Archivieren
+      </UButton>
+      <!-- TODO: Kunde archivieren        -->
+    </template>
+
+
+
+  </UCard>
+  <UCard v-else-if="mode === 'edit' || mode === 'create'" class="h-full">
+    <template #header v-if="mode === 'edit'">
+      {{itemInfo.name}}
+    </template>
+
+    <UFormGroup
+        label="Name:"
+    >
+      <UInput
+          v-model="itemInfo.name"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Kundennummer:"
+    >
+      <USelectMenu
+          v-model="itemInfo.customer"
+          :options="dataStore.customers"
+          option-attribute="name"
+          value-attribute="id"
+          searchable
+          :search-attributes="['name']"
+      >
+        <template #label>
+          {{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+
+
+
+    <template #footer>
+      <UButton
+          v-if="mode == 'edit'"
+          @click="updateItem"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode == 'create'"
+          @click="createItem"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+      >
+        Abbrechen
+      </UButton>
+    </template>
+
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>
--- a/spaces/pages/plants/index.vue
+++ b/spaces/pages/plants/index.vue
@@ -1,12 +1,12 @@
 <template>
  <div id="main">

-    <UButton @click="router.push(`/jobs/create/`)">+ Job</UButton>
+    <UButton @click="router.push(`/plants/create/`)">+ Anlage</UButton>

    <UTable
-        :rows="dataStore.jobs"
+        :rows="dataStore.plants"
        :columns="columns"
-        @select="selectJob"
+        @select="selectItem"
        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
    >
      <template #customer-data="{row}">
@@ -29,12 +29,8 @@ const mode = ref("show")

 const columns = [
  {
-    key: "title",
-    label: "Titel",
-    sortable: true
-  },{
-    key: "state",
-    label: "Status",
+    key: "name",
+    label: "Name",
    sortable: true
  },{
    key: "customer",
@@ -44,9 +40,8 @@ const columns = [
 ]


-const selectJob = (job) => {
-  console.log(job)
-  router.push(`/jobs/show/${job.id} `)
+const selectItem = (item) => {
+  router.push(`/plants/show/${item.id} `)
 }
 </script>

--- a/spaces/pages/projects/[mode]/[[id]].vue
+++ b/spaces/pages/projects/[mode]/[[id]].vue
@@ -0,0 +1,528 @@
+<script setup>
+import * as dayjs from "dayjs";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const dataStore = useDataStore()
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+let currentItem = ref(null)
+
+const tabItems = [
+  /*{
+    key: "phases",
+    label: "Phasen"
+  },*/{
+    key: "tasks",
+    label: "Aufgaben"
+  },/*{
+    key: "forms",
+    label: "Formulare"
+  },*/{
+    key: "documents",
+    label: "Dokumente"
+  },{
+    key: "timetracking",
+    label: "Zeiterfassung"
+  }/*,{
+    key: "material",
+    label: "Material"
+  }*/
+]
+
+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 taskColumns = [
+  {
+    key: "name",
+    label: "Name"
+  },{
+    key: "description",
+    label: "Beschreibung"
+  },{
+    key: "categorie",
+    label: "Kategorie"
+  }, {
+    key: "user",
+    label: "Benutzer"
+  }
+]
+
+
+
+//Working
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+  name: "",
+  customer: 0,
+
+})
+
+const uploadModalOpen = ref(false)
+const fileUploadFormData = ref({
+  tags: ["Dokument"],
+  folder: "Projekte",
+  usedInResource: {
+    type: "Projekt",
+  }
+})
+const tags = dataStore.getDocumentTags
+
+
+//Functions
+const setupPage = () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    currentItem.value = dataStore.getProjectById(Number(useRoute().params.id))
+  }
+
+  if(mode.value === "edit") itemInfo.value = currentItem.value
+
+  if(mode.value === "create") {
+    let query = route.query
+
+    if(query.customer) itemInfo.value.customer = Number(query.customer)
+
+    if(query.plant) {
+      itemInfo.value.plant = Number(query.plant)
+      itemInfo.value.customer = dataStore.getPlantById(itemInfo.value.plant).customer
+    }
+  }
+
+
+}
+
+const createItem = async () => {
+  const {data,error} = await supabase
+      .from("projects")
+      .insert([itemInfo.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    itemInfo.value = {
+      id: 0,
+      title: "",
+    }
+    toast.add({title: "Projekt erfolgreich erstellt"})
+    await dataStore.fetchProjects()
+    router.push(`/projects/show/${data[0].id}`)
+    setupPage()
+  }
+}
+
+const editItem = async () => {
+  router.push(`/projects/edit/${currentItem.value.id}`)
+  setupPage()
+}
+
+const cancelEditorCreate = () => {
+  if(currentItem.value) {
+    router.push(`/projects/show/${currentItem.value.id}`)
+  } else {
+    router.push(`/projects/`)
+  }
+}
+
+const updateItem = async () => {
+  const {error} = await supabase
+      .from("projects")
+      .update(itemInfo.value)
+      .eq('id',itemInfo.value.id)
+
+  if(error) {
+    console.log(error)
+  }
+
+
+  router.push(`/projects/show/${currentItem.value.id}`)
+  toast.add({title: "Projekt erfolgreich gespeichert"})
+  dataStore.fetchProjects()
+}
+
+const uploadFile = async () => {
+  const file = document.getElementById("fileUploadInput").files[0]
+
+  const {data,error} = await supabase
+      .storage
+      .from("documents")
+      .upload(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${currentProject.id}/${file.name}`,file)
+
+  console.log(data)
+  const returnPath = data.path
+
+  if(error) {
+
+  } else {
+    console.log(returnPath)
+    const files = (await supabase.storage.from('documents').list(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${currentProject.id}/`, {limit: 100, offset: 0, sortBy: { column: 'name', order: 'asc' }})).data
+    console.log(files)
+    const fileId = files.find(temp => returnPath.includes(temp.name)).id
+
+    fileUploadFormData.value.object = fileId
+    fileUploadFormData.value.path = returnPath
+    fileUploadFormData.value.usedInResource.id = currentProject.id
+    console.log(fileUploadFormData.value)
+
+    const {data,error} = await supabase
+        .from("documents")
+        .insert([fileUploadFormData.value])
+        .select()
+    console.log(data)
+    console.log(error)
+  }
+
+  uploadModalOpen.value = false;
+}
+
+
+const projectHours = () => {
+  let hours = 0
+  dataStore.getTimesByProjectId(currentItem.value.id).forEach(item => {
+    hours += Number(dayjs(item.end).diff(item.start,'hour',true).toFixed(2))
+  })
+
+  return hours
+}
+
+
+setupPage()
+</script>
+
+<template>
+  <UCard v-if="currentItem && mode == 'show'">
+    <template #header>
+      {{currentItem.name}}
+    </template>
+
+    <UTabs :items="tabItems" class="w-full">
+      <template #item="{ item }">
+        <!--
+                  <div v-if="item.key === 'phases'" class="space-y-3">
+                    <p>Hier wird aktuell noch gearbeitet</p>
+                    &lt;!&ndash;          <div id="phaseList">
+                      <a
+                          v-for="phase in []"
+                          @click="selectedPhase = phase"
+                      >
+                        <div
+                            class="phaseContainer"
+                        >
+                          <span>{{phase.name}} - {{phase.position}}</span>
+                        </div>
+
+                        <a class="plusIcon" @click="addPhase(phase)">
+
+                          <UDivider icon="i-heroicons-plus-circle"/>
+                        </a>
+                      </a>
+                    </div>&ndash;&gt;
+
+                  </div>
+        -->
+        <div v-if="item.key === 'tasks'" class="space-y-3">
+          <InputGroup>
+            <UButton
+              @click="router.push(`/tasks/create?project=${currentItem.id}`)"
+            >
+              + Aufgabe
+            </UButton>
+          </InputGroup>
+
+          <UTable
+              :rows="dataStore.getTasksByProjectId(currentItem.id)"
+              :columns="taskColumns"
+              @select="(row) => {
+              router.push(`/tasks/show/${row.id}`)
+            }"
+          >
+            <template #user-data="{row}">
+              {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
+            </template>
+          </UTable>
+
+        </div>
+
+        <div v-else-if="item.key === 'forms'" class="space-y-3">
+          <UButton
+              @click="formModalOpen = true"
+          >
+            + Formular
+          </UButton>
+          <UModal
+              v-model="formModalOpen"
+          >
+            <UCard>
+              <template #header>
+                Formular hinzufügen
+              </template>
+              <UFormGroup>
+                <USelectMenu
+                    :options="forms"
+                    option-attribute="name"
+                    value-attribute="id"
+                    v-model="newFormSubmissionData.formType"
+                />
+              </UFormGroup>
+              <template #footer>
+                <UButton
+                    @click="addNewFormSubmission"
+                >
+                  Hinzufügen
+                </UButton>
+              </template>
+            </UCard>
+          </UModal>
+
+
+          <UAccordion :items="formSubmissionsComposed">
+            <template #item="{item}">
+
+              <p class="my-3">Formular Link: <a :href="'https://app.spaces.software/formSubmissions/' + item.id">{{'https://app.spaces.software/formSubmissions/' + item.id}}</a></p>
+
+
+              <div v-if="Object.keys(item.values).length == 0">
+                <p>Es wurden noch keine Daten über das Formular abgegeben</p>
+              </div>
+
+              <table v-else>
+                <tr v-for="key in Object.keys(item.values)">
+                  <td>{{key}}</td>
+                  <td>{{ item.values[key] }}</td>
+                </tr>
+              </table>
+
+            </template>
+          </UAccordion>
+        </div>
+        <div v-else-if="item.key === 'documents'" class="space-y-3">
+          <UButton
+              @click="uploadModalOpen = true"
+          >
+            Hochladen
+          </UButton>
+          <UModal
+              v-model="uploadModalOpen"
+          >
+            <UCard class="p-4">
+
+              <template #header>
+                Datei hochladen
+              </template>
+
+              <UFormGroup
+                  label="Datei:"
+              >
+                <UInput
+                    type="file"
+                    id="fileUploadInput"
+                />
+              </UFormGroup>
+              <!--          <UFormGroup
+                          label="Name:"
+                          class="mt-3"
+                        >
+                          <UInput
+                              v-model="fileUploadFormData.name"
+                          />
+                        </UFormGroup>-->
+              <UFormGroup
+                  label="Tags:"
+                  class="mt-3"
+              >
+                <USelectMenu
+                    multiple
+                    searchable
+                    searchable-placeholder="Suchen..."
+                    :options="tags"
+                    v-model="fileUploadFormData.tags"
+                />
+              </UFormGroup>
+              <!--<UFormGroup
+                  label="Ordner:"
+                  class="mt-3"
+              >
+                <USelectMenu
+                    :options="folders"
+                    v-model="fileUploadFormData.folder"
+                    value-attribute="label"
+
+                />
+              </UFormGroup>-->
+
+              <template #footer>
+                <UButton
+                    class="mt-3"
+                    @click="uploadFile"
+                >Hochladen</UButton>
+              </template>
+
+
+            </UCard>
+
+          </UModal>
+
+
+          <div class="documentList">
+            <DocumentDisplay
+                v-for="document in dataStore.getDocumentsByProjectId(currentItem.id)"
+                :document="document"
+            />
+          </div>
+        </div>
+
+        <div v-else-if="item.key === 'timetracking'" class="space-y-3">
+          Projekt Zeit: {{String(projectHours()).replace(".",",")}} Stunden
+          <UTable
+              :rows="dataStore.getTimesByProjectId(currentItem.id)"
+              :columns="timeTableRows"
+              :empty-state="{ icon: 'i-heroicons-clock', label: 'Noch keine Zeiten in diesem Projekt' }"
+          >
+            <template #user-data="{row}">
+              {{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
+            </template>
+            <template #duration-data="{row}">
+              {{(row.start && row.end) ? `${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h` : ""}}
+            </template>
+            <template #start-data="{row}">
+              {{dayjs(row.start).format("DD.MM.YY HH:mm")}}
+            </template>
+            <template #end-data="{row}">
+              {{dayjs(row.end).format("DD.MM.YY HH:mm")}}
+            </template>
+
+          </UTable>
+        </div>
+        <!--
+                  <div v-else-if="item.key === 'material'" class="space-y-3">
+                    <p>Hier wird aktuell noch gearbeitet</p>
+                  </div>
+        -->
+      </template>
+    </UTabs>
+
+
+
+
+    <template #footer>
+      <UButton
+          v-if="mode == 'show' && currentItem.id"
+          @click="editItem"
+      >
+        Bearbeiten
+      </UButton>
+    </template>
+
+
+
+  </UCard>
+  <UCard v-else-if="mode === 'edit' || mode === 'create'" >
+    <template #header v-if="mode === 'edit'">
+      {{itemInfo.name}}
+    </template>
+
+    <UFormGroup
+        label="Name:"
+    >
+      <UInput
+          v-model="itemInfo.name"
+      />
+    </UFormGroup>
+
+    <UFormGroup
+        label="Kundennummer:"
+    >
+      <USelectMenu
+          v-model="itemInfo.customer"
+          :options="dataStore.customers"
+          option-attribute="name"
+          value-attribute="id"
+          searchable
+          :search-attributes="['name']"
+      >
+        <template #label>
+          {{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kunde auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+
+    <UFormGroup
+        label="Anlage:"
+    >
+      <USelectMenu
+          v-model="itemInfo.plant"
+          :options="dataStore.plants"
+          option-attribute="name"
+          value-attribute="id"
+          searchable
+          :search-attributes="['name']"
+      >
+        <template #label>
+          {{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Anlage auswählen"}}
+        </template>
+      </USelectMenu>
+    </UFormGroup>
+
+    <UFormGroup
+      label="Notizen:"
+    >
+      <UTextarea
+        v-model="itemInfo.notes"
+      />
+    </UFormGroup>
+
+    <template #footer>
+      <UButton
+          v-if="mode == 'edit'"
+          @click="updateItem"
+      >
+        Speichern
+      </UButton>
+      <UButton
+          v-else-if="mode == 'create'"
+          @click="createItem"
+      >
+        Erstellen
+      </UButton>
+      <UButton
+          @click="cancelEditorCreate"
+          color="red"
+          class="ml-2"
+      >
+        Abbrechen
+      </UButton>
+    </template>
+
+  </UCard>
+</template>
+
+<style scoped>
+
+</style>
--- a/spaces/pages/projects/[mode]/deprecated.vue
+++ b/spaces/pages/projects/[mode]/deprecated.vue
--- a/spaces/pages/projects/index.vue
+++ b/spaces/pages/projects/index.vue
@@ -1,63 +1,28 @@
 <template>
-  <div id="main">
-    <UButton @click="showCreateProject = true">+ Projekt</UButton>
-    <UModal v-model="showCreateProject">
-      <UCard>
-        <template #header>
-          Projekt erstellen
-        </template>
+  <InputGroup>
+    <UButton @click="router.push(`/projects/create/`)">+ Projekt</UButton>

-        <UFormGroup
-            label="Name:"
-        >
-          <UInput
-              v-model="createProjectData.name"
-          />
-        </UFormGroup>
-        <UFormGroup
-            label="Kunde:"
-        >
-          <USelectMenu
-              v-model="createProjectData.customer"
-              :options="dataStore.customers"
-              option-attribute="name"
-              value-attribute="id"
-              searchable
-              :search-attributes="['name']"
-          />
-        </UFormGroup>
-        <UFormGroup
-            label="Notizen:"
-        >
-          <UTextarea
-              v-model="createProjectData.notes"
-          />
-        </UFormGroup>
-
-        <template #footer>
-          <UButton
-              @click="createProject"
-          >
-            Erstellen
-          </UButton>
-        </template>
-      </UCard>
-    </UModal>
-    <!-- TODO: USelect im Modal anpassen -->
-    <UTable
-        :rows="dataStore.projects"
-        :columns="projectColumns"
-        @select="selectProject"
-
-    >
-      <template #customer-data="{row}">
-        {{dataStore.customers.find(customer => customer.id == row.customer ) ? dataStore.customers.find(customer => customer.id == row.customer ).name : row.id}}
-      </template>
+    <UInput
+        v-model="searchString"
+        placeholder="Suche..."
+    />
+  </InputGroup>


-    </UTable>
-  </div>

+  <UTable
+      :rows="filteredRows"
+      @select="selectItem"
+      :columns="itemColumns"
+      :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+  >
+    <template #customer-data="{row}">
+      {{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ""}}
+    </template>
+    <template #plant-data="{row}">
+      {{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : ""}}
+    </template>
+  </UTable>
 </template>

 <script setup>
@@ -65,78 +30,57 @@
 definePageMeta({
  middleware: "auth"
 })
-
 const dataStore = useDataStore()
 const supabase = useSupabaseClient()
 const router = useRouter()

-const projectColumns = [
+const itemColumns = [
  {
-    key: 'measure',
-    label: "Gewerk",
-    sortable: true
-  },
-  {
-    key: 'name',
-    label: "Name",
-    sortable: true
-  },
-  {
-    key: "customer",
-    label: "Kundennummer",
-    sortable: true
+    key: "measure",
+    label: "Gewerk"
+  },{
+    key: "name",
+    label: "Name"
  },
  {
    key: "notes",
    label: "Notizen",
    sortable: true
+  },
+  {
+    key: "customer",
+    label: "Kunde",
+    sortable: true
+  },
+  {
+    key: "plant",
+    label: "Anlage",
+    sortable: true
  }
 ]

-const selectProject = (project) => {
-  router.push(`/projects/${project.id} `)
+const selectItem = (item) => {
+  console.log(item)
+  router.push(`/projects/show/${item.id} `)
 }

-const showCreateProject = ref(false)
-const createProjectData = ref({
-  phases: []
+const searchString = ref('')
+
+const filteredRows = computed(() => {
+  if(!searchString.value) {
+    return dataStore.projects
+  }
+
+  return dataStore.projects.filter(product => {
+    return Object.values(product).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
 })

-let selectedItem = ref({})
-
-const selectItem = (item) => {
-  selectedItem.value = item
-  console.log(item)
-}
-
-const createProject = async () => {
-  const {data,error} = await supabase
-      .from("projects")
-      .insert([createProjectData.value])
-      .select()
-
-  if(error) console.log(error)
-
-  showCreateProject.value = false
-  createProjectData.value = {phases: []}
-  dataStore.fetchProjects()
-
-
-}

 </script>

 <style scoped>
-/*#main {
-  display: flex;
-  flex-direction: row;
-}
-#left {
-  width: 25vw;
-}

-#right {
-  width: 60vw;
-  padding-left: 3vw;
-}*/
 </style>
--- a/spaces/pages/tasks.vue
+++ b/spaces/pages/tasks.vue
@@ -1,324 +0,0 @@
-<template>
-  <UPage>
-    <!-- TODO: Benutzer Aufgaben zuweisen und nach diesen Filtern    -->
-    <UModal
-        v-model="showCreateTask"
-    >
-      <UCard>
-        <template #header>
-          Aufgabe erstellen
-        </template>
-
-        <UFormGroup
-            label="Titel:"
-            class="mt-2"
-        >
-          <UInput
-              v-model="createTaskData.name"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-            label="Beschreibung:"
-            class="mt-2"
-        >
-          <UTextarea
-              v-model="createTaskData.description"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-            label="Kategorie:"
-            class="mt-2"
-        >
-          <USelectMenu
-              :options="taskCategories"
-              v-model="createTaskData.categorie"
-          />
-        </UFormGroup>
-
-        <UFormGroup
-            label="Benutzer:"
-            class="mt-2"
-        >
-          <USelectMenu
-              :options="dataStore.profiles"
-              value-attribute="id"
-              option-attribute="fullName"
-              v-model="createTaskData.user"
-          />
-        </UFormGroup>
-
-
-        <template #footer>
-          <UButton
-              @click="createTask"
-          >
-            Erstellen
-          </UButton>
-        </template>
-
-      </UCard>
-    </UModal>
-
-    <UModal
-        v-model="showTaskModal"
-    >
-      <UCard>
-        <template #header>
-          {{taskData.name}}
-        </template>
-        <p>{{taskData.description}}</p>
-        <p>Erstellt am: {{taskData.created_at}}</p>
-        <UBadge
-            v-for="user in taskData.users"
-            class="mr-2"
-        >
-          {{user}}
-        </UBadge>
-        <template #footer>
-          <UFormGroup
-            label="Status ändern:"
-          >
-            <USelectMenu
-                :options="taskCategories"
-                @change="updateTask"
-                v-model="taskData.categorie"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Projekt:"
-          >
-            <USelectMenu
-                :options="dataStore.projects"
-                @change="updateTask"
-                v-model="taskData.project"
-                option-attribute="name"
-                value-attribute="id"
-                searchable
-                :search-attributes="['name']"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-            label="Benutzer ändern:"
-          >
-            <USelectMenu
-                :options="dataStore.profiles"
-                @change="updateTask"
-                v-model="taskData.user"
-                option-attribute="firstName"
-                value-attribute="id"
-            >
-              <template #label>
-                {{dataStore.profiles.find(profile => profile.id === taskData.user) ? dataStore.profiles.find(profile => profile.id === taskData.user).fullName : 'Kein Benutzer ausgewählt'}}
-              </template>
-            </USelectMenu>
-          </UFormGroup>
-
-        </template>
-      </UCard>
-    </UModal>
-
-    <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>
-
-   <UTable
-     :rows="filteredRows"
-     :columns="taskColumns"
-     @select="inspectTask"
-     :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
-   >
-     <template #created_at-data="{row}">
-       {{ dayjs(row.created_at).format("DD.MM.YY HH:mm") }}
-     </template>
-      <template #user-data="{row}">
-        {{dataStore.profiles.find(profile => profile.id === row.user ) ? dataStore.profiles.find(profile => profile.id === row.user ).fullName : row.user}}
-      </template>
-     <template #project-data="{row}">
-       {{dataStore.projects.find(item => item.id === row.project) ? dataStore.projects.find(item => item.id === row.project).name : "" }}
-     </template>
-   </UTable>
-
-
-
-
-  </UPage>
-</template>
-
-<script setup>
-
-import * as dayjs from "dayjs";
-
-definePageMeta({
-  middleware: "auth",
-})
-
-const dataStore = useDataStore()
-const toast = useToast()
-const supabase = useSupabaseClient()
-
-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
-  },
-  {
-    key:"project",
-    label: "Projekt:",
-    sortable: true
-  }
-]
-
-const showDoneTasks = ref(false)
-const searchString = ref("")
-const filteredRows = computed(() => {
-
-  let filteredTasks = dataStore.tasks.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",
-  user: ""
-  /*users: ["86e67794-0ea8-41b0-985a-1072e84f56e9"]*/
-})
-
-const taskData = ref({})
-const showTaskModal = ref(false)
-
-const createTask = async () => {
-  //await create('tasks', createTaskData.value)
-  const {data,error} = await supabase
-      .from("tasks")
-      .insert([createTaskData.value])
-      .select()
-
-  console.log(error)
-
-  showCreateTask.value = false
-  createTaskData.value = {}
-  dataStore.fetchTasks()
-}
-
-const updateTask = async () => {
-
-  console.log(taskData.value)
-  const {data,error} = await supabase
-      .from("tasks")
-      .update(taskData.value)
-      .eq('id',taskData.value.id)
-      .select()
-  console.log(data)
-
-  if(error) {
-    console.log(error)
-  } else {
-    toast.add({title: "Aufgabe aktualisiert"})
-    taskData.value = {}
-    showTaskModal.value = false
-    dataStore.fetchTasks()
-  }
-
-}
-
-const inspectTask = (task) => {
-  taskData.value = task
-  showTaskModal.value = true
-}
-
-</script>
-
-<style scoped>
-
-#main {
-
-}
-
-h3 {
-  font-size: large;
-  font-weight: bold;
-}
-
-#menuBar {
-  display: flex;
-  flex-direction: row;
-}
-
-#taskCatList {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 65vh;
-}
-
-.taskScrollList {
-  height: 60vh;
-  overflow: auto;
-  padding: 3px
-}
-
-#catNew {
-  width: 30%;
-}
-#catInProgress {
-  width: 30%;
-  border-left: 2px solid #69c350;
-  margin-left: 1em;
-  padding-left: 1em;
-
-}
-#catUrgent {
-  width: 30%;
-  border-left: 2px solid #69c350;
-  margin-left: 1em;
-  padding-left: 1em;
-}
-</style>
--- a/spaces/pages/tasks/[mode]/[[id]].vue
+++ b/spaces/pages/tasks/[mode]/[[id]].vue
@@ -19,23 +19,30 @@ const itemInfo = ref({
  customer: 0,

 })
-const states = ["Offen", "In Bearbeitung", "Erledigt"]
+const categories = ["Offen", "In Bearbeitung", "Dringed", "Erledigt"]

 //Functions
 const setupPage = () => {
  if(mode.value === "show" || mode.value === "edit"){
-    currentItem = dataStore.getJobById(Number(useRoute().params.id))
+    currentItem = dataStore.getTaskById(Number(useRoute().params.id))
  }

  if(mode.value === "edit") itemInfo.value = currentItem

+  if(mode.value === "create") {
+    let query = route.query
+    if(query.project) itemInfo.value.project = Number(query.project)
+    if(query.plant) itemInfo.value.plant = Number(query.plant)
+
+  }
+


 }

 const createItem = async () => {
  const {data,error} = await supabase
-      .from("jobs")
+      .from("tasks")
      .insert([itemInfo.value])
      .select()

@@ -47,29 +54,29 @@ const createItem = async () => {
      id: 0,
      title: "",
    }
-    toast.add({title: "Job erfolgreich erstellt"})
-    await dataStore.fetchJobs()
-    router.push(`/jobs/show/${data[0].id}`)
+    toast.add({title: "Aufgabe erfolgreich erstellt"})
+    await dataStore.fetchTasks()
+    router.push(`/tasks/show/${data[0].id}`)
    setupPage()
  }
 }

 const editItem = async () => {
-  router.push(`/jobs/edit/${currentItem.id}`)
+  router.push(`/tasks/edit/${currentItem.id}`)
  setupPage()
 }

 const cancelEditorCreate = () => {
-  mode.value = "show"
-  itemInfo.value = {
-    id: 0,
-    infoData: {}
+  if(currentItem) {
+    router.push(`/tasks/show/${currentItem.id}`)
+  } else {
+    router.push(`/tasks/`)
  }
 }

 const updateItem = async () => {
  const {error} = await supabase
-      .from("jobs")
+      .from("tasks")
      .update(itemInfo.value)
      .eq('id',itemInfo.value.id)

@@ -78,9 +85,9 @@ const updateItem = async () => {
  }


-  router.push(`/jobs/show/${currentItem.id}`)
-  toast.add({title: "Job erfolgreich gespeichert"})
-  dataStore.fetchJobs()
+  router.push(`/tasks/show/${currentItem.id}`)
+  toast.add({title: "Aufgabe erfolgreich gespeichert"})
+  dataStore.fetchTasks()
 }


@@ -93,12 +100,15 @@ setupPage()
    <UCard v-if="currentItem && mode == 'show'" >
      <template #header>
        <UBadge>
-          {{currentItem.state}}
+          {{currentItem.categorie}}
        </UBadge>

-        {{currentItem.title}}
+        {{currentItem.name}}
      </template>

+      {{currentItem}}<br>
+
+
      Beschreibung:<br>
      {{currentItem.description}}<br>

@@ -113,57 +123,86 @@ setupPage()
        >
          Bearbeiten
        </UButton>
-        <UButton
-            color="red"
-            class="ml-2"
-            disabled
-        >
-          Archivieren
-        </UButton>
-        <!-- TODO: Kunde archivieren        -->
      </template>



    </UCard>
-    <UCard v-else-if="mode == 'edit' || mode == 'create'" >
-      <template #header>
-        {{itemInfo.title}}
+    <UCard v-else-if="mode === 'edit' || mode === 'create'" >
+      <template #header v-if="mode === 'edit'">
+        {{itemInfo.name}}
      </template>

      <UFormGroup
-          label="Titel:"
+          label="Name:"
      >
        <UInput
-            v-model="itemInfo.title"
+            v-model="itemInfo.name"
        />
      </UFormGroup>

      <UFormGroup
-          label="Status:"
+          label="Kategorie:"
      >
        <USelectMenu
-            v-model="itemInfo.state"
-            :options="states"
+            v-model="itemInfo.categorie"
+            :options="categories"
        />
      </UFormGroup>

      <UFormGroup
-          label="Kundennummer:"
+          label="Benutzer:"
      >
        <USelectMenu
-            v-model="itemInfo.customer"
-            :options="dataStore.customers"
+            v-model="itemInfo.user"
+            :options="dataStore.profiles"
+            option-attribute="fullName"
+            value-attribute="id"
+            searchable-placeholder="Suche..."
+            searchable
+            :search-attributes="['fullName']"
+        >
+          <template #label>
+            {{dataStore.getProfileById(itemInfo.user) ? dataStore.getProfileById(itemInfo.user).fullName : "Kein Benutzer ausgewählt"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+      <UFormGroup
+          label="Projekt:"
+      >
+        <USelectMenu
+            v-model="itemInfo.project"
+            :options="dataStore.projects"
            option-attribute="name"
            value-attribute="id"
+            searchable-placeholder="Suche..."
            searchable
            :search-attributes="['name']"
        >
          <template #label>
-            {{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
+            {{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
          </template>
        </USelectMenu>
      </UFormGroup>
+      <UFormGroup
+          label="Anlage:"
+      >
+        <USelectMenu
+            v-model="itemInfo.plant"
+            :options="dataStore.plants"
+            option-attribute="name"
+            value-attribute="id"
+            searchable-placeholder="Suche..."
+            searchable
+            :search-attributes="['name']"
+        >
+          <template #label>
+            {{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Keine Anlage ausgewählt"}}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+
+


      <UFormGroup
--- a/spaces/pages/tasks/index.vue
+++ b/spaces/pages/tasks/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <div id="main">
+
+    <InputGroup>
+      <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
+
+      <UInput
+          v-model="searchString"
+          placeholder="Suche..."
+      />
+
+      <UCheckbox
+          label="Erledigte Anzeigen"
+          v-model="showDone"
+      />
+    </InputGroup>
+
+    <UTable
+        :rows="filteredRows"
+        :columns="columns"
+        @select="selectItem"
+        :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
+    >
+      <template #created_at-data="{row}">
+        {{row.created_at ? dayjs(row.created_at).format("DD.MM.YY HH:mm") : ''}}
+      </template>
+      <template #user-data="{row}">
+        {{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
+      </template>
+      <template #project-data="{row}">
+        {{dataStore.projects.find(i => i.id === row.project) ? dataStore.projects.find(i => i.id === row.project).name : ""}}
+      </template>
+      <template #customer-data="{row}">
+        {{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : "" }}
+      </template>
+    </UTable>
+
+  </div>
+</template>
+
+<script setup>
+import * as dayjs from "dayjs";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+const dataStore = useDataStore()
+const router = useRouter()
+const mode = ref("show")
+
+const columns = [
+  {
+    key: "created_at",
+    label: "Erstellt am:",
+    sortable: true
+  },{
+    key: "name",
+    label: "Name:",
+    sortable: true
+  },{
+    key: "categorie",
+    label: "Kategorie:",
+    sortable: true
+  },{
+    key: "description",
+    label: "Beschreibung:",
+    sortable: true
+  },{
+    key: "user",
+    label: "Benutzer:",
+    sortable: true
+  },{
+    key: "project",
+    label: "Projekt:",
+    sortable: true
+  },{
+    key: "plant",
+    label: "Anlage:",
+    sortable: true
+  }
+]
+
+const searchString = ref('')
+const showDone = ref(false)
+
+
+const filteredRows = computed(() => {
+  let tasks = dataStore.tasks
+
+  if(!showDone.value) {
+    tasks = tasks.filter(i => i.categorie !== "Erledigt")
+  }
+
+  if(!searchString.value) {
+    return tasks
+  }
+
+  return tasks.filter(item => {
+    return Object.values(item).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
+})
+
+const selectItem = (item) => {
+  router.push(`/tasks/show/${item.id} `)
+}
+</script>
+
+<style scoped>
+
+</style>
--- a/spaces/pages/vendorinvoices/index.vue
+++ b/spaces/pages/vendorinvoices/index.vue
@@ -36,7 +36,7 @@
        {{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
      </template>
      <template #date-data="{row}">
-        {{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}
+        <span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
      </template>
      <template #dueDate-data="{row}">
        {{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}
--- a/spaces/pages/vendors/[mode]/[[id]].vue
+++ b/spaces/pages/vendors/[mode]/[[id]].vue
@@ -94,6 +94,14 @@ setupPage()
        {{currentItem.name}}
      </template>

+      <InputGroup>
+        <UButton
+            @click="router.push(`/contacts/create?vendor=${currentItem.id}`)"
+        >
+          + Ansprechpartner
+        </UButton>
+      </InputGroup>
+
      Information: <br>
      <div v-if="currentItem.infoData">
        <span v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}<br></span>