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

Changed to new Layout System

Browse Source
This commit is contained in:
Florian Federspiel
2024-02-23 19:30:43 +01:00
parent 96d4ee7356
commit 0d86e4c4f9
32 changed files with 1690 additions and 2214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
spaces/pages/contracts/[mode]/[[id]].vue
View File

@@ -6,19 +6,13 @@ definePageMeta({
})
const dataStore = useDataStore()
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, contracts } = storeToRefs(useDataStore())
let currentItem = ref(null)
//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
@@ -39,14 +33,7 @@ const setupPage = () => {
let query = route.query
if(query.customer) itemInfo.value.customer = Number(query.customer)
}
}
const editCustomer = async () => {
router.push(`/contracts/edit/${currentItem.value.id}`)
setupPage()
}
const cancelEditorCreate = () => {
@@ -61,13 +48,40 @@ setupPage()
</script>
<template>
<h1
class="mb-3 truncate font-bold text-2xl"
v-if="currentItem"
>Vertrag: {{currentItem.name}}</h1>
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')">
<template #right>
<UButton
v-if="mode === 'edit'"
@click="dataStore.updateItem('contracts',itemInfo)"
>
Speichern
</UButton>
<UButton
v-else-if="mode === 'create'"
@click="dataStore.createNewItem('contracts',itemInfo)"
>
Erstellen
</UButton>
<UButton
@click="cancelEditorCreate"
color="red"
class="ml-2"
v-if="mode === 'edit' || mode === 'create'"
>
Abbrechen
</UButton>
<UButton
v-if="mode === 'show'"
@click="router.push(`/contracts/edit/${currentItem.id}`)"
>
Bearbeiten
</UButton>
</template>
</UDashboardNavbar>
<UTabs
v-if="currentItem && mode === 'show'"
:items="[{label: 'Informationen'}, {label: 'Logbuch'}, {label: 'Dokumente'}]"
class="p-5"
>
<template #item="{item}">
<UCard class="mt-5">
@@ -125,7 +139,7 @@ setupPage()
</UCard>
</template>
</UTabs>
<UCard v-else-if="mode == 'edit' || mode == 'create'" >
<UForm v-else-if="mode == 'edit' || mode == 'create'" class="p-5" >
<UFormGroup
label="Name:"
@@ -142,7 +156,7 @@ setupPage()
v-model="itemInfo.customer"
option-attribute="name"
value-attribute="id"
:options="customers"
:options="dataStore.customers"
searchable
:search-attributes="['name']"
>
@@ -166,31 +180,7 @@ setupPage()
v-model="itemInfo.description"
/>
</UFormGroup>
<template #footer>
<UButton
v-if="mode === 'edit'"
@click="dataStore.updateItem('contracts',itemInfo)"
>
Speichern
</UButton>
<UButton
v-else-if="mode === 'create'"
@click="dataStore.createNewItem('contracts',itemInfo)"
>
Erstellen
</UButton>
<UButton
@click="cancelEditorCreate"
color="red"
class="ml-2"
>
Abbrechen
</UButton>
</template>
</UCard>
</UForm>
</template>
<style scoped>

86
spaces/pages/contracts/index.vue
View File

@@ -1,43 +1,75 @@
<template>
<div id="main">
<!-- TODO: Kontakte erstellen und dem Kunden zuweisen -->
<div class="flex items-center gap-1">
<UButton @click="router.push(`/contracts/create/`)">+ Vertrag</UButton>
<UDashboardNavbar title="Verträge" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
v-model="searchString"
icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..."
/>
</div>
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="itemColumns"
@select="selectItem"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
>
<template #customer-data="{row}">
{{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : row.customer }}
</template>
</UTable>
</div>
<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}">
{{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : row.customer }}
</template>
</UTable>
</template>
<script setup>
definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/contracts/create")
}
})
const dataStore = useDataStore()
const router = useRouter()
const mode = ref("show")
const itemColumns = [
const templateColumns = [
{
key: 'customer',
label: "Kundennr.:",
@@ -53,15 +85,11 @@ const itemColumns = [
label: "Beschreibung"
}
]
const selectItem = (item) => {
router.push(`/contracts/show/${item.id} `)
}
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
const filteredRows = computed(() => {
if(!searchString.value) {
return dataStore.contracts