Reffractored vendors,vehicles,services,servicecategories,products,productcategories, projects, plants, customers, contracts, contacts

This commit is contained in:
2024-12-20 20:00:08 +01:00
parent acf5d1c2ea
commit 0d849f5fcb
20 changed files with 361 additions and 1161 deletions

View File

@@ -1,5 +1,10 @@
<template>
<UDashboardNavbar title="Ansprechpartner" :badge="filteredRows.length">
<EntityList
type="contacts"
:items="items"
></EntityList>
<!-- <UDashboardNavbar title="Ansprechpartner" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
@@ -58,53 +63,17 @@
<template #vendor-data="{row}">
{{row.vendor ? row.vendor.name : ""}}
</template>
</UTable>
</UTable>-->
</template>
<script setup>
import {useSearch} from "~/composables/useSearch.js";
import EntityList from "~/components/EntityList.vue";
definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
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)")
@@ -112,49 +81,9 @@ const setupPage = async () => {
setupPage()
const templateColumns = [
{
key: "fullName",
label: "Name",
sortable: true
},
{
key: "customer",
label: "Kunde",
sortable: true
},
{
key: "vendor",
label: "Lieferant",
sortable: true
},
{
key: "role",
label: "Rolle",
},
{
key: "email",
label: "E-Mail",
},
{
key: "phoneMobile",
label: "Mobil",
},
{
key: "phoneHome",
label: "Festnetz",
},
{
key: "active",
label: "Aktiv",
},
{
key: "birtday",
label: "Geburtstag",
}
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))

View File

