Added Vehicles
Added Bankimport, BankAccounts, BankStatements Some Visual Changes Added Contacts Changes in VendorInvoices Added layouts with default an one for Login PAge Added Input Group Component
This commit is contained in:
291
spaces/pages/contacts/[mode]/[[id]].vue
Normal file
291
spaces/pages/contacts/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
//
|
||||
const supabase = useSupabaseClient()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
|
||||
//Store
|
||||
const {customers, vendors, contacts } = storeToRefs(useDataStore())
|
||||
const {fetchContacts, getContactById} = useDataStore()
|
||||
|
||||
let currentContact = null
|
||||
|
||||
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({
|
||||
active: true
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentContact = getContactById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentContact
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
const createItem = async () => {
|
||||
let fullName = itemInfo.value.firstName + ' ' + itemInfo.value.lastName
|
||||
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("contacts")
|
||||
.insert([{...itemInfo.value, fullName}])
|
||||
.select()
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
mode.value = "show"
|
||||
itemInfo.value = {
|
||||
id: 0,
|
||||
}
|
||||
toast.add({title: "Kontakt erfolgreich erstellt"})
|
||||
await fetchContacts()
|
||||
router.push(`/contacts/show/${data[0].id}`)
|
||||
setupPage()
|
||||
}
|
||||
}
|
||||
|
||||
const editCustomer = async () => {
|
||||
router.push(`/contacts/edit/${currentContact.id}`)
|
||||
setupPage()
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
mode.value = "show"
|
||||
itemInfo.value = {
|
||||
id: 0,
|
||||
name: "",
|
||||
}
|
||||
}
|
||||
|
||||
const updateCustomer = async () => {
|
||||
const {error} = await supabase
|
||||
.from("contacts")
|
||||
.update(itemInfo.value)
|
||||
.eq('id',itemInfo.value.id)
|
||||
console.log(error)
|
||||
mode.value = "show"
|
||||
itemInfo.value = {
|
||||
id: 0,
|
||||
name: "",
|
||||
}
|
||||
toast.add({title: "Kontakt erfolgreich gespeichert"})
|
||||
fetchContacts()
|
||||
}
|
||||
|
||||
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UCard v-if="currentContact && mode == 'show'" >
|
||||
<template #header>
|
||||
<UBadge
|
||||
v-if="currentContact.active"
|
||||
>
|
||||
Kontakt aktiv
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else
|
||||
color="red"
|
||||
>
|
||||
Kontakt inaktiv
|
||||
</UBadge>
|
||||
{{currentContact.fullName}}
|
||||
</template>
|
||||
|
||||
<InputGroup class="mb-3">
|
||||
<UButton
|
||||
v-if="currentContact.customer"
|
||||
:to="`/customers/show/${currentContact.customer}`"
|
||||
>
|
||||
Zum Kunden
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="currentContact.vendor"
|
||||
:to="`/vendors/show/${currentContact.vendor}`"
|
||||
>
|
||||
Zum Lieferanten
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
|
||||
<span v-if="currentContact.customer">Kunde: {{customers.find(customer => customer.id === currentContact.customer) ? customers.find(customer => customer.id === currentContact.customer).name : "" }}</span><br>
|
||||
<span v-if="currentContact.vendor">Lieferant: {{vendors.find(vendor => vendor.id === currentContact.vendor) ? vendors.find(vendor => vendor.id === currentContact.vendor).name : ""}}</span><br>
|
||||
|
||||
<span>E-Mail: {{currentContact.email}}</span><br>
|
||||
<span>Mobil: {{currentContact.phoneMobile}}</span><br>
|
||||
<span>Festnetz: {{currentContact.phoneHome}}</span><br>
|
||||
<span>Rolle: {{currentContact.role}}</span>
|
||||
|
||||
|
||||
|
||||
<DevOnly>
|
||||
<UDivider
|
||||
class="my-3"
|
||||
/>
|
||||
{{currentContact}}
|
||||
</DevOnly>
|
||||
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="mode == 'show' && currentContact.id"
|
||||
@click="editCustomer"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
<UButton
|
||||
color="red"
|
||||
class="ml-2"
|
||||
disabled
|
||||
>
|
||||
Archivieren
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
</UCard>
|
||||
<UCard v-else-if="mode == 'edit' || mode == 'create'" >
|
||||
<template #header>
|
||||
{{itemInfo.fullName}}
|
||||
</template>
|
||||
|
||||
<UFormGroup
|
||||
label="Anrede:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.salutation"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Vorname:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.firstName"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Nachname:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.lastName"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Kunde:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.customer"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
:options="customers"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{customers.find(customer => customer.id === itemInfo.customer) ? customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Lieferant:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.vendor"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
:options="vendors"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{vendors.find(vendor => vendor.id === itemInfo.vendor) ? vendors.find(vendor => vendor.id === itemInfo.vendor).name : "Lieferant auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Kontakt aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="E-Mail:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.email"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Mobil:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.phoneMobile"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Festnetz:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.phoneHome"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Rolle:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.role"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="mode == 'edit'"
|
||||
@click="updateCustomer"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode == 'create'"
|
||||
@click="createItem"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="cancelEditorCreate"
|
||||
color="red"
|
||||
class="ml-2"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
90
spaces/pages/contacts/index.vue
Normal file
90
spaces/pages/contacts/index.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div id="main">
|
||||
<!-- TODO: Kontakte erstellen und dem Kunden zuweisen -->
|
||||
|
||||
<InputGroup>
|
||||
<UButton @click="router.push(`/contacts/create/`)">+ Kontakt</UButton>
|
||||
|
||||
<UInput
|
||||
v-model="searchString"
|
||||
placeholder="Suche..."
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="itemColumns"
|
||||
@select="selectItem"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
|
||||
>
|
||||
<template #customer-data="{row}">
|
||||
{{customers.find(customer => customer.id === row.customer) ? customers.find(customer => customer.id === row.customer).name : ''}}
|
||||
</template>
|
||||
<template #vendor-data="{row}">
|
||||
{{vendors.find(vendor => vendor.id === row.vendor) ? vendors.find(vendor => vendor.id === row.vendor).name : ''}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const {contacts,customers,vendors} = storeToRefs(useDataStore())
|
||||
const mode = ref("show")
|
||||
|
||||
const itemColumns = [
|
||||
|
||||
{
|
||||
key: "fullName",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "customer",
|
||||
label: "Kunde",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "vendor",
|
||||
label: "Lieferant",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "role",
|
||||
label: "Rolle",
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
const selectItem = (item) => {
|
||||
router.push(`/contacts/show/${item.id} `)
|
||||
}
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return contacts.value
|
||||
}
|
||||
|
||||
return contacts.value.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user