Changes
This commit is contained in:
23
components/OwnFields.vue
Normal file
23
components/OwnFields.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
resource: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
elementId: {
|
||||
required: true,
|
||||
type: String
|
||||
},
|
||||
edit: {
|
||||
type: Boolean
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -5,6 +5,8 @@ const supabase = useSupabaseClient()
|
||||
//const tenant = ref(dataStore.currentTenant)
|
||||
|
||||
const selectedProfile = ref(dataStore.activeProfile.id)
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -372,6 +372,10 @@ let links = computed(() => {
|
||||
label: "Text Vorlagen",
|
||||
to: "/settings/texttemplates",
|
||||
icon: "i-heroicons-clipboard-document-list"
|
||||
},{
|
||||
label: "Eigene Felder",
|
||||
to: "/settings/ownfields",
|
||||
icon: "i-heroicons-clipboard-document-list"
|
||||
},{
|
||||
label: "Firmeneinstellungen",
|
||||
to: "/settings/tenant",
|
||||
|
||||
@@ -6,6 +6,7 @@ export default defineNuxtConfig({
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
ssr:false,
|
||||
imports: {
|
||||
dirs: ['stores']
|
||||
},
|
||||
|
||||
@@ -37,12 +37,15 @@ const itemInfo = ref({
|
||||
name: "",
|
||||
customer: null,
|
||||
active: true,
|
||||
ownFields: {}
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = async () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
if(mode.value === "show" ){
|
||||
itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*, customer(id,name)")
|
||||
} else if (mode.value === "edit"){
|
||||
itemInfo.value = await useSupabaseSelectSingle("contracts", route.params.id, "*")
|
||||
}
|
||||
|
||||
|
||||
@@ -110,296 +113,324 @@ setupPage()
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
v-if="itemInfo.id && mode === 'show'"
|
||||
:items="[{label: 'Informationen'}, {label: 'Dokumente'}]"
|
||||
class="p-5"
|
||||
v-model="openTab"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<div v-if="item.label === 'Informationen'" class="flex mt-5">
|
||||
<div class="w-1/2 mr-5">
|
||||
<UCard>
|
||||
<div class="text-wrap">
|
||||
<p>Kundennummer: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
|
||||
Beschreibung:<br>
|
||||
{{itemInfo.description}}<br>
|
||||
</div>
|
||||
</UCard>
|
||||
<UDashboardPanelContent>
|
||||
<UTabs
|
||||
v-if="itemInfo.id && mode === 'show'"
|
||||
:items="[{label: 'Informationen'}, {label: 'Dokumente'}]"
|
||||
class="p-5"
|
||||
v-model="openTab"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<div v-if="item.label === 'Informationen'" class="flex mt-5">
|
||||
<div class="w-1/2 mr-5">
|
||||
<UCard>
|
||||
<div class="text-wrap">
|
||||
<p>Kundennummer: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
|
||||
Eigene Felder: {{itemInfo.ownFields}}<br>
|
||||
Beschreibung:<br>
|
||||
{{itemInfo.description}}<br>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<UCard class="h-full">
|
||||
<HistoryDisplay
|
||||
type="contract"
|
||||
v-if="itemInfo"
|
||||
:element-id="itemInfo.id"
|
||||
:render-headline="true"
|
||||
/>
|
||||
</UCard>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <UBadge
|
||||
v-if="itemInfo.active"
|
||||
>
|
||||
Vertrag aktiv
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else
|
||||
color="red"
|
||||
>
|
||||
Vertrag gesperrt
|
||||
</UBadge>-->
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<UCard class="h-full">
|
||||
<HistoryDisplay
|
||||
type="contract"
|
||||
v-if="itemInfo"
|
||||
:element-id="itemInfo.id"
|
||||
:render-headline="true"
|
||||
<div v-else-if="item.label === 'Dokumente'">
|
||||
<UCard class="mt-5">
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="contract"
|
||||
:element-id="itemInfo.id"
|
||||
/>
|
||||
</Toolbar>
|
||||
<DocumentList
|
||||
:documents="dataStore.getDocumentsByContractId(itemInfo.id)"
|
||||
/>
|
||||
</UCard>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
</UTabs>
|
||||
<UForm v-else-if="mode == 'edit' || mode == 'create'" class="p-5" >
|
||||
<div class="mx-auto w-4/5">
|
||||
<div class="flex flex-row justify-around">
|
||||
<div class="w-1/2">
|
||||
<UDivider>Vertragsdaten</UDivider>
|
||||
<UFormGroup
|
||||
label="Name:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.name"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Kunde:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.customer"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
:options="dataStore.customers"
|
||||
@change="itemInfo.contact = null"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kein Kunde ausgewählt" }}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Ansprechpartner:"
|
||||
v-if="itemInfo.customer"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.contact"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
:options="dataStore.getContactsByCustomerId(itemInfo.customer)"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getContactById(itemInfo.contact) ? dataStore.getContactById(itemInfo.contact).fullName : "Kein Ansprechpartner ausgewählt" }}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<InputGroup>
|
||||
<UFormGroup
|
||||
label="Vertrag aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Vertrag wiederkehrend:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.recurring"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
|
||||
|
||||
<!-- <UBadge
|
||||
v-if="itemInfo.active"
|
||||
<InputGroup>
|
||||
<UFormGroup
|
||||
label="Vertragsstart:"
|
||||
class="mt-2"
|
||||
>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.startDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Vertragsende(voraussichtlich):"
|
||||
class="mt-2"
|
||||
>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.endDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="mindest Vertragslaufzeit:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="['12 Monate','24 Monate','36 Monate','48 Monate']"
|
||||
v-model="itemInfo.duration"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Datum der Unterzeichnung:"
|
||||
class="mt-2"
|
||||
>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.signDate ? dayjs(itemInfo.signDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.signDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
<div class=" ml-5 w-1/2">
|
||||
<UDivider>Abrechnung</UDivider>
|
||||
<UFormGroup
|
||||
label="Rechnungsversand:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="['E-Mail', 'Post']"
|
||||
v-model="itemInfo.invoiceDispatch"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Zahlungsart:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="['Einzug', 'Überweisung']"
|
||||
v-model="itemInfo.paymentType"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Sepa Mandat"
|
||||
>
|
||||
<InputGroup>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.sepaDate ? dayjs(itemInfo.sepaDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.sepaDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
<UInput
|
||||
placeholder="Mandatsreferenz"
|
||||
class="flex-auto"
|
||||
v-model="itemInfo.sepaRef"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Kontodaten:"
|
||||
>
|
||||
<InputGroup>
|
||||
<UInput
|
||||
v-model="itemInfo.bankingIban"
|
||||
placeholder="IBAN"
|
||||
class="w-1/2"
|
||||
/>
|
||||
<UInput
|
||||
v-model="itemInfo.bankingOwner"
|
||||
class="w-1/2"
|
||||
placeholder="Inhaber"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Bankdaten:"
|
||||
>
|
||||
<InputGroup>
|
||||
<UInput
|
||||
v-model="itemInfo.bankingName"
|
||||
placeholder="Name"
|
||||
class="w-1/2"
|
||||
/>
|
||||
<UInput
|
||||
v-model="itemInfo.bankingBIC"
|
||||
placeholder="BIC"
|
||||
class="w-1/2"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
</UFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
<UFormGroup
|
||||
label="Notizen:"
|
||||
>
|
||||
Vertrag aktiv
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else
|
||||
color="red"
|
||||
>
|
||||
Vertrag gesperrt
|
||||
</UBadge>-->
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Dokumente'">
|
||||
<UCard class="mt-5">
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="contract"
|
||||
:element-id="itemInfo.id"
|
||||
/>
|
||||
</Toolbar>
|
||||
<DocumentList
|
||||
:documents="dataStore.getDocumentsByContractId(itemInfo.id)"
|
||||
<UTextarea
|
||||
v-model="itemInfo.notes"
|
||||
rows="6"
|
||||
maxrows="12"
|
||||
/>
|
||||
</UCard>
|
||||
</UFormGroup>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="dataStore.ownTenant.ownFields"
|
||||
>
|
||||
<UDivider
|
||||
class="mt-3"
|
||||
>Eigene Felder</UDivider>
|
||||
|
||||
|
||||
</template>
|
||||
</UTabs>
|
||||
<UForm v-else-if="mode == 'edit' || mode == 'create'" class="p-5" >
|
||||
<div class="mx-auto w-4/5">
|
||||
<div class="flex flex-row justify-around">
|
||||
<div class="w-1/2">
|
||||
<UDivider>Vertragsdaten</UDivider>
|
||||
<UFormGroup
|
||||
label="Name:"
|
||||
v-for="field in dataStore.ownTenant.ownFields.contracts"
|
||||
:key="field.key"
|
||||
:label="field.label"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.name"
|
||||
v-if="field.type === 'text'"
|
||||
v-model="itemInfo.ownFields[field.key]"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Kunde:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.customer"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
:options="dataStore.customers"
|
||||
@change="itemInfo.contact = null"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kein Kunde ausgewählt" }}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Ansprechpartner:"
|
||||
v-if="itemInfo.customer"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.contact"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
:options="dataStore.getContactsByCustomerId(itemInfo.customer)"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getContactById(itemInfo.contact) ? dataStore.getContactById(itemInfo.contact).fullName : "Kein Ansprechpartner ausgewählt" }}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<InputGroup>
|
||||
<UFormGroup
|
||||
label="Vertrag aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Vertrag wiederkehrend:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.recurring"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
|
||||
|
||||
<InputGroup>
|
||||
<UFormGroup
|
||||
label="Vertragsstart:"
|
||||
class="mt-2"
|
||||
>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.startDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Vertragsende(voraussichtlich):"
|
||||
class="mt-2"
|
||||
>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.endDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="mindest Vertragslaufzeit:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="['12 Monate','24 Monate','36 Monate','48 Monate']"
|
||||
v-model="itemInfo.duration"
|
||||
v-else-if="field.type === 'select'"
|
||||
:options="field.options"
|
||||
v-model="itemInfo.ownFields[field.key]"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Datum der Unterzeichnung:"
|
||||
class="mt-2"
|
||||
>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.signDate ? dayjs(itemInfo.signDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.signDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
<div class=" ml-5 w-1/2">
|
||||
<UDivider>Abrechnung</UDivider>
|
||||
<UFormGroup
|
||||
label="Rechnungsversand:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="['E-Mail', 'Post']"
|
||||
v-model="itemInfo.invoiceDispatch"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Zahlungsart:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="['Einzug', 'Überweisung']"
|
||||
v-model="itemInfo.paymentType"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Sepa Mandat"
|
||||
>
|
||||
<InputGroup>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.sepaDate ? dayjs(itemInfo.sepaDate).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.sepaDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
<UInput
|
||||
placeholder="Mandatsreferenz"
|
||||
class="flex-auto"
|
||||
v-model="itemInfo.sepaRef"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Kontodaten:"
|
||||
>
|
||||
<InputGroup>
|
||||
<UInput
|
||||
v-model="itemInfo.bankingIban"
|
||||
placeholder="IBAN"
|
||||
class="w-1/2"
|
||||
/>
|
||||
<UInput
|
||||
v-model="itemInfo.bankingOwner"
|
||||
class="w-1/2"
|
||||
placeholder="Inhaber"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Bankdaten:"
|
||||
>
|
||||
<InputGroup>
|
||||
<UInput
|
||||
v-model="itemInfo.bankingName"
|
||||
placeholder="Name"
|
||||
class="w-1/2"
|
||||
/>
|
||||
<UInput
|
||||
v-model="itemInfo.bankingBIC"
|
||||
placeholder="BIC"
|
||||
class="w-1/2"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
</UFormGroup>
|
||||
</div>
|
||||
</div>
|
||||
<UFormGroup
|
||||
label="Notizen:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.notes"
|
||||
rows="6"
|
||||
maxrows="12"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</UForm>
|
||||
</UDashboardPanelContent>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -58,15 +58,6 @@ const editItem = async () => {
|
||||
await router.push(`/customers/edit/${itemInfo.value.id}`)
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(itemInfo.value) {
|
||||
router.push(`/customers/show/${itemInfo.value.id}`)
|
||||
} else {
|
||||
router.push(`/customers`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const setCityByZip = async () => {
|
||||
itemInfo.value.infoData.city = await useZipCheck(itemInfo.value.infoData.zip)
|
||||
}
|
||||
@@ -108,7 +99,7 @@ setupPage()
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="cancelEditorCreate"
|
||||
@click="itemInfo ? router.push(`/customers/show/${itemInfo.id}`) : router.push(`/customers`)"
|
||||
color="red"
|
||||
class="ml-2"
|
||||
v-if="mode === 'edit' || mode === 'create'"
|
||||
|
||||
@@ -20,13 +20,14 @@
|
||||
>
|
||||
<p v-for="time in dataStore.getStartedWorkingTimes()"><UIcon name="i-heroicons-check"/>{{dataStore.getProfileById(time.profile).fullName}}</p>
|
||||
</UDashboardCard>
|
||||
<!-- <UDashboardCard
|
||||
<!--TODO: Fix Card Table overflowing <UDashboardCard
|
||||
title="Offene Aufgaben"
|
||||
v-if="dataStore.getOpenTasksCount > 0"
|
||||
class="w-1/2 h-1/2"
|
||||
>
|
||||
<UTable
|
||||
:rows="dataStore.tasks.filter(i => i.categorie !== 'Erledigt' && (i.profile === dataStore.activeProfile.id ||!i.profile))"
|
||||
@select="(row) => router.push(`/tasks/show/${row.id}`)"
|
||||
:columns="[
|
||||
{
|
||||
key: 'categorie',
|
||||
@@ -36,7 +37,13 @@
|
||||
label: 'Name'
|
||||
},
|
||||
]"
|
||||
></UTable>
|
||||
>
|
||||
<template #categorie-data="{row}">
|
||||
<span v-if="row.categorie === 'Dringend'" class="text-rose-500">{{row.categorie}}</span>
|
||||
<span v-else-if="row.categorie === 'In Bearbeitung'" class="text-primary-500">{{row.categorie}}</span>
|
||||
<span v-else>{{row.categorie}}</span>
|
||||
</template>
|
||||
</UTable>
|
||||
</UDashboardCard>-->
|
||||
|
||||
</UDashboardPanelContent>
|
||||
@@ -51,6 +58,7 @@ definePageMeta({
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const toast = useToast()
|
||||
const router = useRouter()
|
||||
|
||||
const { isNotificationsSlideoverOpen } = useDashboard()
|
||||
const items = [[{
|
||||
|
||||
@@ -9,8 +9,6 @@ const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
|
||||
let currentItem = ref(null)
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({
|
||||
@@ -22,11 +20,9 @@ const categories = ["Offen", "In Bearbeitung", "Dringed", "Erledigt"]
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = dataStore.getTaskById(Number(useRoute().params.id))
|
||||
itemInfo.value = dataStore.getTaskById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
|
||||
if(mode.value === "create") {
|
||||
let query = route.query
|
||||
if(query.project) itemInfo.value.project = Number(query.project)
|
||||
@@ -34,17 +30,17 @@ const setupPage = () => {
|
||||
|
||||
}
|
||||
|
||||
if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
|
||||
if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
|
||||
}
|
||||
|
||||
|
||||
const editItem = async () => {
|
||||
router.push(`/tasks/edit/${currentItem.value.id}`)
|
||||
router.push(`/tasks/edit/${itemInfo.value.id}`)
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/tasks/show/${currentItem.value.id}`)
|
||||
if(itemInfo.value) {
|
||||
router.push(`/tasks/show/${itemInfo.value.id}`)
|
||||
} else {
|
||||
router.push(`/tasks/`)
|
||||
}
|
||||
@@ -55,7 +51,23 @@ setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Aufgabe erstellen' : 'Aufgabe bearbeiten')">
|
||||
<UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Aufgabe erstellen' : 'Aufgabe bearbeiten')">
|
||||
<template #left>
|
||||
<UButton
|
||||
icon="i-heroicons-chevron-left"
|
||||
variant="outline"
|
||||
@click="router.push(`/tasks`)"
|
||||
>
|
||||
Aufgaben
|
||||
</UButton>
|
||||
</template>
|
||||
<template #center>
|
||||
<h1
|
||||
v-if="itemInfo"
|
||||
:class="['text-xl','font-medium'/*, ... itemInfo.categorie === 'Erledigt' ? ['text-primary'] : ['text-rose-500']*/]"
|
||||
>{{itemInfo ? `Aufgabe: ${itemInfo.name}` : (mode === 'create' ? 'Aufgabe erstellen' : 'Aufgabe bearbeiten')}}</h1>
|
||||
|
||||
</template>
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@@ -87,7 +99,7 @@ setupPage()
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
:items="[{label: 'Informationen'},{label: 'Logbuch'}]"
|
||||
v-if="currentItem && mode === 'show'"
|
||||
v-if="itemInfo && mode === 'show'"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
@@ -96,17 +108,17 @@ setupPage()
|
||||
|
||||
|
||||
<div class="truncate">
|
||||
<p>Kategorie: {{currentItem.categorie}}</p>
|
||||
<p v-if="currentItem.project">Projekt: <nuxt-link :to="`/projects/show/${currentItem.project}`">{{dataStore.getProjectById(currentItem.project).name}}</nuxt-link></p>
|
||||
<p>Beschreibung: <br><pre v-html="currentItem.description"></pre></p>
|
||||
<p>Kategorie: {{itemInfo.categorie}}</p>
|
||||
<p v-if="itemInfo.project">Projekt: <nuxt-link :to="`/projects/show/${itemInfo.project}`">{{dataStore.getProjectById(itemInfo.project).name}}</nuxt-link></p>
|
||||
<p>Beschreibung: <br><pre v-html="itemInfo.description"></pre></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Logbuch'">
|
||||
<HistoryDisplay
|
||||
type="task"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
v-if="itemInfo"
|
||||
:element-id="itemInfo.id"
|
||||
/>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
Reference in New Issue
Block a user