Restructured Project Rep
This commit is contained in:
348
components/DocumentDisplay.vue
Normal file
348
components/DocumentDisplay.vue
Normal file
@@ -0,0 +1,348 @@
|
||||
<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,
|
||||
tenant: dataStore.currentTenant
|
||||
}])
|
||||
.select()
|
||||
if(vendorInvoiceError) {
|
||||
console.log(vendorInvoiceError)
|
||||
} else if(vendorInvoiceData) {
|
||||
|
||||
const {data:documentUpdateData,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=" 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>
|
||||
Reference in New Issue
Block a user