Restructured Update Process Into Store

spaces/app.vue

@@ -42,11 +42,6 @@ const userMenuItems = ref([
     label: 'Benutzer',
     icon: 'i-heroicons-user-group',
     to: "/users"
-  },
-  {
-    label: 'Chat',
-    icon: 'i-heroicons-user-group',
-    to: "/chat"
   }
 ])
 
@@ -133,7 +128,7 @@ const navLinks = [
     ]
   },
   {
-    label: "Planung",
+    label: "Verwaltung",
     icon: "i-heroicons-square-3-stack-3d",
     children: [
       {
@@ -151,12 +146,17 @@ const navLinks = [
         to: "/calendar/grid",
         icon: "i-heroicons-calendar-days"
       },
+      {
+        label: "Dokumente",
+        to: "/documents",
+        icon: "i-heroicons-document"
+      },
     ]
   },
   {
-    label: "Dokumente",
+    label: "Chat",
-    to: "/documents",
+    to: "/chat",
-    icon: "i-heroicons-document"
+    icon:'i-heroicons-chat-bubble-left-right'
   },
   {
     label: "Mitarbeiter",
@@ -169,7 +169,7 @@ const navLinks = [
       },
       {
         label: "Abwesenheiten",
-        to: "/employees/absenceRequests",
+        to: "/absenceRequests",
         icon: "i-heroicons-document-text"
       }
     ]
@@ -190,7 +190,7 @@ const navLinks = [
       },
       {
         label: "Lagerplätze",
-        to: "/inventory/spaces",
+        to: "/spaces",
         icon: "i-heroicons-square-3-stack-3d"
       },
       {

spaces/pages/calendar/[mode].vue

@@ -1,6 +1,5 @@
 <script setup>
 import deLocale from "@fullcalendar/core/locales/de";
-import listPlugin from "@fullcalendar/list";
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid"
 import timeGridPlugin from "@fullcalendar/timegrid"

spaces/pages/chat.vue

@@ -13,33 +13,12 @@ const user = useSupabaseUser()
 const dataStore = useDataStore()
 const selectedChat = ref({})
 const messageText = ref("")
-const createMessage = async () => {
-  const {data,error} = await supabase
-      .from("messages")
-      .insert([{
-        text: messageText.value,
-        origin: user.value.id,
-        destination: selectedChat.value.id
-      }])
-      .select()
-
-  if(error) {
-    console.log(error)
-  }
-  messageText.value = ""
-  console.log("OK")
-  dataStore.fetchMessages()
-
-
-}
-
-
 
 </script>
 
 <template>
   <div class="flex h-full">
-    <div class="w-1/5 mr-2">
+    <div class="w-1/5 mr-2 scrollList">
       <a
           v-for="chat in dataStore.chats"
           @click="selectedChat = chat"
@@ -49,103 +28,74 @@ const createMessage = async () => {
             :avatar="{alt: chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')}"
             :color="selectedChat.id === chat.id ? 'primary' : 'white'"
             variant="outline"
-        />
+        >
+          <template #title="{title}">
+            {{title}} <!-- TODO: Add Unread Counter  <UBadge class="ml-1">{{dataStore.getMessagesByChatId(chat.id).filter(i => !i.read ).length}}</UBadge>-->
+          </template>
+        </UAlert>
 
       </a>
     </div>
-    <div class="w-full">
+    <div class="w-full  h-full px-5 flex flex-col justify-between" v-if="selectedChat.id">
-<!--      <UCard class="h-full" v-if="selectedChat.id">
+      <div class="flex flex-col mt-5 scrollList">
-        <template #header>
-          <Placeholder class="h-8"/>
-        </template>
 
-        <div class="h-full">
+        <div
-          <UAlert
-              v-for="message in dataStore.getMessagesByChatId(selectedChat.id)"
-              :color="message.origin === user.id ? 'primary' : 'white'"
-              variant="outline"
-              :avatar="{alt: dataStore.getProfileById(message.origin).fullName}"
-              :title="message.text"
-              :description="dayjs(message.created_at).isSame(dayjs(), 'day') ? dayjs(message.created_at).format('HH:mm') : dayjs(message.created_at).format('DD.MM.YY HH:mm')"
-              class="mb-3"
-          />
-        </div>
-
-        <template #footer>
-          <div class="h-8">
-            <UButtonGroup class="w-full">
-              <UInput
-                  class="flex-auto"
-                  placeholder="Neue Nachricht"
-                  v-model="messageText"
-                  @keyup.enter="createMessage"
-              />
-              <UButton
-                @click="createMessage"
-              >
-                Senden
-              </UButton>
-            </UButtonGroup>
-
-          </div>
-
-        </template>
-      </UCard>-->
-
-      <div class="w-full  h-full px-5 flex flex-col justify-between" v-if="selectedChat.id">
-        <div class="flex flex-col mt-5">
-
-          <div
             v-for="message in dataStore.getMessagesByChatId(selectedChat.id)"
-          >
+        >
-            <div class="flex justify-end mb-4" v-if="message.origin === user.id">
+          <div class="flex justify-end mb-4" v-if="message.origin === user.id">
-              <div
+            <div
-                  class="mr-2 py-3 px-4 bg-primary-400 rounded-bl-3xl rounded-tl-3xl rounded-tr-xl text-white"
+                class="mr-2 py-3 px-4 bg-primary-400 rounded-bl-3xl rounded-tl-3xl rounded-tr-xl text-white"
-              >
+            >
-                {{message.text}}
+              {{message.text}}
-              </div>
+            </div>
-              <UAvatar
+            <UAvatar
                 :alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
                 size="md"
-              />
+            />
-            </div>
+          </div>
-            <div class="flex justify-start mb-4" v-else>
+          <div class="flex justify-start mb-4" v-else>
-              <UAvatar
+            <UAvatar
-                  :alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
+                :alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
-                  size="md"
+                size="md"
-              />
+            />
-              <div
+            <div
-                  class="ml-2 py-3 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white"
+                class="ml-2 py-3 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white"
-              >
+            >
-                {{message.text}}
+              {{message.text}}
-              </div>
             </div>
           </div>
         </div>
-
-
-
-        <div class="py-5">
-          <UButtonGroup class="w-full">
-            <UInput
-                variant="outline"
-                color="primary"
-                placeholder="Neue Nachricht"
-                v-model="messageText"
-                @keyup.enter="createMessage"
-                class="flex-auto"
-            />
-            <UButton
-              @click="createMessage"
-            >
-              Senden
-            </UButton>
-          </UButtonGroup>
-
-
-        </div>
       </div>
 
+
+
+      <div class="py-5">
+        <UButtonGroup class="w-full">
+          <UInput
+              variant="outline"
+              color="primary"
+              placeholder="Neue Nachricht"
+              v-model="messageText"
+              @keyup.enter="dataStore.createNewItem('messages',{
+                  text: messageText,
+                  origin: user.id,
+                  destination: selectedChat.id
+                })"
+              class="flex-auto"
+          />
+          <UButton
+              @click="dataStore.createNewItem('messages',{
+                  text: messageText,
+                  origin: user.id,
+                  destination: selectedChat.id
+                })"
+          >
+            Senden
+          </UButton>
+        </UButtonGroup>
+
+
+      </div>
     </div>
   </div>
 

