Document Restructure

Introduced ExternalDevices Settingspage
Added DocumentDisplay.vue Component
Some Changes to Spaces

spaces/app.vue

@@ -107,6 +107,11 @@ const navLinks = [
         to: "/inventory",
         icon: "i-heroicons-square-3-stack-3d"
       },
+      {
+        label: "Lagerplätze",
+        to: "/inventory/spaces",
+        icon: "i-heroicons-square-3-stack-3d"
+      },
     ]
   },
 ]
@@ -335,6 +340,20 @@ const items = [
   height: 85vh;
 }
 
+.documentList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: 85vh;
+  overflow-y: scroll;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.documentList::-webkit-scrollbar {
+  display: none;
+}
+
 .scrollList {
   overflow-y: scroll;
   height: 85vh;

spaces/components/DocumentDisplay.vue

@@ -0,0 +1,283 @@
+<script setup>
+
+const toast = useToast()
+const supabase = useSupabaseClient()
+const props = defineProps({
+  document: {
+    type: Object,
+    required: true
+  },
+  openShowModal: {
+    type: Boolean,
+    required: false,
+  }
+})
+
+const {document, openShowModal:openShowModalProp } = props;
+const {fetchDocuments, getDocumentTags} = useDataStore()
+const {projects, customers} = storeToRefs(useDataStore())
+const tags = getDocumentTags
+const openShowModal = ref(false)
+
+//Functions
+const openDocument = async () => {
+  console.log("open")
+  //selectedDocument.value = doc
+  openShowModal.value = true
+}
+
+const uploadFiles = async () => {
+  const uploadSingleFile = async (file) => {
+
+    const {data, error} = await supabase
+        .storage
+        .from("files")
+        .upload(`${user.value.app_metadata.tenant}/${file.name}`, file)
+
+    if (error) {
+      console.log(error)
+    } else if (data) {
+      const returnPath = data.path
+
+      if (error) {
+
+      } else {
+        const files = (await supabase.storage.from('files').list(`${user.value.app_metadata.tenant}/`, {
+          limit: 100,
+          offset: 0,
+          sortBy: {column: 'name', order: 'asc'}
+        })).data
+
+        fileUploadFormData.value.path = returnPath
+
+        const {data, error} = await supabase
+            .from("documents")
+            .insert([fileUploadFormData.value])
+            .select()
+        if(error) console.log(error)
+      }
+    }
+  }
+
+  uploadInProgress.value = true
+
+  let files = document.getElementById("fileUploadInput").files
+
+  if(files.length === 1) {
+    await uploadSingleFile(files[0])
+  } else if( files.length > 1) {
+
+    for(let i = 0; i < files.length; i++){
+      uploadSingleFile(files[i])
+    }
+
+  }
+
+  uploadModalOpen.value = false;
+  uploadInProgress.value = false;
+  fetchDocuments()
+}
+
+
+const updateDocument = async () => {
+
+
+  let objData = document
+  delete objData.url
+
+  const {data,error} = await supabase
+      .from("documents")
+      .update(objData)
+      .eq('id',objData.id)
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    toast.add({title: "Dokument aktualisiert"})
+    fetchDocuments()
+    openShowModal.value = false
+  }
+
+}
+
+
+</script>
+
+<template>
+  <div class="documentListItem">
+    <embed
+        :src="document.url"
+        class="previewEmbed"
+    />
+    <UButton
+        @click="openDocument"
+        class="mt-3"
+    >
+      <UIcon name="i-heroicons-eye-solid" />
+    </UButton>
+    <UToggle
+        v-model="document.selected"
+        class="ml-2"
+    />
+  </div>
+
+
+
+  <!-- Slideovers  -->
+  <USlideover
+      v-model="uploadModalOpen"
+  >
+
+    <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+      <template #header>
+        Datei Hochladen
+      </template>
+
+      <div class="h-full">
+        <UFormGroup
+            label="Datei:"
+        >
+          <UInput
+              type="file"
+              id="fileUploadInput"
+              multiple
+          />
+        </UFormGroup>
+
+        <UFormGroup
+            label="Tags:"
+            class="mt-3"
+        >
+          <USelectMenu
+              multiple
+              searchable
+              searchable-placeholder="Suchen..."
+              :options="tags"
+              v-model="fileUploadFormData.tags"
+          />
+        </UFormGroup>
+      </div>
+
+      <template #footer>
+        <UButton
+            v-if="!uploadInProgress"
+            class="mt-3"
+            @click="uploadFiles"
+        >Hochladen</UButton>
+        <UProgress
+            v-else
+            animation="carousel"
+        />
+      </template>
+    </UCard>
+  </USlideover>
+  <USlideover
+      v-model="openShowModal"
+      fullscreen
+  >
+    <UCard class="h-full">
+      <embed
+          class="bigPreview mb-3"
+          :src="document.url"
+      />
+
+      <div class="flex items-center gap-2">
+        <UBadge
+            v-for="tag in document.tags"
+        >
+          {{tag}}
+        </UBadge>
+      </div>
+
+
+
+
+
+      <UFormGroup
+          label="Tags ändern:"
+      >
+        <USelectMenu
+            :options="tags"
+            v-model="document.tags"
+            @close="updateDocument"
+            multiple
+        />
+      </UFormGroup>
+
+      <UFormGroup
+          label="Projekt zuweisen:"
+      >
+        <USelectMenu
+            :options="projects"
+            option-attribute="name"
+            value-attribute="id"
+            v-model="document.project"
+            @change="updateDocument"
+            searchable
+            :search-attributes="['name']"
+        >
+          <template #label>
+            {{projects.find(item => item.id === document.project) ? projects.find(item => item.id === document.project).name : document.project }}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+
+      <UFormGroup
+          label="Kunde zuweisen:"
+      >
+        <USelectMenu
+            :options="customers"
+            option-attribute="name"
+            value-attribute="id"
+            v-model="document.customer"
+            @change="updateDocument"
+            searchable
+            :search-attributes="['name']"
+        >
+          <template #label>
+            {{customers.find(item => item.id === document.customer) ? customers.find(item => item.id === document.customer).name : document.customer }}
+          </template>
+        </USelectMenu>
+      </UFormGroup>
+
+
+
+
+    </UCard>
+  </USlideover>
+</template>
+
+<style scoped>
+.documentListItem {
+  display:block;
+  width: 15vw;
+  height: 30vh;
+  padding:1em;
+  margin: 0.7em;
+  border: 1px solid lightgrey;
+  border-radius: 15px;
+}
+
+.documentListItem:hover {
+  border: 1px solid #69c350;
+  cursor: pointer;
+}
+
+.previewEmbed {
+  width: 100%;
+  height: 22vh;
+  overflow: hidden;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.previewEmbed::-webkit-scrollbar {
+  display: none;
+}
+
+.bigPreview {
+  height: 70vh;
+  width: 100%;
+}
+</style>

spaces/package.json

@@ -45,6 +45,7 @@
     "pinia": "^2.1.7",
     "socket.io-client": "^4.7.2",
     "uuidv4": "^6.2.13",
-    "v-calendar": "^3.1.2"
+    "v-calendar": "^3.1.2",
+    "vue-barcode-reader": "^1.0.3"
   }
 }

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

