354 lines
8.9 KiB
Vue
354 lines
8.9 KiB
Vue
<script setup>
|
|
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
|
import DocumentList from "~/components/DocumentList.vue";
|
|
import DocumentUpload from "~/components/DocumentUpload.vue";
|
|
import {useSupabaseSelect} from "~/composables/useSupabase.js";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
defineShortcuts({
|
|
'backspace': () => {
|
|
router.push("/products")
|
|
},
|
|
'arrowleft': () => {
|
|
if(openTab.value > 0){
|
|
openTab.value -= 1
|
|
}
|
|
},
|
|
'arrowright': () => {
|
|
if(openTab.value < 3) {
|
|
openTab.value += 1
|
|
}
|
|
},
|
|
})
|
|
|
|
const dataStore = useDataStore()
|
|
const profileStore = useProfileStore()
|
|
const supabase = useSupabaseClient()
|
|
const route = useRoute()
|
|
const router = useRouter()
|
|
const toast = useToast()
|
|
const id = ref(route.params.id ? route.params.id : null )
|
|
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({
|
|
unit: 1,
|
|
tags: [],
|
|
productcategories: []
|
|
})
|
|
const openTab = ref(0)
|
|
|
|
const productcategories = ref([])
|
|
const units = ref([])
|
|
|
|
//Functions
|
|
const setupPage = async () => {
|
|
if(mode.value === "show" || mode.value === "edit"){
|
|
itemInfo.value = await useSupabaseSelectSingle("products",route.params.id,"*")
|
|
}
|
|
|
|
productcategories.value = await useSupabaseSelect("productcategories","*")
|
|
units.value = (await supabase.from("units").select()).data
|
|
console.log(units.value[0])
|
|
|
|
}
|
|
|
|
const cancelEditorCreate = () => {
|
|
if(itemInfo.value) {
|
|
router.push(`/products/show/${itemInfo.value.id}`)
|
|
} else {
|
|
router.push(`/products/`)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const printLabel = async (content) => {
|
|
const label = await useSupabaseSelectSingle("printLabels",1,'*')
|
|
|
|
|
|
usePrintLabel('0dbe30f3-3008-4cde-8a7c-e785b1c22bfc','ZD411',useGenerateZPL(label.handlebarsZPL,{barcode:itemInfo.value.articleNumber }))
|
|
|
|
}
|
|
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar
|
|
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
|
>
|
|
<template #left>
|
|
<UButton
|
|
icon="i-heroicons-chevron-left"
|
|
variant="outline"
|
|
@click="router.push(`/products`)"
|
|
>
|
|
Artikel
|
|
</UButton>
|
|
</template>
|
|
<template #center>
|
|
<h1
|
|
v-if="itemInfo"
|
|
class="text-xl font-medium"
|
|
>{{itemInfo.name ? `Artikel: ${itemInfo.name}` : (mode === 'create' ? 'Artikel erstellen' : 'Artikel bearbeiten')}}</h1>
|
|
</template>
|
|
<template #right>
|
|
<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"
|
|
v-if="mode === 'edit' || mode === 'create'"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
<UButton
|
|
v-if="mode === 'show'"
|
|
@click=" router.push(`/products/edit/${itemInfo.id}`)"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
<UTabs
|
|
:items="[{label: 'Informationen'},{label: 'Bestand'},{label: 'Dokumente'}]"
|
|
v-if="mode === 'show' && itemInfo"
|
|
class="p-5"
|
|
v-model="openTab"
|
|
>
|
|
<template #item="{item}">
|
|
<div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
|
|
<div class="w-1/2 mr-5">
|
|
<UCard>
|
|
<UBadge
|
|
v-for="tag in itemInfo.tags"
|
|
class="mr-2"
|
|
|
|
>
|
|
{{tag}}
|
|
</UBadge>
|
|
<UDivider
|
|
class="my-2"
|
|
/>
|
|
|
|
<!--
|
|
<UButton @click="printLabel(itemInfo.ean)">Print Label</UButton>
|
|
-->
|
|
|
|
<table class="w-full">
|
|
<tr>
|
|
<td>Name:</td>
|
|
<td>{{itemInfo.name}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Hersteller:</td>
|
|
<td>{{itemInfo.manufacturer}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Herstellernummer:</td>
|
|
<td>{{itemInfo.manufacturerNumber}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Einheit:</td>
|
|
<td>{{units.find(i => i.id === itemInfo.unit) ? units.find(i => i.id === itemInfo.unit).name : ""}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Tags:</td>
|
|
<td>{{itemInfo.tags.join(", ")}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Artikelkategorien:</td>
|
|
<td>{{itemInfo.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ")}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>EAN:</td>
|
|
<td>{{itemInfo.ean}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Verkaufspreis:</td>
|
|
<td>{{itemInfo.sellingPrice}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Beschreibung:</td>
|
|
<td>{{itemInfo.description}}</td>
|
|
</tr>
|
|
</table>
|
|
</UCard>
|
|
</div>
|
|
<div class="w-1/2">
|
|
<UCard>
|
|
<HistoryDisplay
|
|
type="product"
|
|
v-if="itemInfo"
|
|
:element-id="itemInfo.id"
|
|
render-headline
|
|
/>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="item.label === 'Bestand'"
|
|
>
|
|
<UCard class="mt-5">
|
|
Bestand: {{dataStore.getStockByProductId(itemInfo.id)}} {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : ""}}
|
|
</UCard>
|
|
</div>
|
|
<div
|
|
v-if="item.label === 'Dokumente'"
|
|
>
|
|
<UCard class="mt-5">
|
|
<Toolbar>
|
|
<DocumentUpload
|
|
type="product"
|
|
:element-id="itemInfo.id"
|
|
/>
|
|
</Toolbar>
|
|
|
|
|
|
<DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
|
|
</UCard>
|
|
</div>
|
|
</template>
|
|
</UTabs>
|
|
<UForm
|
|
v-else-if="mode == 'edit' || mode == 'create'"
|
|
class="p-5"
|
|
>
|
|
<UFormGroup
|
|
label="Name:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.name"
|
|
autofocus
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Hersteller:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.manufacturer"
|
|
/>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Hersteller Nr.:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.manufacturerNumber"
|
|
/>
|
|
</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="profileStore.ownTenant.tags.products"
|
|
multiple
|
|
>
|
|
<template #label>
|
|
{{itemInfo.tags.length > 0 ? itemInfo.tags.join(", ") : "Keine Tags ausgewählt"}}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Artikelkategorien:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.productcategories"
|
|
:options="productcategories"
|
|
value-attribute="id"
|
|
option-attribute="name"
|
|
multiple
|
|
>
|
|
<template #label>
|
|
{{itemInfo.productcategories.length > 0 ? itemInfo.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ") : "Keine Kategorien ausgewählt"}}
|
|
</template>
|
|
</USelectMenu>
|
|
</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>
|
|
<UFormGroup
|
|
label="Verkaufspreis:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.sellingPrice"
|
|
type="number"
|
|
steps="0.01"
|
|
>
|
|
<template #trailing>
|
|
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
|
|
</template>
|
|
</UInput>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Beschreibung:"
|
|
>
|
|
<UTextarea
|
|
v-model="itemInfo.description"
|
|
/>
|
|
</UFormGroup>
|
|
</UForm>
|
|
</template>
|
|
|
|
<style scoped>
|
|
td {
|
|
border-bottom: 1px solid lightgrey;
|
|
vertical-align: top;
|
|
padding-bottom: 0.15em;
|
|
padding-top: 0.15em;
|
|
}
|
|
</style> |