flfeders/FEDEO
2
1
Fork 0
Code Issues 62 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

Many Changes in Navigation, Shortcuts, Search and Data Pulling directly from Supabase

Browse Source
This commit is contained in:
Florian Federspiel
2024-06-05 14:34:23 +02:00
parent e139eb771c
commit bc24f49476
27 changed files with 779 additions and 337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
pages/contacts/[mode]/[[id]].vue
View File

@@ -1,19 +1,35 @@
<script setup>
import dayjs from "dayjs";
import {useSupabaseSelectSingle} from "~/composables/useSupabase.js";
definePageMeta({
middleware: "auth"
})
defineShortcuts({
'backspace': () => {
router.push("/contacts")
},
'arrowleft': () => {
if(openTab.value > 0){
openTab.value -= 1
}
},
'arrowright': () => {
if(openTab.value < 3) {
openTab.value += 1
}
},
})
const dataStore = useDataStore()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const id = ref(route.params.id ? route.params.id : null )
const openTab = ref(0)
let currentItem = ref(null)
//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
@@ -22,25 +38,23 @@ const itemInfo = ref({
const oldItemInfo = ref({})
//Functions
const setupPage = () => {
const setupPage = async () => {
if(mode.value === "show" || mode.value === "edit"){
currentItem.value = dataStore.getContactById(Number(useRoute().params.id))
itemInfo.value = await useSupabaseSelectSingle("contacts",route.params.id,"*, customer(id, name), vendor(id,name) ")
}
if(mode.value === "edit") itemInfo.value = currentItem.value
if(mode.value === "create") {
let query = route.query
if(query.customer) itemInfo.value.customer = Number(query.customer)
if(query.vendor) itemInfo.value.vendor = Number(query.vendor)
}
if(currentItem.value) oldItemInfo.value = JSON.parse(JSON.stringify(currentItem.value))
if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
}
const cancelEditorCreate = () => {
if(currentItem.value) {
router.push(`/contacts/show/${currentItem.value.id}`)
if(itemInfo.value) {
router.push(`/contacts/show/${itemInfo.value.id}`)
} else {
router.push(`/contacts`)
}
@@ -52,7 +66,7 @@ setupPage()
<template>
<UDashboardNavbar
:title="currentItem ? currentItem.fullName : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')"
:title="itemInfo ? itemInfo.fullName : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')"
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
>
<template #left>
@@ -66,9 +80,9 @@ setupPage()
</template>
<template #center>
<h1
v-if="currentItem"
:class="['text-xl','font-medium', ... currentItem.active ? ['text-primary'] : ['text-rose-500']]"
>{{currentItem ? `Ansprechpartner: ${currentItem.fullName}` : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')}}</h1>
v-if="itemInfo"
:class="['text-xl','font-medium', ... itemInfo.active ? ['text-primary'] : ['text-rose-500']]"
>{{itemInfo ? `Ansprechpartner: ${itemInfo.fullName}` : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')}}</h1>
</template>
<template #right>
<UButton
@@ -93,14 +107,14 @@ setupPage()
</UButton>
<UButton
v-if="mode === 'show'"
@click="router.push(`/contacts/edit/${currentItem.id}`)"
@click="router.push(`/contacts/edit/${itemInfo.id}`)"
>
Bearbeiten
</UButton>
</template>
<!-- <template #badge v-if="currentItem">
<!-- <template #badge v-if="itemInfo">
<UBadge
v-if="currentItem.active"
v-if="itemInfo.active"
>
Kontakt aktiv
</UBadge>
@@ -114,8 +128,9 @@ setupPage()
</UDashboardNavbar>
<UTabs
:items="[{label: 'Informationen'}, {label: 'Logbuch'}]"
v-if="currentItem && mode == 'show'"
v-if="itemInfo && mode == 'show'"
class="p-5"
v-model="openTab"
>
<template #item="{item}">
<UCard class="mt-5">
@@ -123,16 +138,16 @@ setupPage()
<div class="text-wrap mt-3">
<p v-if="currentItem.customer">Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.customers.find(customer => customer.id === currentItem.customer) ? dataStore.customers.find(customer => customer.id === currentItem.customer).name : "" }}</nuxt-link></p>
<p v-if="currentItem.vendor">Lieferant: <nuxt-link :to="`/vendors/show/${currentItem.vendor}`">{{dataStore.vendors.find(vendor => vendor.id === currentItem.vendor) ? dataStore.vendors.find(vendor => vendor.id === currentItem.vendor).name : ""}}</nuxt-link></p>
<p v-if="itemInfo.customer">Kunde: <nuxt-link :to="`/customers/show/${itemInfo.customer.id}`">{{itemInfo.customer ? itemInfo.customer.name : ""}}</nuxt-link></p>
<p v-if="itemInfo.vendor">Lieferant: <nuxt-link :to="`/vendors/show/${itemInfo.vendor.id}`">{{itemInfo.vendor ? itemInfo.vendor.name : ""}}</nuxt-link></p>
<p>E-Mail: {{currentItem.email}}</p>
<p>Mobil: {{currentItem.phoneMobile}}</p>
<p>Festnetz: {{currentItem.phoneHome}}</p>
<p>Rolle: {{currentItem.role}}</p>
<p>Geburtstag: {{currentItem.birthday ? dayjs(currentItem.birthday).format("DD.MM.YYYY") : ""}}</p>
<p>Notizen:<br> {{currentItem.notes}}</p>
<p>E-Mail: {{itemInfo.email}}</p>
<p>Mobil: {{itemInfo.phoneMobile}}</p>
<p>Festnetz: {{itemInfo.phoneHome}}</p>
<p>Rolle: {{itemInfo.role}}</p>
<p>Geburtstag: {{itemInfo.birthday ? dayjs(itemInfo.birthday).format("DD.MM.YYYY") : ""}}</p>
<p>Notizen:<br> {{itemInfo.notes}}</p>
</div>
@@ -140,8 +155,8 @@ setupPage()
<div v-else-if="item.label === 'Logbuch'">
<HistoryDisplay
type="contact"
v-if="currentItem"
:element-id="currentItem.id"
v-if="itemInfo"
:element-id="itemInfo.id"
/>
</div>
</UCard>

41
pages/contacts/index.vue
View File

@@ -44,15 +44,19 @@
@select="(i) => router.push(`/contacts/show/${i.id}`)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Ansprechpartner anzuzeigen' }"
>
<template #fullName-data="{row}">
<span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.fullName}}</span>
<span v-else>{{row.fullName}}</span>
</template>
<template #active-data="{row}">
<span v-if="row.active" class="text-primary-500">Aktiv</span>
<span v-else class="text-rose">Gesperrt</span>
</template>
<template #customer-data="{row}">
{{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : ''}}
{{row.customer ? row.customer.name : ""}}
</template>
<template #vendor-data="{row}">
{{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
{{row.vendor ? row.vendor.name : ""}}
</template>
</UTable>
</template>
@@ -73,12 +77,43 @@ defineShortcuts({
},
'+': () => {
router.push("/contacts/create")
},
'Enter': {
usingInput: true,
handler: () => {
router.push(`/contacts/show/${filteredRows.value[selectedItem.value].id}`)
}
},
'arrowdown': () => {
if(selectedItem.value < filteredRows.value.length - 1) {
selectedItem.value += 1
} else {
selectedItem.value = 0
}
},
'arrowup': () => {
if(selectedItem.value === 0) {
selectedItem.value = filteredRows.value.length - 1
} else {
selectedItem.value -= 1
}
}
})
const dataStore = useDataStore()
const router = useRouter()
const items = ref([])
const selectedItem = ref(0)
const setupPage = async () => {
items.value = await useSupabaseSelect("contacts","*, customer(name), vendor(name)")
}
setupPage()
const templateColumns = [
{
@@ -139,7 +174,7 @@ const searchString = ref('')
})*/
const filteredRows = computed(() => {
return useSearch(searchString.value, dataStore.contacts)
return useSearch(searchString.value, items.value)
})
</script>