@@ -1,54 +1,8 @@
<template>
<UDashboardNavbar title="Verträge" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
v-model="searchString"
icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..."
class="hidden lg:block"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd value="/" />
</template>
</UInput>
<UButton @click="router.push(`/contracts/create`)">+ Vertrag</UButton>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #right>
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>
<UTable
:rows="filteredRows"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/contracts/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Verträge anzuzeigen' }"
>
<template #customer-data="{row}">
<span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.customer ? row.customer.name : ""}}</span>
<span v-else>{{row.customer ? row.customer.name : ""}}</span>
</template>
</UTable>
<EntityList
:items="items"
type="contracts"
/>
</template>
<script setup>
@@ -56,74 +10,12 @@ definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/contracts/create")
},
'Enter': {
usingInput: true,
handler: () => {
router.push(`/contracts/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("contracts","*, customer(id,name)")
}
setupPage()
const templateColumns = [
{
key: 'customer',
label: "Kunde",
sortable: true
},
{
key: "name",
label: "Name",
sortable: true
},
{
key: "notes",
label: "Notizen"
}
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
const filteredRows = computed(() => {
return useSearch(searchString.value, items.value)
})
</script>
<style scoped>

View File

@@ -1,166 +1,24 @@
<template>
<UDashboardNavbar title="Kunden" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
name="searchinput"
v-model="searchString"
icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..."
class="hidden lg:block"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd value="/" />
</template>
</UInput>
<UButton @click="router.push(`/customers/create/`)">+ Kunde</UButton>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #right>
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>
<UTable
:rows="filteredRows"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/customers/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Kunden anzuzeigen' }"
>
<template #name-data="{row}">
<span v-if="row === filteredRows[selectedItem]" class="text-primary-500 font-bold">{{row.name}}</span>
<span v-else>{{row.name}}</span>
</template>
<template #isCompany-data="{row}">
<span v-if="row.isCompany">Firmenkunden</span>
<span v-else>Privatkunde</span>
</template>
<template #active-data="{row}">
<span v-if="row.active" class="text-primary-500">Aktiv</span>
<span v-else class="text-rose-500">Gesperrt</span>
</template>
<template #address-data="{row}">
{{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{row.infoData.zip ? row.infoData.zip : ""}} {{row.infoData.city ? `${row.infoData.city}, ` : ''}} {{row.infoData.country}}
</template>
</UTable>
<EntityList
type="customers"
:items="items"
></EntityList>
</template>
<script setup>
import EntityList from "~/components/EntityList.vue";
definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/customers/create")
},
'Enter': {
usingInput: true,
handler: () => {
router.push(`/customers/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 supabase = useSupabaseClient()
const items = ref([])
const selectedItem = ref(0)
const setupPage = async () => {
items.value = await useSupabaseSelect("customers",null,"customerNumber")
}
setupPage()
const templateColumns = [
{
key: 'customerNumber',
label: "Kundennr.",
sortable: true
},
{
key: "name",
label: "Name",
sortable: true
},
{
key: "isCompany",
label: "Typ",
sortable: true
},
{
key: "notes",
label: "Notizen",
sortable: true
},
{
key: "active",
label: "Aktiv",
sortable: true
},
{
key: "address",
label: "Adresse",
sortable: true
}
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
const filteredRows = computed(() => {
return useSearch(searchString.value, items.value)
})
</script>
<style scoped>

View File

@@ -1,137 +1,22 @@
<template>
<UDashboardNavbar title="Objekte" :badge="filteredRows.length" >
<template #right>
<UInput
id="searchinput"
v-model="searchString"
icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..."
class="hidden lg:block"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd value="/" />
</template>
</UInput>
<UButton @click="router.push(`/plants/create`)">+ Objekt</UButton>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #left>
<UCheckbox
label="Erledigte Anzeigen"
v-model="showDone"
/>
</template>
<template #right>
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>
<UTable
:rows="filteredRows"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/plants/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Objekte anzuzeigen' }"
>
<template #customer-data="{row}">
{{row.customer ? row.customer.name : ""}}
</template>
</UTable>
<EntityList
:items="items"
type="plants"
/>
</template>
<script setup>
import {useListFilter} from "~/composables/useSearch.js";
definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/plants/create")
},
'Enter': {
usingInput: true,
handler: () => {
router.push(`/plants/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("plants","*, customer(id,name)")
}
setupPage()
const templateColumns = [
{
key: "name",
label: "Name",
sortable: true
},{
key: "customer",
label: "Kunde",
sortable: true
}
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
const filteredRows = computed(() => {
return useListFilter(searchString.value, items.value)
})
</script>
<style scoped>

View File

@@ -1,58 +1,8 @@
<template>
<UDashboardNavbar title="Artikelkategorien" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
v-model="searchString"
icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..."
class="hidden lg:block"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd value="/" />
</template>
</UInput>
<UButton @click="router.push(`/productcategories/create`)">+ Artikelkategorie</UButton>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #right>
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>
<UTable
:rows="filteredRows"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/productcategories/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikelkategorien anzuzeigen' }"
>
<template #name-data="{row}">
<span
v-if="row === filteredRows[selectedItem]"
class="text-primary-500 font-bold">{{row.name}}</span>
<span v-else>
{{row.name}}
</span>
</template>
</UTable>
<EntityList
:items="items"
type="productcategories"
/>
</template>
<script setup>
@@ -61,77 +11,12 @@ definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/productscategories/create")
},
'Enter': {
usingInput: true,
handler: () => {
router.push(`/productscategories/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("productcategories","*")
}
setupPage()
const templateColumns = [
{
key: "name",
label: "Name",
sortable: true
},
{
key: "description",
label: "Beschreibung",
sortable: true
}
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
const filteredRows = computed(() => {
return useSearch(searchString.value, items.value)
})
</script>
<style scoped>

View File

@@ -1,5 +1,9 @@
<template>
<UDashboardNavbar title="Artikel" :badge="filteredRows.length">
<EntityList
:items="items"
type="products"
/>
<!-- <UDashboardNavbar title="Artikel" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
@@ -87,7 +91,7 @@
<template #productcategories-data="{row}">
{{row.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ")}}
</template>
</UTable>
</UTable>-->
</template>
@@ -97,122 +101,15 @@ definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/products/create")
},
'Enter': {
usingInput: true,
handler: () => {
router.push(`/products/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 productcategories = ref([])
const selectedItem = ref(0)
const setupPage = async () => {
items.value = await useSupabaseSelect("products","*")
items.value = await useSupabaseSelect("products","*, unit(name)")
productcategories.value = await useSupabaseSelect("productcategories", "*")
}
setupPage()
const templateColumns = [
{
key: "stock",
label: "Bestand"
},
{
key: "name",
label: "Name",
sortable: true
},
{
key: "description",
label: "Beschreibung",
sortable: true
},
{
key: "manufacturer",
label: "Hersteller",
sortable: true
},
{
key: "unit",
label: "Einheit",
sortable: true
},
{
key: "sellingPrice",
label: "Verkaufpreispreis",
sortable: true
},
{
key: "tags",
label: "Tags",
sortable: true
},
{
key: "productcategories",
label: "Artikelkategorien",
sortable: true
}
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const templateTags = computed(() => {
let temp = []
dataStore.products.forEach(row => {
row.tags.forEach(tag => {
if(!temp.includes(tag)) temp.push(tag)
})
})
return temp
})
const selectedTags = ref(templateTags.value)
const searchString = ref('')
const filteredRows = computed(() => {
let temp = items.value.filter(i => i.tags.some(x => selectedTags.value.includes(x)) || i.tags.length === 0)
return useSearch(searchString.value, temp)
})
</script>
<style scoped>

View File

@@ -2,7 +2,6 @@
<EntityList
type="projects"
:items="items"
:filters="filters"
></EntityList>
</template>
@@ -13,11 +12,6 @@ definePageMeta({
middleware: "auth"
})
const dataStore = useDataStore()
const router = useRouter()
const items = ref([])
const setupPage = async () => {

View File

@@ -1,58 +1,8 @@
<template>
<UDashboardNavbar title="Leistungskategorien" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
v-model="searchString"
icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..."
class="hidden lg:block"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd value="/" />
</template>
</UInput>
<UButton @click="router.push(`/servicecategories/create`)">+ Leistungskategorie</UButton>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #right>
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>
<UTable
:rows="filteredRows"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/servicecategories/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungskategorien anzuzeigen' }"
>
<template #name-data="{row}">
<span
v-if="row === filteredRows[selectedItem]"
class="text-primary-500 font-bold">{{row.name}}</span>
<span v-else>
{{row.name}}
</span>
</template>
</UTable>
<EntityList
:items="items"
type="servicecategories"
/>
</template>
<script setup>
@@ -61,77 +11,12 @@ definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/servicecategories/create")
},
'Enter': {
usingInput: true,
handler: () => {
router.push(`/servicecategories/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("servicecategories","*")
}
setupPage()
const templateColumns = [
{
key: "name",
label: "Name",
sortable: true
},
{
key: "description",
label: "Beschreibung",
sortable: true
}
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
const filteredRows = computed(() => {
return useSearch(searchString.value, items.value)
})
</script>
<style scoped>

View File

@@ -1,66 +1,8 @@
<template>
<UDashboardNavbar title="Leistungen" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
v-model="searchString"
icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..."
class="hidden lg:block"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd value="/" />
</template>
</UInput>
<UButton @click="router.push(`/services/create`)">+ Leistung</UButton>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #right>
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>
<UTable
:rows="filteredRows"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/services/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
>
<template #name-data="{row}">
<span
v-if="row === filteredRows[selectedItem]"
class="text-primary-500 font-bold">{{row.name}}</span>
<span v-else>
{{row.name}}
</span>
</template>
<template #sellingPrice-data="{row}">
{{row.sellingPrice ? Number(row.sellingPrice).toFixed(2) + " €" : ""}}
</template>
<template #unit-data="{row}">
{{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
</template>
</UTable>
<EntityList
:items="items"
type="services"
/>
</template>
@@ -69,83 +11,13 @@ definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/services/create")
},
'Enter': {
usingInput: true,
handler: () => {
router.push(`/services/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 supabase = useSupabaseClient()
const router = useRouter()
const items = ref([])
const selectedItem = ref(0)
const setupPage = async () => {
items.value = await useSupabaseSelect("services","*")
items.value = await useSupabaseSelect("services","*, unit(name)")
}
setupPage()
const templateColumns = [
{
key: "name",
label: "Name",
sortable: true
},
{
key: "unit",
label: "Einheit",
sortable: true
},
{
key: "sellingPrice",
label: "Verkaufspreis",
sortable: true
}/*,
{
key: "tags",
label: "Tags",
sortable: true
}*/
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
const filteredRows = computed(() => {
return useSearch(searchString.value, items.value)
})
</script>
<style scoped>

View File

@@ -1,60 +1,8 @@
<template>
<UDashboardNavbar title="Fahrzeuge" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
v-model="searchString"
icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..."
class="hidden lg:block"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd value="/" />
</template>
</UInput>
<UButton @click="router.push(`/vehicles/create`)">+ Fahrzeug</UButton>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #right>
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>
<UTable
:rows="filteredRows"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/vehicles/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Fahrzeuge anzuzeigen' }"
>
<template #active-data="{row}">
<UIcon
:name="row.active ? 'i-heroicons-check' : 'i-heroicons-x-mark'"
:class="['w-5', 'h-5', ... row.active ? ['text-primary-500'] : ['text-rose-600'] ]"
/>
</template>
<template #licensePlate-data="{row}">
<span v-if="row === filteredRows[selectedItem]" class="font-bold text-primary-500">{{row.licensePlate}}</span>
<span v-else>{{row.licensePlate}}</span>
</template>
</UTable>
<EntityList
:items="items"
type="vehicles"
/>
</template>
<script setup>
@@ -63,77 +11,12 @@ definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/vehicles/create")
},
'Enter': {
usingInput: true,
handler: () => {
router.push(`/vehicles/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("vehicles","*")
}
setupPage()
const templateColumns = [
{
key: 'active',
label: "Aktiv:",
sortable: true
},{
key: 'licensePlate',
label: "Kennzeichen:",
sortable: true
},{
key: 'vin',
label: "Identifikationnr.:",
sortable: true
},
{
key: "type",
label: "Typ:",
sortable: true
}
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
const filteredRows = computed(() => {
return useListFilter(searchString.value, items.value)
})
</script>
<style scoped>

View File

@@ -1,5 +1,11 @@
<template>
<UDashboardNavbar title="Lieferanten" :badge="filteredRows.length">
<EntityList
:items="items"
type="vendors"
/>
<!-- <UDashboardNavbar title="Lieferanten" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
@@ -53,7 +59,7 @@
<template #address-data="{row}">
{{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{(row.infoData.zip || row.infoData.city) ? `${row.infoData.zip} ${row.infoData.city}, ` : ''}} {{row.infoData.country}}
</template>
</UTable>
</UTable>-->
</template>
@@ -62,35 +68,7 @@ definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/vendors/create")
},
'Enter': {
usingInput: true,
handler: () => {
router.push(`/vendors/show/${filteredRows.value[selectedItem.value].id}`)
}
},
'arrowdown': () => {
selectedItem.value += 1
},
'arrowup': () => {
selectedItem.value -= 1
}
})
const dataStore = useDataStore()
const router = useRouter()
const mode = ref("show")
const items = ref([])
const selectedItem = ref(0)
const setupPage = async () => {
items.value = await useSupabaseSelect("vendors","*","vendorNumber")
@@ -100,30 +78,8 @@ setupPage()
const templateColumns = [
{
key: 'vendorNumber',
label: "Lieferantennr.",
sortable: true
},
{
key: "name",
label: "Name",
sortable: true
},
{
key: "address",
label: "Adresse",
sortable: true
}
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
const filteredRows = computed(() => {
return useSearch(searchString.value, items.value)
})
</script>
<style scoped>