207 lines
4.3 KiB
Vue
207 lines
4.3 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
const dataStore = useDataStore()
|
|
const supabase = useSupabaseClient()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const toast = useToast()
|
|
const id = ref(route.params.id ? route.params.id : null )
|
|
|
|
let currentProduct = null
|
|
|
|
|
|
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({
|
|
unit: 1,
|
|
tags: []
|
|
})
|
|
|
|
//Functions
|
|
const setupPage = () => {
|
|
if(mode.value === "show" || mode.value === "edit"){
|
|
currentProduct = dataStore.getProductById(Number(useRoute().params.id))
|
|
}
|
|
|
|
if(mode.value === "edit") itemInfo.value = currentProduct
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
const editItem = async () => {
|
|
router.push(`/products/edit/${currentProduct.id}`)
|
|
setupPage()
|
|
}
|
|
|
|
const cancelEditorCreate = () => {
|
|
mode.value = "show"
|
|
itemInfo.value = {
|
|
id: 0,
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<UCard v-if="currentProduct && mode == 'show'" >
|
|
<template #header>
|
|
{{currentProduct.name}}
|
|
</template>
|
|
|
|
<UBadge
|
|
v-for="tag in currentProduct.tags"
|
|
class="mr-2"
|
|
>
|
|
{{tag}}
|
|
</UBadge>
|
|
|
|
|
|
|
|
<UDivider
|
|
class="my-2"
|
|
/>
|
|
<span v-if="currentProduct.purchasePrice">Einkaufspreis: {{Number(currentProduct.purchasePrice).toFixed(2)}} €<br></span>
|
|
Bestand: {{dataStore.getStockByProductId(currentProduct.id)}} {{dataStore.units.find(unit => unit.id === currentProduct.unit) ? dataStore.units.find(unit => unit.id === currentProduct.unit).name : ""}}
|
|
|
|
<DevOnly>
|
|
<UDivider
|
|
class="my-2"
|
|
/>
|
|
|
|
{{currentProduct}}
|
|
</DevOnly>
|
|
|
|
|
|
|
|
|
|
<template #footer>
|
|
<UButton
|
|
v-if="mode === 'show' && currentProduct.id"
|
|
@click="editItem"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
<UButton
|
|
color="red"
|
|
class="ml-2"
|
|
disabled
|
|
>
|
|
Archivieren
|
|
</UButton>
|
|
<!-- TODO: Produkt archivieren -->
|
|
</template>
|
|
|
|
|
|
|
|
</UCard>
|
|
<UCard v-else-if="mode == 'edit' || mode == 'create'" >
|
|
<template #header v-if="mode === 'edit'">
|
|
{{itemInfo.name}}
|
|
</template>
|
|
|
|
<UFormGroup
|
|
label="Name:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.name"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Hersteller:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.manufacturer"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Einheit:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.unit"
|
|
:options="dataStore.units"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
>
|
|
<template #label>
|
|
{{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : itemInfo.unit }}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Tags:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.tags"
|
|
:options="dataStore.ownTenant.tags.products"
|
|
multiple
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="EAN:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.ean"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Barcode:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.barcode"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Einkaufspreis:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.purchasePrice"
|
|
type="number"
|
|
steps="0.01"
|
|
>
|
|
<template #trailing>
|
|
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
|
|
</template>
|
|
</UInput>
|
|
</UFormGroup>
|
|
|
|
|
|
<template #footer>
|
|
<UButton
|
|
v-if="mode == 'edit'"
|
|
@click="dataStore.updateItem('products',itemInfo)"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else-if="mode == 'create'"
|
|
@click="dataStore.createNewItem('products',itemInfo)"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
<UButton
|
|
@click="cancelEditorCreate"
|
|
color="red"
|
|
class="ml-2"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
</template>
|
|
|
|
</UCard>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |