498 lines
14 KiB
Vue
498 lines
14 KiB
Vue
<script setup>
|
|
import dayjs from "dayjs";
|
|
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
|
import DocumentUpload from "~/components/DocumentUpload.vue";
|
|
import DocumentList from "~/components/DocumentList.vue";
|
|
|
|
definePageMeta({
|
|
middleware: "auth"
|
|
})
|
|
|
|
const dataStore = useDataStore()
|
|
const supabase = useSupabaseClient()
|
|
const user = useSupabaseUser()
|
|
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: "information",
|
|
label: "Informationen"
|
|
},
|
|
{
|
|
key: "historyDisplay",
|
|
label: "Logbuch"
|
|
},
|
|
{
|
|
key: "phases",
|
|
label: "Phasen"
|
|
},{
|
|
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"
|
|
},
|
|
]
|
|
|
|
|
|
|
|
//Working
|
|
const mode = ref(route.params.mode || "show")
|
|
const itemInfo = ref({
|
|
name: "",
|
|
customer: 0,
|
|
users: [dataStore.activeProfile.id]
|
|
})
|
|
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 cancelEditorCreate = () => {
|
|
if(currentItem.value) {
|
|
router.push(`/projects/show/${currentItem.value.id}`)
|
|
} else {
|
|
router.push(`/projects/`)
|
|
}
|
|
}
|
|
|
|
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.toFixed(2)
|
|
}
|
|
|
|
|
|
/*const phasesTemplate = ref([{
|
|
label: 'Erstkontakt',
|
|
icon: 'i-heroicons-clipboard-document',
|
|
active: true
|
|
}, {
|
|
label: 'Überprüfung Vor Ort',
|
|
icon: 'i-heroicons-magnifying-glass'
|
|
}, {
|
|
label: 'Angebotserstellung',
|
|
icon: 'i-heroicons-document-text'
|
|
}, {
|
|
label: 'Auftragsvergabe',
|
|
icon: 'i-heroicons-document-check'
|
|
}, {
|
|
label: 'Umsetzung',
|
|
icon: 'i-heroicons-wrench-screwdriver'
|
|
},{
|
|
label: 'Rechnungsstellung',
|
|
icon: 'i-heroicons-document-text'
|
|
}, {
|
|
label: 'Abgeschlossen',
|
|
icon: 'i-heroicons-check'
|
|
}])*/
|
|
const phasesTemplateSelected = ref(dataStore.phasesTemplates[0].id)
|
|
const changeActivePhase = (phase) => {
|
|
currentItem.value.phases = currentItem.value.phases.map(p => {
|
|
if(p.active) delete p.active
|
|
|
|
if(p.label === phase.label) p.active = true
|
|
|
|
return p
|
|
})
|
|
|
|
savePhases()
|
|
|
|
}
|
|
|
|
const savePhases = () => {
|
|
dataStore.updateItem("projects", currentItem.value)
|
|
}
|
|
|
|
const loadPhases = async () => {
|
|
currentItem.value.phases = dataStore.phasesTemplates.find(i => i.id === phasesTemplateSelected.value).initialPhases
|
|
await dataStore.updateItem("projects", currentItem.value)
|
|
}
|
|
|
|
setupPage()
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Projekt erstellen' : 'Projekt bearbeiten')">
|
|
<template #right>
|
|
<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"
|
|
v-if="mode === 'edit' || mode === 'create'"
|
|
>
|
|
Abbrechen
|
|
</UButton>
|
|
<UButton
|
|
v-if="mode === 'show'"
|
|
@click="router.push(`/projects/edit/${currentItem.id}`)"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
<UTabs
|
|
:items="tabItems"
|
|
v-if="currentItem && mode == 'show'"
|
|
class="p-5"
|
|
>
|
|
<template #item="{ item }">
|
|
<UCard class="mt-5">
|
|
<div v-if="item.key === 'information'">
|
|
|
|
|
|
|
|
<div class="text-wrap">
|
|
<p>Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
|
|
<p>Objekt: <nuxt-link :to="`/plants/show/${currentItem.plant}`">{{currentItem.plant ? dataStore.getPlantById(currentItem.plant).name : ""}}</nuxt-link></p>
|
|
<p class="">Notizen: {{currentItem.notes}}</p>
|
|
</div>
|
|
|
|
<UDivider class="my-3"/>
|
|
<h1 class="font-bold text-lg my-3">Beteiligte Benutzer:</h1>
|
|
<UAlert
|
|
v-for="projectUser in currentItem.users"
|
|
:avatar="{ alt: dataStore.getProfileById(projectUser).fullName }"
|
|
:title="dataStore.getProfileById(projectUser).fullName"
|
|
class="mb-3"
|
|
|
|
/>
|
|
</div>
|
|
<div v-else-if="item.key === 'historyDisplay'">
|
|
<HistoryDisplay
|
|
type="project"
|
|
v-if="currentItem"
|
|
:element-id="currentItem.id"
|
|
/>
|
|
</div>
|
|
<div v-if="item.key === 'phases'" class="space-y-3">
|
|
<UFormGroup
|
|
label="Vorlage laden"
|
|
v-if="currentItem.phases.length === 0"
|
|
>
|
|
<InputGroup>
|
|
<USelectMenu
|
|
:options="dataStore.phasesTemplates"
|
|
option-attribute="name"
|
|
value-attribute="id"
|
|
v-model="phasesTemplateSelected"
|
|
class="flex-auto"
|
|
>
|
|
|
|
</USelectMenu>
|
|
<UButton
|
|
@click="loadPhases"
|
|
>
|
|
Vorlage laden
|
|
</UButton>
|
|
</InputGroup>
|
|
</UFormGroup>
|
|
|
|
<UAccordion
|
|
:items="currentItem.phases"
|
|
>
|
|
<template #default="{item,index,open}">
|
|
<UButton
|
|
variant="ghost"
|
|
:color="item.active ? 'primary' : 'white'"
|
|
class="mb-1"
|
|
>
|
|
<template #leading>
|
|
<div class="w-6 h-6 flex items-center justify-center -my-1">
|
|
<UIcon :name="item.icon" class="w-4 h-4 " />
|
|
</div>
|
|
</template>
|
|
|
|
<span class="truncate"> {{item.label}}</span>
|
|
|
|
<template #trailing>
|
|
<UIcon
|
|
name="i-heroicons-chevron-right-20-solid"
|
|
class="w-5 h-5 ms-auto transform transition-transform duration-200"
|
|
:class="[open && 'rotate-90']"
|
|
/>
|
|
</template>
|
|
|
|
</UButton>
|
|
</template>
|
|
<template #item="{item}">
|
|
<InputGroup>
|
|
<UButton
|
|
v-if="!item.active"
|
|
@click="changeActivePhase(item)"
|
|
>
|
|
Phase aktivieren
|
|
</UButton>
|
|
</InputGroup>
|
|
</template>
|
|
</UAccordion>
|
|
</div>
|
|
<div v-if="item.key === 'tasks'" class="space-y-3">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/tasks/create?project=${currentItem.id}`)"
|
|
>
|
|
+ Aufgabe
|
|
</UButton>
|
|
</Toolbar>
|
|
|
|
<UTable
|
|
:rows="dataStore.getTasksByProjectId(currentItem.id)"
|
|
:columns="[{key: 'name',label: 'Name'},{key: 'categorie',label: 'Kategorie'},{key: 'user',label: 'Benutzer'}]"
|
|
@select="(row) => router.push(`/tasks/show/${row.id}`)"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
|
|
|
|
>
|
|
<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 === 'documents'" class="space-y-3">
|
|
<Toolbar>
|
|
<DocumentUpload
|
|
type="project"
|
|
:element-id="currentItem.id"
|
|
/>
|
|
<UButton
|
|
@click="router.push(`/createDocument/edit?project=${currentItem.id}&type=quotes&customer=${currentItem.customer}`)"
|
|
>
|
|
+ Angebot
|
|
</UButton>
|
|
<UButton
|
|
@click="router.push(`/createDocument/edit?project=${currentItem.id}&type=invoices&customer=${currentItem.customer}`)"
|
|
>
|
|
+ Rechnung
|
|
</UButton>
|
|
</Toolbar>
|
|
|
|
<UTable
|
|
:rows="dataStore.getCreatedDocumentsByProject(currentItem.id)"
|
|
:columns="[
|
|
{
|
|
label: 'Typ',
|
|
key: 'type'
|
|
}, {
|
|
label: 'Status',
|
|
key: 'state'
|
|
}, {
|
|
label: 'Dokumentennummer',
|
|
key: 'documentNumber'
|
|
}, {
|
|
label: 'Ansprechpartner',
|
|
key: 'createdBy'
|
|
}
|
|
|
|
]"
|
|
@select="(row) => row.state === 'Entwurf' ? router.push(`/createDocument/edit/${row.id}`) : router.push(`/createDocument/show/${row.id}`)"
|
|
>
|
|
<template #type-data="{row}">
|
|
<span v-if="row.type === 'invoices'">Rechnung</span>
|
|
<span v-if="row.type === 'quotes'">Angebot</span>
|
|
<span v-if="row.type === 'deliveryNotes'">Lieferschein</span>
|
|
</template>
|
|
<template #createdBy-data="{row}">
|
|
{{dataStore.getProfileById(row.createdBy).fullName}}
|
|
</template>
|
|
</UTable>
|
|
|
|
<DocumentList :documents="dataStore.getDocumentsByProjectId(currentItem.id)"/>
|
|
<!--
|
|
{{dataStore.getDocumentsByProjectId(currentItem.id)}}
|
|
-->
|
|
|
|
</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).length > 0 ? dataStore.getEventsByProjectId(currentItem.id) : "Keine Termine in für dieses Projekt"}}
|
|
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
|
|
</UTabs>
|
|
|
|
<UForm v-else-if="mode === 'edit' || mode === 'create'" class="p-5" >
|
|
<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="Objekt:"
|
|
>
|
|
<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 : "Objekt auswählen"}}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
<UFormGroup
|
|
label="Beteiligte Benutzer:"
|
|
>
|
|
<USelectMenu
|
|
v-model="itemInfo.users"
|
|
:options="dataStore.profiles"
|
|
option-attribute="fullName"
|
|
value-attribute="id"
|
|
searchable
|
|
multiple
|
|
:search-attributes="['fullName']"
|
|
>
|
|
<template #label>
|
|
{{itemInfo.users.length > 0 ? itemInfo.users.map(i => dataStore.getProfileById(i).fullName).join(", ") : "Kein Benutzer ausgewählt"}}
|
|
</template>
|
|
</USelectMenu>
|
|
</UFormGroup>
|
|
|
|
<UFormGroup
|
|
label="Notizen:"
|
|
>
|
|
<UTextarea
|
|
v-model="itemInfo.notes"
|
|
/>
|
|
</UFormGroup>
|
|
</UForm>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |