539 lines
13 KiB
Vue
539 lines
13 KiB
Vue
<script setup>
|
|
import dayjs from "dayjs";
|
|
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
|
|
|
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 = ref(null)
|
|
|
|
const tabItems = [
|
|
/*{
|
|
key: "phases",
|
|
label: "Phasen"
|
|
},*/{
|
|
key: "information",
|
|
label: "Informationen"
|
|
},{
|
|
key: "tasks",
|
|
label: "Aufgaben"
|
|
},/*{
|
|
key: "forms",
|
|
label: "Formulare"
|
|
},*/{
|
|
key: "documents",
|
|
label: "Dokumente"
|
|
},{
|
|
key: "timetracking",
|
|
label: "Zeiterfassung"
|
|
},{
|
|
key: "events",
|
|
label: "Termine"
|
|
}/*,{
|
|
key: "material",
|
|
label: "Material"
|
|
}*/
|
|
]
|
|
|
|
const timeTableRows = [
|
|
{
|
|
key:"user",
|
|
label: "Benutzer"
|
|
},{
|
|
key:"start",
|
|
label: "Start"
|
|
},{
|
|
key:"end",
|
|
label:"Ende"
|
|
},{
|
|
key:"duration",
|
|
label: "Dauer"
|
|
},{
|
|
key: "type",
|
|
label: "Typ"
|
|
},{
|
|
key:"notes",
|
|
label: "Notizen"
|
|
},
|
|
]
|
|
|
|
const taskColumns = [
|
|
{
|
|
key: "name",
|
|
label: "Name"
|
|
},{
|
|
key: "description",
|
|
label: "Beschreibung"
|
|
},{
|
|
key: "categorie",
|
|
label: "Kategorie"
|
|
}, {
|
|
key: "user",
|
|
label: "Benutzer"
|
|
}
|
|
]
|
|
|
|
|
|
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({
|
|
name: "",
|
|
customer: 0,
|
|
|
|
})
|
|
|
|
const uploadModalOpen = ref(false)
|
|
const fileUploadFormData = ref({
|
|
tags: ["Dokument"],
|
|
folder: "Projekte",
|
|
usedInResource: {
|
|
type: "Projekt",
|
|
}
|
|
})
|
|
const tags = dataStore.getDocumentTags
|
|
|
|
|
|
//Functions
|
|
const setupPage = () => {
|
|
if(mode.value === "show" || mode.value === "edit"){
|
|
currentItem.value = dataStore.getProjectById(Number(useRoute().params.id))
|
|
}
|
|
|
|
if(mode.value === "edit") itemInfo.value = currentItem.value
|
|
|
|
if(mode.value === "create") {
|
|
let query = route.query
|
|
|
|
if(query.customer) itemInfo.value.customer = Number(query.customer)
|
|
|
|
if(query.plant) {
|
|
itemInfo.value.plant = Number(query.plant)
|
|
itemInfo.value.customer = dataStore.getPlantById(itemInfo.value.plant).customer
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
const editItem = async () => {
|
|
router.push(`/projects/edit/${currentItem.value.id}`)
|
|
setupPage()
|
|
}
|
|
|
|
const cancelEditorCreate = () => {
|
|
if(currentItem.value) {
|
|
router.push(`/projects/show/${currentItem.value.id}`)
|
|
} else {
|
|
router.push(`/projects/`)
|
|
}
|
|
}
|
|
|
|
const updateItem = async () => {
|
|
const {error} = await supabase
|
|
.from("projects")
|
|
.update(itemInfo.value)
|
|
.eq('id',itemInfo.value.id)
|
|
|
|
if(error) {
|
|
console.log(error)
|
|
}
|
|
|
|
|
|
router.push(`/projects/show/${currentItem.value.id}`)
|
|
toast.add({title: "Projekt erfolgreich gespeichert"})
|
|
dataStore.fetchProjects()
|
|
}
|
|
|
|
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 projectHours = () => {
|
|
let hours = 0
|
|
dataStore.getTimesByProjectId(currentItem.value.id).forEach(item => {
|
|
hours += Number(dayjs(item.end).diff(item.start,'hour',true).toFixed(2))
|
|
})
|
|
|
|
return hours
|
|
}
|
|
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UCard v-if="currentItem && mode == 'show'">
|
|
<template #header>
|
|
{{currentItem.name}}
|
|
</template>
|
|
|
|
<UTabs :items="tabItems" class="w-full">
|
|
<template #item="{ item }">
|
|
<!--
|
|
<div v-if="item.key === 'phases'" class="space-y-3">
|
|
<p>Hier wird aktuell noch gearbeitet</p>
|
|
<!– <div id="phaseList">
|
|
<a
|
|
v-for="phase in []"
|
|
@click="selectedPhase = phase"
|
|
>
|
|
<div
|
|
class="phaseContainer"
|
|
>
|
|
<span>{{phase.name}} - {{phase.position}}</span>
|
|
</div>
|
|
|
|
<a class="plusIcon" @click="addPhase(phase)">
|
|
|
|
<UDivider icon="i-heroicons-plus-circle"/>
|
|
</a>
|
|
</a>
|
|
</div>–>
|
|
|
|
</div>
|
|
-->
|
|
<div v-if="item.key === 'tasks'" class="space-y-3">
|
|
<InputGroup>
|
|
<UButton
|
|
@click="router.push(`/tasks/create?project=${currentItem.id}`)"
|
|
>
|
|
+ Aufgabe
|
|
</UButton>
|
|
</InputGroup>
|
|
|
|
<UTable
|
|
:rows="dataStore.getTasksByProjectId(currentItem.id)"
|
|
:columns="taskColumns"
|
|
@select="(row) => {
|
|
router.push(`/tasks/show/${row.id}`)
|
|
}"
|
|
>
|
|
<template #user-data="{row}">
|
|
{{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
|
|
</template>
|
|
</UTable>
|
|
|
|
</div>
|
|
|
|
<div v-else-if="item.key === 'forms'" class="space-y-3">
|
|
<UButton
|
|
@click="formModalOpen = true"
|
|
>
|
|
+ Formular
|
|
</UButton>
|
|
<UModal
|
|
v-model="formModalOpen"
|
|
>
|
|
<UCard>
|
|
<template #header>
|
|
Formular hinzufügen
|
|
</template>
|
|
<UFormGroup>
|
|
<USelectMenu
|
|
:options="forms"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
v-model="newFormSubmissionData.formType"
|
|
/>
|
|
</UFormGroup>
|
|
<template #footer>
|
|
<UButton
|
|
@click="addNewFormSubmission"
|
|
>
|
|
Hinzufügen
|
|
</UButton>
|
|
</template>
|
|
</UCard>
|
|
</UModal>
|
|
|
|
|
|
<UAccordion :items="formSubmissionsComposed">
|
|
<template #item="{item}">
|
|
|
|
<p class="my-3">Formular Link: <a :href="'https://app.spaces.software/formSubmissions/' + item.id">{{'https://app.spaces.software/formSubmissions/' + item.id}}</a></p>
|
|
|
|
|
|
<div v-if="Object.keys(item.values).length == 0">
|
|
<p>Es wurden noch keine Daten über das Formular abgegeben</p>
|
|
</div>
|
|
|
|
<table v-else>
|
|
<tr v-for="key in Object.keys(item.values)">
|
|
<td>{{key}}</td>
|
|
<td>{{ item.values[key] }}</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</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 dataStore.getDocumentsByProjectId(currentItem.id)"
|
|
:document="document"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else-if="item.key === 'timetracking'" class="space-y-3">
|
|
Projekt Zeit: {{String(projectHours()).replace(".",",")}} Stunden
|
|
<UTable
|
|
:rows="dataStore.getTimesByProjectId(currentItem.id)"
|
|
:columns="timeTableRows"
|
|
:empty-state="{ icon: 'i-heroicons-clock', label: 'Noch keine Zeiten in diesem Projekt' }"
|
|
>
|
|
<template #user-data="{row}">
|
|
{{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
|
|
</template>
|
|
<template #duration-data="{row}">
|
|
{{(row.start && row.end) ? `${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h` : ""}}
|
|
</template>
|
|
<template #start-data="{row}">
|
|
{{dayjs(row.start).format("DD.MM.YY HH:mm")}}
|
|
</template>
|
|
<template #end-data="{row}">
|
|
{{dayjs(row.end).format("DD.MM.YY HH:mm")}}
|
|
</template>
|
|
|
|
</UTable>
|
|
</div>
|
|
<div v-else-if="item.key === 'events'" class="space-y-3">
|
|
{{dataStore.getEventsByProjectId(currentItem.id)}}
|
|
|
|
</div>
|
|
<!--
|
|
<div v-else-if="item.key === 'material'" class="space-y-3">
|
|
<p>Hier wird aktuell noch gearbeitet</p>
|
|
</div>
|
|
-->
|
|
</template>
|
|
</UTabs>
|
|
|
|
|
|
|
|
|
|
<template #footer>
|
|
<UButton
|
|
v-if="mode == 'show' && currentItem.id"
|
|
@click="editItem"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
</template>
|
|
|
|
|
|
|
|
</UCard>
|
|
<UCard v-else-if="mode === 'edit' || mode === 'create'" >
|
|
<template #header v-if="mode === 'edit'">
|
|
{{itemInfo.name}}
|
|
</template>
|
|
|
|
<UFormGroup
|
|
label="Name:"
|
|
>
|
|
<UInput
|
|
v-model="itemInfo.name"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Kundennummer:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.customer"
|
|
:options="dataStore.customers"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
searchable
|
|
:search-attributes="['name']"
|
|
>
|
|
<template #label>
|
|
{{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kunde auswählen"}}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Gewerk:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.measure"
|
|
:options="dataStore.getMeasures"
|
|
option-attribute="name"
|
|
value-attribute="short"
|
|
searchable
|
|
:search-attributes="['name']"
|
|
>
|
|
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Anlage:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.plant"
|
|
:options="dataStore.plants"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
searchable
|
|
:search-attributes="['name']"
|
|
>
|
|
<template #label>
|
|
{{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Anlage auswählen"}}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Notizen:"
|
|
>
|
|
<UTextarea
|
|
v-model="itemInfo.notes"
|
|
/>
|
|
</UFormGroup>
|
|
|
|
<template #footer>
|
|
<UButton
|
|
v-if="mode == 'edit'"
|
|
@click="dataStore.updateItem('projects',itemInfo)"
|
|
>
|
|
Speichern
|
|
</UButton>
|
|
<UButton
|
|
v-else-if="mode == 'create'"
|
|
@click="dataStore.createNewItem('projects',itemInfo)"
|
|
>
|
|
Erstellen
|
|
</UButton>
|
|
<UButton
|
|
@click="cancelEditorCreate"
|
|
color="red"
|
|
class="ml-2"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
</template>
|
|
|
|
</UCard>
|
|
|
|
<HistoryDisplay
|
|
type="project"
|
|
v-if="currentItem"
|
|
:element-id="currentItem.id"
|
|
/>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |