jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Run prettier
All checks were successful
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/pr Build is passing
Details

Browse Source
This commit is contained in:
Jan Bader
2022-03-15 12:49:53 +00:00
parent d8d713f841
commit 61a534610f
42 changed files with 1485 additions and 1187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
web/src/components/AccountWithReconciled.vue
View File

@ -19,13 +19,15 @@ function daysSinceLastReconciled() {
</script>
<template>
<span>
<router-link
:to="'/budget/' + CurrentBudgetID + '/account/' + account.ID">
{{account.Name}}
</router-link>
<span v-if="props.account.LastReconciled.Valid && daysSinceLastReconciled() > 7" class="font-bold bg-gray-500 rounded-md text-sm px-2 mx-2 py-1 no-underline">
{{daysSinceLastReconciled()}}
</span>
</span>
</template>
<span>
<router-link
:to="'/budget/' + CurrentBudgetID + '/account/' + account.ID">
{{account.Name}}
</router-link>
<span
v-if="props.account.LastReconciled.Valid && daysSinceLastReconciled() > 7"
class="font-bold bg-gray-500 rounded-md text-sm px-2 mx-2 py-1 no-underline">
{{daysSinceLastReconciled()}}
</span>
</span>
</template>

45
web/src/components/Autocomplete.vue
View File

@ -81,22 +81,29 @@ function clear() {
</script>
<template>
<div>
<Input
type="text"
class="border-b-2 border-black"
@keypress="keypress"
v-if="id == undefined"
v-model="SearchQuery"
/>
<span @click="clear" v-if="id != undefined" class="bg-gray-300 dark:bg-gray-700">{{ text }}</span>
<div v-if="Suggestions.length > 0" class="absolute bg-gray-400 dark:bg-gray-600 w-64 p-2">
<span
v-for="suggestion in Suggestions"
class="block"
@click="select"
:value="suggestion.ID"
>{{ suggestion.Name }}</span>
</div>
</div>
</template>
<div>
<Input
type="text"
class="border-b-2 border-black"
@keypress="keypress"
v-if="id == undefined"
v-model="SearchQuery" />
<span
@click="clear"
v-if="id != undefined"
class="bg-gray-300 dark:bg-gray-700"
>{{ text }}</span
>
<div
v-if="Suggestions.length > 0"
class="absolute bg-gray-400 dark:bg-gray-600 w-64 p-2">
<span
v-for="suggestion in Suggestions"
class="block"
@click="select"
:value="suggestion.ID"
>{{ suggestion.Name }}</span
>
</div>
</div>
</template>

13
web/src/components/Button.vue
View File

@ -1,10 +1,7 @@
<script lang="ts" setup>
</script>
<script lang="ts" setup></script>
<template>
<button
class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2"
>
<slot></slot>
</button>
</template>
<button class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2">
<slot></slot>
</button>
</template>

12
web/src/components/Card.vue
View File

@ -1,8 +1,8 @@
<script lang="ts" setup>
</script>
<script lang="ts" setup></script>
<template>
<div class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg">
<slot></slot>
</div>
</template>
<div
class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg">
<slot></slot>
</div>
</template>

12
web/src/components/Checkbox.vue
View File

@ -3,9 +3,9 @@ const props = defineProps(["modelValue"]);
</script>
<template>
<input
type="checkbox"
:checked="modelValue"
@change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)"
class="dark:bg-slate-900">
</template>
<input
type="checkbox"
:checked="modelValue"
@change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)"
class="dark:bg-slate-900" />
</template>

