162 lines
2.9 KiB
Vue
162 lines
2.9 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 currentItem = null
|
|
|
|
|
|
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({})
|
|
|
|
//Functions
|
|
const setupPage = () => {
|
|
if(mode.value === "show" || mode.value === "edit"){
|
|
currentItem = dataStore.getVendorById(Number(useRoute().params.id))
|
|
}
|
|
|
|
if(mode.value === "edit") itemInfo.value = currentItem
|
|
|
|
|
|
|
|
}
|
|
|
|
const createItem = async () => {
|
|
const {data,error} = await supabase
|
|
.from("vendors")
|
|
.insert([itemInfo.value])
|
|
.select()
|
|
|
|
if(error) {
|
|
console.log(error)
|
|
} else {
|
|
mode.value = "show"
|
|
itemInfo.value = {}
|
|
toast.add({title: "Lieferant erfolgreich erstellt"})
|
|
await dataStore.fetchVendors()
|
|
router.push(`/vendors/show/${data[0].id}`)
|
|
setupPage()
|
|
}
|
|
}
|
|
|
|
const editItem = async () => {
|
|
router.push(`/vendors/edit/${currentItem.id}`)
|
|
setupPage()
|
|
}
|
|
|
|
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 {
|
|
mode.value = "show"
|
|
itemInfo.value = {}
|
|
toast.add({title: "Lieferant erfolgreich gespeichert"})
|
|
dataStore.fetchVendors()
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<UCard v-if="currentItem && mode == 'show'" >
|
|
<template #header>
|
|
{{currentItem.name}}
|
|
</template>
|
|
|
|
{{currentItem}}
|
|
|
|
|
|
|
|
<template #footer>
|
|
<UButton
|
|
v-if="mode == 'show' && currentItem.id"
|
|
@click="editItem"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
<UButton
|
|
color="red"
|
|
class="ml-2"
|
|
disabled
|
|
>
|
|
Archivieren
|
|
</UButton>
|
|
</template>
|
|
|
|
|
|
|
|
</UCard>
|
|
<UCard v-else-if="mode == 'edit' || mode == 'create'" >
|
|
<template #header>
|
|
{{itemInfo.name}}
|
|
</template>
|
|
|
|
<UFormGroup
|
|
label="Name:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.name"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Lieferantennr.:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.vendorNumber"
|
|
/>
|
|
</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> |