347 lines
8.3 KiB
Vue
347 lines
8.3 KiB
Vue
<script setup>
|
|
|
|
const toast = useToast()
|
|
const supabase = useSupabaseClient()
|
|
const dataStore = useDataStore()
|
|
const router = useRouter()
|
|
const props = defineProps({
|
|
documentData: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
openShowModal: {
|
|
type: Boolean,
|
|
required: false,
|
|
}
|
|
|
|
})
|
|
|
|
let {documentData, openShowModal:openShowModalProp } = props;
|
|
const tags = dataStore.getDocumentTags
|
|
const openShowModal = ref(false)
|
|
|
|
//Functions
|
|
const openDocument = async () => {
|
|
//selectedDocument.value = doc
|
|
openShowModal.value = true
|
|
}
|
|
|
|
const updateDocument = async () => {
|
|
|
|
const {url, ...objData} = documentData
|
|
delete objData.url
|
|
|
|
const {data,error} = await supabase
|
|
.from("documents")
|
|
.update(objData)
|
|
.eq('id',objData.id)
|
|
.select()
|
|
|
|
if(error) {
|
|
console.log(error)
|
|
} else {
|
|
toast.add({title: "Dokument aktualisiert"})
|
|
dataStore.fetchDocuments()
|
|
openShowModal.value = false
|
|
}
|
|
|
|
}
|
|
|
|
const createVendorInvoice = async () => {
|
|
const {data:vendorInvoiceData,error:vendorInvoiceError} = await supabase
|
|
.from("incomingInvoices")
|
|
.insert([{
|
|
document: documentData.id,
|
|
}])
|
|
.select()
|
|
if(vendorInvoiceError) {
|
|
console.log(vendorInvoiceError)
|
|
} else if(vendorInvoiceData) {
|
|
|
|
const {data:documentData,error:documentError} = await supabase
|
|
.from("documents")
|
|
.update({
|
|
vendorInvoice: vendorInvoiceData[0].id
|
|
})
|
|
.eq('id',documentData.id)
|
|
.select()
|
|
|
|
if(documentError) {
|
|
console.log(documentError)
|
|
} else {
|
|
toast.add({title: "Dokument aktualisiert"})
|
|
dataStore.fetchDocuments()
|
|
openShowModal.value = false
|
|
}
|
|
|
|
|
|
|
|
|
|
dataStore.fetchIncomingInvoices()
|
|
await router.push("/receipts")
|
|
}
|
|
|
|
}
|
|
|
|
|
|
const archiveDocument = () => {
|
|
documentData.tags.push("Archiviert")
|
|
updateDocument()
|
|
}
|
|
|
|
const resourceOptions = ref([
|
|
{label: 'Projekt', value: 'project', optionAttr: "name"},
|
|
{label: 'Kunde', value: 'customer', optionAttr: "name"},
|
|
{label: 'Lieferant', value: 'vendor', optionAttr: "name"},
|
|
{label: 'Fahrzeug', value: 'vehicle', optionAttr: "licensePlate"},
|
|
{label: 'Objekt', value: 'plant', optionAttr: "name"},
|
|
{label: 'Produkt', value: 'product', optionAttr: "name"}
|
|
])
|
|
const resourceToAssign = ref("project")
|
|
const itemOptions = ref([])
|
|
const idToAssign = ref(null)
|
|
const getItemsBySelectedResource = () => {
|
|
if(resourceToAssign.value === "project") {
|
|
itemOptions.value = dataStore.projects
|
|
} else if(resourceToAssign.value === "customer") {
|
|
itemOptions.value = dataStore.customers
|
|
} else if(resourceToAssign.value === "vendor") {
|
|
itemOptions.value = dataStore.vendors
|
|
} else if(resourceToAssign.value === "vehicle") {
|
|
itemOptions.value = dataStore.vehicles
|
|
} else if(resourceToAssign.value === "product") {
|
|
itemOptions.value = dataStore.products
|
|
} else if(resourceToAssign.value === "plant") {
|
|
itemOptions.value = dataStore.plants
|
|
} else {
|
|
itemOptions.value = []
|
|
}
|
|
}
|
|
getItemsBySelectedResource()
|
|
|
|
const updateDocumentAssignment = async () => {
|
|
documentData[resourceToAssign.value] = idToAssign.value
|
|
await updateDocument()
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="documentListItem">
|
|
<object
|
|
:data="documentData.url"
|
|
class="previewEmbed"
|
|
type="application/pdf"
|
|
v-if="!documentData.tags.includes('Bild')"
|
|
/>
|
|
<img
|
|
v-else
|
|
alt=""
|
|
:src="documentData.url"
|
|
/>
|
|
|
|
|
|
|
|
<UButton
|
|
@click="openDocument"
|
|
class="mt-3"
|
|
>
|
|
<UIcon name="i-heroicons-eye-solid" />
|
|
</UButton>
|
|
<UToggle
|
|
v-model="documentData.selected"
|
|
class="ml-2"
|
|
/>
|
|
<br>
|
|
<UBadge
|
|
v-if="documentData.vendorInvoice"
|
|
>{{dataStore.incomingInvoices.find(item => item.id === documentData.vendorInvoice) ? dataStore.incomingInvoices.find(item => item.id === documentData.vendorInvoice).reference : ''}}</UBadge>
|
|
<UBadge
|
|
v-if="documentData.inDatev"
|
|
>DATEV</UBadge>
|
|
</div>
|
|
|
|
|
|
|
|
<USlideover
|
|
v-model="openShowModal"
|
|
fullscreen
|
|
>
|
|
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
|
<template #header>
|
|
<div class="flex items-center gap-2">
|
|
<UBadge
|
|
v-for="tag in documentData.tags"
|
|
>
|
|
{{tag}}
|
|
</UBadge>
|
|
</div>
|
|
</template>
|
|
|
|
<UContainer class="h-full" :ui="{padding: 'px-1 sm:px-1 lg:px-1'}">
|
|
<object
|
|
class="h-full w-full"
|
|
:data="documentData.url"
|
|
type="application/pdf"
|
|
v-if="!documentData.tags.includes('Bild')"
|
|
/>
|
|
<img
|
|
class="h-full w-full"
|
|
:src="documentData.url"
|
|
alt=""
|
|
v-else
|
|
/>
|
|
</UContainer>
|
|
|
|
<template #footer>
|
|
|
|
<UButtonGroup>
|
|
<UButton
|
|
@click="archiveDocument"
|
|
>
|
|
Archivieren
|
|
</UButton>
|
|
<UButton
|
|
v-if="documentData.tags.includes('Eingangsrechnung')"
|
|
@click="createVendorInvoice"
|
|
>
|
|
Eingangsrechnung erstellen
|
|
</UButton>
|
|
</UButtonGroup>
|
|
<br>
|
|
<a
|
|
:href="documentData.url"
|
|
target="_blank"
|
|
>In neuen Tab anzeigen</a>
|
|
|
|
<UFormGroup
|
|
label="Tags ändern:"
|
|
>
|
|
<USelectMenu
|
|
:options="tags"
|
|
v-model="documentData.tags"
|
|
@close="updateDocument"
|
|
multiple
|
|
>
|
|
<template #label>
|
|
{{documentData.tags.length}} ausgewählt
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<p>Dokument zuweisen:</p>
|
|
<UFormGroup
|
|
label="Resource auswählen"
|
|
>
|
|
<USelectMenu
|
|
:options="resourceOptions"
|
|
v-model="resourceToAssign"
|
|
value-attribute="value"
|
|
option-attribute="label"
|
|
@change="getItemsBySelectedResource"
|
|
>
|
|
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Eintrag auswählen:"
|
|
>
|
|
|
|
</UFormGroup>
|
|
|
|
<USelectMenu
|
|
:options="itemOptions"
|
|
v-model="idToAssign"
|
|
:option-attribute="resourceOptions.find(i => i.value === resourceToAssign)? resourceOptions.find(i => i.value === resourceToAssign).optionAttr : 'name'"
|
|
value-attribute="id"
|
|
@change="updateDocumentAssignment"
|
|
></USelectMenu>
|
|
|
|
|
|
<!-- <UFormGroup
|
|
label="Projekt zuweisen:"
|
|
>
|
|
<USelectMenu
|
|
:options="dataStore.projects"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
v-model="documentData.project"
|
|
@change="updateDocument"
|
|
searchable
|
|
:search-attributes="['name']"
|
|
>
|
|
<template #label>
|
|
{{dataStore.projects.find(item => item.id === documentData.project) ? dataStore.projects.find(item => item.id === documentData.project).name : "Kein Projekt ausgewählt" }}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Kunde zuweisen:"
|
|
>
|
|
<USelectMenu
|
|
:options="dataStore.customers"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
v-model="documentData.customer"
|
|
@change="updateDocument"
|
|
searchable
|
|
:search-attributes="['name']"
|
|
>
|
|
<template #label>
|
|
{{dataStore.customers.find(item => item.id === documentData.customer) ? dataStore.customers.find(item => item.id === documentData.customer).name : "Kein Kunde ausgewählt" }}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>-->
|
|
|
|
|
|
</template>
|
|
</UCard>
|
|
|
|
|
|
<!-- <UCard class="h-full">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</UCard>-->
|
|
</USlideover>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.documentListItem {
|
|
display:block;
|
|
width: 15vw;
|
|
height: 33vh;
|
|
padding:1em;
|
|
margin: 0.7em;
|
|
border: 1px solid lightgrey;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.documentListItem:hover {
|
|
border: 1px solid #69c350;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.previewEmbed {
|
|
width: 100%;
|
|
height: 22vh;
|
|
overflow: hidden;
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
|
|
.previewEmbed::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
</style> |