Document Restructure
Introduced ExternalDevices Settingspage Added DocumentDisplay.vue Component Some Changes to Spaces
This commit is contained in:
@@ -107,6 +107,11 @@ const navLinks = [
|
||||
to: "/inventory",
|
||||
icon: "i-heroicons-square-3-stack-3d"
|
||||
},
|
||||
{
|
||||
label: "Lagerplätze",
|
||||
to: "/inventory/spaces",
|
||||
icon: "i-heroicons-square-3-stack-3d"
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
@@ -335,6 +340,20 @@ const items = [
|
||||
height: 85vh;
|
||||
}
|
||||
|
||||
.documentList {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 85vh;
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.documentList::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.scrollList {
|
||||
overflow-y: scroll;
|
||||
height: 85vh;
|
||||
|
||||
283
spaces/components/DocumentDisplay.vue
Normal file
283
spaces/components/DocumentDisplay.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<script setup>
|
||||
|
||||
const toast = useToast()
|
||||
const supabase = useSupabaseClient()
|
||||
const props = defineProps({
|
||||
document: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
openShowModal: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
}
|
||||
})
|
||||
|
||||
const {document, openShowModal:openShowModalProp } = props;
|
||||
const {fetchDocuments, getDocumentTags} = useDataStore()
|
||||
const {projects, customers} = storeToRefs(useDataStore())
|
||||
const tags = getDocumentTags
|
||||
const openShowModal = ref(false)
|
||||
|
||||
//Functions
|
||||
const openDocument = async () => {
|
||||
console.log("open")
|
||||
//selectedDocument.value = doc
|
||||
openShowModal.value = true
|
||||
}
|
||||
|
||||
const uploadFiles = async () => {
|
||||
const uploadSingleFile = async (file) => {
|
||||
|
||||
const {data, error} = await supabase
|
||||
.storage
|
||||
.from("files")
|
||||
.upload(`${user.value.app_metadata.tenant}/${file.name}`, file)
|
||||
|
||||
if (error) {
|
||||
console.log(error)
|
||||
} else if (data) {
|
||||
const returnPath = data.path
|
||||
|
||||
if (error) {
|
||||
|
||||
} else {
|
||||
const files = (await supabase.storage.from('files').list(`${user.value.app_metadata.tenant}/`, {
|
||||
limit: 100,
|
||||
offset: 0,
|
||||
sortBy: {column: 'name', order: 'asc'}
|
||||
})).data
|
||||
|
||||
fileUploadFormData.value.path = returnPath
|
||||
|
||||
const {data, error} = await supabase
|
||||
.from("documents")
|
||||
.insert([fileUploadFormData.value])
|
||||
.select()
|
||||
if(error) console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
uploadInProgress.value = true
|
||||
|
||||
let files = document.getElementById("fileUploadInput").files
|
||||
|
||||
if(files.length === 1) {
|
||||
await uploadSingleFile(files[0])
|
||||
} else if( files.length > 1) {
|
||||
|
||||
for(let i = 0; i < files.length; i++){
|
||||
uploadSingleFile(files[i])
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
uploadModalOpen.value = false;
|
||||
uploadInProgress.value = false;
|
||||
fetchDocuments()
|
||||
}
|
||||
|
||||
|
||||
const updateDocument = async () => {
|
||||
|
||||
|
||||
let objData = document
|
||||
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"})
|
||||
fetchDocuments()
|
||||
openShowModal.value = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="documentListItem">
|
||||
<embed
|
||||
:src="document.url"
|
||||
class="previewEmbed"
|
||||
/>
|
||||
<UButton
|
||||
@click="openDocument"
|
||||
class="mt-3"
|
||||
>
|
||||
<UIcon name="i-heroicons-eye-solid" />
|
||||
</UButton>
|
||||
<UToggle
|
||||
v-model="document.selected"
|
||||
class="ml-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Slideovers -->
|
||||
<USlideover
|
||||
v-model="uploadModalOpen"
|
||||
>
|
||||
|
||||
<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>
|
||||
Datei Hochladen
|
||||
</template>
|
||||
|
||||
<div class="h-full">
|
||||
<UFormGroup
|
||||
label="Datei:"
|
||||
>
|
||||
<UInput
|
||||
type="file"
|
||||
id="fileUploadInput"
|
||||
multiple
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Tags:"
|
||||
class="mt-3"
|
||||
>
|
||||
<USelectMenu
|
||||
multiple
|
||||
searchable
|
||||
searchable-placeholder="Suchen..."
|
||||
:options="tags"
|
||||
v-model="fileUploadFormData.tags"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="!uploadInProgress"
|
||||
class="mt-3"
|
||||
@click="uploadFiles"
|
||||
>Hochladen</UButton>
|
||||
<UProgress
|
||||
v-else
|
||||
animation="carousel"
|
||||
/>
|
||||
</template>
|
||||
</UCard>
|
||||
</USlideover>
|
||||
<USlideover
|
||||
v-model="openShowModal"
|
||||
fullscreen
|
||||
>
|
||||
<UCard class="h-full">
|
||||
<embed
|
||||
class="bigPreview mb-3"
|
||||
:src="document.url"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<UBadge
|
||||
v-for="tag in document.tags"
|
||||
>
|
||||
{{tag}}
|
||||
</UBadge>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Tags ändern:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="tags"
|
||||
v-model="document.tags"
|
||||
@close="updateDocument"
|
||||
multiple
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Projekt zuweisen:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="projects"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
v-model="document.project"
|
||||
@change="updateDocument"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{projects.find(item => item.id === document.project) ? projects.find(item => item.id === document.project).name : document.project }}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Kunde zuweisen:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="customers"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
v-model="document.customer"
|
||||
@change="updateDocument"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{customers.find(item => item.id === document.customer) ? customers.find(item => item.id === document.customer).name : document.customer }}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
|
||||
</UCard>
|
||||
</USlideover>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.documentListItem {
|
||||
display:block;
|
||||
width: 15vw;
|
||||
height: 30vh;
|
||||
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;
|
||||
}
|
||||
|
||||
.bigPreview {
|
||||
height: 70vh;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -45,6 +45,7 @@
|
||||
"pinia": "^2.1.7",
|
||||
"socket.io-client": "^4.7.2",
|
||||
"uuidv4": "^6.2.13",
|
||||
"v-calendar": "^3.1.2"
|
||||
"v-calendar": "^3.1.2",
|
||||
"vue-barcode-reader": "^1.0.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,7 +23,8 @@ const mode = ref(route.params.mode || "show")
|
||||
const customerInfo = ref({
|
||||
name: "",
|
||||
customerNumber: 0,
|
||||
infoData: {}
|
||||
infoData: {},
|
||||
active: true
|
||||
})
|
||||
|
||||
//Functions
|
||||
|
||||
@@ -1,176 +1,3 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="controlHeader">
|
||||
<UButton @click="uploadModalOpen = true">Hochladen</UButton>
|
||||
<UButton
|
||||
@click="downloadSelected"
|
||||
class="ml-2"
|
||||
:disabled="documents.filter(doc => doc.selected).length === 0"
|
||||
>Herunterladen</UButton>
|
||||
<UModal
|
||||
v-model="uploadModalOpen"
|
||||
>
|
||||
<UCard class="p-4">
|
||||
|
||||
<template #header>
|
||||
Datei hochladen
|
||||
</template>
|
||||
|
||||
<UFormGroup
|
||||
label="Datei:"
|
||||
>
|
||||
<UInput
|
||||
type="file"
|
||||
id="fileUploadInput"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<!-- <UFormGroup
|
||||
label="Name:"
|
||||
class="mt-3"
|
||||
>
|
||||
<UInput
|
||||
v-model="fileUploadFormData.name"
|
||||
/>
|
||||
</UFormGroup>-->
|
||||
<UFormGroup
|
||||
label="Tags:"
|
||||
class="mt-3"
|
||||
>
|
||||
<USelectMenu
|
||||
multiple
|
||||
searchable
|
||||
searchable-placeholder="Suchen..."
|
||||
:options="tags"
|
||||
v-model="fileUploadFormData.tags"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Ordner:"
|
||||
class="mt-3"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="folders"
|
||||
v-model="fileUploadFormData.folder"
|
||||
value-attribute="label"
|
||||
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
class="mt-3"
|
||||
@click="uploadFile"
|
||||
>Hochladen</UButton>
|
||||
</template>
|
||||
|
||||
|
||||
</UCard>
|
||||
|
||||
</UModal>
|
||||
</div>
|
||||
<div >
|
||||
<USlideover
|
||||
v-model="showDocumentModal"
|
||||
fullscreen
|
||||
>
|
||||
<UCard class="h-full">
|
||||
<embed
|
||||
class="bigPreview mb-3"
|
||||
:src="selectedDocument.url"
|
||||
/>
|
||||
|
||||
<UBadge
|
||||
v-for="tag in selectedDocument.tags"
|
||||
class="ml-2"
|
||||
>
|
||||
{{tag}}
|
||||
</UBadge>
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Ordner ändern:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="folders"
|
||||
v-on:change="changeFolder"
|
||||
v-model="newFolder"
|
||||
value-attribute="label"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Tags ändern:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="tags"
|
||||
v-model="selectedDocument.tags"
|
||||
@change="updateDocument"
|
||||
multiple
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
|
||||
</UCard>
|
||||
</USlideover>
|
||||
<!-- TODO: Tab Height always Full -->
|
||||
<UTabs
|
||||
:items="folders"
|
||||
orientation="vertical"
|
||||
v-model="tabOpen"
|
||||
:ui="{ wrapper: 'flex items-top gap-4', list: { width: 'w-72', padding: 'p-3' } }"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<div class="documentList">
|
||||
<a
|
||||
v-if="documents.filter(doc => doc.folder === item.label).length > 0"
|
||||
v-for="document in documents.filter(doc => doc.folder === item.label)"
|
||||
class="documentListItem"
|
||||
>
|
||||
<embed
|
||||
:src="document.url"
|
||||
class="previewEmbed"
|
||||
/>
|
||||
<UButton
|
||||
@click="openDocument(document)"
|
||||
class="mt-3"
|
||||
>
|
||||
<UIcon name="i-heroicons-eye-solid" />
|
||||
</UButton>
|
||||
<UToggle
|
||||
v-model="document.selected"
|
||||
class="ml-2"
|
||||
/>
|
||||
|
||||
<!-- {{document.name}}<br>-->
|
||||
<!-- <UBadge
|
||||
v-for="tag in document.tags"
|
||||
variant="outline"
|
||||
color="primary"
|
||||
>{{tag}}</UBadge>
|
||||
<UBadge
|
||||
color="rose"
|
||||
variant="outline"
|
||||
>{{document.state}}</UBadge>-->
|
||||
|
||||
</a>
|
||||
<div v-else>
|
||||
<p>Keine Dokumente in diesem Ordner</p>
|
||||
<UButton
|
||||
@click="uploadModalOpen = true"
|
||||
>
|
||||
Hochladen
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UTabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
|
||||
@@ -182,145 +9,93 @@ const supabase = useSupabaseClient()
|
||||
const user = useSupabaseUser()
|
||||
const toast = useToast()
|
||||
|
||||
const {documents} = storeToRefs(useDataStore())
|
||||
const {fetchDocuments} = useDataStore()
|
||||
const {documents, projects, customers} = storeToRefs(useDataStore())
|
||||
const {fetchDocuments, getDocumentTags} = useDataStore()
|
||||
|
||||
fetchDocuments()
|
||||
|
||||
const tabOpen = ref(0)
|
||||
const uploadModalOpen = ref(false)
|
||||
const uploadInProgress = ref(false)
|
||||
const fileUploadFormData = ref({
|
||||
tags: [],
|
||||
folder: "",
|
||||
object: "",
|
||||
tags: ["Eingang"],
|
||||
project: null,
|
||||
customer: null,
|
||||
path: ""
|
||||
})
|
||||
|
||||
const selectedDocuments = ref([])
|
||||
|
||||
let tags = ["Eingangsrechnung","Ausgangrechnung","Mahnung", "Dokument", "E-Mail Anhang"]
|
||||
const folders = [
|
||||
{
|
||||
label: "Eingang",
|
||||
},
|
||||
{
|
||||
label: "Eingangsrechnungen"
|
||||
},
|
||||
{
|
||||
label: "Ausgangsrechnungen"
|
||||
},
|
||||
{
|
||||
label: "Fahrzeuge"
|
||||
},
|
||||
{
|
||||
label: "Dokumente"
|
||||
},
|
||||
{
|
||||
label: "Archiv"
|
||||
}
|
||||
]
|
||||
const uploadFile = async () => {
|
||||
const file = document.getElementById("fileUploadInput").files[0]
|
||||
let tags = getDocumentTags
|
||||
|
||||
const {data,error} = await supabase
|
||||
const selectedTags = ref(["Eingang"])
|
||||
|
||||
const filteredDocuments = computed(() => {
|
||||
|
||||
return documents.value.filter(doc => doc.tags.filter(tag => selectedTags.value.find(t => t === tag)).length > 0)
|
||||
|
||||
|
||||
})
|
||||
|
||||
const uploadFiles = async () => {
|
||||
const uploadSingleFile = async (file) => {
|
||||
|
||||
const {data, error} = await supabase
|
||||
.storage
|
||||
.from("documents")
|
||||
.upload(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${file.name}`,file)
|
||||
.from("files")
|
||||
.upload(`${user.value.app_metadata.tenant}/${file.name}`, file)
|
||||
|
||||
if (error) {
|
||||
console.log(error)
|
||||
} else if (data) {
|
||||
const returnPath = data.path
|
||||
|
||||
if(error) {
|
||||
if (error) {
|
||||
|
||||
} else {
|
||||
console.log(returnPath)
|
||||
const files = (await supabase.storage.from('documents').list(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/`, {limit: 100, offset: 0, sortBy: { column: 'name', order: 'asc' }})).data
|
||||
console.log(files)
|
||||
const fileId = files.find(temp => returnPath.includes(temp.name)).id
|
||||
const files = (await supabase.storage.from('files').list(`${user.value.app_metadata.tenant}/`, {
|
||||
limit: 100,
|
||||
offset: 0,
|
||||
sortBy: {column: 'name', order: 'asc'}
|
||||
})).data
|
||||
|
||||
fileUploadFormData.value.object = fileId
|
||||
fileUploadFormData.value.path = returnPath
|
||||
console.log(fileUploadFormData.value)
|
||||
|
||||
const {data,error} = await supabase
|
||||
const {data, error} = await supabase
|
||||
.from("documents")
|
||||
.insert([fileUploadFormData.value])
|
||||
.select()
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
if(error) console.log(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
uploadInProgress.value = true
|
||||
|
||||
let files = document.getElementById("fileUploadInput").files
|
||||
|
||||
if(files.length === 1) {
|
||||
await uploadSingleFile(files[0])
|
||||
} else if( files.length > 1) {
|
||||
|
||||
for(let i = 0; i < files.length; i++){
|
||||
uploadSingleFile(files[i])
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
uploadModalOpen.value = false;
|
||||
}
|
||||
|
||||
const updateDocument = async () => {
|
||||
console.log(selectedDocument.value)
|
||||
|
||||
let objData = selectedDocument.value
|
||||
delete objData.url
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("documents")
|
||||
.update(objData)
|
||||
.eq('id',objData.id)
|
||||
.select()
|
||||
console.log(data)
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
toast.add({title: "Dokument aktualisiert"})
|
||||
selectedDocument.value = data[0]
|
||||
showDocumentModal.value = false
|
||||
uploadInProgress.value = false;
|
||||
fetchDocuments()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const changeFolder = async () => {
|
||||
console.log("Change Folder")
|
||||
console.log(selectedDocument.value)
|
||||
|
||||
let filename = selectedDocument.value.path.split("/")[2]
|
||||
let oldPath = selectedDocument.value.path
|
||||
let newPath = `${user.value.app_metadata.tenant}/${newFolder.value}/${filename}`
|
||||
console.log(oldPath)
|
||||
console.log(newPath)
|
||||
|
||||
const { data, error } = await supabase
|
||||
.storage
|
||||
.from('documents')
|
||||
.move(oldPath,newPath )
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
console.log(data)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const newFolder = ref("")
|
||||
|
||||
const selectedDocument = ref({})
|
||||
const showDocumentModal = ref(false)
|
||||
|
||||
const openDocument = async (document) => {
|
||||
console.log("open")
|
||||
selectedDocument.value = document
|
||||
showDocumentModal.value = true
|
||||
|
||||
}
|
||||
|
||||
|
||||
const downloadSelected = async () => {
|
||||
const bucket = "documents";
|
||||
const bucket = "files";
|
||||
|
||||
let files = []
|
||||
documents.value.filter(doc => doc.selected).forEach(doc => files.push(doc.path))
|
||||
|
||||
console.log(files)
|
||||
|
||||
// If there are no files in the folder, throw an error
|
||||
// If there are no files in the folder, throw an error
|
||||
if (!files || !files.length) {
|
||||
throw new Error("No files to download");
|
||||
}
|
||||
@@ -373,44 +148,91 @@ const downloadSelected = async () => {
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UButton @click="uploadModalOpen = true">Hochladen</UButton>
|
||||
<UButton
|
||||
@click="downloadSelected"
|
||||
:disabled="documents.filter(doc => doc.selected).length === 0"
|
||||
>Herunterladen</UButton>
|
||||
|
||||
<USelectMenu
|
||||
:options="tags"
|
||||
v-model="selectedTags"
|
||||
multiple
|
||||
>
|
||||
<template #label>
|
||||
<span v-if="selectedTags.length" class="truncate">{{ selectedTags.length }} ausgewählt</span>
|
||||
<span v-else>Tags auswählen</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
|
||||
|
||||
</div>
|
||||
<div >
|
||||
<USlideover
|
||||
v-model="uploadModalOpen"
|
||||
>
|
||||
|
||||
<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>
|
||||
Datei Hochladen
|
||||
</template>
|
||||
|
||||
<div class="h-full">
|
||||
<UFormGroup
|
||||
label="Datei:"
|
||||
>
|
||||
<UInput
|
||||
type="file"
|
||||
id="fileUploadInput"
|
||||
multiple
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Tags:"
|
||||
class="mt-3"
|
||||
>
|
||||
<USelectMenu
|
||||
multiple
|
||||
searchable
|
||||
searchable-placeholder="Suchen..."
|
||||
:options="tags"
|
||||
v-model="fileUploadFormData.tags"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="!uploadInProgress"
|
||||
class="mt-3"
|
||||
@click="uploadFiles"
|
||||
>Hochladen</UButton>
|
||||
<UProgress
|
||||
v-else
|
||||
animation="carousel"
|
||||
/>
|
||||
</template>
|
||||
</UCard>
|
||||
</USlideover>
|
||||
|
||||
<div class="documentList">
|
||||
<DocumentDisplay
|
||||
v-for="document in filteredDocuments"
|
||||
:document="document"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
.documentList {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height: 85vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.documentListItem {
|
||||
display:block;
|
||||
width: 15vw;
|
||||
height: 30vh;
|
||||
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;
|
||||
}
|
||||
|
||||
.bigPreview {
|
||||
height: 70vh;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -3,18 +3,18 @@ definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
import {StreamBarcodeReader} from "vue-barcode-reader"
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const spaces = (await supabase.from("spaces").select()).data
|
||||
const movements = (await supabase.from("movements").select()).data
|
||||
const products = (await supabase.from("products").select()).data
|
||||
|
||||
const {spaces, movements, products} = storeToRefs(useDataStore())
|
||||
|
||||
|
||||
const searchinput = ref("")
|
||||
const mode = ref("")
|
||||
|
||||
const toast = useToast()
|
||||
const showReader = ref(false)
|
||||
|
||||
const inventoryChangeData = ref({
|
||||
productId: "",
|
||||
@@ -47,25 +47,41 @@ const createMovement = async () => {
|
||||
} else if (mode.value === 'change'){}
|
||||
|
||||
inventoryChangeData.value = {
|
||||
productId: "",
|
||||
spaceId: "",
|
||||
productId: 0,
|
||||
spaceId: 0,
|
||||
quantity: 0
|
||||
}
|
||||
}
|
||||
|
||||
function checkArticle(productId) {
|
||||
return products.filter(product => product.id === Number(productId)).length > 0;
|
||||
return products.value.filter(product =>product.ean === productId).length > 0;
|
||||
}
|
||||
function checkSpaceId(spaceId) {
|
||||
return spaces.filter(space => space.id === spaceId).length > 0;
|
||||
return spaces.value.filter(space => Number(space.spaceNumber) === Number(spaceId)).length > 0;
|
||||
}
|
||||
|
||||
function changeFocusToSpaceId() {
|
||||
document.getElementById('spaceIdInput').focus()
|
||||
}
|
||||
|
||||
function changeFocusToQuantity() {
|
||||
document.getElementById('quantityInput').focus()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="main">
|
||||
<router-link to="/inventory/spaces"><UButton>Lagerplätze</UButton></router-link>
|
||||
|
||||
<UModal
|
||||
v-model="showReader"
|
||||
>
|
||||
<StreamBarcodeReader
|
||||
@decode="console.log"
|
||||
@loaded="console.log"
|
||||
/>
|
||||
</UModal>
|
||||
{{inventoryChangeData}}
|
||||
{{spaces}}
|
||||
|
||||
<div class="my-3">
|
||||
<UButton @click="mode = 'incoming'" class="ml-3" >Wareneingang</UButton>
|
||||
@@ -81,8 +97,8 @@ function checkSpaceId(spaceId) {
|
||||
<UInput
|
||||
variant="outline"
|
||||
:color="checkArticle(inventoryChangeData.productId) ? 'primary' : 'rose'"
|
||||
placeholder="Barcode / Suche"
|
||||
v-model="inventoryChangeData.productId"
|
||||
v-on:keyup.enter="changeFocusToSpaceId"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
@@ -90,13 +106,19 @@ function checkSpaceId(spaceId) {
|
||||
label="Lagerplatz:"
|
||||
class="mt-3 w-80"
|
||||
><!--.map(space => {return {id: space.id, name: space.spaceNumber}}-->
|
||||
<USelectMenu
|
||||
<!-- <USelectMenu
|
||||
:options="spaces"
|
||||
searchable
|
||||
option-attribute="spaceNumber"
|
||||
:color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
|
||||
v-model="inventoryChangeData.spaceId"
|
||||
value-attribute="id"
|
||||
/>-->
|
||||
<UInput
|
||||
v-model="inventoryChangeData.spaceId"
|
||||
:color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
|
||||
id="spaceIdInput"
|
||||
v-on:keyup.enter="changeFocusToQuantity"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
@@ -110,6 +132,7 @@ function checkSpaceId(spaceId) {
|
||||
placeholder="Anzahl"
|
||||
v-model="inventoryChangeData.quantity"
|
||||
type="number"
|
||||
id="quantityInput"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UButton
|
||||
@@ -119,6 +142,9 @@ function checkSpaceId(spaceId) {
|
||||
>
|
||||
Bestätigen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="showReader = true"
|
||||
>show</UButton>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,153 +0,0 @@
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const {spaces,movements,products,units} = storeToRefs(useDataStore())
|
||||
const {movementsBySpace, getProductById} = useDataStore()
|
||||
|
||||
console.log(movements)
|
||||
let selectedItem = ref({})
|
||||
const showCreateSpace = ref(false)
|
||||
|
||||
const selectItem = (item) => {
|
||||
selectedItem.value = item
|
||||
spaceMovements.value = movementsBySpace(item.id)//movements.filter(movement => movement.spaceId === selectedItem.value.id)
|
||||
spaceProducts.value = []
|
||||
spaceMovements.value.forEach(movement => {
|
||||
if(spaceProducts.value.filter(product => product.id === movement.productId).length === 0) spaceProducts.value.push(getProductById(movement.productId))
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
const spaceTypes = ["Regalplatz", "Kiste", "Palettenplatz","KFZ"]
|
||||
|
||||
const createSpaceData = ref({})
|
||||
const createSpace = async () => {
|
||||
let lastSpaceNumber = 0
|
||||
spaces.forEach(space => {
|
||||
if(space.spaceNumber > lastSpaceNumber) lastSpaceNumber = space.spaceNumber
|
||||
})
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("spaces")
|
||||
.insert([ {...createSpaceData.value, spaceNumber: String(Number(lastSpaceNumber)+1)}])
|
||||
.select()
|
||||
|
||||
console.log(error)
|
||||
|
||||
showCreateSpace.value = false
|
||||
createSpaceData.value = {}
|
||||
|
||||
}
|
||||
|
||||
const spaceProducts = ref([])
|
||||
const spaceMovements = ref([])
|
||||
|
||||
function getSpaceProductCount(productId) {
|
||||
let productMovements = spaceMovements.value.filter(movement => movement.productId === productId)
|
||||
let count = 0;
|
||||
productMovements.forEach(movement => count += movement.quantity)
|
||||
|
||||
return count
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="main">
|
||||
<div id="left">
|
||||
<UButton @click="showCreateSpace = true">
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UModal v-model="showCreateSpace">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Lagerplatz erstellen
|
||||
</template>
|
||||
<UFormGroup
|
||||
label="Beschreibung:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="createSpaceData.description"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="createSpaceData.type"
|
||||
:options="spaceTypes"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<template #footer>
|
||||
<UButton @click="createSpace">Erstellen</UButton>
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
<a v-for="item in spaces" @click="selectItem(item)">
|
||||
<UCard class="listItem">
|
||||
{{item.spaceNumber}} - {{item.type}}
|
||||
</UCard>
|
||||
</a>
|
||||
</div>
|
||||
<div id="right">
|
||||
<div v-if="selectedItem.id">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<UBadge class="mr-1">{{selectedItem.spaceNumber}}</UBadge>{{selectedItem.type}}
|
||||
</template>
|
||||
{{selectedItem.description}}
|
||||
|
||||
</UCard>
|
||||
<div v-if="spaceProducts.length > 0">
|
||||
<p class="mt-5">Artikel in diesem Lagerplatz</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Artikel</th>
|
||||
<th>Anzahl</th>
|
||||
<th>Einheit</th>
|
||||
</tr>
|
||||
<tr v-for="product in spaceProducts">
|
||||
<td>{{product.name}}</td>
|
||||
<td>{{getSpaceProductCount(product.id)}}</td>
|
||||
<td>{{units.find(unit => unit.id === product.unit).name}}</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#left {
|
||||
width: 25vw;
|
||||
}
|
||||
|
||||
#right {
|
||||
width: 60vw;
|
||||
padding-left: 3vw;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: 1em;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
241
spaces/pages/inventory/spaces/[mode]/[[id]].vue
Normal file
241
spaces/pages/inventory/spaces/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<script setup>
|
||||
import axios from "axios";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
//
|
||||
const supabase = useSupabaseClient()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
|
||||
|
||||
//Store
|
||||
const {spaces,movements,products,units,ownTenant} = storeToRefs(useDataStore())
|
||||
const {fetchSpaces, getSpaceById, movementsBySpace, getProductById} = useDataStore()
|
||||
|
||||
let currentItem = null
|
||||
|
||||
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({
|
||||
spaceNumber: 0
|
||||
})
|
||||
const spaceTypes = ["Regalplatz", "Kiste", "Palettenplatz"]
|
||||
const spaceProducts = ref([])
|
||||
const spaceMovements = ref([])
|
||||
|
||||
//Functions
|
||||
const setupPage = async () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem = await getSpaceById(Number(useRoute().params.id))
|
||||
console.log(currentItem)
|
||||
|
||||
spaceMovements.value = movementsBySpace(currentItem.id)
|
||||
spaceProducts.value = []
|
||||
spaceMovements.value.forEach(movement => {
|
||||
if(spaceProducts.value.filter(product => product.id === movement.productId).length === 0) spaceProducts.value.push(getProductById(movement.productId))
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem
|
||||
|
||||
if(mode.value === "create") {
|
||||
let lastSpaceNumber = 0
|
||||
spaces.value.forEach(space => {
|
||||
if(space.spaceNumber > lastSpaceNumber) lastSpaceNumber = space.spaceNumber
|
||||
})
|
||||
itemInfo.value.spaceNumber = lastSpaceNumber + 1
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
const createItem = async () => {
|
||||
|
||||
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("spaces")
|
||||
.insert([itemInfo.value])
|
||||
.select()
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
mode.value = "show"
|
||||
itemInfo.value = {}
|
||||
toast.add({title: "Lagerplatz erfolgreich erstellt"})
|
||||
await fetchSpaces()
|
||||
router.push(`/inventory/spaces/show/${data[0].id}`)
|
||||
setupPage()
|
||||
}
|
||||
}
|
||||
|
||||
const editItem = async () => {
|
||||
router.push(`/inventory/spaces/edit/${currentItem.id}`)
|
||||
setupPage()
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
router.push(`/inventory/spaces/`)
|
||||
}
|
||||
|
||||
const updateItem = async () => {
|
||||
const {error} = await supabase
|
||||
.from("spaces")
|
||||
.update(itemInfo.value)
|
||||
.eq('id',itemInfo.value.id)
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
mode.value = "show"
|
||||
itemInfo.value = {}
|
||||
toast.add({title: "Lagerplatz erfolgreich gespeichert"})
|
||||
fetchSpaces()
|
||||
}
|
||||
}
|
||||
|
||||
function getSpaceProductCount(productId) {
|
||||
let productMovements = spaceMovements.value.filter(movement => movement.productId === productId)
|
||||
let count = 0;
|
||||
productMovements.forEach(movement => count += movement.quantity)
|
||||
|
||||
return count
|
||||
|
||||
}
|
||||
|
||||
const printSpaceLabel = async () => {
|
||||
|
||||
|
||||
|
||||
axios
|
||||
.post(`http://${ownTenant.value.labelPrinterIp}/pstprnt`, `^XA^FO10,20^BCN,100^FD${currentItem.spaceNumber}^XZ` )
|
||||
.then(console.log)
|
||||
.catch(console.log)
|
||||
}
|
||||
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UCard v-if="currentItem && mode == 'show'" >
|
||||
<template #header>
|
||||
<UBadge>{{currentItem.spaceNumber}}</UBadge> {{currentItem.type}}
|
||||
</template>
|
||||
|
||||
{{currentItem.description}}
|
||||
|
||||
<UDivider
|
||||
class="my-2"
|
||||
/>
|
||||
|
||||
<div v-if="spaceProducts.length > 0">
|
||||
<p class="mt-5">Artikel in diesem Lagerplatz</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Artikel</th>
|
||||
<th>Anzahl</th>
|
||||
<th>Einheit</th>
|
||||
</tr>
|
||||
<tr v-for="product in spaceProducts">
|
||||
<td>{{product.name}}</td>
|
||||
<td>{{getSpaceProductCount(product.id)}}</td>
|
||||
<td>{{units.find(unit => unit.id === product.unit).name}}</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<p v-else>Es befinden sich keine Artikel in diesem Lagerplatz</p>
|
||||
|
||||
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="mode == 'show' && currentItem.id"
|
||||
@click="editItem"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="mode == 'show' && currentItem.id"
|
||||
@click="printSpaceLabel"
|
||||
>
|
||||
Label Drucken
|
||||
</UButton>
|
||||
<UButton
|
||||
color="red"
|
||||
class="ml-2"
|
||||
disabled
|
||||
>
|
||||
Archivieren
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
</UCard>
|
||||
<UCard v-else-if="mode == 'edit' || mode == 'create'" >
|
||||
<template #header>
|
||||
<UBadge>{{itemInfo.spaceNumber}}</UBadge>{{itemInfo.type}}
|
||||
</template>
|
||||
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="spaceTypes"
|
||||
v-model="itemInfo.type"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Beschreibung.:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.description"
|
||||
/>
|
||||
</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>
|
||||
80
spaces/pages/inventory/spaces/index.vue
Normal file
80
spaces/pages/inventory/spaces/index.vue
Normal file
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
|
||||
<div class="flex items-center gap-1">
|
||||
<UButton @click="router.push(`/inventory/spaces/create/`)">+ Lagerplatz</UButton>
|
||||
|
||||
<UInput
|
||||
v-model="searchString"
|
||||
placeholder="Suche..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="itemColumns"
|
||||
@select="selectItem"
|
||||
|
||||
/>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const {spaces } = storeToRefs(useDataStore())
|
||||
const mode = ref("show")
|
||||
|
||||
const itemColumns = [
|
||||
{
|
||||
key: 'spaceNumber',
|
||||
label: "Lagerplatznr.",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "Beschreibung",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
label: "Typ",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const selectItem = (item) => {
|
||||
console.log(item)
|
||||
router.push(`/inventory/spaces/show/${item.id} `)
|
||||
}
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return spaces.value
|
||||
}
|
||||
|
||||
return spaces.value.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -6,11 +6,13 @@ definePageMeta({
|
||||
import * as dayjs from 'dayjs'
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
const user = useSupabaseUser()
|
||||
const route = useRoute()
|
||||
|
||||
const {getProjectById, getFormSubmitsWithLabelProp, getTimesByProjectId} = useDataStore()
|
||||
const {forms, formSubmits, times, profiles} = storeToRefs(useDataStore())
|
||||
const {getProjectById, getFormSubmitsWithLabelProp, getTimesByProjectId, getDocumentTags, getDocumentsByProjectId, fetchDocuments} = useDataStore()
|
||||
const {forms, formSubmits, times, profiles,documents} = storeToRefs(useDataStore())
|
||||
|
||||
fetchDocuments()
|
||||
const currentProject = getProjectById(Number(route.params.id))
|
||||
|
||||
const formSubmissionsComposed = getFormSubmitsWithLabelProp
|
||||
@@ -75,6 +77,9 @@ const tabItems = [
|
||||
},{
|
||||
key: "forms",
|
||||
label: "Formulare"
|
||||
},{
|
||||
key: "documents",
|
||||
label: "Dokumente"
|
||||
},{
|
||||
key: "description",
|
||||
label: "Dokumentation"
|
||||
@@ -131,6 +136,49 @@ const saveProjectDescription = async () => {
|
||||
|
||||
};
|
||||
|
||||
const uploadModalOpen = ref(false)
|
||||
const fileUploadFormData = ref({
|
||||
tags: ["Dokument"],
|
||||
folder: "Projekte",
|
||||
usedInResource: {
|
||||
type: "Projekt",
|
||||
}
|
||||
})
|
||||
const tags = getDocumentTags
|
||||
const uploadFile = async () => {
|
||||
const file = document.getElementById("fileUploadInput").files[0]
|
||||
|
||||
const {data,error} = await supabase
|
||||
.storage
|
||||
.from("documents")
|
||||
.upload(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${currentProject.id}/${file.name}`,file)
|
||||
|
||||
console.log(data)
|
||||
const returnPath = data.path
|
||||
|
||||
if(error) {
|
||||
|
||||
} else {
|
||||
console.log(returnPath)
|
||||
const files = (await supabase.storage.from('documents').list(`${user.value.app_metadata.tenant}/${fileUploadFormData.value.folder}/${currentProject.id}/`, {limit: 100, offset: 0, sortBy: { column: 'name', order: 'asc' }})).data
|
||||
console.log(files)
|
||||
const fileId = files.find(temp => returnPath.includes(temp.name)).id
|
||||
|
||||
fileUploadFormData.value.object = fileId
|
||||
fileUploadFormData.value.path = returnPath
|
||||
fileUploadFormData.value.usedInResource.id = currentProject.id
|
||||
console.log(fileUploadFormData.value)
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("documents")
|
||||
.insert([fileUploadFormData.value])
|
||||
.select()
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
uploadModalOpen.value = false;
|
||||
}
|
||||
|
||||
const updatePhases = async () => {
|
||||
//await update('projects', route.params.id, {phases: project.attributes.phases})
|
||||
@@ -240,6 +288,84 @@ const phaseInfo = ref({
|
||||
</template>
|
||||
</UAccordion>
|
||||
</div>
|
||||
<div v-else-if="item.key === 'documents'" class="space-y-3">
|
||||
<UButton
|
||||
@click="uploadModalOpen = true"
|
||||
>
|
||||
Hochladen
|
||||
</UButton>
|
||||
<UModal
|
||||
v-model="uploadModalOpen"
|
||||
>
|
||||
<UCard class="p-4">
|
||||
|
||||
<template #header>
|
||||
Datei hochladen
|
||||
</template>
|
||||
|
||||
<UFormGroup
|
||||
label="Datei:"
|
||||
>
|
||||
<UInput
|
||||
type="file"
|
||||
id="fileUploadInput"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<!-- <UFormGroup
|
||||
label="Name:"
|
||||
class="mt-3"
|
||||
>
|
||||
<UInput
|
||||
v-model="fileUploadFormData.name"
|
||||
/>
|
||||
</UFormGroup>-->
|
||||
<UFormGroup
|
||||
label="Tags:"
|
||||
class="mt-3"
|
||||
>
|
||||
<USelectMenu
|
||||
multiple
|
||||
searchable
|
||||
searchable-placeholder="Suchen..."
|
||||
:options="tags"
|
||||
v-model="fileUploadFormData.tags"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<!--<UFormGroup
|
||||
label="Ordner:"
|
||||
class="mt-3"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="folders"
|
||||
v-model="fileUploadFormData.folder"
|
||||
value-attribute="label"
|
||||
|
||||
/>
|
||||
</UFormGroup>-->
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
class="mt-3"
|
||||
@click="uploadFile"
|
||||
>Hochladen</UButton>
|
||||
</template>
|
||||
|
||||
|
||||
</UCard>
|
||||
|
||||
</UModal>
|
||||
|
||||
|
||||
<div class="documentList">
|
||||
<DocumentDisplay
|
||||
v-for="document in getDocumentsByProjectId(currentProject.id)"
|
||||
:document="document"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
Dokumente
|
||||
</div>
|
||||
<div v-else-if="item.key === 'description'" class="space-y-3">
|
||||
<UButton
|
||||
:disabled="false/*newProjectDescription.time === currentProject.description.time*/"
|
||||
|
||||
@@ -158,9 +158,14 @@ const {projects,customers} = storeToRefs(useDataStore())
|
||||
const {fetchProjects} = useDataStore()
|
||||
|
||||
const projectColumns = [
|
||||
{
|
||||
key: 'measure',
|
||||
label: "Gewerk",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
label: "Name.",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,4 +1,28 @@
|
||||
<script setup>
|
||||
import axios from "axios"
|
||||
const {ownTenant} = storeToRefs(useDataStore())
|
||||
|
||||
|
||||
const setupPrinter = async () => {
|
||||
console.log(ownTenant.value.labelPrinterIp)
|
||||
let printerUri = `http://${ownTenant.value.labelPrinterIp}/pstprnt`
|
||||
labelPrinterURI.value = printerUri
|
||||
console.log(printerUri)
|
||||
}
|
||||
|
||||
|
||||
/*const printLabel = async () => {
|
||||
axios
|
||||
.post(labelPrinterURI.value, `^XA^FO10,20^BCN,100^FD${}^XZ` )
|
||||
.then(console.log)
|
||||
.catch(console.log)
|
||||
|
||||
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
const labelPrinterURI = ref("")
|
||||
|
||||
</script>
|
||||
|
||||
@@ -8,12 +32,32 @@
|
||||
<template #header>
|
||||
Etikettendrucker
|
||||
</template>
|
||||
|
||||
<UFormGroup
|
||||
label="IP-Adresse:"
|
||||
>
|
||||
<UInput
|
||||
v-model="labelPrinterURI"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UButton
|
||||
@click="setupPrinter"
|
||||
>
|
||||
Drucker Setup
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="printLabel"
|
||||
>
|
||||
Druck
|
||||
</UButton>
|
||||
|
||||
</UCard>
|
||||
<UCard>
|
||||
<!-- <UCard>
|
||||
<template #header>
|
||||
A4 Drucker
|
||||
</template>
|
||||
</UCard>
|
||||
</UCard>-->
|
||||
</UPage>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,33 +1,72 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class="previewDoc"
|
||||
>
|
||||
<embed
|
||||
:src="fileurl"
|
||||
|
||||
:src="fileurl + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
|
||||
width="40vw"
|
||||
height="50vh"
|
||||
>
|
||||
{{documents}}
|
||||
</div>
|
||||
<div
|
||||
class="inputData"
|
||||
>
|
||||
<UFormGroup label="Lieferant:" required>
|
||||
<UInput />
|
||||
<USelectMenu
|
||||
v-model="invoice.vendor"
|
||||
:options="vendors"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:search-attributes="['name','vendorNumber']"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Rechnungsreferenz:" required>
|
||||
<UInput />
|
||||
<UInput
|
||||
v-model="invoice.reference"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Rechnungsdatum:" required>
|
||||
<UInput />
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton icon="i-heroicons-calendar-days-20-solid" :label="labelDate" />
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="invoice.date" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
|
||||
<UButton @click="vendorInvoiceData.lineItems.push({})">+ Reihe</UButton>
|
||||
<UFormGroup label="Fälligkeitsdatum:" required>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton icon="i-heroicons-calendar-days-20-solid" :label="labelDueDate" />
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="invoice.dueDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Beschreibung:" required>
|
||||
<UTextarea
|
||||
v-model="invoice.description"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<!-- <UButton @click="vendorInvoiceData.lineItems.push({})">+ Reihe</UButton>-->
|
||||
|
||||
|
||||
<div v-for="lineItem in vendorInvoiceData.lineItems" class="lineItemRow">
|
||||
<!-- <div v-for="lineItem in vendorInvoiceData.lineItems" class="lineItemRow">
|
||||
<UFormGroup label="Text:" required>
|
||||
<UInput v-model="lineItem.text"/>
|
||||
</UFormGroup>
|
||||
@@ -58,7 +97,7 @@
|
||||
<UFormGroup label="Positionspreis:" required>
|
||||
<UInput disabled/>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
</div>-->
|
||||
{{vendorInvoiceData}}
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,10 +107,28 @@
|
||||
const supabase = useSupabaseClient()
|
||||
const route = useRoute()
|
||||
|
||||
const currentVendorInvoice = (await supabase.from('vendorInvoices').select().eq('id', route.params.id)).data
|
||||
const {vendors} = storeToRefs(useDataStore())
|
||||
|
||||
|
||||
|
||||
const invoice = ref({
|
||||
vendor: 0,
|
||||
reference: "",
|
||||
date: new Date(),
|
||||
dueDate: new Date(),
|
||||
paymentType: "",
|
||||
description: "",
|
||||
state: "Entwurf"
|
||||
})
|
||||
|
||||
const labelDate = computed(() => invoice.value.date.toLocaleDateString('de-de', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }))
|
||||
const labelDueDate = computed(() => invoice.value.dueDate.toLocaleDateString('de-de', { weekday: 'long', year: 'numeric', month: 'short', day: 'numeric' }))
|
||||
|
||||
|
||||
|
||||
//const currentVendorInvoice = (await supabase.from('vendorInvoices').select().eq('id', route.params.id)).data
|
||||
const document = (await supabase.from('documents').select().eq("id",18)).data[0]
|
||||
|
||||
console.log(currentVendorInvoice)
|
||||
console.log(document)
|
||||
|
||||
let fileurl = (await supabase.storage.from('documents').createSignedUrl(document.path,60*60)).data.signedUrl
|
||||
@@ -14,6 +14,10 @@ export const useDataStore = defineStore('data', {
|
||||
},
|
||||
timeConfig: {
|
||||
timeTypes: [] as any[]
|
||||
},
|
||||
tags: {
|
||||
documents: [] as any[],
|
||||
products: [] as any[]
|
||||
}
|
||||
},
|
||||
profiles: [] as any[],
|
||||
@@ -127,7 +131,7 @@ export const useDataStore = defineStore('data', {
|
||||
},
|
||||
async fetchVendorInvoices() {
|
||||
// @ts-ignore
|
||||
this.vendorInvoices = (await supabase.from("vendorinvoices").select()).data
|
||||
this.vendorInvoices = (await supabase.from("vendorInvoices").select()).data
|
||||
},
|
||||
async fetchDocuments() {
|
||||
// @ts-ignore
|
||||
@@ -135,7 +139,7 @@ export const useDataStore = defineStore('data', {
|
||||
|
||||
for(const [index,doc] of this.documents.entries()){
|
||||
// @ts-ignore
|
||||
this.documents[index].url = (await supabase.storage.from('documents').createSignedUrl(doc.path, 60 * 60)).data.signedUrl
|
||||
this.documents[index].url = (await supabase.storage.from('files').createSignedUrl(doc.path, 60 * 60)).data.signedUrl
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -156,6 +160,7 @@ export const useDataStore = defineStore('data', {
|
||||
getProductById: (state) => (productId:number) => state.products.find(product => product.id === productId),
|
||||
getVendorById: (state) => (itemId:number) => state.vendors.find(item => item.id === itemId),
|
||||
getVendorInvoiceById: (state) => (itemId:number) => state.vendorInvoices.find(item => item.id === itemId),
|
||||
getSpaceById: (state) => (itemId:number) => state.spaces.find(item => item.id === itemId),
|
||||
getProjectById: (state) => (projectId:number) => {
|
||||
let project = state.projects.find(project => project.id === projectId)
|
||||
|
||||
@@ -186,6 +191,7 @@ export const useDataStore = defineStore('data', {
|
||||
return times
|
||||
|
||||
},
|
||||
getDocumentsByProjectId:(state) => (itemId: number) => state.documents.filter(item => item.project == itemId ),
|
||||
getFormSubmitsWithLabelProp: (state) => (state.formSubmits.map(submit => {return{...submit, label: submit.id}})),
|
||||
getResources: (state) => {
|
||||
return [
|
||||
@@ -221,6 +227,7 @@ export const useDataStore = defineStore('data', {
|
||||
]
|
||||
},
|
||||
getEventTypes: (state) => state.ownTenant.calendarConfig.eventTypes,
|
||||
getTimeTypes: (state) => state.ownTenant.timeConfig.timeTypes
|
||||
getTimeTypes: (state) => state.ownTenant.timeConfig.timeTypes,
|
||||
getDocumentTags: (state) => state.ownTenant.tags.documents,
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user