Introduced EntityShowSubComponents
This commit is contained in:
@@ -1,5 +1,4 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import dayjs from "dayjs";
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
type: {
|
type: {
|
||||||
@@ -37,95 +36,13 @@ const emit = defineEmits(["updateNeeded"])
|
|||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const dataStore = useDataStore()
|
const dataStore = useDataStore()
|
||||||
const profileStore = useProfileStore()
|
|
||||||
const supabase = useSupabaseClient()
|
|
||||||
const files = useFiles()
|
|
||||||
const modal = useModal()
|
const modal = useModal()
|
||||||
|
|
||||||
const dataType = dataStore.dataTypes[type]
|
const dataType = dataStore.dataTypes[type]
|
||||||
|
|
||||||
const availableFiles = ref([])
|
|
||||||
|
|
||||||
const setup = async () => {
|
|
||||||
if(props.item.files) {
|
|
||||||
availableFiles.value = await files.selectSomeDocuments(props.item.files.map(i => i.id)) || []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
setup()
|
|
||||||
|
|
||||||
|
|
||||||
const openTab = ref(0)
|
const openTab = ref(0)
|
||||||
|
|
||||||
const renderedPhases = computed(() => {
|
|
||||||
console.log(props.item.phases)
|
|
||||||
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
|
|
||||||
} else if(phase.label === "Abgeschlossen") {
|
|
||||||
isAvailable = true
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
return {
|
|
||||||
...phase,
|
|
||||||
label: phase.optional ? `${phase.label}(optional)`: phase.label,
|
|
||||||
disabled: !isAvailable,
|
|
||||||
defaultOpen: phase.active ? true : false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const changeActivePhase = async (key) => {
|
|
||||||
let item = await useSupabaseSelectSingle("projects",props.item.id,'*')
|
|
||||||
|
|
||||||
let phaseLabel = ""
|
|
||||||
|
|
||||||
item.phases = item.phases.map(p => {
|
|
||||||
if(p.active) p.active = false
|
|
||||||
|
|
||||||
if(p.key === key) {
|
|
||||||
p.active = true
|
|
||||||
p.activated_at = dayjs().format()
|
|
||||||
p.activated_by = profileStore.activeProfile.id
|
|
||||||
phaseLabel = p.label
|
|
||||||
}
|
|
||||||
|
|
||||||
return p
|
|
||||||
})
|
|
||||||
|
|
||||||
const {error:updateError} = await supabase.from("projects").update({phases: item.phases}).eq("id",item.id)
|
|
||||||
|
|
||||||
console.log(updateError)
|
|
||||||
|
|
||||||
|
|
||||||
const {error} = await supabase.from("historyitems").insert({
|
|
||||||
createdBy: profileStore.activeProfile.id,
|
|
||||||
tenant: profileStore.currentTenant,
|
|
||||||
text: `Aktive Phase zu "${phaseLabel}" gewechselt`,
|
|
||||||
project: item.id
|
|
||||||
})
|
|
||||||
|
|
||||||
emit("updateNeeded")
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const invoiceDeliveryNotes = () => {
|
|
||||||
router.push(`/createDocument/edit?type=invoices&linkedDocuments=[${props.item.createddocuments.filter(i => i.type === "deliveryNotes").map(i => i.id)}]`)
|
|
||||||
}
|
|
||||||
|
|
||||||
const getAvailableQueryStringData = (keys) => {
|
const getAvailableQueryStringData = (keys) => {
|
||||||
let returnString =""
|
let returnString =""
|
||||||
@@ -232,362 +149,57 @@ const getAvailableQueryStringData = (keys) => {
|
|||||||
v-model="openTab"
|
v-model="openTab"
|
||||||
>
|
>
|
||||||
<template #item="{item:tab}">
|
<template #item="{item:tab}">
|
||||||
<div class="scroll">
|
<div v-if="tab.label === 'Informationen'" class="flex flex-row">
|
||||||
<div v-if="tab.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-archive-box"
|
|
||||||
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" :in-show="true"></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>
|
<EntityShowSubInformation
|
||||||
|
:top-level-type="type"
|
||||||
|
:item="props.item"
|
||||||
|
class="w-1/2 mr-5"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<EntityShowSubHistoryDisplay :top-level-type="type" :item="props.item" class="w-1/2"/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</UCard>
|
<EntityShowSubFiles
|
||||||
<UCard class="w-1/2">
|
:item="props.item"
|
||||||
<HistoryDisplay
|
:query-string-data="getAvailableQueryStringData()"
|
||||||
:type="type.substring(0,type.length-1)"
|
v-else-if="tab.label === 'Dateien'"
|
||||||
v-if="props.item.id"
|
:top-level-type="type"
|
||||||
:element-id="props.item.id"
|
type="files"
|
||||||
render-headline
|
@updateNeeded="emit('updateNeeded')"
|
||||||
/>
|
/>
|
||||||
</UCard>
|
<EntityShowSubPhases
|
||||||
</div>
|
:item="props.item"
|
||||||
<div v-else-if="tab.label === 'Dateien'">
|
:top-level-type="type"
|
||||||
<UCard class="mt-5">
|
v-else-if="tab.label === 'Phasen'"
|
||||||
<Toolbar>
|
:query-string-data="getAvailableQueryStringData()"
|
||||||
<DocumentUpload
|
@updateNeeded="emit('updateNeeded')"
|
||||||
:type="type.substring(0,type.length-1)"
|
/>
|
||||||
:element-id="item.id"
|
<EntityShowSubCreatedDocuments
|
||||||
@uploadFinished="emit('updateNeeded')"
|
:item="props.item"
|
||||||
|
:top-level-type="type"
|
||||||
|
v-else-if="tab.label === 'Ausgangsbelege'"
|
||||||
|
:query-string-data="getAvailableQueryStringData()"
|
||||||
|
/>
|
||||||
|
<EntityShowSubCostCentreReport
|
||||||
|
:top-level-type="type"
|
||||||
|
:item="props.item"
|
||||||
|
v-else-if="tab.label === 'Auswertung Kostenstelle'"
|
||||||
/>
|
/>
|
||||||
</Toolbar>
|
|
||||||
|
|
||||||
<DocumentList
|
<EntityShowSub
|
||||||
:key="props.item.files.length"
|
:item="props.item"
|
||||||
:documents="availableFiles"
|
:query-string-data="getAvailableQueryStringData()"
|
||||||
v-if="availableFiles.length > 0"
|
:tab-label="tab.label"
|
||||||
/>
|
:top-level-type="type"
|
||||||
<UAlert
|
|
||||||
v-else
|
v-else
|
||||||
icon="i-heroicons-x-mark"
|
|
||||||
title="Keine Dateien verfügbar"
|
|
||||||
/>
|
|
||||||
</UCard>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="tab.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="tab.label === 'Ansprechpartner'">
|
|
||||||
<UCard class="mt-5">
|
|
||||||
<Toolbar>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/standardEntity/contacts/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
|
|
||||||
>
|
|
||||||
+ Ansprechpartner
|
|
||||||
</UButton>
|
|
||||||
</Toolbar>
|
|
||||||
<UTable
|
|
||||||
:rows="props.item.contacts"
|
|
||||||
@select="(row) => router.push(`/standardEntity/contacts/show/${row.id}`)"
|
|
||||||
:columns="[{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
|
|
||||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
|
|
||||||
|
|
||||||
>
|
|
||||||
|
|
||||||
</UTable>
|
|
||||||
|
|
||||||
</UCard>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="tab.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>
|
|
||||||
<UButton
|
|
||||||
v-if="type === 'customers'"
|
|
||||||
@click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}&name=${encodeURIComponent(`${props.item.infoData.street}, ${props.item.infoData.zip} ${props.item.infoData.city}`)}`)"
|
|
||||||
>
|
|
||||||
+ Kundenadresse als 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="tab.label === 'Aufgaben'">
|
|
||||||
<UCard class="mt-5">
|
|
||||||
<Toolbar>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/standardEntity/tasks/create?${getAvailableQueryStringData()}`)"
|
|
||||||
>
|
|
||||||
+ 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="tab.label === 'Verträge'">
|
|
||||||
<UCard class="mt-5">
|
|
||||||
<Toolbar>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/standardEntity/contracts/create?${getAvailableQueryStringData({type: 'confirmationOrders'})}`)"
|
|
||||||
>
|
|
||||||
+ 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="tab.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="tab.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>
|
</template>
|
||||||
|
|
||||||
</UButton>
|
|
||||||
</template>
|
|
||||||
<template #item="{item, index}">
|
|
||||||
<UCard class="mx-5">
|
|
||||||
<template #header>
|
|
||||||
<span class="dark:text-white 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=${props.item.customer.id}&project=${props.item.id}`)"
|
|
||||||
>
|
|
||||||
{{button.label}}
|
|
||||||
</UButton>
|
|
||||||
</InputGroup>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<p v-if="item.activated_at" class="dark:text-white text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
|
|
||||||
<p v-if="item.activated_by" class="dark:text-white text-black">Aktiviert durch: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
|
|
||||||
<p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
|
|
||||||
</div>
|
|
||||||
</UCard>
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
|
||||||
</UAccordion>
|
|
||||||
</UCard>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="tab.label === 'Ausgangsbelege'">
|
|
||||||
<UCard class="mt-5">
|
|
||||||
|
|
||||||
<Toolbar>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'quotes'})}`)"
|
|
||||||
>
|
|
||||||
+ Angebot
|
|
||||||
</UButton>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'confirmationOrders'})}`)"
|
|
||||||
>
|
|
||||||
+ Auftragsbestätigung
|
|
||||||
</UButton>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'deliveryNotes'})}`)"
|
|
||||||
>
|
|
||||||
+ Lieferschein
|
|
||||||
</UButton>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'advanceInvoices'})}`)"
|
|
||||||
>
|
|
||||||
+ Abschlagsrechnung
|
|
||||||
</UButton>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
|
|
||||||
>
|
|
||||||
+ Rechnung
|
|
||||||
</UButton>
|
|
||||||
<UButton
|
|
||||||
@click="invoiceDeliveryNotes"
|
|
||||||
v-if="type === 'projects'"
|
|
||||||
>
|
|
||||||
Lieferscheine abrechnen
|
|
||||||
</UButton>
|
|
||||||
</Toolbar>
|
|
||||||
|
|
||||||
<UTable
|
|
||||||
:rows="props.item.createddocuments"
|
|
||||||
:columns="[{key:'state',label: 'Status'},{key:'type',label: 'Typ'},{key:'documentNumber',label: 'Nummer'},{key:'documentDate',label: 'Datum'},{key:'description',label: 'Beschreibung'}]"
|
|
||||||
@select="(i) => router.push(i.state === 'Entwurf' ? `/createDocument/edit/${i.id}`:`/createDocument/show/${i.id}`)"
|
|
||||||
>
|
|
||||||
<template #documentDate-data="{row}">
|
|
||||||
{{dayjs(row.documentDate).format("DD.MM.YY HH:mm")}}
|
|
||||||
</template>
|
|
||||||
<template #type-data="{row}">
|
|
||||||
{{dataStore.documentTypesForCreation[row.type].labelSingle}}
|
|
||||||
</template>
|
|
||||||
</UTable>
|
|
||||||
|
|
||||||
</UCard>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="tab.label === 'Termine'">
|
|
||||||
<UCard class="mt-5">
|
|
||||||
|
|
||||||
<Toolbar>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/standardEntity/events/create/?${getAvailableQueryStringData()}`)"
|
|
||||||
>
|
|
||||||
+ Termin
|
|
||||||
</UButton>
|
|
||||||
</Toolbar>
|
|
||||||
|
|
||||||
<UTable
|
|
||||||
:rows="props.item.events"
|
|
||||||
@select="(i) => router.push(`/standardEntity/events/show/${i.id}`)"
|
|
||||||
:columns="[{key:'name',label: 'Name'},{key:'eventtype',label: 'Typ'},{key:'startDate',label: 'Start'},{key:'endDate',label: 'Ende'},{key:'notes',label: 'Notizen'}]"
|
|
||||||
>
|
|
||||||
<template #startDate-data="{row}">
|
|
||||||
{{dayjs(row.documentDate).format("DD.MM.YY HH:mm")}}
|
|
||||||
</template>
|
|
||||||
<template #endDate-data="{row}">
|
|
||||||
{{dayjs(row.documentDate).format("DD.MM.YY HH:mm")}}
|
|
||||||
</template>
|
|
||||||
</UTable>
|
|
||||||
|
|
||||||
</UCard>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="tab.label === 'Auswertung Kostenstelle'">
|
|
||||||
<UCard class="mt-5">
|
|
||||||
|
|
||||||
<costcentre-display :item="props.item"/>
|
|
||||||
|
|
||||||
</UCard>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</UTabs>
|
</UTabs>
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
td {
|
|
||||||
border-bottom: 1px solid lightgrey;
|
|
||||||
vertical-align: top;
|
|
||||||
padding-bottom: 0.15em;
|
|
||||||
padding-top: 0.15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.scroll {
|
|
||||||
height: 80vh;
|
|
||||||
overflow-y: scroll;
|
|
||||||
padding: 0.3em;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
118
components/EntityShowSub.vue
Normal file
118
components/EntityShowSub.vue
Normal file
@@ -0,0 +1,118 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
queryStringData: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
tabLabel: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
topLevelType: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let type = ref("")
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const dataStore = useDataStore()
|
||||||
|
const tempStore = useTempStore()
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
let dataType = null
|
||||||
|
|
||||||
|
const selectedColumns = ref(null)
|
||||||
|
const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
|
||||||
|
|
||||||
|
const loaded = ref(false)
|
||||||
|
|
||||||
|
const setup = () => {
|
||||||
|
if(!props.type && props.tabLabel ) {
|
||||||
|
if(props.tabLabel === "Aufgaben") {
|
||||||
|
type.value = "tasks"
|
||||||
|
} else if(props.tabLabel === "Projekte") {
|
||||||
|
type.value = "projects"
|
||||||
|
} else if(props.tabLabel === "Termine") {
|
||||||
|
type.value = "events"
|
||||||
|
} else if(props.tabLabel === "Objekte") {
|
||||||
|
type.value = "plants"
|
||||||
|
} else if(props.tabLabel === "Ansprechpartner") {
|
||||||
|
type.value = "contacts"
|
||||||
|
} else if(props.tabLabel === "Verträge") {
|
||||||
|
type.value = "contracts"
|
||||||
|
} else if(props.tabLabel === "Überprüfungen") {
|
||||||
|
type.value = "checks"
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
type.value = props.type
|
||||||
|
}
|
||||||
|
|
||||||
|
dataType = dataStore.dataTypes[type.value]
|
||||||
|
|
||||||
|
selectedColumns.value = tempStore.columns[type.value] ? tempStore.columns[type.value] : dataType.templateColumns.filter(i => !i.disabledInTable)
|
||||||
|
|
||||||
|
loaded.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
setup()
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UCard class="mt-5" v-if="loaded" style="height: 80vh">
|
||||||
|
<Toolbar>
|
||||||
|
<UButton
|
||||||
|
@click="router.push(`/standardEntity/${type}/create?${props.queryStringData}`)"
|
||||||
|
>
|
||||||
|
+ {{dataType.labelSingle}}
|
||||||
|
</UButton>
|
||||||
|
<UButton
|
||||||
|
v-if="props.topLevelType === 'customers' && type === 'plants'"
|
||||||
|
@click="router.push(`/standardEntity/plants/create?${props.queryStringData}&name=${encodeURIComponent(`${props.item.infoData.street}, ${props.item.infoData.zip} ${props.item.infoData.city}`)}`)"
|
||||||
|
>
|
||||||
|
+ Kundenadresse als Objekt
|
||||||
|
</UButton>
|
||||||
|
|
||||||
|
<template #right>
|
||||||
|
<USelectMenu
|
||||||
|
v-model="selectedColumns"
|
||||||
|
icon="i-heroicons-adjustments-horizontal-solid"
|
||||||
|
:options="dataType.templateColumns.filter(i => !i.disabledInTable)"
|
||||||
|
multiple
|
||||||
|
class="hidden lg:block"
|
||||||
|
by="key"
|
||||||
|
:color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
|
||||||
|
:ui-menu="{ width: 'min-w-max' }"
|
||||||
|
@change="tempStore.modifyColumns(type,selectedColumns)"
|
||||||
|
>
|
||||||
|
<template #label>
|
||||||
|
Spalten
|
||||||
|
</template>
|
||||||
|
</USelectMenu>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</Toolbar>
|
||||||
|
<EntityTable
|
||||||
|
:type="type"
|
||||||
|
:columns="columns"
|
||||||
|
:rows="props.item[type]"
|
||||||
|
/>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
28
components/EntityShowSubCostCentreReport.vue
Normal file
28
components/EntityShowSubCostCentreReport.vue
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
queryStringData: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
topLevelType: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UCard class="mt-5 scroll" style="height: 80vh">
|
||||||
|
<costcentre-display :item="props.item"/>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
228
components/EntityShowSubCreatedDocuments.vue
Normal file
228
components/EntityShowSubCreatedDocuments.vue
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import {useSum} from "~/composables/useSum.js";
|
||||||
|
import {useSupabaseSelect} from "~/composables/useSupabase.js";
|
||||||
|
defineShortcuts({
|
||||||
|
/*'/': () => {
|
||||||
|
//console.log(searchinput)
|
||||||
|
//searchinput.value.focus()
|
||||||
|
document.getElementById("searchinput").focus()
|
||||||
|
},*/
|
||||||
|
'Enter': {
|
||||||
|
usingInput: true,
|
||||||
|
handler: () => {
|
||||||
|
router.push(`/standardEntity/${props.topLevelType}/show/${props.item.createddocuments.value[selectedItem.value].id}`)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'arrowdown': () => {
|
||||||
|
if(selectedItem.value < props.item.createddocuments.length - 1) {
|
||||||
|
selectedItem.value += 1
|
||||||
|
} else {
|
||||||
|
selectedItem.value = 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'arrowup': () => {
|
||||||
|
if(selectedItem.value === 0) {
|
||||||
|
selectedItem.value = props.item.createddocuments.length - 1
|
||||||
|
} else {
|
||||||
|
selectedItem.value -= 1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
queryStringData: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
topLevelType: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const dataStore = useDataStore()
|
||||||
|
const tempStore = useTempStore()
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const createddocuments = ref([])
|
||||||
|
|
||||||
|
const setup = async () => {
|
||||||
|
createddocuments.value = await useSupabaseSelect("createddocuments")
|
||||||
|
}
|
||||||
|
setup()
|
||||||
|
|
||||||
|
const templateColumns = [
|
||||||
|
{
|
||||||
|
key: "reference",
|
||||||
|
label: "Referenz",
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'type',
|
||||||
|
label: "Typ",
|
||||||
|
sortable: true
|
||||||
|
},{
|
||||||
|
key: 'state',
|
||||||
|
label: "Status",
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "date",
|
||||||
|
label: "Datum",
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "dueDate",
|
||||||
|
label: "Fällig",
|
||||||
|
sortable: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
const selectedColumns = ref(tempStore.columns["createddocuments"] ? tempStore.columns["createddocuments"] : templateColumns)
|
||||||
|
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.find(i => i.key === column.key)))
|
||||||
|
|
||||||
|
const selectedItem = ref(0)
|
||||||
|
|
||||||
|
const getAvailableQueryStringData = (keys) => {
|
||||||
|
let returnString = props.queryStringData
|
||||||
|
|
||||||
|
function addParam (key,value) {
|
||||||
|
if(returnString.length === 0) {
|
||||||
|
returnString += `${key}=${value}`
|
||||||
|
} else {
|
||||||
|
returnString += `&${key}=${value}`
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(keys) {
|
||||||
|
Object.keys(keys).forEach(key => {
|
||||||
|
addParam(key, keys[key])
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return returnString
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const invoiceDeliveryNotes = () => {
|
||||||
|
router.push(`/createDocument/edit?type=invoices&linkedDocuments=[${props.item.createddocuments.filter(i => i.type === "deliveryNotes").map(i => i.id)}]`)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UCard class="mt-5" style="height: 80vh">
|
||||||
|
<Toolbar>
|
||||||
|
<UButton
|
||||||
|
@click="invoiceDeliveryNotes"
|
||||||
|
v-if="props.topLevelType === 'projects'"
|
||||||
|
>
|
||||||
|
Lieferscheine abrechnen
|
||||||
|
</UButton>
|
||||||
|
<UButton
|
||||||
|
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'quotes'})}`)"
|
||||||
|
>
|
||||||
|
+ Angebot
|
||||||
|
</UButton>
|
||||||
|
<UButton
|
||||||
|
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'confirmationOrders'})}`)"
|
||||||
|
>
|
||||||
|
+ Auftragsbestätigung
|
||||||
|
</UButton>
|
||||||
|
<UButton
|
||||||
|
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'deliveryNotes'})}`)"
|
||||||
|
>
|
||||||
|
+ Lieferschein
|
||||||
|
</UButton>
|
||||||
|
<UButton
|
||||||
|
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'advanceInvoices'})}`)"
|
||||||
|
>
|
||||||
|
+ Abschlagsrechnung
|
||||||
|
</UButton>
|
||||||
|
<UButton
|
||||||
|
@click="router.push(`/createDocument/edit/?${getAvailableQueryStringData({type: 'invoices'})}`)"
|
||||||
|
>
|
||||||
|
+ Rechnung
|
||||||
|
</UButton>
|
||||||
|
|
||||||
|
<template #right>
|
||||||
|
<USelectMenu
|
||||||
|
v-model="selectedColumns"
|
||||||
|
icon="i-heroicons-adjustments-horizontal-solid"
|
||||||
|
:options="templateColumns"
|
||||||
|
multiple
|
||||||
|
class="hidden lg:block"
|
||||||
|
by="key"
|
||||||
|
@change="tempStore.modifyColumns('createddocuments',selectedColumns)"
|
||||||
|
>
|
||||||
|
<template #label>
|
||||||
|
Spalten
|
||||||
|
</template>
|
||||||
|
</USelectMenu>
|
||||||
|
</template>
|
||||||
|
</Toolbar>
|
||||||
|
|
||||||
|
<UTable
|
||||||
|
:rows="props.item.createddocuments"
|
||||||
|
:columns="columns"
|
||||||
|
class="w-full"
|
||||||
|
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||||
|
@select="selectItem"
|
||||||
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
|
||||||
|
>
|
||||||
|
<template #type-data="{row}">
|
||||||
|
{{dataStore.documentTypesForCreation[row.type].labelSingle}}
|
||||||
|
</template>
|
||||||
|
<template #state-data="{row}">
|
||||||
|
<span
|
||||||
|
v-if="row.state === 'Entwurf'"
|
||||||
|
class="text-rose-500"
|
||||||
|
>
|
||||||
|
{{row.state}}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="row.state === 'Gebucht'"
|
||||||
|
class="text-cyan-500"
|
||||||
|
>
|
||||||
|
{{row.state}}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
v-if="row.state === 'Abgeschlossen'"
|
||||||
|
class="text-primary-500"
|
||||||
|
>
|
||||||
|
{{row.state}}
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
<template #reference-data="{row}">
|
||||||
|
<span v-if="row === props.item.createddocuments[selectedItem]" class="text-primary-500 font-bold">{{row.documentNumber}}</span>
|
||||||
|
<span v-else>{{row.documentNumber}}</span>
|
||||||
|
</template>
|
||||||
|
<template #date-data="{row}">
|
||||||
|
<span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
|
||||||
|
<span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
|
||||||
|
</template>
|
||||||
|
<template #dueDate-data="{row}">
|
||||||
|
<span v-if="row.paymentDays && ['invoices','advanceInvoices'].includes(row.type)" >{{row.documentDate ? dayjs(row.documentDate).add(row.paymentDays,'day').format("DD.MM.YY") : ''}}</span>
|
||||||
|
</template>
|
||||||
|
<!-- <template #amount-data="{row}">
|
||||||
|
<span v-if="row.type !== 'deliveryNotes'">{{useCurrency(useSum().getCreatedDocumentSum(row, createddocuments))}}</span>
|
||||||
|
</template>-->
|
||||||
|
</UTable>
|
||||||
|
|
||||||
|
</UCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
63
components/EntityShowSubFiles.vue
Normal file
63
components/EntityShowSubFiles.vue
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
queryStringData: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
topLevelType: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(["updateNeeded"])
|
||||||
|
|
||||||
|
const files = useFiles()
|
||||||
|
|
||||||
|
|
||||||
|
const availableFiles = ref([])
|
||||||
|
|
||||||
|
const setup = async () => {
|
||||||
|
if(props.item.files) {
|
||||||
|
availableFiles.value = await files.selectSomeDocuments(props.item.files.map(i => i.id)) || []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setup()
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UCard class="mt-5" style="height: 80vh">
|
||||||
|
<Toolbar>
|
||||||
|
<DocumentUpload
|
||||||
|
:type="props.type.substring(0,props.type.length-1)"
|
||||||
|
:element-id="props.item.id"
|
||||||
|
@uploadFinished="emit('updateNeeded')"
|
||||||
|
/>
|
||||||
|
</Toolbar>
|
||||||
|
|
||||||
|
<DocumentList
|
||||||
|
:key="props.item.files.length"
|
||||||
|
:documents="availableFiles"
|
||||||
|
v-if="availableFiles.length > 0"
|
||||||
|
/>
|
||||||
|
<UAlert
|
||||||
|
v-else
|
||||||
|
icon="i-heroicons-x-mark"
|
||||||
|
title="Keine Dateien verfügbar"
|
||||||
|
/>
|
||||||
|
</UCard>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
37
components/EntityShowSubHistoryDisplay.vue
Normal file
37
components/EntityShowSubHistoryDisplay.vue
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
queryStringData: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
topLevelType: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const dataStore = useDataStore()
|
||||||
|
|
||||||
|
const dataType = dataStore.dataTypes[props.topLevelType]
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UCard class="mt-5 scroll" style="height: 80vh">
|
||||||
|
<HistoryDisplay
|
||||||
|
:type="props.topLevelType.substring(0,props.topLevelType.length-1)"
|
||||||
|
v-if="props.item.id"
|
||||||
|
:element-id="props.item.id"
|
||||||
|
render-headline
|
||||||
|
/>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
70
components/EntityShowSubInformation.vue
Normal file
70
components/EntityShowSubInformation.vue
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
queryStringData: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
topLevelType: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const dataStore = useDataStore()
|
||||||
|
const tempStore = useTempStore()
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
|
||||||
|
const dataType = dataStore.dataTypes[props.topLevelType]
|
||||||
|
|
||||||
|
// const selectedColumns = ref(tempStore.columns[props.topLevelType] ? tempStore.columns[props.topLevelType] : dataType.templateColumns.filter(i => !i.disabledInTable))
|
||||||
|
// const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UCard class="mt-5 scroll" style="height: 80vh">
|
||||||
|
<UAlert
|
||||||
|
v-if="props.item.archived"
|
||||||
|
color="rose"
|
||||||
|
variant="outline"
|
||||||
|
:title="`${dataType.labelSingle} archiviert`"
|
||||||
|
icon="i-heroicons-archive-box"
|
||||||
|
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" :in-show="true"></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>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
td {
|
||||||
|
border-bottom: 1px solid lightgrey;
|
||||||
|
vertical-align: top;
|
||||||
|
padding-bottom: 0.15em;
|
||||||
|
padding-top: 0.15em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
160
components/EntityShowSubPhases.vue
Normal file
160
components/EntityShowSubPhases.vue
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
queryStringData: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
topLevelType: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(["updateNeeded"]);
|
||||||
|
|
||||||
|
const router = useRouter()
|
||||||
|
const profileStore = useProfileStore()
|
||||||
|
const supabase = useSupabaseClient()
|
||||||
|
|
||||||
|
const renderedPhases = computed(() => {
|
||||||
|
if(props.topLevelType === "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
|
||||||
|
} else if(phase.label === "Abgeschlossen") {
|
||||||
|
isAvailable = true
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
...phase,
|
||||||
|
label: phase.optional ? `${phase.label}(optional)`: phase.label,
|
||||||
|
disabled: !isAvailable,
|
||||||
|
defaultOpen: phase.active ? true : false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const changeActivePhase = async (key) => {
|
||||||
|
let item = await useSupabaseSelectSingle("projects",props.item.id,'*')
|
||||||
|
|
||||||
|
let phaseLabel = ""
|
||||||
|
|
||||||
|
item.phases = item.phases.map(p => {
|
||||||
|
if(p.active) p.active = false
|
||||||
|
|
||||||
|
if(p.key === key) {
|
||||||
|
p.active = true
|
||||||
|
p.activated_at = dayjs().format()
|
||||||
|
p.activated_by = profileStore.activeProfile.id
|
||||||
|
phaseLabel = p.label
|
||||||
|
}
|
||||||
|
|
||||||
|
return p
|
||||||
|
})
|
||||||
|
|
||||||
|
const {error:updateError} = await supabase.from("projects").update({phases: item.phases}).eq("id",item.id)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const {error} = await supabase.from("historyitems").insert({
|
||||||
|
createdBy: profileStore.activeProfile.id,
|
||||||
|
tenant: profileStore.currentTenant,
|
||||||
|
text: `Aktive Phase zu "${phaseLabel}" gewechselt`,
|
||||||
|
project: item.id
|
||||||
|
})
|
||||||
|
|
||||||
|
emit("updateNeeded")
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<UCard class="mt-5 scroll" style="height: 80vh">
|
||||||
|
<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="dark:text-white 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}&${props.queryStringData}`)"
|
||||||
|
>
|
||||||
|
{{button.label}}
|
||||||
|
</UButton>
|
||||||
|
</InputGroup>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p v-if="item.activated_at" class="dark:text-white text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
|
||||||
|
<p v-if="item.activated_by" class="dark:text-white text-black">Aktiviert durch: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
|
||||||
|
<p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
|
||||||
|
</template>
|
||||||
|
</UAccordion>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user