spaces/pages/contacts/[mode]/[[id]].vue

@@ -53,23 +53,6 @@ const cancelEditorCreate = () => {
   }
 }
 
-const updateItem = async () => {
-  const {error} = await supabase
-      .from("contacts")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
-
-  if(error) {
-    console.log(error)
-  }
-
-  router.push(`/contacts/show/${currentContact.id}`)
-  toast.add({title: "Kontakt erfolgreich gespeichert"})
-  dataStore.fetchContacts()
-}
-
-
-
 setupPage()
 </script>
 
@@ -244,7 +227,7 @@ setupPage()
       <template #footer>
         <UButton
             v-if="mode == 'edit'"
-            @click="updateItem"
+            @click="dataStore.updateItem('contacts',itemInfo)"
         >
           Speichern
         </UButton>

spaces/pages/contracts/[mode]/[[id]].vue

@@ -50,22 +50,6 @@ const cancelEditorCreate = () => {
   }
 }
 
-const updateItem = async () => {
-  const {error} = await supabase
-      .from("contracts")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
-  if(error) {
-    console.log(error)
-  }
-
-  router.push(`/contracts/show/${currentContract.id}`)
-  toast.add({title: "Vertrag erfolgreich gespeichert"})
-  dataStore.fetchContracts()
-}
-
-
-
 setupPage()
 </script>
 
@@ -170,7 +154,7 @@ setupPage()
       <template #footer>
         <UButton
             v-if="mode == 'edit'"
-            @click="updateItem"
+            @click="dataStore.updateItem('contracts',itemInfo)"
         >
           Speichern
         </UButton>

spaces/pages/customers/[mode]/[[id]].vue

@@ -13,7 +13,7 @@ const id = ref(route.params.id ? route.params.id : null )
 const numberRange = useNumberRange("customers")
 const dataStore = useDataStore()
 
-let currentCustomer = ref(null)
+let currentItem = ref(null)
 
 
 
