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 22:34:39 +01:00
parent 0d86e4c4f9
commit 3924fd79d2
10 changed files with 260 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
spaces/pages/receipts/index.vue
View File

@@ -1,10 +1,19 @@
<template>
<div id="main">
<InputGroup>
<!--
<UButton @click="router.push(`/incominginvoices/create/`)">+ Eingangsrechnung</UButton>
-->
<UDashboardNavbar>
<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(`/createDocument/edit?type=quotes`)"
>
@@ -15,82 +24,93 @@
>
+ Rechnung
</UButton>
<UInput
v-model="searchString"
placeholder="Suche..."
/>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #left>
<UCheckbox
v-model="showDrafts"
label="Entwürfe Anzeigen"
v-model="showDrafts"
label="Entwürfe Anzeigen"
/>
</InputGroup>
</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="itemColumns"
@select="selectItem"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
>
<template #type-data="{row}">
<span v-if="row.type === 'incomingInvoice'">Eingangsrechnung</span>
<span v-else>{{dataStore.documentTypesForCreation[row.type].labelSingle}}</span>
</template>
<template #state-data="{row}">
<UTable
:rows="filteredRows"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="selectItem"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
>
<template #type-data="{row}">
<span v-if="row.type === 'incomingInvoice'">Eingangsrechnung</span>
<span v-else>{{dataStore.documentTypesForCreation[row.type].labelSingle}}</span>
</template>
<template #state-data="{row}">
<span
v-if="row.state === 'Entwurf'"
class="text-rose-500"
v-if="row.state === 'Entwurf'"
class="text-rose-500"
>
{{row.state}}
</span>
<span
<span
v-if="row.state === 'Gebucht'"
class="text-cyan-500"
>
>
{{row.state}}
</span>
<span
<span
v-if="row.state === 'Abgeschlossen'"
class="text-primary-500"
>
>
{{row.state}}
</span>
</template>
<template #partner-data="{row}">
<span v-if="row.customer">{{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ''}}</span>
<span v-else-if="row.vendor">{{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ''}}</span>
</template>
<template #partner-data="{row}">
<span v-if="row.customer">{{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ''}}</span>
<span v-else-if="row.vendor">{{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ''}}</span>
</template>
<template #reference-data="{row}">
<span v-if="row.type === 'incomingInvoice'">{{row.reference}}</span>
<span v-else>{{row.documentNumber}}</span>
</template>
<template #date-data="{row}">
<span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
</template>
<template #dueDate-data="{row}">
<span :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : '' ">{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}</span>
</template>
<template #paid-data="{row}">
<span v-if="row.paid" class="text-primary-500">Bezahlt</span>
<span v-if="!row.paid" :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : ['text-cyan-500'] ">Offen</span>
</template>
<template #amount-data="{row}">
<div
class="text-right font-bold"
v-if="row.type === 'incomingInvoice'"
>
{{getRowAmount(row) === 0 ? '' : `${String(getRowAmount(row).toFixed(2)).replace('.',',')} €`}}
</div>
</template>
</UTable>
</template>
<template #reference-data="{row}">
<span v-if="row.type === 'incomingInvoice'">{{row.reference}}</span>
<span v-else>{{row.documentNumber}}</span>
</template>
<template #date-data="{row}">
<span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
</template>
<template #dueDate-data="{row}">
<span :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : '' ">{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}</span>
</template>
<template #paid-data="{row}">
<span v-if="row.paid" class="text-primary-500">Bezahlt</span>
<span v-if="!row.paid" :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : ['text-cyan-500'] ">Offen</span>
</template>
<template #amount-data="{row}">
<div
class="text-right font-bold"
v-if="row.type === 'incomingInvoice'"
>
{{getRowAmount(row) === 0 ? '' : `${String(getRowAmount(row).toFixed(2)).replace('.',',')} €`}}
</div>
</template>
</UTable>
</div>
</template>
<script setup>
@@ -100,11 +120,18 @@ definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
}
})
const dataStore = useDataStore()
const router = useRouter()
const mode = ref("show")
const itemColumns = [
const templateColumns = [
{
key: 'type',
label: "Typ",
@@ -145,6 +172,8 @@ const itemColumns = [
sortable: true
},
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const selectItem = (item) => {
@@ -184,12 +213,9 @@ const getRowAmount = (row) => {
const searchString = ref('')
const showDrafts = ref(false)
const filteredRows = computed(() => {
let items = [...dataStore.incominginvoices.map(i => {return {...i, type: "incomingInvoice"}}),...dataStore.createddocuments]
console.log(dataStore.createddocuments)
if(showDrafts.value === true) {
items = items.filter(i => i.state === "Entwurf")
} else {