FEDEO/spaces/pages/inventory/index.vue

<script setup>
definePageMeta({
  middleware: "auth"
})

const dataStore = useDataStore()
const supabase = useSupabaseClient()
const router = useRouter()
const mode = ref("incoming")
const toast = useToast()

const inventoryChangeData = ref({
  productId: "",
  spaceId: "",
  quantity: 1
})

const createMovement = async () => {

  if(mode.value === '' || !checkSpaceId(inventoryChangeData.value.spaceId) || !checkArticle(inventoryChangeData.value.productId)){

  } else {
    if(mode.value === 'incoming'){

      const {error} = await supabase
          .from("movements")
          .insert([inventoryChangeData.value])
          .select()
      if(error) console.log(error)


    } else if (mode.value === 'outgoing'){
      inventoryChangeData.value.quantity *= -1

      const {error} = await supabase
          .from("movements")
          .insert([inventoryChangeData.value])
          .select()
      if(error) console.log(error)
    } else if (mode.value === 'change'){}


    inventoryChangeData.value = {
      productId: "",
      spaceId: "",
      quantity: 1
    }


    dataStore.fetchMovements()
  }


}

defineShortcuts({
  meta_enter: {
    usingInput: true,
    handler: () => {
      createMovement()
    }
  }
})


function checkArticle(productId) {
  return dataStore.products.filter(product =>product.id === productId).length > 0;
}
function checkSpaceId(spaceId) {
  return dataStore.spaces.filter(space => space.id === spaceId).length > 0;
}

function changeFocusToSpaceId() {
  document.getElementById('spaceIdInput').focus()
}

function changeFocusToQuantity() {
  document.getElementById('quantityInput').focus()
}

</script>

<template>
  <div id="main">

    <div class="my-3">
      <UButton
          @click="mode = 'incoming'"
          class="ml-3"
          :variant="mode === 'incoming' ? 'solid' : 'outline'"
      >Wareneingang</UButton>
      <UButton
          @click="mode = 'outgoing'"
          class="ml-1"
          :variant="mode === 'outgoing' ? 'solid' : 'outline'"
      >Warenausgang</UButton>
<!--      <UButton
          @click="mode = 'change'"
          class="ml-1"
          disabled
          :variant="mode === 'change' ? 'solid' : 'outline'"
      >Umlagern</UButton>-->
    </div>





    <UFormGroup
        label="Artikel:"
        class="mt-3 w-80"
    >
      <USelectMenu
          :options="dataStore.products"
          option-attribute="name"
          value-attribute="id"
          variant="outline"
          searchable
          :search-attributes="['name','ean', 'barcode']"
          :color="checkArticle(inventoryChangeData.productId) ? 'primary' : 'rose'"
          v-model="inventoryChangeData.productId"
          v-on:select="changeFocusToSpaceId"
      >
        <template #label>
          {{dataStore.products.find(product => product.id === inventoryChangeData.productId) ? dataStore.products.find(product => product.id === inventoryChangeData.productId).name : "Bitte Artikel auswählen"}}
        </template>
      </USelectMenu>
    </UFormGroup>

    <UFormGroup
        label="Lagerplatz:"
        class="mt-3 w-80"
    >
      <USelectMenu
        :options="dataStore.spaces"
        searchable
        option-attribute="description"
        :color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
        v-model="inventoryChangeData.spaceId"
        v-on:select="changeFocusToQuantity"
        value-attribute="id"
      >
        <template #label>
          {{dataStore.spaces.find(space => space.id === inventoryChangeData.spaceId) ? dataStore.spaces.find(space => space.id === inventoryChangeData.spaceId).description : "Kein Lagerplatz ausgewählt"}}
        </template>
      </USelectMenu>
    </UFormGroup>

    <UFormGroup
        label="Anzahl:"
        class="mt-3 w-80"
    >
      <UInput
          variant="outline"
          color="primary"
          placeholder="Anzahl"
          v-model="inventoryChangeData.quantity"
          type="number"
          id="quantityInput"
      />
    </UFormGroup>
    <UButton
        @click="createMovement"
        :disabled="mode === '' && checkSpaceId(inventoryChangeData.spaceId) && checkArticle(inventoryChangeData.productId)"
      class="mt-3"
    >
      Bestätigen
    </UButton>


  </div>



</template>

<style scoped>
#main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#left {
  width: 25vw;
}

#right {
  width: 60vw;
  padding-left: 3vw;
}
</style>