Document Restructure

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

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 movements = (await supabase.from("movements").select()).data
-const products = (await supabase.from("products").select()).data
-
+const {spaces, movements, products} = storeToRefs(useDataStore())
 
 
 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: "",
-    spaceId: "",
+    productId: 0,
+    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>