352 lines
11 KiB
Vue
352 lines
11 KiB
Vue
<script setup>
|
|
import dayjs from "dayjs";
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
required: true,
|
|
type: String
|
|
},
|
|
item: {
|
|
required: true,
|
|
type: Object
|
|
}
|
|
})
|
|
|
|
const {type} = props
|
|
|
|
defineShortcuts({
|
|
'backspace': () => {
|
|
router.push(`/${type}`)
|
|
},
|
|
'arrowleft': () => {
|
|
if(openTab.value > 0){
|
|
openTab.value -= 1
|
|
}
|
|
},
|
|
'arrowright': () => {
|
|
if(openTab.value < 3) {
|
|
openTab.value += 1
|
|
}
|
|
},
|
|
})
|
|
|
|
|
|
const router = useRouter()
|
|
const dataStore = useDataStore()
|
|
const profileStore = useProfileStore()
|
|
|
|
const dataType = dataStore.dataTypes[type]
|
|
|
|
const openTab = ref(0)
|
|
|
|
const renderedPhases = computed(() => {
|
|
|
|
if(type === "projects" && props.item.phases) {
|
|
return props.item.phases.map((phase,index,array) => {
|
|
|
|
let isAvailable = false
|
|
|
|
if(phase.active) {
|
|
isAvailable = true
|
|
} else if(index > 0 && array[index-1].active ){
|
|
isAvailable = true
|
|
} else if(index > 1 && array[index-1].optional && array[index-2].active){
|
|
isAvailable = true
|
|
} else if(array.findIndex(i => i.active) > index) {
|
|
isAvailable = true
|
|
}
|
|
|
|
|
|
return {
|
|
...phase,
|
|
label: phase.optional ? `${phase.label}(optional)`: phase.label,
|
|
disabled: !isAvailable,
|
|
defaultOpen: phase.active ? true : false
|
|
}
|
|
})
|
|
} else {
|
|
return []
|
|
}
|
|
})
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardNavbar
|
|
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
|
>
|
|
<template #left>
|
|
<UButton
|
|
icon="i-heroicons-chevron-left"
|
|
variant="outline"
|
|
@click="router.push(`/standardEntity/${type}`)"
|
|
>
|
|
{{dataType.label}}
|
|
</UButton>
|
|
</template>
|
|
<template #center>
|
|
<h1
|
|
v-if="item"
|
|
:class="['text-xl','font-medium']"
|
|
>{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
|
|
</template>
|
|
<template #right>
|
|
<ButtonWithConfirm
|
|
color="rose"
|
|
variant="outline"
|
|
@confirmed="dataStore.updateItem(type,{...item, archived: true})"
|
|
>
|
|
<template #button>
|
|
Archivieren
|
|
</template>
|
|
<template #header>
|
|
<span class="text-md text-black font-bold">Archivieren bestätigen</span>
|
|
</template>
|
|
Möchten Sie das Fahrzeug {{item.name}} wirklich archivieren?
|
|
</ButtonWithConfirm>
|
|
<UButton
|
|
@click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
|
|
>
|
|
Bearbeiten
|
|
</UButton>
|
|
</template>
|
|
</UDashboardNavbar>
|
|
<UTabs
|
|
:items="dataType.showTabs"
|
|
v-if="props.item.id"
|
|
class="p-5"
|
|
v-model="openTab"
|
|
>
|
|
<template #item="{item}">
|
|
<div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
|
|
<UCard class="w-1/2 mr-5">
|
|
<UAlert
|
|
v-if="item.archived"
|
|
color="rose"
|
|
variant="outline"
|
|
:title="`${dataType.labelSingle} archiviert`"
|
|
icon="i-heroicons-light-bulb"
|
|
class="mb-5"
|
|
/>
|
|
<div class="text-wrap">
|
|
<table class="w-full">
|
|
<tbody>
|
|
<tr
|
|
v-for="datapoint in dataType.templateColumns"
|
|
>
|
|
<td>{{datapoint.label}}:</td>
|
|
<td>
|
|
<component v-if="datapoint.component" :is="datapoint.component" :row="props.item"></component>
|
|
<div v-else>
|
|
<span v-if="datapoint.key.includes('.')">{{props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]}}{{datapoint.unit}}</span>
|
|
<span v-else>{{props.item[datapoint.key]}} {{datapoint.unit}}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
|
|
</table>
|
|
</div>
|
|
|
|
</UCard>
|
|
<UCard class="w-1/2">
|
|
<HistoryDisplay
|
|
:type="type.substring(0,type.length-1)"
|
|
v-if="props.item.id"
|
|
:element-id="props.item.id"
|
|
render-headline
|
|
/>
|
|
</UCard>
|
|
</div>
|
|
<div v-else-if="item.label === 'Dokumente'">
|
|
<UCard class="mt-5">
|
|
<!-- <Toolbar>
|
|
<DocumentUpload
|
|
type="vehicle"
|
|
:element-id="item.id"
|
|
/>
|
|
</Toolbar>
|
|
|
|
<DocumentList
|
|
:documents="dataStore.getDocumentsByVehicleId(item.id)"
|
|
/>-->
|
|
{{props.item.documents}}
|
|
</UCard>
|
|
</div>
|
|
<div v-else-if="item.label === 'Projekte'">
|
|
<UCard class="mt-5">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/standardEntity/projects/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
|
|
>
|
|
+ Projekt
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="props.item.projects"
|
|
@select="(row) => router.push(`/standardEntity/projects/show/${row.id}`)"
|
|
:columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
|
|
|
|
>
|
|
<template #phase-data="{row}">
|
|
{{row.phases ? row.phases.find(i => i.active).label : ""}}
|
|
</template>
|
|
</UTable>
|
|
|
|
</UCard>
|
|
</div>
|
|
<div v-else-if="item.label === 'Objekte'">
|
|
<UCard class="mt-5">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
|
|
>
|
|
+ Objekt
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="props.item.plants"
|
|
@select="(row) => router.push(`/standardEntity/plants/show/${row.id}`)"
|
|
:columns="[{label: 'Name', key: 'name'}]"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
|
|
|
|
>
|
|
|
|
</UTable>
|
|
</UCard>
|
|
</div>
|
|
<div v-else-if="item.label === 'Aufgaben'">
|
|
<UCard class="mt-5">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/standardEntity/tasks/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
|
|
>
|
|
+ Aufgabe
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="props.item.tasks"
|
|
@select="(row) => router.push(`/standardEntity/tasks/show/${row.id}`)"
|
|
:columns="[{label: 'Name', key: 'name'}]"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
|
|
/>
|
|
</UCard>
|
|
</div>
|
|
<div v-else-if="item.label === 'Verträge'">
|
|
<UCard class="mt-5">
|
|
<Toolbar>
|
|
<UButton
|
|
@click="router.push(`/standardEntity/contracts/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
|
|
>
|
|
+ Vertrag
|
|
</UButton>
|
|
</Toolbar>
|
|
<UTable
|
|
:rows="props.item.contracts"
|
|
@select="(row) => router.push(`/standardEntity/contracts/show/${row.id}`)"
|
|
:columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"
|
|
|
|
></UTable>
|
|
</UCard>
|
|
</div>
|
|
<div v-else-if="item.label === 'Überprüfungen'">
|
|
<UCard class="mt-5">
|
|
<UTable
|
|
:rows="props.item.checks"
|
|
:columns="[{key:'name',label: 'Name'},{key:'rhythm',label: 'Rhythmus'},{key:'description',label: 'Beschreibung'}]"
|
|
class="w-full"
|
|
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
|
@select="(i) => router.push(`/checks/show/${i.id}`) "
|
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Überprüfungen anzuzeigen' }"
|
|
>
|
|
<template #rhythm-data="{row}">
|
|
{{row.distance}}
|
|
<span v-if="row.distanceUnit === 'dayjs'">Tage</span>
|
|
<span v-if="row.distanceUnit === 'years'">Jahre</span>
|
|
</template>
|
|
</UTable>
|
|
</UCard>
|
|
</div>
|
|
<div v-else-if="item.label === 'Phasen'">
|
|
<UCard class="mt-5">
|
|
<UAccordion
|
|
:items="renderedPhases"
|
|
>
|
|
<template #default="{item,index,open}">
|
|
<UButton
|
|
variant="ghost"
|
|
:color="item.active ? 'primary' : 'white'"
|
|
class="mb-1"
|
|
:disabled="true"
|
|
>
|
|
<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, index}">
|
|
<UCard class="mx-5">
|
|
<template #header>
|
|
<span class="text-black">{{item.label}}</span>
|
|
</template>
|
|
<InputGroup>
|
|
<!-- TODO: Reactive Change Phase -->
|
|
<UButton
|
|
v-if="!item.activated_at && index !== 0 "
|
|
@click="changeActivePhase(item.key)"
|
|
>
|
|
Phase aktivieren
|
|
</UButton>
|
|
<UButton
|
|
v-if="item.active"
|
|
v-for="button in item.quickactions"
|
|
@click="router.push(`${button.link}&customer=${itemInfo.customer.id}&project=${itemInfo.id}`)"
|
|
>
|
|
{{button.label}}
|
|
</UButton>
|
|
</InputGroup>
|
|
|
|
<div>
|
|
<p v-if="item.activated_at" class="text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
|
|
<p v-if="item.activated_by" class="text-black">Aktiviert durch: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
|
|
<p v-if="item.description" class="text-black">Beschreibung: {{item.description}}</p>
|
|
</div>
|
|
</UCard>
|
|
|
|
|
|
</template>
|
|
</UAccordion>
|
|
</UCard>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</UTabs>
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
td {
|
|
border-bottom: 1px solid lightgrey;
|
|
vertical-align: top;
|
|
padding-bottom: 0.15em;
|
|
padding-top: 0.15em;
|
|
}
|
|
</style> |