Use spaces
This commit is contained in:
@ -19,15 +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>
|
||||
<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>
|
||||
|
||||
@ -81,29 +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>
|
||||
<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>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<button class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2">
|
||||
<slot></slot>
|
||||
</button>
|
||||
<button class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<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>
|
||||
<div
|
||||
class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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" />
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="modelValue"
|
||||
@change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)"
|
||||
class="dark:bg-slate-900" />
|
||||
</template>
|
||||
|
||||
@ -15,9 +15,9 @@ const formattedValue = computed(() => internalValue.value.toLocaleString(undefin
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span
|
||||
class="text-right"
|
||||
:class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass"
|
||||
>{{ formattedValue }} €</span
|
||||
>
|
||||
<span
|
||||
class="text-right"
|
||||
:class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass"
|
||||
>{{ formattedValue }} €</span
|
||||
>
|
||||
</template>
|
||||
|
||||
@ -26,10 +26,10 @@ function selectAll(event: FocusEvent) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Input
|
||||
type="date"
|
||||
ref="input"
|
||||
v-bind:value="dateToYYYYMMDD(modelValue)"
|
||||
@input="updateValue"
|
||||
@focus="selectAll" />
|
||||
<Input
|
||||
type="date"
|
||||
ref="input"
|
||||
v-bind:value="dateToYYYYMMDD(modelValue)"
|
||||
@input="updateValue"
|
||||
@focus="selectAll" />
|
||||
</template>
|
||||
|
||||
@ -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" />
|
||||
<input
|
||||
:value="modelValue"
|
||||
@input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
|
||||
class="dark:bg-slate-900" />
|
||||
</template>
|
||||
|
||||
@ -30,38 +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>
|
||||
<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>
|
||||
|
||||
@ -38,38 +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>
|
||||
<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>
|
||||
|
||||
@ -52,41 +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>
|
||||
<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>
|
||||
|
||||
@ -47,45 +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>
|
||||
|
||||
Reference in New Issue
Block a user