Added Frontend
This commit is contained in:
367
frontend/components/EntityShow.vue
Normal file
367
frontend/components/EntityShow.vue
Normal file
@@ -0,0 +1,367 @@
|
||||
<script setup>
|
||||
|
||||
import EntityShowSubTimes from "~/components/EntityShowSubTimes.vue";
|
||||
|
||||
const props = defineProps({
|
||||
type: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
item: {
|
||||
required: true,
|
||||
type: Object
|
||||
},
|
||||
inModal: {
|
||||
type: Boolean,
|
||||
},
|
||||
platform: {
|
||||
type: String,
|
||||
}
|
||||
})
|
||||
|
||||
const {type} = props
|
||||
|
||||
defineShortcuts({
|
||||
'backspace': () => {
|
||||
router.back()
|
||||
},
|
||||
'arrowleft': () => {
|
||||
if(openTab.value > 0){
|
||||
openTab.value -= 1
|
||||
router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
|
||||
}
|
||||
},
|
||||
'arrowright': () => {
|
||||
if(openTab.value < dataType.showTabs.length - 1) {
|
||||
openTab.value += 1
|
||||
router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(["updateNeeded"])
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const dataStore = useDataStore()
|
||||
const modal = useModal()
|
||||
const auth = useAuthStore()
|
||||
|
||||
const dataType = dataStore.dataTypes[type]
|
||||
|
||||
const openTab = ref(route.query.tabIndex || 0)
|
||||
|
||||
|
||||
|
||||
const getAvailableQueryStringData = (keys) => {
|
||||
let returnString =""
|
||||
|
||||
function addParam (key,value) {
|
||||
if(returnString.length === 0) {
|
||||
returnString += `${key}=${value}`
|
||||
} else {
|
||||
returnString += `&${key}=${value}`
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(props.item.customer) {
|
||||
addParam("customer", props.item.customer.id)
|
||||
} else if(type === "customers") {
|
||||
addParam("customer", props.item.id)
|
||||
}
|
||||
|
||||
if(props.item.project) {
|
||||
addParam("project", props.item.project.id)
|
||||
} else if(type === "projects") {
|
||||
addParam("project", props.item.id)
|
||||
}
|
||||
|
||||
if(props.item.plant) {
|
||||
addParam("plant", props.item.plant.id)
|
||||
} else if(type === "plants") {
|
||||
addParam("plant", props.item.id)
|
||||
}
|
||||
|
||||
if(keys) {
|
||||
Object.keys(keys).forEach(key => {
|
||||
addParam(key, keys[key])
|
||||
})
|
||||
}
|
||||
|
||||
return returnString
|
||||
|
||||
}
|
||||
|
||||
const onTabChange = (index) => {
|
||||
router.push(`${router.currentRoute.value.path}?tabIndex=${index}`)
|
||||
}
|
||||
|
||||
const changePinned = async () => {
|
||||
let newPins = []
|
||||
|
||||
if(auth.profile.pinned_on_navigation.find(i => i.datatype === type && i.id === props.item.id)){
|
||||
//Remove Pin
|
||||
|
||||
newPins = auth.profile.pinned_on_navigation.filter(i => !(i.datatype === type && i.id === props.item.id))
|
||||
} else {
|
||||
//Add Pin
|
||||
|
||||
newPins = [
|
||||
...auth.profile.pinned_on_navigation,
|
||||
{
|
||||
id: props.item.id,
|
||||
icon: "i-heroicons-document",
|
||||
type: "standardEntity",
|
||||
datatype: type,
|
||||
label: props.item[dataType.templateColumns.find(i => i.title).key]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const res = await useNuxtApp().$api(`/api/user/${auth.user.id}/profile`,{
|
||||
method: "PUT",
|
||||
body: {
|
||||
data: {
|
||||
pinned_on_navigation: newPins
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
await auth.fetchMe()
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar
|
||||
v-if="props.inModal"
|
||||
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
||||
>
|
||||
<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>
|
||||
<UButton
|
||||
@click="modal.close()"
|
||||
color="red"
|
||||
class="ml-2"
|
||||
icon="i-heroicons-x-mark"
|
||||
variant="outline"
|
||||
/>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UDashboardNavbar
|
||||
v-else-if="!props.inModal && platform !== 'mobile'"
|
||||
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
||||
>
|
||||
<template #left>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
variant="outline"
|
||||
@click="router.back()/*router.push(`/standardEntity/${type}`)*/"
|
||||
>
|
||||
Zurück
|
||||
</UButton>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
variant="outline"
|
||||
@click="router.push(`/standardEntity/${type}`)"
|
||||
>
|
||||
Übersicht
|
||||
</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>
|
||||
<UButton
|
||||
v-if="auth.profile"
|
||||
:variant="auth.profile?.pinned_on_navigation.find(i => i.datatype === type && i.id === props.item.id) ? 'solid' : 'outline'"
|
||||
icon="i-heroicons-star"
|
||||
color="yellow"
|
||||
@click="changePinned"
|
||||
></UButton>
|
||||
<UButton
|
||||
@click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UDashboardNavbar
|
||||
v-else-if="!props.inModal && platform === 'mobile'"
|
||||
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
|
||||
>
|
||||
<template #toggle>
|
||||
<div></div>
|
||||
</template>
|
||||
<template #center>
|
||||
<h1
|
||||
v-if="item"
|
||||
:class="['text-xl','font-medium','text-truncate']"
|
||||
>{{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>
|
||||
<UButton
|
||||
@click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
:items="dataType.showTabs"
|
||||
v-if="props.item.id && platform !== 'mobile'"
|
||||
class="p-5"
|
||||
v-model="openTab"
|
||||
@change="onTabChange"
|
||||
>
|
||||
<template #item="{item:tab}">
|
||||
<div v-if="tab.label === 'Informationen'" class="flex flex-row">
|
||||
|
||||
<EntityShowSubInformation
|
||||
:top-level-type="type"
|
||||
:item="props.item"
|
||||
class="w-1/2 mr-5"
|
||||
:platform="platform"
|
||||
/>
|
||||
|
||||
<EntityShowSubHistoryDisplay
|
||||
:top-level-type="type"
|
||||
:item="props.item"
|
||||
class="w-1/2"
|
||||
:platform="platform"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<EntityShowSubFiles
|
||||
:item="props.item"
|
||||
:query-string-data="getAvailableQueryStringData()"
|
||||
v-else-if="tab.label === 'Dateien'"
|
||||
:top-level-type="type"
|
||||
type="files"
|
||||
@updateNeeded="emit('updateNeeded')"
|
||||
:platform="platform"
|
||||
/>
|
||||
<!-- TODO Change Active Phase -->
|
||||
<EntityShowSubPhases
|
||||
:item="props.item"
|
||||
:top-level-type="type"
|
||||
v-else-if="tab.label === 'Phasen'"
|
||||
:query-string-data="getAvailableQueryStringData()"
|
||||
@updateNeeded="emit('updateNeeded')"
|
||||
:platform="platform"
|
||||
/>
|
||||
<EntityShowSubCreatedDocuments
|
||||
:item="props.item"
|
||||
:top-level-type="type"
|
||||
v-else-if="tab.label === 'Ausgangsbelege'"
|
||||
:query-string-data="getAvailableQueryStringData()"
|
||||
:platform="platform"
|
||||
/>
|
||||
<EntityShowSubCostCentreReport
|
||||
:top-level-type="type"
|
||||
:item="props.item"
|
||||
v-else-if="tab.label === 'Auswertung Kostenstelle'"
|
||||
:platform="platform"
|
||||
/>
|
||||
<EntityShowSubOwnAccountsStatements
|
||||
:top-level-type="type"
|
||||
:item="props.item"
|
||||
v-else-if="tab.label === 'Buchungen'"
|
||||
:platform="platform"
|
||||
/>
|
||||
<EntityShowSubTimes
|
||||
:top-level-type="type"
|
||||
:item="props.item"
|
||||
v-else-if="tab.label === 'Zeiten'"
|
||||
:platform="platform"
|
||||
/>
|
||||
<EntityShowSub
|
||||
:item="props.item"
|
||||
:query-string-data="getAvailableQueryStringData()"
|
||||
:tab-label="tab.label"
|
||||
:top-level-type="type"
|
||||
:type="tab.key"
|
||||
v-else
|
||||
:platform="platform"
|
||||
/>
|
||||
</template>
|
||||
</UTabs>
|
||||
<UDashboardPanelContent v-else style="overflow-x: hidden;">
|
||||
<div v-for="sub in dataType.showTabs" :key="sub.key">
|
||||
<div v-if="sub.label === 'Informationen'">
|
||||
|
||||
<EntityShowSubInformation
|
||||
:top-level-type="type"
|
||||
:item="props.item"
|
||||
:platform="platform"
|
||||
/>
|
||||
|
||||
<EntityShowSubHistoryDisplay
|
||||
:top-level-type="type"
|
||||
:item="props.item"
|
||||
:platform="platform"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<EntityShowSubFiles
|
||||
:item="props.item"
|
||||
:query-string-data="getAvailableQueryStringData()"
|
||||
v-else-if="sub.label === 'Dateien'"
|
||||
:top-level-type="type"
|
||||
type="files"
|
||||
@updateNeeded="emit('updateNeeded')"
|
||||
:platform="platform"
|
||||
/>
|
||||
<!--<EntityShowSubPhases
|
||||
:item="props.item"
|
||||
:top-level-type="type"
|
||||
v-else-if="sub.label === 'Phasen'"
|
||||
:query-string-data="getAvailableQueryStringData()"
|
||||
@updateNeeded="emit('updateNeeded')"
|
||||
:platform="platform"
|
||||
/>
|
||||
<EntityShowSubCreatedDocuments
|
||||
:item="props.item"
|
||||
:top-level-type="type"
|
||||
v-else-if="sub.label === 'Ausgangsbelege'"
|
||||
:query-string-data="getAvailableQueryStringData()"
|
||||
:platform="platform"
|
||||
/>
|
||||
<EntityShowSubCostCentreReport
|
||||
:top-level-type="type"
|
||||
:item="props.item"
|
||||
v-else-if="sub.label === 'Auswertung Kostenstelle'"
|
||||
:platform="platform"
|
||||
/>
|
||||
|
||||
<EntityShowSub
|
||||
:item="props.item"
|
||||
:query-string-data="getAvailableQueryStringData()"
|
||||
:tab-label="sub.label"
|
||||
:top-level-type="type"
|
||||
v-else
|
||||
:platform="platform"
|
||||
/>-->
|
||||
</div>
|
||||
|
||||
</UDashboardPanelContent>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user