@@ -23,7 +23,8 @@ const mode = ref(route.params.mode || "show")
 const customerInfo = ref({
   name: "",
   customerNumber: 0,
-  infoData: {}
+  infoData: {},
+  active: true
 })
 
 //Functions

spaces/pages/documents.vue

@@ -1,176 +1,3 @@
-<template>
-  <div>
-    <div class="controlHeader">
-      <UButton @click="uploadModalOpen = true">Hochladen</UButton>
-      <UButton
-          @click="downloadSelected"
-          class="ml-2"
-          :disabled="documents.filter(doc => doc.selected).length === 0"
-      >Herunterladen</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>
-    <div >
-      <USlideover
-        v-model="showDocumentModal"
-        fullscreen
-      >
-        <UCard class="h-full">
-          <embed
-              class="bigPreview mb-3"
-              :src="selectedDocument.url"
-          />
-
-          <UBadge
-            v-for="tag in selectedDocument.tags"
-            class="ml-2"
-          >
-            {{tag}}
-          </UBadge>
-
-
-          <UFormGroup
-            label="Ordner ändern:"
-          >
-            <USelectMenu
-              :options="folders"
-              v-on:change="changeFolder"
-              v-model="newFolder"
-              value-attribute="label"
-            />
-          </UFormGroup>
-
-          <UFormGroup
-            label="Tags ändern:"
-          >
-            <USelectMenu
-              :options="tags"
-              v-model="selectedDocument.tags"
-              @change="updateDocument"
-              multiple
-            />
-          </UFormGroup>
-
-
-
-
-        </UCard>
-      </USlideover>
-<!-- TODO: Tab Height always Full      -->
-      <UTabs
-          :items="folders"
-          orientation="vertical"
-          v-model="tabOpen"
-          :ui="{ wrapper: 'flex items-top gap-4', list: { width: 'w-72', padding: 'p-3' } }"
-      >
-        <template #item="{item}">
-          <div class="documentList">
-            <a
-                v-if="documents.filter(doc => doc.folder === item.label).length > 0"
-                v-for="document in documents.filter(doc => doc.folder === item.label)"
-                class="documentListItem"
-            >
-              <embed
-                  :src="document.url"
-                  class="previewEmbed"
-              />
-              <UButton
-                  @click="openDocument(document)"
-                  class="mt-3"
-              >
-                <UIcon name="i-heroicons-eye-solid" />
-              </UButton>
-              <UToggle
-                v-model="document.selected"
-                class="ml-2"
-              />
-
-              <!--              {{document.name}}<br>-->
-              <!--              <UBadge
-                                v-for="tag in document.tags"
-                                variant="outline"
-                                color="primary"
-                            >{{tag}}</UBadge>
-                            <UBadge
-                                color="rose"
-                                variant="outline"
-                            >{{document.state}}</UBadge>-->
-
-            </a>
-            <div v-else>
-              <p>Keine Dokumente in diesem Ordner</p>
-              <UButton
-                  @click="uploadModalOpen = true"
-              >
-                Hochladen
-              </UButton>
-            </div>
-          </div>
-        </template>
-      </UTabs>
-    </div>
-  </div>
-
-</template>
-
 <script setup>
 
 import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
@@ -182,145 +9,93 @@ const supabase = useSupabaseClient()
 const user = useSupabaseUser()
 const toast = useToast()
 
-const {documents} = storeToRefs(useDataStore())
+const {documents, projects, customers} = storeToRefs(useDataStore())
-const {fetchDocuments} = useDataStore()
+const {fetchDocuments, getDocumentTags} = useDataStore()
 
 fetchDocuments()
 