@@ -28,16 +28,16 @@ const itemInfo = ref({
 //Functions
 const setupPage = async () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentCustomer.value = await dataStore.getCustomerById(Number(useRoute().params.id))
+    currentItem.value = await dataStore.getCustomerById(Number(useRoute().params.id))
   }
 
-  if(mode.value === "edit") itemInfo.value = currentCustomer.value
+  if(mode.value === "edit") itemInfo.value = currentItem.value
 
 
 }
 
 const editCustomer = async () => {
-  router.push(`/customers/edit/${currentCustomer.value.id}`)
+  router.push(`/customers/edit/${currentItem.value.id}`)
   setupPage()
 }
 
@@ -50,19 +50,7 @@ const cancelEditorCreate = () => {
   }
 }
 
-const updateCustomer = async () => {
-  const {error} = await supabase
-      .from("customers")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
 
-  if(error) {
-    console.log(error)
-  }
-  toast.add({title: "Kunde erfolgreich gespeichert"})
-  router.push(`/customers/show/${currentCustomer.id}`)
-  dataStore.fetchCustomers()
-}
 
 
 
@@ -70,10 +58,10 @@ setupPage()
 </script>
 
 <template>
-  <UCard v-if="currentCustomer && mode == 'show'" >
+  <UCard v-if="currentItem && mode == 'show'" >
     <template #header>
       <UBadge
-          v-if="currentCustomer.active"
+          v-if="currentItem.active"
       >
         Kunde aktiv
       </UBadge>
@@ -83,37 +71,37 @@ setupPage()
       >
         Kunde gesperrt
       </UBadge>
-      {{currentCustomer.name}}
+      {{currentItem.name}}
     </template>
 
     <InputGroup>
       <UButton
-        @click="router.push(`/projects/create?customer=${currentCustomer.id}`)"
+        @click="router.push(`/projects/create?customer=${currentItem.id}`)"
       >
         + Projekt
       </UButton>
       <UButton
-        @click="router.push(`/contacts/create?customer=${currentCustomer.id}`)"
+        @click="router.push(`/contacts/create?customer=${currentItem.id}`)"
       >
         + Ansprechpartner
       </UButton>
     </InputGroup>
 
 
-    Kundennummer: {{currentCustomer.customerNumber}} <br>
+    Kundennummer: {{currentItem.customerNumber}} <br>
 
     <UDivider
         class="my-2"
     />
 
     Informationen:<br>
-    <div v-if="currentCustomer.infoData">
+    <div v-if="currentItem.infoData">
-      <span v-if="currentCustomer.infoData.street">Straße + Hausnummer: {{currentCustomer.infoData.street}}<br></span>
+      <span v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}<br></span>
-      <span v-if="currentCustomer.infoData.zip && currentCustomer.infoData.city">PLZ + Ort: {{currentCustomer.infoData.zip}} {{currentCustomer.infoData.city}}<br></span>
+      <span v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}<br></span>
-      <span v-if="currentCustomer.infoData.tel">Telefon: {{currentCustomer.infoData.tel}}<br></span>
+      <span v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}<br></span>
-      <span v-if="currentCustomer.infoData.email">E-Mail: {{currentCustomer.infoData.email}}<br></span>
+      <span v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}<br></span>
-      <span v-if="currentCustomer.infoData.web">Web: {{currentCustomer.infoData.web}}<br></span>
+      <span v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}<br></span>
-      <span v-if="currentCustomer.infoData.ustid">USt-Id: {{currentCustomer.infoData.ustid}}<br></span>
+      <span v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}<br></span>
     </div>
 
     <UDivider
@@ -121,7 +109,7 @@ setupPage()
     />
 
     Notizen:<br>
-    {{currentCustomer.notes}}<br>
+    {{currentItem.notes}}<br>
 
     <UDivider
         class="my-2"
@@ -131,7 +119,7 @@ setupPage()
 
     <ul>
       <li
-          v-for="contact in dataStore.getContactsByCustomerId(currentCustomer.id)"
+          v-for="contact in dataStore.getContactsByCustomerId(currentItem.id)"
       >
         <router-link :to="'/contacts/show/' + contact.id">{{contact.salutation}} {{contact.fullName}} - {{contact.role}}</router-link>
       </li>
@@ -142,7 +130,7 @@ setupPage()
 
     <template #footer>
       <UButton
-          v-if="mode == 'show' && currentCustomer.id"
+          v-if="mode == 'show' && currentItem.id"
           @click="editCustomer"
       >
         Bearbeiten
@@ -253,7 +241,7 @@ setupPage()
     <template #footer>
       <UButton
           v-if="mode == 'edit'"
-          @click="updateCustomer"
+          @click="dataStore.updateItem('customers', itemInfo)"
       >
         Speichern
       </UButton>