10
web/src/components/Currency.vue
View File

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { computed } from 'vue';
const props = defineProps<{
const props = defineProps<{
value: number | undefined
negativeClass?: string
positiveClass?: string
@ -15,5 +15,9 @@ const formattedValue = computed(() => internalValue.value.toLocaleString(undefin
</script>
<template>
<span class="text-right" :class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass">{{ formattedValue }} €</span>
</template>
<span
class="text-right"
:class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass"
>{{ formattedValue }} €</span
>
</template>

15
web/src/components/DateInput.vue
View File

@ -26,11 +26,10 @@ function selectAll(event: FocusEvent) {
</script>
<template>
<Input
type="date"
ref="input"
v-bind:value="dateToYYYYMMDD(modelValue)"
@input="updateValue"
@focus="selectAll"
/>
</template>
<Input
type="date"
ref="input"
v-bind:value="dateToYYYYMMDD(modelValue)"
@input="updateValue"
@focus="selectAll" />
</template>

10
web/src/components/Input.vue
View File

@ -3,8 +3,8 @@ const props = defineProps(["modelValue"]);
</script>
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
class="dark:bg-slate-900">
</template>
<input
:value="modelValue"
@input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
class="dark:bg-slate-900" />
</template>

65
web/src/components/Modal.vue
View File

@ -30,33 +30,38 @@ function submitDialog() {
</script>
<template>
<button @click="openDialog">
<slot name="placeholder">
<Card>
<p class="w-24 text-center text-6xl">+</p>
<span class="text-lg" dark>{{ buttonText }}</span>
</Card>
</slot>
</button>
<div
v-if="visible"
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
>
<div class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white dark:bg-black">
<div class="mt-3 text-center">
<h3 class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">{{ buttonText }}</h3>
<slot></slot>
<div class="grid grid-cols-2 gap-6">
<button
@click="closeDialog"
class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
>Close</button>
<button
@click="submitDialog"
class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
>Save</button>
</div>
</div>
</div>
</div>
</template>
<button @click="openDialog">
<slot name="placeholder">
<Card>
<p class="w-24 text-center text-6xl">+</p>
<span class="text-lg" dark>{{ buttonText }}</span>
</Card>
</slot>
</button>
<div
v-if="visible"
class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
<div
class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white dark:bg-black">
<div class="mt-3 text-center">
<h3
class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
{{ buttonText }}
</h3>
<slot></slot>
<div class="grid grid-cols-2 gap-6">
<button
@click="closeDialog"
class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300">
Close
</button>
<button
@click="submitDialog"
class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300">
Save
</button>
</div>
</div>
</div>
</div>
</template>

61
web/src/components/TransactionEditRow.vue
View File

@ -38,29 +38,38 @@ function saveTransaction(e: MouseEvent) {
</script>
<template>
<tr>
<td class="text-sm">
<DateInput class="border-b-2 border-black" v-model="TX.Date" />
</td>
<td>
<Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
</td>
<td>
<Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
</td>
<td>
<Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
</td>
<td class="text-right">
<Input
class="text-right block w-full border-b-2 border-black"
type="currency"
v-model="TX.Amount"
/>
</td>
<td>
<Button class="bg-blue-500" @click="saveTransaction">Save</Button>
</td>
<td></td>
</tr>
</template>
<tr>
<td class="text-sm">
<DateInput class="border-b-2 border-black" v-model="TX.Date" />
</td>
<td>
<Autocomplete
v-model:text="TX.Payee"
v-model:id="TX.PayeeID"
v-model:type="payeeType"
model="payees" />
</td>
<td>
<Autocomplete
v-model:text="TX.Category"
v-model:id="TX.CategoryID"
model="categories" />
</td>
<td>
<Input
class="block w-full border-b-2 border-black"
type="text"
v-model="TX.Memo" />
</td>
<td class="text-right">
<Input
class="text-right block w-full border-b-2 border-black"
type="currency"
v-model="TX.Amount" />
</td>
<td>
<Button class="bg-blue-500" @click="saveTransaction">Save</Button>
</td>
<td></td>
</tr>
</template>

67
web/src/components/TransactionInputRow.vue
View File

@ -52,32 +52,41 @@ function saveTransaction(e: MouseEvent) {
</script>
<template>
<tr>
<label class="md:hidden">Date</label>
<td class="text-sm">
<DateInput class="border-b-2 border-black" v-model="TX.Date" />
</td>
<label class="md:hidden">Payee</label>
<td>
<Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
</td>
<label class="md:hidden">Category</label>
<td>
<Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
</td>
<td class="col-span-2">
<Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
</td>
<label class="md:hidden">Amount</label>
<td class="text-right">
<Input
class="text-right block w-full border-b-2 border-black"
type="currency"
v-model="TX.Amount"
/>
</td>
<td class="hidden md:table-cell">
<Button class="bg-blue-500" @click="saveTransaction">Save</Button>
</td>
</tr>
</template>
<tr>
<label class="md:hidden">Date</label>
<td class="text-sm">
<DateInput class="border-b-2 border-black" v-model="TX.Date" />
</td>
<label class="md:hidden">Payee</label>
<td>
<Autocomplete
v-model:text="TX.Payee"
v-model:id="TX.PayeeID"
v-model:type="payeeType"
model="payees" />
</td>
<label class="md:hidden">Category</label>
<td>
<Autocomplete
v-model:text="TX.Category"
v-model:id="TX.CategoryID"
model="categories" />
</td>
<td class="col-span-2">
<Input
class="block w-full border-b-2 border-black"
type="text"
v-model="TX.Memo" />
</td>
<label class="md:hidden">Amount</label>
<td class="text-right">
<Input
class="text-right block w-full border-b-2 border-black"
type="currency"
v-model="TX.Amount" />
</td>
<td class="hidden md:table-cell">
<Button class="bg-blue-500" @click="saveTransaction">Save</Button>
</td>
</tr>
</template>

69
web/src/components/TransactionRow.vue
View File

@ -47,34 +47,45 @@ function getStatusSymbol() {
</script>
<template>
<tr v-if="dateChanged()" class="table-row md:hidden">
<td class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2" colspan="5">{{ formatDate(TX.Date) }}</td>
</tr>
<tr
v-if="!edit"
class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
:class="[index % 6 < 3 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']"
>
<!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
<td class="hidden md:block">{{ formatDate(TX.Date) }}</td>
<td class="pl-2 md:pl-0">{{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}</td>
<td>{{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }}</td>
<td>
<a
:href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
>{{ TX.Memo }}</a>
</td>
<td>
<Currency class="block" :value="TX.Amount" />
</td>
<td class="text-right">
{{ TX.GroupID ? "☀" : "" }}
{{ getStatusSymbol() }}
<a @click="edit = true;">✎</a>
<Checkbox v-if="Reconciling && TX.Status != 'Reconciled'" v-model="TX.Reconciled" />
</td>
</tr>
<TransactionEditRow v-if="edit" :transactionid="TX.ID" @save="edit = false" />
<tr v-if="dateChanged()" class="table-row md:hidden">
<td class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2" colspan="5">
{{ formatDate(TX.Date) }}
</td>
</tr>
<tr
v-if="!edit"
class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
:class="[index % 6 < 3 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']">
<!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
<td class="hidden md:block">{{ formatDate(TX.Date) }}</td>
<td class="pl-2 md:pl-0">
{{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}
</td>
<td>
{{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }}
</td>
<td>
<a
:href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
>{{ TX.Memo }}</a
>
</td>
<td>
<Currency class="block" :value="TX.Amount" />
</td>
<td class="text-right">
{{ TX.GroupID ? "☀" : "" }}
{{ getStatusSymbol() }}
<a @click="edit = true;">✎</a>
<Checkbox
v-if="Reconciling && TX.Status != 'Reconciled'"
v-model="TX.Reconciled" />
</td>
</tr>
<TransactionEditRow
v-if="edit"
:transactionid="TX.ID"
@save="edit = false" />
</template>
<style>
@ -82,4 +93,4 @@ td {
overflow: hidden;
white-space: nowrap;
}
</style>
</style>