45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<template>
|
|
<div class="contact-list">
|
|
<h2>Kontakte</h2>
|
|
|
|
<DataTable
|
|
:value="contacts"
|
|
:loading="loading"
|
|
paginator
|
|
:rows="10"
|
|
tableStyle="min-width: 50rem"
|
|
>
|
|
<Column field="firstName" header="Vorname" sortable></Column>
|
|
<Column field="lastName" header="Nachname" sortable></Column>
|
|
<Column field="email" header="E-Mail" sortable></Column>
|
|
<Column field="company" header="Unternehmen" sortable></Column>
|
|
<Column field="status" header="Status" sortable></Column>
|
|
</DataTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import DataTable from 'primevue/datatable';
|
|
import Column from 'primevue/column';
|
|
|
|
const contacts = ref([]);
|
|
const loading = ref(false);
|
|
|
|
onMounted(async () => {
|
|
loading.value = true;
|
|
// TODO: Fetch from API Platform endpoint /api/contacts
|
|
// Placeholder data for now
|
|
contacts.value = [];
|
|
loading.value = false;
|
|
});
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.contact-list {
|
|
h2 {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|