@@ -276,8 +264,8 @@ setupPage()
 
   <HistoryDisplay
       type="customer"
-      v-if="currentCustomer"
+      v-if="currentItem"
-      :element-id="currentCustomer.id"
+      :element-id="currentItem.id"
   />
 </template>
 

spaces/pages/incominginvoices/[mode]/[[id]].vue

@@ -89,30 +89,14 @@ const totalCalculated = computed(() => {
 
 const setState = async (newState) => {
   if(mode.value === 'show') {
-    await updateItem({...currentVendorInvoice.value, state: newState})
+    await dataStore.updateItem('incomingInvoices',{...currentVendorInvoice.value, state: newState})
   } else if(mode.value === 'edit') {
-    await updateItem({...itemInfo.value, state: newState})
+    await dataStore.updateItem('incomingInvoices',{...itemInfo.value, state: newState})
   }
   await router.push("/incominginvoices")
 }
 
 
-const updateItem = async (item) => {
-  const {error} = await supabase
-      .from("incomingInvoices")
-      .update(item)
-      .eq('id',item.id)
-  if(error) {
-    console.log(error)
-  } else {
-    mode.value = "show"
-    toast.add({title: "Eingangsrechnung erfolgreich gespeichert"})
-    dataStore.fetchIncomingInvoices()
-    //await router.push("/incominginvoices")
-  }
-}
-
-
 
 setupPage()
 </script>
@@ -128,7 +112,7 @@ setupPage()
     <div class="w-4/5">
       <InputGroup class="mt-3" v-if="currentVendorInvoice">
         <UButton
-            @click="updateItem(itemInfo)"
+            @click="dataStore.updateItem('incomingInvoices',itemInfo)"
             v-if="mode === 'edit'"
         >
           Speichern

spaces/pages/plants/[mode]/[[id]].vue

@@ -55,24 +55,6 @@ const cancelEditorCreate = () => {
   }
 }
 
-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>
 
@@ -174,7 +156,7 @@ setupPage()
     <template #footer>
       <UButton
           v-if="mode == 'edit'"
-          @click="updateItem"
+          @click="dataStore.updateItem('plants',itemInfo)"
       >
         Speichern
       </UButton>

spaces/pages/products/[mode]/[[id]].vue

@@ -47,27 +47,6 @@ const cancelEditorCreate = () => {
   }
 }
 
-const updateItem = async () => {
-  const {error} = await supabase
-      .from("products")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
-
-  if(error) {
-    console.log(error)
-  } else {
-    mode.value = "show"
-    itemInfo.value = {
-      id: 0,
-      name: "",
-    }
-    toast.add({title: "Artikel erfolgreich gespeichert"})
-    dataStore.fetchProducts()
-  }
-
-
-}
-
 
 
 setupPage()
@@ -200,7 +179,7 @@ setupPage()
       <template #footer>
         <UButton
             v-if="mode == 'edit'"
-            @click="updateItem"
+            @click="dataStore.updateItem('products',itemInfo)"
         >
           Speichern
         </UButton>

spaces/pages/projects/[mode]/[[id]].vue

@@ -506,7 +506,7 @@ setupPage()
     <template #footer>
       <UButton
           v-if="mode == 'edit'"
-          @click="updateItem"
+          @click="dataStore.updateItem('projects',itemInfo)"
       >
         Speichern
       </UButton>

spaces/pages/projects/[mode]/deprecated.vue