-const tabOpen = ref(0)
 const uploadModalOpen = ref(false)
+const uploadInProgress = ref(false)
 const fileUploadFormData = ref({
-  tags: [],
+  tags: ["Eingang"],
-  folder: "",
+  project: null,
-  object: "",
+  customer: null,
   path: ""
 })
 
-const selectedDocuments = ref([])
 
-let tags = ["Eingangsrechnung","Ausgangrechnung","Mahnung", "Dokument", "E-Mail Anhang"]
+let tags = getDocumentTags
-const folders = [
-  {
-    label: "Eingang",
-  },
-  {
-    label: "Eingangsrechnungen"
-  },
-  {
-    label: "Ausgangsrechnungen"
-  },
-  {
-    label: "Fahrzeuge"
-  },
-  {
-    label: "Dokumente"
-  },
-  {
-    label: "Archiv"
-  }
-]
-const uploadFile = async () => {
-  const file = document.getElementById("fileUploadInput").files[0]
 
-  const {data,error} = await supabase
+const selectedTags = ref(["Eingang"])
+
+const filteredDocuments = computed(() => {
+
+  return documents.value.filter(doc => doc.tags.filter(tag => selectedTags.value.find(t => t === tag)).length > 0)
+
+
+})
+
+const uploadFiles = async () => {
+  const uploadSingleFile = async (file) => {
+
+    const {data, error} = await supabase
         .storage
-      .from("documents")
+        .from("files")
-      .upload(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${file.name}`,file)
+        .upload(`${user.value.app_metadata.tenant}/${file.name}`, file)
 
+    if (error) {
+      console.log(error)
+    } else if (data) {
       const returnPath = data.path
 
-  if(error) {
+      if (error) {
 
       } else {
-    console.log(returnPath)
+        const files = (await supabase.storage.from('files').list(`${user.value.app_metadata.tenant}/`, {
-    const files = (await supabase.storage.from('documents').list(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/`, {limit: 100, offset: 0, sortBy: { column: 'name', order: 'asc' }})).data
+          limit: 100,
-    console.log(files)
+          offset: 0,
-    const fileId = files.find(temp => returnPath.includes(temp.name)).id
+          sortBy: {column: 'name', order: 'asc'}
+        })).data
 
-    fileUploadFormData.value.object = fileId
         fileUploadFormData.value.path = returnPath
-    console.log(fileUploadFormData.value)
 
-    const {data,error} = await supabase
+        const {data, error} = await supabase
             .from("documents")
             .insert([fileUploadFormData.value])
             .select()
-    console.log(data)
+        if(error) console.log(error)
-    console.log(error)
+      }
+    }
+  }
+
+  uploadInProgress.value = true
+
+  let files = document.getElementById("fileUploadInput").files
+
+  if(files.length === 1) {
+    await uploadSingleFile(files[0])
+  } else if( files.length > 1) {
+
+    for(let i = 0; i < files.length; i++){
+      uploadSingleFile(files[i])
+    }
+
   }
 
   uploadModalOpen.value = false;
-}
+  uploadInProgress.value = false;
-
-const updateDocument = async () => {
-  console.log(selectedDocument.value)
-
-  let objData = selectedDocument.value
-  delete objData.url
-
-  const {data,error} = await supabase
-      .from("documents")
-      .update(objData)
-      .eq('id',objData.id)
-      .select()
-  console.log(data)
-
-  if(error) {
-    console.log(error)
-  } else {
-    toast.add({title: "Dokument aktualisiert"})
-    selectedDocument.value = data[0]
-    showDocumentModal.value = false
   fetchDocuments()
-  }
-
 }
 
