Added Scrollcontainer
This commit is contained in:
@@ -128,234 +128,238 @@ setupPage()
|
|||||||
</template>
|
</template>
|
||||||
</UDashboardNavbar>
|
</UDashboardNavbar>
|
||||||
|
|
||||||
<UTabs
|
<UDashboardPanelContent>
|
||||||
v-if="itemInfo.id && mode == 'show'"
|
<UTabs
|
||||||
:items="[{label: 'Informationen'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}]"
|
v-if="itemInfo.id && mode == 'show'"
|
||||||
class="p-5"
|
:items="[{label: 'Informationen'},{label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}]"
|
||||||
v-model="openTab"
|
class="p-5"
|
||||||
>
|
v-model="openTab"
|
||||||
<template #item="{item}">
|
>
|
||||||
<div v-if="item.label === 'Informationen'" class="flex mt-5">
|
<template #item="{item}">
|
||||||
<div class="w-1/2 mr-5">
|
<div v-if="item.label === 'Informationen'" class="flex mt-5">
|
||||||
<UCard >
|
<div class="w-1/2 mr-5">
|
||||||
<div class="text-wrap">
|
<UCard >
|
||||||
<p>Kundennummer: {{itemInfo.customerNumber}}</p>
|
<div class="text-wrap">
|
||||||
<p>Typ: {{itemInfo.isCompany ? 'Firma' : 'Privatperson'}}</p>
|
<p>Kundennummer: {{itemInfo.customerNumber}}</p>
|
||||||
<p v-if="itemInfo.infoData.street">Straße + Hausnummer: {{itemInfo.infoData.street}}</p>
|
<p>Typ: {{itemInfo.isCompany ? 'Firma' : 'Privatperson'}}</p>
|
||||||
<p v-if="itemInfo.infoData.zip && itemInfo.infoData.city">PLZ + Ort: {{itemInfo.infoData.zip}} {{itemInfo.infoData.city}}</p>
|
<p v-if="itemInfo.infoData.street">Straße + Hausnummer: {{itemInfo.infoData.street}}</p>
|
||||||
<p v-if="itemInfo.infoData.tel">Telefon: {{itemInfo.infoData.tel}}</p>
|
<p v-if="itemInfo.infoData.zip && itemInfo.infoData.city">PLZ + Ort: {{itemInfo.infoData.zip}} {{itemInfo.infoData.city}}</p>
|
||||||
<p v-if="itemInfo.infoData.email">E-Mail: {{itemInfo.infoData.email}}</p>
|
<p v-if="itemInfo.infoData.tel">Telefon: {{itemInfo.infoData.tel}}</p>
|
||||||
<p v-if="itemInfo.infoData.web">Web: {{itemInfo.infoData.web}}</p>
|
<p v-if="itemInfo.infoData.email">E-Mail: {{itemInfo.infoData.email}}</p>
|
||||||
<p v-if="itemInfo.infoData.ustid">USt-Id: {{itemInfo.infoData.ustid}}</p>
|
<p v-if="itemInfo.infoData.web">Web: {{itemInfo.infoData.web}}</p>
|
||||||
<p>Notizen:<br> {{itemInfo.notes}}</p>
|
<p v-if="itemInfo.infoData.ustid">USt-Id: {{itemInfo.infoData.ustid}}</p>
|
||||||
</div>
|
<p>Notizen:<br> {{itemInfo.notes}}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
</UCard>
|
</UCard>
|
||||||
<UCard class="mt-5">
|
<UCard class="mt-5">
|
||||||
|
<Toolbar>
|
||||||
|
<UButton
|
||||||
|
@click="router.push(`/contacts/create?customer=${itemInfo.id}`)"
|
||||||
|
>
|
||||||
|
+ Ansprechpartner
|
||||||
|
</UButton>
|
||||||
|
</Toolbar>
|
||||||
|
<UTable
|
||||||
|
:rows="dataStore.getContactsByCustomerId(itemInfo.id)"
|
||||||
|
@select="(row) => router.push(`/contacts/show/${row.id}`)"
|
||||||
|
:columns="[{label: 'Anrede', key: 'salutation'},{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 class="w-1/2">
|
||||||
|
<UCard class="h-full">
|
||||||
|
<HistoryDisplay
|
||||||
|
type="customer"
|
||||||
|
v-if="itemInfo"
|
||||||
|
:element-id="itemInfo.id"
|
||||||
|
:render-headline="true"
|
||||||
|
/>
|
||||||
|
</UCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<UCard class="mt-5" v-else>
|
||||||
|
|
||||||
|
<div v-if="item.label === 'Projekte'">
|
||||||
<Toolbar>
|
<Toolbar>
|
||||||
<UButton
|
<UButton
|
||||||
@click="router.push(`/contacts/create?customer=${itemInfo.id}`)"
|
@click="router.push(`/projects/create?customer=${itemInfo.id}`)"
|
||||||
>
|
>
|
||||||
+ Ansprechpartner
|
+ Projekt
|
||||||
</UButton>
|
</UButton>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
<UTable
|
<UTable
|
||||||
:rows="dataStore.getContactsByCustomerId(itemInfo.id)"
|
:rows="dataStore.getProjectsByCustomerId(itemInfo.id)"
|
||||||
@select="(row) => router.push(`/contacts/show/${row.id}`)"
|
@select="(row) => router.push(`/projects/show/${row.id}`)"
|
||||||
:columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
|
:columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
|
||||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
|
: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>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="item.label === 'Objekte'">
|
||||||
|
<Toolbar>
|
||||||
|
<UButton
|
||||||
|
@click="router.push(`/plants/create?customer=${itemInfo.id}`)"
|
||||||
|
>
|
||||||
|
+ Objekt
|
||||||
|
</UButton>
|
||||||
|
</Toolbar>
|
||||||
|
<UTable
|
||||||
|
:rows="dataStore.getPlantsByCustomerId(itemInfo.id)"
|
||||||
|
@select="(row) => router.push(`/plants/show/${row.id}`)"
|
||||||
|
:columns="[{label: 'Name', key: 'name'}]"
|
||||||
|
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
|
||||||
|
|
||||||
>
|
>
|
||||||
|
|
||||||
</UTable>
|
</UTable>
|
||||||
</UCard>
|
</div>
|
||||||
</div>
|
<div v-else-if="item.label === 'Verträge'">
|
||||||
<div class="w-1/2">
|
<Toolbar>
|
||||||
<UCard class="h-full">
|
<UButton
|
||||||
<HistoryDisplay
|
@click="router.push(`/contracts/create?customer=${itemInfo.id}`)"
|
||||||
type="customer"
|
>
|
||||||
v-if="itemInfo"
|
+ Vertrag
|
||||||
:element-id="itemInfo.id"
|
</UButton>
|
||||||
:render-headline="true"
|
</Toolbar>
|
||||||
/>
|
<UTable
|
||||||
</UCard>
|
:rows="dataStore.getContractsByCustomerId(itemInfo.id)"
|
||||||
</div>
|
@select="(row) => router.push(`/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' }"
|
||||||
|
|
||||||
</div>
|
>
|
||||||
|
|
||||||
|
</UTable>
|
||||||
|
</div>
|
||||||
|
</UCard>
|
||||||
|
|
||||||
|
</template>
|
||||||
<UCard class="mt-5" v-else>
|
</UTabs>
|
||||||
|
<UForm v-else-if="mode === 'edit' || mode === 'create'" class="p-5">
|
||||||
<div v-if="item.label === 'Projekte'">
|
|
||||||
<Toolbar>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/projects/create?customer=${itemInfo.id}`)"
|
|
||||||
>
|
|
||||||
+ Projekt
|
|
||||||
</UButton>
|
|
||||||
</Toolbar>
|
|
||||||
<UTable
|
|
||||||
:rows="dataStore.getProjectsByCustomerId(itemInfo.id)"
|
|
||||||
@select="(row) => router.push(`/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>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.label === 'Objekte'">
|
|
||||||
<Toolbar>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/plants/create?customer=${itemInfo.id}`)"
|
|
||||||
>
|
|
||||||
+ Objekt
|
|
||||||
</UButton>
|
|
||||||
</Toolbar>
|
|
||||||
<UTable
|
|
||||||
:rows="dataStore.getPlantsByCustomerId(itemInfo.id)"
|
|
||||||
@select="(row) => router.push(`/plants/show/${row.id}`)"
|
|
||||||
:columns="[{label: 'Name', key: 'name'}]"
|
|
||||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
|
|
||||||
|
|
||||||
>
|
|
||||||
|
|
||||||
</UTable>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="item.label === 'Verträge'">
|
|
||||||
<Toolbar>
|
|
||||||
<UButton
|
|
||||||
@click="router.push(`/contracts/create?customer=${itemInfo.id}`)"
|
|
||||||
>
|
|
||||||
+ Vertrag
|
|
||||||
</UButton>
|
|
||||||
</Toolbar>
|
|
||||||
<UTable
|
|
||||||
:rows="dataStore.getContractsByCustomerId(itemInfo.id)"
|
|
||||||
@select="(row) => router.push(`/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>
|
|
||||||
</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:"
|
|
||||||
>
|
|
||||||
<UInput
|
|
||||||
v-model="itemInfo.customerNumber"
|
|
||||||
placeholder="Leer lassen für automatisch generierte Nummer"
|
|
||||||
/>
|
|
||||||
</UFormGroup>
|
|
||||||
|
|
||||||
<UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
|
|
||||||
<UFormGroup
|
<UFormGroup
|
||||||
label="Kunde aktiv:"
|
label="Name:"
|
||||||
>
|
>
|
||||||
<UCheckbox
|
<UInput
|
||||||
v-model="itemInfo.active"
|
v-model="itemInfo.name"
|
||||||
/>
|
/>
|
||||||
</UFormGroup>
|
</UFormGroup>
|
||||||
</UTooltip>
|
|
||||||
<UFormGroup
|
|
||||||
label="Firmenkunde:"
|
|
||||||
>
|
|
||||||
<UCheckbox
|
|
||||||
v-model="itemInfo.isCompany"
|
|
||||||
/>
|
|
||||||
</UFormGroup>
|
|
||||||
<UFormGroup
|
|
||||||
label="Notizen:"
|
|
||||||
>
|
|
||||||
<UTextarea
|
|
||||||
v-model="itemInfo.notes"
|
|
||||||
/>
|
|
||||||
</UFormGroup>
|
|
||||||
|
|
||||||
<UFormGroup
|
<UFormGroup
|
||||||
label="Straße + Hausnummer"
|
label="Kundennummer:"
|
||||||
>
|
>
|
||||||
<UInput
|
<UInput
|
||||||
v-model="itemInfo.infoData.street"
|
v-model="itemInfo.customerNumber"
|
||||||
/>
|
placeholder="Leer lassen für automatisch generierte Nummer"
|
||||||
</UFormGroup>
|
/>
|
||||||
<UFormGroup
|
</UFormGroup>
|
||||||
label="Adresszusatz"
|
|
||||||
>
|
<UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
|
||||||
<UInput
|
<UFormGroup
|
||||||
v-model="itemInfo.infoData.special"
|
label="Kunde aktiv:"
|
||||||
/>
|
>
|
||||||
</UFormGroup>
|
<UCheckbox
|
||||||
<UFormGroup
|
v-model="itemInfo.active"
|
||||||
label="Postleitzahl"
|
/>
|
||||||
>
|
</UFormGroup>
|
||||||
<UInput
|
</UTooltip>
|
||||||
v-model="itemInfo.infoData.zip"
|
<UFormGroup
|
||||||
@focusout="setCityByZip"
|
label="Firmenkunde:"
|
||||||
/>
|
>
|
||||||
</UFormGroup>
|
<UCheckbox
|
||||||
<UFormGroup
|
v-model="itemInfo.isCompany"
|
||||||
label="Ort"
|
/>
|
||||||
>
|
</UFormGroup>
|
||||||
<UInput
|
<UFormGroup
|
||||||
v-model="itemInfo.infoData.city"
|
label="Notizen:"
|
||||||
/>
|
>
|
||||||
</UFormGroup>
|
<UTextarea
|
||||||
<UFormGroup
|
v-model="itemInfo.notes"
|
||||||
label="Land"
|
/>
|
||||||
>
|
</UFormGroup>
|
||||||
<USelectMenu
|
|
||||||
:options="['Deutschland','Niederlande','Belgien','Italien', 'Frankreich','Irland','USA','Spanien', 'Schweden']"
|
<UFormGroup
|
||||||
v-model="itemInfo.infoData.country"
|
label="Straße + Hausnummer"
|
||||||
/>
|
>
|
||||||
</UFormGroup>
|
<UInput
|
||||||
|
v-model="itemInfo.infoData.street"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
<UFormGroup
|
||||||
|
label="Adresszusatz"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
v-model="itemInfo.infoData.special"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
<UFormGroup
|
||||||
|
label="Postleitzahl"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
v-model="itemInfo.infoData.zip"
|
||||||
|
@focusout="setCityByZip"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
<UFormGroup
|
||||||
|
label="Ort"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
v-model="itemInfo.infoData.city"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
<UFormGroup
|
||||||
|
label="Land"
|
||||||
|
>
|
||||||
|
<USelectMenu
|
||||||
|
:options="['Deutschland','Niederlande','Belgien','Italien', 'Frankreich','Irland','USA','Spanien', 'Schweden']"
|
||||||
|
v-model="itemInfo.infoData.country"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
|
||||||
|
<UFormGroup
|
||||||
|
label="Telefon:"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
v-model="itemInfo.infoData.tel"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
<UFormGroup
|
||||||
|
label="E-Mail:"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
v-model="itemInfo.infoData.email"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
<UFormGroup
|
||||||
|
label="Webseite:"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
v-model="itemInfo.infoData.web"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
<UFormGroup
|
||||||
|
label="USt-Id:"
|
||||||
|
>
|
||||||
|
<UInput
|
||||||
|
v-model="itemInfo.infoData.ustid"
|
||||||
|
/>
|
||||||
|
</UFormGroup>
|
||||||
|
</UForm>
|
||||||
|
</UDashboardPanelContent>
|
||||||
|
|
||||||
|
|
||||||
<UFormGroup
|
|
||||||
label="Telefon:"
|
|
||||||
>
|
|
||||||
<UInput
|
|
||||||
v-model="itemInfo.infoData.tel"
|
|
||||||
/>
|
|
||||||
</UFormGroup>
|
|
||||||
<UFormGroup
|
|
||||||
label="E-Mail:"
|
|
||||||
>
|
|
||||||
<UInput
|
|
||||||
v-model="itemInfo.infoData.email"
|
|
||||||
/>
|
|
||||||
</UFormGroup>
|
|
||||||
<UFormGroup
|
|
||||||
label="Webseite:"
|
|
||||||
>
|
|
||||||
<UInput
|
|
||||||
v-model="itemInfo.infoData.web"
|
|
||||||
/>
|
|
||||||
</UFormGroup>
|
|
||||||
<UFormGroup
|
|
||||||
label="USt-Id:"
|
|
||||||
>
|
|
||||||
<UInput
|
|
||||||
v-model="itemInfo.infoData.ustid"
|
|
||||||
/>
|
|
||||||
</UFormGroup>
|
|
||||||
</UForm>
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user