@@ -1,528 +0,0 @@
-<script setup >
-definePageMeta({
-  middleware: "auth"
-})
-
-import dayjs from 'dayjs'
-
-const supabase = useSupabaseClient()
-const user = useSupabaseUser()
-const route = useRoute()
-const router = useRouter()
-const dataStore = useDataStore()
-
-
-const {getProjectById, getFormSubmitsWithLabelProp, getTimesByProjectId, getDocumentTags, getDocumentsByProjectId, fetchDocuments} = useDataStore()
-const {forms, formSubmits, times, profiles,documents} = storeToRefs(useDataStore())
-
-
-
-
-fetchDocuments()
-const currentProject = getProjectById(Number(route.params.id))
-
-const formSubmissionsComposed = getFormSubmitsWithLabelProp
-const formModalOpen = ref(false)
-const newFormSubmissionData = ref({
-  formType: "",
-  values: {},
-  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
-      .from("formSubmits")
-      .insert([newFormSubmissionData.value])
-      .select()
-
-  console.log(insertData)
-  console.log(insertError)
-
-  let projectForms = [...currentProject.forms, insertData[0].id ]
-  console.log(projectForms)
-
-  //Add Form ID to project.forms
-  const {data:updateData,error:updateError} = await supabase
-      .from("projects")
-      .update({forms: projectForms})
-      .eq('id',currentProject.id)
-      .select()
-
-  console.log(updateData)
-  console.log(updateError)
-
-}
-
-const tabItems = [
-  {
-    key: "phases",
-    label: "Phasen"
-  },{
-    key: "tasks",
-    label: "Aufgaben"
-  },{
-    key: "forms",
-    label: "Formulare"
-  },{
-    key: "documents",
-    label: "Dokumente"
-  },{
-    key: "description",
-    label: "Dokumentation"
-  },{
-    key: "timetracking",
-    label: "Zeiterfassung"
-  },{
-    key: "material",
-    label: "Material"
-  }
-]
-const selectedPhase = ref({})
-const changesSaved = ref(true)
-
-
-
-
-const default_data = {
-  time: 1660335428612,
-  blocks: [
-    {
-      id: "MnGi61oxdF",
-      type: "header",
-      data: {
-        text: "Welcome to nuxt-editorjs!",
-        level: 1,
-      },
-    },
-    {
-      id: "b_Ju7U6wPl",
-      type: "paragraph",
-      data: {
-        text: "This is a nuxt3 plugin for editorjs.",
-      },
-    },
-
-  ],
-  version: "2.25.0",
-};
-const newProjectDescription = ref(currentProject.description || default_data.value);
-
-const saveProjectDescription = async () => {
-  //Update Project Description
-  const {data:updateData,error:updateError} = await supabase
-      .from("projects")
-      .update({description: newProjectDescription.value})
-      .eq('id',currentProject.id)
-      .select()
-
-  console.log(updateData)
-  console.log(updateError)
-
-
-
-};
-
-const uploadModalOpen = ref(false)
-const fileUploadFormData = ref({
-  tags: ["Dokument"],
-  folder: "Projekte",
-  usedInResource: {
-    type: "Projekt",
-  }
-})
-const tags = getDocumentTags
-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 updatePhases = async () => {
-  //await update('projects', route.params.id, {phases: project.attributes.phases})
-  changesSaved.value = true
-  console.log("Updated")
-}
-
-const phaseInfo = ref({
-  name: "XX",
-  notes: ""
-})
-
-/*const addPhase = async (phaseBefore) => {
-
-
-  let posBefore = phaseBefore.position
-  let phases = project.attributes.phases
-
-  phases.splice(posBefore + 1,0,{name: "test", checkboxes: []})
-
-  phases.forEach((phase,index) => {
-    phases[index].position = index
-  })
-
-
-  await updatePhases()
-
-}*/
-
-
-</script>
-
-<template>
-  <div>
-    <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>
-          <!--          <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>-->
-
-        </div>
-        <div v-if="item.key === 'tasks'" class="space-y-3">
-          <UTable
-            :rows="dataStore.getTasksByProjectId(currentProject.id)"
-            @select="(row) => {
-              router.push(`/tasks/show/${row.id}`)
-            }"
-          >
-
-          </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 getDocumentsByProjectId(currentProject.id)"
-                :document="document"
-            />
-          </div>
-
-
-          Dokumente
-        </div>
-        <div v-else-if="item.key === 'description'" class="space-y-3">
-          <UButton
-              :disabled="false/*newProjectDescription.time === currentProject.description.time*/"
-              @click="saveProjectDescription"
-          >
-            Speichern
-          </UButton>
-          <client-only><editor-js v-model="newProjectDescription" /></client-only>
-        </div>
-        <div v-else-if="item.key === 'timetracking'" class="space-y-3">
-          Projekt Zeit: {{currentProject.projectHours.toString().replace(".",":")}} Stunden
-          <UTable
-            :rows="getTimesByProjectId(currentProject.id)"
-            :columns="timeTableRows"
-          >
-            <template #user-data="{row}">
-              {{profiles.find(profile => profile.id === row.user) ? profiles.find(profile => profile.id === row.user).firstName + " " + profiles.find(profile => profile.id === row.user).lastName : row.user }}
-            </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>
-<!--    <div id="left">
-      <a
-          v-for="phase in project.attributes.phases"
-          @click="selectedPhase = phase"
-      >
-        <div
-            class="phaseContainer"
-        >
-          <span>{{phase.name}} - {{phase.position}}</span>
-        </div>
-
-        <a class="plusIcon" @click="addPhase(phase)">
-&lt;!&ndash;          <UIcon name="i-heroicons-plus-circle" />&ndash;&gt;
-          <UDivider icon="i-heroicons-plus-circle"/>
-        </a>
-      </a>
-
-    </div>
-    <div id="right" v-if="selectedPhase.name">
-      <h3>{{selectedPhase.name}}</h3>
-
-      <div
-        v-if="selectedPhase"
-      >
-        <UCheckbox
-            v-for="checkbox in selectedPhase.checkboxes"
-            v-model="checkbox.checked"
-            :label="checkbox.name"
-            v-on:change="updatePhases"
-        />
-      </div>
-
-      <UTextarea
-        v-model="selectedPhase.notes"
-        variant="outline"
-        color="primary"
-        placeholder="Notizen..."
-        class="notesTextarea"
-        v-on:change="changesSaved = false"
-      />
-
-      <UButton
-          v-if="!changesSaved"
-          @click="updatePhases"
-      >
-        Speichern
-      </UButton>
-
-      {{selectedPhase}}
-    </div>-->
-  </div>
-</template>
-
-<style scoped>
-
-#main {
-  display: flex;
-  flex-direction: row;
-}
-
-#left {
-  width: 25vw;
-  height: 80vh;
-  overflow: auto;
-}
-
-#right {
-  width: 65vw;
-  margin-left: 2vw;
-}
-
-.phaseContainer {
-  border: 1px solid grey;
-  border-radius: 10px;
-  padding: 1em;
-  margin-bottom: 1em;
-  margin-top: 1em;
-}
-
-.phaseContainer:hover {
-  border: 1px solid #69c350;
-}
-#phaseList {
-  height: 70vh;
-  overflow: auto;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-#phaseList::-webkit-scrollbar {
-  display: none;
-}
-
-
-.notesTextarea {
-  margin-top: 1em
-}
-
-h3 {
-  color: #69c350;
-  font-size: larger;
-}
-
-.plusIcon:hover {
-  color: #69c350;
-}
-</style>