-const changeFolder = async () => {
-  console.log("Change Folder")
-  console.log(selectedDocument.value)
-
-  let filename = selectedDocument.value.path.split("/")[2]
-  let oldPath = selectedDocument.value.path
-  let newPath = `${user.value.app_metadata.tenant}/${newFolder.value}/${filename}`
-  console.log(oldPath)
-  console.log(newPath)
-
-  const { data, error } = await supabase
-      .storage
-      .from('documents')
-      .move(oldPath,newPath  )
-
-  if(error) {
-    console.log(error)
-  } else {
-    console.log(data)
-  }
-
-}
-
-const newFolder = ref("")
-
-const selectedDocument = ref({})
-const showDocumentModal = ref(false)
-
-const openDocument = async (document) => {
-  console.log("open")
-  selectedDocument.value = document
-  showDocumentModal.value = true
-
-}
-
-
 const downloadSelected = async () => {
-  const bucket = "documents";
+  const bucket = "files";
 
   let files = []
   documents.value.filter(doc => doc.selected).forEach(doc => files.push(doc.path))
 
   console.log(files)
 
-// If there are no files in the folder, throw an error
+  // If there are no files in the folder, throw an error
   if (!files || !files.length) {
     throw new Error("No files to download");
   }
@@ -373,44 +148,91 @@ const downloadSelected = async () => {
 
 </script>
 
+<template>
+  <div>
+    <div class="flex items-center gap-2">
+      <UButton @click="uploadModalOpen = true">Hochladen</UButton>
+      <UButton
+          @click="downloadSelected"
+          :disabled="documents.filter(doc => doc.selected).length === 0"
+      >Herunterladen</UButton>
+
+      <USelectMenu
+          :options="tags"
+          v-model="selectedTags"
+          multiple
+      >
+        <template #label>
+          <span v-if="selectedTags.length" class="truncate">{{ selectedTags.length }} ausgewählt</span>
+          <span v-else>Tags auswählen</span>
+        </template>
+      </USelectMenu>
+
+
+    </div>
+    <div >
+      <USlideover
+        v-model="uploadModalOpen"
+    >
+
+      <UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
+        <template #header>
+          Datei Hochladen
+        </template>
+
+        <div class="h-full">
+          <UFormGroup
+              label="Datei:"
+          >
+            <UInput
+                type="file"
+                id="fileUploadInput"
+                multiple
+            />
+          </UFormGroup>
+
+          <UFormGroup
+              label="Tags:"
+              class="mt-3"
+          >
+            <USelectMenu
+                multiple
+                searchable
+                searchable-placeholder="Suchen..."
+                :options="tags"
+                v-model="fileUploadFormData.tags"
+            />
+          </UFormGroup>
+        </div>
+
+        <template #footer>
+          <UButton
+              v-if="!uploadInProgress"
+              class="mt-3"
+              @click="uploadFiles"
+          >Hochladen</UButton>
+          <UProgress
+            v-else
+            animation="carousel"
+          />
+        </template>
+      </UCard>
+    </USlideover>
+
+      <div class="documentList">
+        <DocumentDisplay
+          v-for="document in filteredDocuments"
+          :document="document"
+        />
+      </div>
+    </div>
+  </div>
+
+</template>
+
+
+
 <style scoped>
-.documentList {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  height: 85vh;
-  overflow-y: scroll;
-}
 
-.documentListItem {
-  display:block;
-  width: 15vw;
-  height: 30vh;
-  padding:1em;
-  margin: 0.7em;
-  border: 1px solid lightgrey;
-  border-radius: 15px;
-}
 
-.documentListItem:hover {
-  border: 1px solid #69c350;
-  cursor: pointer;
-}
-
-.previewEmbed {
-  width: 100%;
-  height: 22vh;
-  overflow: hidden;
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
-}
-
-.previewEmbed::-webkit-scrollbar {
-  display: none;
-}
-
-.bigPreview {
-  height: 70vh;
-  width: 100%;
-}
 </style>

spaces/pages/inventory/index.vue

@@ -3,18 +3,18 @@ definePageMeta({
   middleware: "auth"
 })
 
+import {StreamBarcodeReader} from "vue-barcode-reader"
+
 const supabase = useSupabaseClient()
 
-const spaces = (await supabase.from("spaces").select()).data
+const {spaces, movements, products} = storeToRefs(useDataStore())
-const movements = (await supabase.from("movements").select()).data
-const products = (await supabase.from("products").select()).data
-
 
 
 const searchinput = ref("")
 const mode = ref("")
 
 const toast = useToast()
+const showReader = ref(false)
 
 const inventoryChangeData = ref({
   productId: "",
@@ -47,25 +47,41 @@ const createMovement = async () => {
   } else if (mode.value === 'change'){}
 
   inventoryChangeData.value = {
-    productId: "",
+    productId: 0,
-    spaceId: "",
+    spaceId: 0,
     quantity: 0
   }
 }
 
 function checkArticle(productId) {
-  return products.filter(product => product.id === Number(productId)).length > 0;
+  return products.value.filter(product =>product.ean === productId).length > 0;
 }
 function checkSpaceId(spaceId) {
-  return spaces.filter(space => space.id === spaceId).length > 0;
+  return spaces.value.filter(space => Number(space.spaceNumber) === Number(spaceId)).length > 0;
+}
+
+function changeFocusToSpaceId() {
+  document.getElementById('spaceIdInput').focus()
+}
+
+function changeFocusToQuantity() {
+  document.getElementById('quantityInput').focus()
 }
 
 </script>
 
 <template>
   <div id="main">
-    <router-link to="/inventory/spaces"><UButton>Lagerplätze</UButton></router-link>
+    <UModal
-
+      v-model="showReader"
+    >
+      <StreamBarcodeReader
+        @decode="console.log"
+        @loaded="console.log"
+      />
+    </UModal>
+    {{inventoryChangeData}}
+    {{spaces}}
 
     <div class="my-3">
       <UButton @click="mode = 'incoming'" class="ml-3" >Wareneingang</UButton>
@@ -81,8 +97,8 @@ function checkSpaceId(spaceId) {
       <UInput
           variant="outline"
           :color="checkArticle(inventoryChangeData.productId) ? 'primary' : 'rose'"
-          placeholder="Barcode / Suche"
           v-model="inventoryChangeData.productId"
+          v-on:keyup.enter="changeFocusToSpaceId"
       />
     </UFormGroup>
 
@@ -90,13 +106,19 @@ function checkSpaceId(spaceId) {
         label="Lagerplatz:"
         class="mt-3 w-80"
     ><!--.map(space => {return  {id: space.id, name: space.spaceNumber}}-->
-      <USelectMenu
+<!--      <USelectMenu
         :options="spaces"
         searchable
         option-attribute="spaceNumber"
         :color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
         v-model="inventoryChangeData.spaceId"
         value-attribute="id"
+      />-->
+      <UInput
+        v-model="inventoryChangeData.spaceId"
+        :color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
+        id="spaceIdInput"
+        v-on:keyup.enter="changeFocusToQuantity"
       />
     </UFormGroup>
 
@@ -110,6 +132,7 @@ function checkSpaceId(spaceId) {
           placeholder="Anzahl"
           v-model="inventoryChangeData.quantity"
           type="number"
+          id="quantityInput"
       />
     </UFormGroup>
     <UButton
@@ -119,6 +142,9 @@ function checkSpaceId(spaceId) {
     >
       Bestätigen
     </UButton>
+    <UButton
+      @click="showReader = true"
+    >show</UButton>
 
   </div>
 

spaces/pages/inventory/spaces.vue

@@ -1,153 +0,0 @@
-<script setup>
-
-definePageMeta({
-  middleware: "auth"
-})
-
-const supabase = useSupabaseClient()
-
-const {spaces,movements,products,units} = storeToRefs(useDataStore())
-const {movementsBySpace, getProductById} = useDataStore()
-
-console.log(movements)
-let selectedItem = ref({})
-const showCreateSpace = ref(false)
-
-const selectItem = (item) => {
-  selectedItem.value = item
-  spaceMovements.value = movementsBySpace(item.id)//movements.filter(movement => movement.spaceId === selectedItem.value.id)
-  spaceProducts.value = []
-  spaceMovements.value.forEach(movement => {
-    if(spaceProducts.value.filter(product => product.id === movement.productId).length === 0) spaceProducts.value.push(getProductById(movement.productId))
-  })
-
-
-
-
-}
-
-const spaceTypes = ["Regalplatz", "Kiste", "Palettenplatz","KFZ"]
-
-const createSpaceData = ref({})
-const createSpace = async () => {
-  let lastSpaceNumber = 0
-  spaces.forEach(space => {
-    if(space.spaceNumber > lastSpaceNumber) lastSpaceNumber = space.spaceNumber
-  })
-
-  const {data,error} = await supabase
-      .from("spaces")
-      .insert([ {...createSpaceData.value, spaceNumber: String(Number(lastSpaceNumber)+1)}])
-      .select()
-
-  console.log(error)
-
-  showCreateSpace.value = false
-  createSpaceData.value = {}
-
-}
-
-const spaceProducts = ref([])
-const spaceMovements = ref([])
-
-function getSpaceProductCount(productId) {
-  let productMovements = spaceMovements.value.filter(movement => movement.productId === productId)
-  let count = 0;
-  productMovements.forEach(movement => count += movement.quantity)
-
-  return count
-
-}
-
-</script>
-
-<template>
-  <div id="main">
-    <div id="left">
-      <UButton @click="showCreateSpace = true">
-        Erstellen
-      </UButton>
-      <UModal v-model="showCreateSpace">
-        <UCard>
-          <template #header>
-            Lagerplatz erstellen
-          </template>
-          <UFormGroup
-            label="Beschreibung:"
-          >
-            <UTextarea
-              v-model="createSpaceData.description"
-            />
-          </UFormGroup>
-          <UFormGroup
-            label="Typ:"
-          >
-            <USelectMenu
-              v-model="createSpaceData.type"
-              :options="spaceTypes"
-            />
-          </UFormGroup>
-
-          <template #footer>
-            <UButton @click="createSpace">Erstellen</UButton>
-          </template>
-        </UCard>
-      </UModal>
-      <a v-for="item in spaces" @click="selectItem(item)">
-        <UCard class="listItem">
-           {{item.spaceNumber}} - {{item.type}}
-        </UCard>
-      </a>
-    </div>
-    <div id="right">
-      <div v-if="selectedItem.id">
-        <UCard>
-          <template #header>
-            <UBadge class="mr-1">{{selectedItem.spaceNumber}}</UBadge>{{selectedItem.type}}
-          </template>
-          {{selectedItem.description}}
-
-        </UCard>
-        <div v-if="spaceProducts.length > 0">
-          <p class="mt-5">Artikel in diesem Lagerplatz</p>
-
-          <table>
-            <tr>
-              <th>Artikel</th>
-              <th>Anzahl</th>
-              <th>Einheit</th>
-            </tr>
-            <tr v-for="product in spaceProducts">
-              <td>{{product.name}}</td>
-              <td>{{getSpaceProductCount(product.id)}}</td>
-              <td>{{units.find(unit => unit.id === product.unit).name}}</td>
-            </tr>
-
-          </table>
-        </div>
-        </div>
-     </div>
-  </div>
-</template>
-
-<style scoped>
-
-#main {
-  display: flex;
-  flex-direction: row;
-}
-
-#left {
-  width: 25vw;
-}
-
-#right {
-  width: 60vw;
-  padding-left: 3vw;
-}
-
-td, th {
-  padding: 1em;
-  border: 1px solid black;
-}
-</style>

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

@@ -0,0 +1,241 @@
+<script setup>
+import axios from "axios";
+
+definePageMeta({
+  middleware: "auth"
+})
+
+//
+const supabase = useSupabaseClient()
+const route = useRoute()
+const router = useRouter()
+const toast = useToast()
+const id = ref(route.params.id ? route.params.id : null )
+
+
+//Store
+const {spaces,movements,products,units,ownTenant} = storeToRefs(useDataStore())
+const {fetchSpaces, getSpaceById, movementsBySpace, getProductById} = useDataStore()
+
+let currentItem = null
+
+
+
+//Working
+const mode = ref(route.params.mode || "show")
+const itemInfo = ref({
+  spaceNumber: 0
+})
+const spaceTypes = ["Regalplatz", "Kiste", "Palettenplatz"]
+const spaceProducts = ref([])
+const spaceMovements = ref([])
+
+//Functions
+const setupPage = async () => {
+  if(mode.value === "show" || mode.value === "edit"){
+    currentItem = await getSpaceById(Number(useRoute().params.id))
+    console.log(currentItem)
+
+    spaceMovements.value = movementsBySpace(currentItem.id)
+    spaceProducts.value = []
+    spaceMovements.value.forEach(movement => {
+      if(spaceProducts.value.filter(product => product.id === movement.productId).length === 0) spaceProducts.value.push(getProductById(movement.productId))
+    })
+
+  }
+
+  if(mode.value === "edit") itemInfo.value = currentItem
+
+  if(mode.value === "create") {
+    let lastSpaceNumber = 0
+    spaces.value.forEach(space => {
+      if(space.spaceNumber > lastSpaceNumber) lastSpaceNumber = space.spaceNumber
+    })
+    itemInfo.value.spaceNumber = lastSpaceNumber + 1
+  }
+
+
+
+}
+
+const createItem = async () => {
+
+
+
+  const {data,error} = await supabase
+      .from("spaces")
+      .insert([itemInfo.value])
+      .select()
+
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    itemInfo.value = {}
+    toast.add({title: "Lagerplatz erfolgreich erstellt"})
+    await fetchSpaces()
+    router.push(`/inventory/spaces/show/${data[0].id}`)
+    setupPage()
+  }
+}
+
+const editItem = async () => {
+  router.push(`/inventory/spaces/edit/${currentItem.id}`)
+  setupPage()
+}
+
+const cancelEditorCreate = () => {
+  router.push(`/inventory/spaces/`)
+}
+
+const updateItem = async () => {
+  const {error} = await supabase
+      .from("spaces")
+      .update(itemInfo.value)
+      .eq('id',itemInfo.value.id)
+
+  if(error) {
+    console.log(error)
+  } else {
+    mode.value = "show"
+    itemInfo.value = {}
+    toast.add({title: "Lagerplatz erfolgreich gespeichert"})
+    fetchSpaces()
+  }
+}
+
+function getSpaceProductCount(productId) {
+  let productMovements = spaceMovements.value.filter(movement => movement.productId === productId)
+  let count = 0;
+  productMovements.forEach(movement => count += movement.quantity)
+
+  return count
+
+}
+
+const printSpaceLabel = async () => {
+
+
+
+  axios
+      .post(`http://${ownTenant.value.labelPrinterIp}/pstprnt`, `^XA^FO10,20^BCN,100^FD${currentItem.spaceNumber}^XZ` )
+      .then(console.log)
+      .catch(console.log)
+}
+
+
+setupPage()
+</script>
+
+<template>
+  <div>
+    <UCard v-if="currentItem && mode == 'show'" >
+      <template #header>
+        <UBadge>{{currentItem.spaceNumber}}</UBadge> {{currentItem.type}}
+      </template>
+
+      {{currentItem.description}}
+
+      <UDivider
+        class="my-2"
+      />
+
+      <div v-if="spaceProducts.length > 0">
+        <p class="mt-5">Artikel in diesem Lagerplatz</p>
+
+        <table>
+          <tr>
+            <th>Artikel</th>
+            <th>Anzahl</th>
+            <th>Einheit</th>
+          </tr>
+          <tr v-for="product in spaceProducts">
+            <td>{{product.name}}</td>
+            <td>{{getSpaceProductCount(product.id)}}</td>
+            <td>{{units.find(unit => unit.id === product.unit).name}}</td>
+          </tr>
+
+        </table>
+      </div>
+      <p v-else>Es befinden sich keine Artikel in diesem Lagerplatz</p>
+
+
+
+      <template #footer>
+        <UButton
+            v-if="mode == 'show' && currentItem.id"
+            @click="editItem"
+        >
+          Bearbeiten
+        </UButton>
+        <UButton
+            v-if="mode == 'show' && currentItem.id"
+            @click="printSpaceLabel"
+        >
+          Label Drucken
+        </UButton>
+        <UButton
+            color="red"
+            class="ml-2"
+            disabled
+        >
+          Archivieren
+        </UButton>
+      </template>
+
+
+
+    </UCard>
+    <UCard v-else-if="mode == 'edit' || mode == 'create'" >
+      <template #header>
+        <UBadge>{{itemInfo.spaceNumber}}</UBadge>{{itemInfo.type}}
+      </template>
+
+      <UFormGroup
+          label="Typ:"
+      >
+        <USelectMenu
+          :options="spaceTypes"
+          v-model="itemInfo.type"
+        >
+
+        </USelectMenu>
+      </UFormGroup>
+      <UFormGroup
+          label="Beschreibung.:"
+      >
+        <UTextarea
+            v-model="itemInfo.description"
+        />
+      </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>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

spaces/pages/inventory/spaces/index.vue

@@ -0,0 +1,80 @@
+<template>
+  <div id="main">
+
+    <div class="flex items-center gap-1">
+      <UButton @click="router.push(`/inventory/spaces/create/`)">+ Lagerplatz</UButton>
+
+      <UInput
+          v-model="searchString"
+          placeholder="Suche..."
+      />
+    </div>
+
+
+
+    <UTable
+        :rows="filteredRows"
+        :columns="itemColumns"
+        @select="selectItem"
+
+    />
+
+
+
+  </div>
+</template>
+
+<script setup>
+
+definePageMeta({
+  middleware: "auth"
+})
+
+
+const router = useRouter()
+const {spaces } = storeToRefs(useDataStore())
+const mode = ref("show")
+
+const itemColumns = [
+  {
+    key: 'spaceNumber',
+    label: "Lagerplatznr.",
+    sortable: true
+  },
+  {
+    key: "description",
+    label: "Beschreibung",
+    sortable: true
+  },
+  {
+    key: "type",
+    label: "Typ",
+    sortable: true
+  }
+]
+
+
+const selectItem = (item) => {
+  console.log(item)
+  router.push(`/inventory/spaces/show/${item.id} `)
+}
+
+
+const searchString = ref('')
+
+const filteredRows = computed(() => {
+  if(!searchString.value) {
+    return spaces.value
+  }
+
+  return spaces.value.filter(item => {
+    return Object.values(item).some((value) => {
+      return String(value).toLowerCase().includes(searchString.value.toLowerCase())
+    })
+  })
+})
+</script>
+
+<style scoped>
+
+</style>

spaces/pages/projects/[id].vue

@@ -6,11 +6,13 @@ definePageMeta({
 import * as dayjs from 'dayjs'
 
 const supabase = useSupabaseClient()
+const user = useSupabaseUser()
 const route = useRoute()
 
-const {getProjectById, getFormSubmitsWithLabelProp, getTimesByProjectId} = useDataStore()
+const {getProjectById, getFormSubmitsWithLabelProp, getTimesByProjectId, getDocumentTags, getDocumentsByProjectId, fetchDocuments} = useDataStore()
-const {forms, formSubmits, times, profiles} = storeToRefs(useDataStore())
+const {forms, formSubmits, times, profiles,documents} = storeToRefs(useDataStore())
 
+fetchDocuments()
 const currentProject = getProjectById(Number(route.params.id))
 
 const formSubmissionsComposed = getFormSubmitsWithLabelProp
@@ -75,6 +77,9 @@ const tabItems = [
   },{
     key: "forms",
     label: "Formulare"
+  },{
+    key: "documents",
+    label: "Dokumente"
   },{
     key: "description",
     label: "Dokumentation"
@@ -131,6 +136,49 @@ const saveProjectDescription = async () => {
 
 };
 
+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})
@@ -240,6 +288,84 @@ const phaseInfo = ref({
             </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*/"

spaces/pages/projects/index.vue

@@ -158,9 +158,14 @@ const {projects,customers} = storeToRefs(useDataStore())
 const {fetchProjects} = useDataStore()
 
 const projectColumns = [
+  {
+    key: 'measure',
+    label: "Gewerk",
+    sortable: true
+  },
   {
     key: 'name',
-    label: "Name.",
+    label: "Name",
     sortable: true
   },
   {

spaces/pages/settings/externalDevices.vue

@@ -1,4 +1,28 @@
 <script setup>
+import axios from "axios"
+const {ownTenant} = storeToRefs(useDataStore())
+
+
+const setupPrinter = async () => {
+  console.log(ownTenant.value.labelPrinterIp)
+  let printerUri = `http://${ownTenant.value.labelPrinterIp}/pstprnt`
+  labelPrinterURI.value = printerUri
+  console.log(printerUri)
+}
+
+
+/*const printLabel = async () => {
+  axios
+      .post(labelPrinterURI.value, `^XA^FO10,20^BCN,100^FD${}^XZ` )
+      .then(console.log)
+      .catch(console.log)
+
+
+}*/
+
+
+
+const labelPrinterURI = ref("")
 
 </script>
 
@@ -8,12 +32,32 @@
       <template #header>
         Etikettendrucker
       </template>
+
+      <UFormGroup
+        label="IP-Adresse:"
+      >
+        <UInput
+          v-model="labelPrinterURI"
+        />
+      </UFormGroup>
+
+      <UButton
+        @click="setupPrinter"
+      >
+        Drucker Setup
+      </UButton>
+      <UButton
+        @click="printLabel"
+      >
+        Druck
+      </UButton>
+
     </UCard>
-    <UCard>
+<!--    <UCard>
       <template #header>
         A4 Drucker
       </template>
-    </UCard>
+    </UCard>-->
   </UPage>
 </template>
 

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

@@ -1,33 +1,72 @@
 <template>
   <div id="main">
+
+
+
+
+
+
     <div
       class="previewDoc"
     >
       <embed
-        :src="fileurl"
+        :src="fileurl + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
-
+        width="40vw"
+        height="50vh"
       >
-        {{documents}}
     </div>
     <div
       class="inputData"
     >
       <UFormGroup label="Lieferant:" required>
-        <UInput />
+        <USelectMenu
+          v-model="invoice.vendor"
+          :options="vendors"
+          option-attribute="name"
+          value-attribute="id"
+          searchable
+          :search-attributes="['name','vendorNumber']"
+        >
+
+        </USelectMenu>
       </UFormGroup>
 
       <UFormGroup label="Rechnungsreferenz:" required>
-        <UInput />
+        <UInput
+          v-model="invoice.reference"
+        />
       </UFormGroup>
 
       <UFormGroup label="Rechnungsdatum:" required>
-        <UInput />
+        <UPopover :popper="{ placement: 'bottom-start' }">
+          <UButton icon="i-heroicons-calendar-days-20-solid" :label="labelDate" />
+
+          <template #panel="{ close }">
+            <LazyDatePicker v-model="invoice.date" @close="close" />
+          </template>
+        </UPopover>
       </UFormGroup>
 
-      <UButton @click="vendorInvoiceData.lineItems.push({})">+ Reihe</UButton>
+      <UFormGroup label="Fälligkeitsdatum:" required>
+        <UPopover :popper="{ placement: 'bottom-start' }">
+          <UButton icon="i-heroicons-calendar-days-20-solid" :label="labelDueDate" />
+
+          <template #panel="{ close }">
+            <LazyDatePicker v-model="invoice.dueDate" @close="close" />
+          </template>
+        </UPopover>
+      </UFormGroup>
+
+      <UFormGroup label="Beschreibung:" required>
+        <UTextarea
+          v-model="invoice.description"
+        />
+      </UFormGroup>
+
+<!--      <UButton @click="vendorInvoiceData.lineItems.push({})">+ Reihe</UButton>-->
 
 
-      <div v-for="lineItem in vendorInvoiceData.lineItems" class="lineItemRow">
+<!--      <div v-for="lineItem in vendorInvoiceData.lineItems" class="lineItemRow">
         <UFormGroup label="Text:" required>
           <UInput v-model="lineItem.text"/>
         </UFormGroup>
@@ -58,7 +97,7 @@
         <UFormGroup label="Positionspreis:" required>
           <UInput disabled/>
         </UFormGroup>
-      </div>
+      </div>-->
       {{vendorInvoiceData}}
     </div>
   </div>
@@ -68,10 +107,28 @@
 const supabase = useSupabaseClient()
 const route = useRoute()
 
-const currentVendorInvoice = (await supabase.from('vendorInvoices').select().eq('id', route.params.id)).data
+const {vendors} = storeToRefs(useDataStore())
+
+
+
+const invoice = ref({
+    vendor: 0,
+    reference: "",
+    date: new Date(),
+    dueDate: new Date(),
+    paymentType: "",
+    description: "",
+  state: "Entwurf"
+})
+
+const labelDate = computed(() => invoice.value.date.toLocaleDateString('de-de', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }))
+const labelDueDate = computed(() => invoice.value.dueDate.toLocaleDateString('de-de', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }))
+
+
+
+//const currentVendorInvoice = (await supabase.from('vendorInvoices').select().eq('id', route.params.id)).data
 const document = (await supabase.from('documents').select().eq("id",18)).data[0]
 
-console.log(currentVendorInvoice)
 console.log(document)
 
 let fileurl = (await supabase.storage.from('documents').createSignedUrl(document.path,60*60)).data.signedUrl

spaces/stores/data.ts

@@ -14,6 +14,10 @@ export const useDataStore = defineStore('data', {
             },
             timeConfig: {
                 timeTypes: [] as any[]
+            },
+            tags: {
+                documents: [] as any[],
+                products: [] as any[]
             }
         },
         profiles: [] as any[],
@@ -127,7 +131,7 @@ export const useDataStore = defineStore('data', {
         },
         async fetchVendorInvoices() {
             // @ts-ignore
-            this.vendorInvoices = (await supabase.from("vendorinvoices").select()).data
+            this.vendorInvoices = (await supabase.from("vendorInvoices").select()).data
         },
         async fetchDocuments() {
             // @ts-ignore
@@ -135,7 +139,7 @@ export const useDataStore = defineStore('data', {
 
             for(const [index,doc] of this.documents.entries()){
                 // @ts-ignore
-                this.documents[index].url = (await supabase.storage.from('documents').createSignedUrl(doc.path, 60 * 60)).data.signedUrl
+                this.documents[index].url = (await supabase.storage.from('files').createSignedUrl(doc.path, 60 * 60)).data.signedUrl
             }
         }
     },
@@ -156,6 +160,7 @@ export const useDataStore = defineStore('data', {
         getProductById: (state) => (productId:number) => state.products.find(product => product.id === productId),
         getVendorById: (state) => (itemId:number) => state.vendors.find(item => item.id === itemId),
         getVendorInvoiceById: (state) => (itemId:number) => state.vendorInvoices.find(item => item.id === itemId),
+        getSpaceById: (state) => (itemId:number) => state.spaces.find(item => item.id === itemId),
         getProjectById: (state) => (projectId:number) => {
             let project = state.projects.find(project => project.id === projectId)
 
@@ -186,6 +191,7 @@ export const useDataStore = defineStore('data', {
             return times
 
         },
+        getDocumentsByProjectId:(state) => (itemId: number) => state.documents.filter(item => item.project == itemId ),
         getFormSubmitsWithLabelProp: (state) => (state.formSubmits.map(submit => {return{...submit, label: submit.id}})),
         getResources: (state) => {
             return [
@@ -221,6 +227,7 @@ export const useDataStore = defineStore('data', {
             ]
         },
         getEventTypes: (state) => state.ownTenant.calendarConfig.eventTypes,
-        getTimeTypes: (state) => state.ownTenant.timeConfig.timeTypes
+        getTimeTypes: (state) => state.ownTenant.timeConfig.timeTypes,
+        getDocumentTags: (state) => state.ownTenant.tags.documents,
     }
 })