spaces/pages/spaces/[mode]/[[id]].vue

@@ -45,30 +45,6 @@ const setupPage = async () => {
 
 }
 
-const createItem = async () => {
-
-  if(!itemInfo.value.spaceNumber) itemInfo.value.spaceNumber = await numberRange.useNextNumber()
-
-  const {data,error} = await supabase
-      .from("spaces")
-      .insert([itemInfo.value])
-      .select()
-
-  if(error) {
-    console.log(error)
-  } else {
-    console.log(data[0])
-    mode.value = "show"
-    toast.add({title: "Lagerplatz erfolgreich erstellt"})
-    await dataStore.fetchSpaces()
-    router.push(`/inventory/spaces/show/${data[0].id}`)
-
-
-
-    //setupPage()
-  }
-}
-
 const editItem = async () => {
   router.push(`/inventory/spaces/edit/${currentItem.value.id}`)
   setupPage()
@@ -208,13 +184,13 @@ setupPage()
       <template #footer>
         <UButton
             v-if="mode == 'edit'"
-            @click="updateItem"
+            @click="dataStore.updateItem('spaces',itemInfo)"
         >
           Speichern
         </UButton>
         <UButton
             v-else-if="mode == 'create'"
-            @click="createItem"
+            @click="dataStore.createNewItem('spaces',itemInfo)"
         >
           Erstellen
         </UButton>

spaces/pages/tasks/[mode]/[[id]].vue

@@ -26,10 +26,10 @@ const categories = ["Offen", "In Bearbeitung", "Dringed", "Erledigt"]
 //Functions
 const setupPage = () => {
   if(mode.value === "show" || mode.value === "edit"){
-    currentItem = dataStore.getTaskById(Number(useRoute().params.id))
+    currentItem.value = dataStore.getTaskById(Number(useRoute().params.id))
   }
 
-  if(mode.value === "edit") itemInfo.value = currentItem
+  if(mode.value === "edit") itemInfo.value = currentItem.value
 
   if(mode.value === "create") {
     let query = route.query
@@ -37,43 +37,17 @@ const setupPage = () => {
     if(query.plant) itemInfo.value.plant = Number(query.plant)
 
   }
-
-
-
 }
 
-const createItem = async () => {
-
-
-
-  /*const {data,error} = await supabase
-      .from("tasks")
-      .insert([itemInfo.value])
-      .select()
-
-  if(error) {
-    console.log(error)
-  } else {
-    mode.value = "show"
-    itemInfo.value = {
-      id: 0,
-      title: "",
-    }
-    //toast.add({title: "Aufgabe erfolgreich erstellt"})
-    await dataStore.fetchTasks()
-    //router.push(`/tasks/show/${data[0].id}`)
-    setupPage()
-  }*/
-}
 
 const editItem = async () => {
-  router.push(`/tasks/edit/${currentItem.id}`)
+  router.push(`/tasks/edit/${currentItem.value.id}`)
   setupPage()
 }
 
 const cancelEditorCreate = () => {
-  if(currentItem) {
+  if(currentItem.value) {
-    router.push(`/tasks/show/${currentItem.id}`)
+    router.push(`/tasks/show/${currentItem.value.id}`)
   } else {
     router.push(`/tasks/`)
   }
@@ -90,7 +64,7 @@ const updateItem = async () => {
   }
 
 
-  router.push(`/tasks/show/${currentItem.id}`)
+  router.push(`/tasks/show/${currentItem.value.id}`)
   toast.add({title: "Aufgabe erfolgreich gespeichert"})
   dataStore.fetchTasks()
 }
@@ -111,8 +85,6 @@ setupPage()
         {{currentItem.name}}
       </template>
 
-      {{currentItem}}<br>
-
 
       Beschreibung:<br>
       {{currentItem.description}}<br>
@@ -222,7 +194,7 @@ setupPage()
       <template #footer>
         <UButton
             v-if="mode == 'edit'"
-            @click="updateItem"
+            @click="dataStore.updateItem('tasks',itemInfo)"
         >
           Speichern
         </UButton>

spaces/pages/users/[mode]/[[id]].vue

@@ -85,32 +85,8 @@ const setupPage = () => {
   }
 
   itemInfo.value = currentItem
-
-
-
 }
 
-/*const createItem = async () => {
-  const {data,error} = await supabase
-      .from("profiles")
-      .insert([itemInfo.value])
-      .select()
-
-  if(error) {
-    console.log(error)
-  } else {
-    mode.value = "show"
-    itemInfo.value = {
-      id: 0,
-      title: "",
-    }
-    toast.add({title: "Job erfolgreich erstellt"})
-    await dataStore.fetchJobs()
-    router.push(`/jobs/show/${data[0].id}`)
-    setupPage()
-  }
-}*/
-
 const editItem = async () => {
   router.push(`/users/edit/${currentItem.id}`)
   setupPage()
@@ -124,22 +100,7 @@ const cancelEditorCreate = () => {
   }
 }
 
-const updateItem = async () => {
-  itemInfo.value.fullName = `${itemInfo.value.firstName} ${itemInfo.value.lastName}`
-  const {error} = await supabase
-      .from("profiles")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
 
-  if(error) {
-    console.log(error)
-  }
-
-
-  router.push(`/users/show/${currentItem.id}`)
-  toast.add({title: "Mitarbeiter erfolgreich gespeichert"})
-  dataStore.fetchProfiles()
-}
 
 const getDuration = (time) => {
   const dez = dayjs(time.end).diff(time.start,'hour',true).toFixed(2)
@@ -295,7 +256,7 @@ setupPage()
             </InputGroup>
             <UButton
               class="mt-5"
-              @click="updateItem"
+              @click="dataStore.updateItem('users',itemInfo)"
             >
               Speichern
             </UButton>
@@ -463,16 +424,16 @@ setupPage()
       <template #footer>
         <UButton
             v-if="mode == 'edit'"
-            @click="updateItem"
+            @click="dataStore.updateItem('users',{...itemInfo, fullName: `${itemInfo.firstName} ${itemInfo.lastName}`})"
         >
           Speichern
         </UButton>
-        <UButton
+<!--        <UButton
             v-else-if="mode == 'create'"
-            @click="createItem"
+            @click="dataStore.createItem()"
         >
           Erstellen
-        </UButton>
+        </UButton>-->
         <UButton
             @click="cancelEditorCreate"
             color="red"

spaces/pages/vehicles/[mode]/[[id]].vue

@@ -231,7 +231,7 @@ setupPage()
       <template #footer>
         <UButton
             v-if="mode == 'edit'"
-            @click="updateItem"
+            @click="dataStore.updateItem('vehicles',itemInfo)"
         >
           Speichern
         </UButton>

spaces/pages/vendors/[mode]/[[id]].vue

@@ -41,25 +41,6 @@ const cancelEditorCreate = () => {
   router.push(`/vendors/`)
 }
 
-const updateItem = async () => {
-  const {error} = await supabase
-      .from("vendors")
-      .update(itemInfo.value)
-      .eq('id',itemInfo.value.id)
-
-  if(error) {
-    console.log(error)
-  } else {
-    toast.add({title: "Lieferant erfolgreich gespeichert"})
-    router.push(`/vendors/show/${currentItem.value.id}`)
-    dataStore.fetchVendors()
-  }
-
-
-}
-
-
-
 setupPage()
 </script>
 
@@ -196,7 +177,7 @@ setupPage()
       <template #footer>
         <UButton
             v-if="mode == 'edit'"
-            @click="updateItem"
+            @click="dataStore.updateItem('vendors',itemInfo)"
         >
           Speichern
         </UButton>

spaces/stores/data.ts

@@ -15,43 +15,66 @@ export const useDataStore = defineStore('data', () => {
     const dataTypes = {
         tasks: {
             label: "Aufgaben",
-            labelSingle: "Aufgabe"
+            labelSingle: "Aufgabe",
+            redirect: true
         },
         customers: {
             label: "Kunden",
-            labelSingle: "Kunde"
+            labelSingle: "Kunde",
+            redirect:true
         },
         contacts: {
             label: "Kontakte",
-            labelSingle: "Kontakt"
+            labelSingle: "Kontakt",
+            redirect:true
         },
         contracts: {
             label: "Verträge",
-            labelSingle: "Vertrag"
+            labelSingle: "Vertrag",
+            redirect:true
         },
         absenceRequests: {
             label: "Abwesenheitsanträge",
-            labelSingle: "Abwesenheitsantrag"
+            labelSingle: "Abwesenheitsantrag",
+            redirect:true
         },
         plants: {
             label: "Anlagen",
-            labelSingle: "Anlage"
+            labelSingle: "Anlage",
+            redirect:true
         },
         products: {
             label: "Artikel",
-            labelSingle: "Artikel"
+            labelSingle: "Artikel",
+            redirect:true
         },
         projects: {
             label: "Projekte",
-            labelSingle: "Projekt"
+            labelSingle: "Projekt",
+            redirect:true
         },
         vehicles: {
             label: "Fahrzeuge",
-            labelSingle: "Fahrzeug"
+            labelSingle: "Fahrzeug",
+            redirect:true
         },
         vendors: {
             label: "Lieferanten",
-            labelSingle: "Lieferant"
+            labelSingle: "Lieferant",
+            redirect:true
+        },
+        messages: {
+            label: "Nachrichten",
+            labelSingle: "Nachricht"
+        },
+        spaces: {
+            label: "Lagerplätze",
+            labelSingle: "Lagerplatz",
+            redirect: true
+        },
+        users: {
+            label: "Benutzer",
+            labelSingle: "Benutzer"
         }
     }
 
@@ -172,6 +195,7 @@ export const useDataStore = defineStore('data', () => {
         messages.value = []
     }
 
+    //Realtime Update
     const channelA = supabase
         .channel('schema-db-changes')
         .on(
@@ -181,10 +205,15 @@ export const useDataStore = defineStore('data', () => {
                 schema: 'public',
             },
             (payload) => {
-                //console.log(payload)
+                console.log(payload)
-                const c = payload.table + '.value.push(' + JSON.stringify(payload.new) + ')'
-                eval(c)
 
+                if(payload.eventType === 'INSERT') {
+                    const c = payload.table + '.value.push(' + JSON.stringify(payload.new) + ')'
+                    eval(c)
+                } else if(payload.eventType === 'UPDATE'){
+                    const c = payload.table + '.value[' + payload.table + '.value.findIndex(i => i.id === ' + JSON.stringify(payload.old.id) + ')] = ' + JSON.stringify(payload.new)
+                    eval(c)
+                }
             }
         )
         .subscribe()
@@ -200,7 +229,24 @@ export const useDataStore = defineStore('data', () => {
         } else if (supabaseData) {
             await eval( dataType + '.value.push(' + JSON.stringify(...supabaseData) + ')')
             toast.add({title: `${dataTypes[dataType].labelSingle} hinzugefügt`})
-            await router.push(`/${dataType}/show/${supabaseData[0].id}`)
+            if(dataTypes[dataType].redirect) await router.push(`/${dataType}/show/${supabaseData[0].id}`)
+        }
+    }
+
+    async function updateItem (dataType:string, data:Object) {
+        const {data:supabaseData,error: supabaseError} = await supabase
+            .from(dataType)
+            .update(data)
+            .eq('id',data.id)
+            .select()
+
+        if(supabaseError) {
+            console.log(supabaseError)
+        } else if(supabaseData) {
+            await eval(dataType + '.value[' + dataType + '.value.findIndex(i => i.id === ' + JSON.stringify(data.id) + ')] = ' + JSON.stringify(supabaseData[0]))
+            toast.add({title: `${dataTypes[dataType].labelSingle} gespeichert`})
+            if(dataTypes[dataType].redirect) await router.push(`/${dataType}/show/${supabaseData[0].id}`)
+
         }
     }
 
@@ -660,6 +706,7 @@ export const useDataStore = defineStore('data', () => {
         messages,
         //Functions
         createNewItem,
+        updateItem,
         fetchData,
         clearStore,
         fetchOwnTenant,