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

Merge pull request 'Design fixes for dark mode' (#34) from design-fixes into master
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
Reviewed-on: #34
This commit is contained in:
Jan Bader 2022-03-02 20:54:26 +01:00
commit 7b5b16c1b2
12 changed files with 62 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
import { ref, watch } from "vue"
import { GET } from "../api";
import { useBudgetsStore } from "../stores/budget";
import Input from "./Input.vue";
export interface Suggestion {
ID: string
@ -43,22 +44,25 @@ function load(text: String) {
});
};
function keypress(e: KeyboardEvent) {
if (e.key == "Enter") {
const selected = Suggestions.value[0];
selectElement(selected);
const el = (<HTMLInputElement>e.target);
const inputElements = Array.from(el.ownerDocument.querySelectorAll('input:not([disabled]):not([readonly])'));
const currentIndex = inputElements.indexOf(el);
const nextElement = inputElements[currentIndex < inputElements.length - 1 ? currentIndex + 1 : 0];
(<HTMLInputElement>nextElement).focus();
}
if (e.key != "Enter")
return;
const selected = Suggestions.value[0];
selectElement(selected);
const el = (<HTMLInputElement>e.target);
const inputElements = Array.from(el.ownerDocument.querySelectorAll('input:not([disabled]):not([readonly])'));
const currentIndex = inputElements.indexOf(el);
const nextElement = inputElements[currentIndex < inputElements.length - 1 ? currentIndex + 1 : 0];
(<HTMLInputElement>nextElement).focus();
};
function selectElement(element: Suggestion) {
emit('update:id', element.ID);
emit('update:text', element.Name);
emit('update:type', element.Type);
Suggestions.value = [];
};
function select(e: MouseEvent) {
const target = (<HTMLInputElement>e.target);
const valueAttribute = target.attributes.getNamedItem("value");
@ -68,6 +72,7 @@ function select(e: MouseEvent) {
const selected = Suggestions.value.filter(x => x.ID == selectedID)[0];
selectElement(selected);
};
function clear() {
emit('update:id', null);
emit('update:text', SearchQuery.value);
@ -77,14 +82,15 @@ function clear() {
<template>
<div>
<input
<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">{{ text }}</span>
<div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2">
<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"

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

@ -1,4 +1,5 @@
<script lang="ts" setup>
import Input from './Input.vue';
const props = defineProps(["modelValue"]);
const emit = defineEmits(['update:modelValue']);
@ -25,7 +26,7 @@ function selectAll(event: FocusEvent) {
</script>
<template>
<input
<Input
type="date"
ref="input"
v-bind:value="dateToYYYYMMDD(modelValue)"

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

@ -0,0 +1,10 @@
<script lang="ts" setup>
const props = defineProps(["modelValue"]);
</script>
<template>
<input
v-model="modelValue"
@input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
class="dark:bg-slate-900">
</template>

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

@ -4,6 +4,8 @@ import Autocomplete from './Autocomplete.vue'
import { useAccountStore } from '../stores/budget-account'
import DateInput from "./DateInput.vue";
import { useTransactionsStore } from "../stores/transactions";
import Input from "./Input.vue";
import Button from "./Button.vue";
const props = defineProps<{
transactionid: string
@ -37,28 +39,28 @@ function saveTransaction(e: MouseEvent) {
<template>
<tr>
<td style="width: 90px;" class="text-sm">
<td class="text-sm">
<DateInput class="border-b-2 border-black" v-model="TX.Date" />
</td>
<td style="max-width: 150px;">
<td>
<Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
</td>
<td style="max-width: 200px;">
<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" />
<Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
</td>
<td style="width: 80px;" class="text-right">
<input
<td class="text-right">
<Input
class="text-right block w-full border-b-2 border-black"
type="currency"
v-model="TX.Amount"
/>
</td>
<td style="width: 20px;">
<input type="submit" @click="saveTransaction" value="Save" />
<td>
<Button class="bg-blue-500" @click="saveTransaction">Save</Button>
</td>
<td style="width: 20px;"></td>
<td></td>
</tr>
</template>

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

@ -4,6 +4,7 @@ import Autocomplete from '../components/Autocomplete.vue'
import { Transaction, useTransactionsStore } from "../stores/transactions";
import DateInput from "./DateInput.vue";
import Button from "./Button.vue";
import Input from "./Input.vue";
const props = defineProps<{
budgetid: string
@ -65,11 +66,11 @@ function saveTransaction(e: MouseEvent) {
<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" />
<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
<Input
class="text-right block w-full border-b-2 border-black"
type="currency"
v-model="TX.Amount"

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

@ -6,6 +6,7 @@ import Currency from "./Currency.vue";
import TransactionEditRow from "./TransactionEditRow.vue";
import { formatDate } from "../date";
import { useAccountStore } from "../stores/budget-account";
import Input from "./Input.vue";
const props = defineProps<{
transactionid: string,
@ -69,7 +70,7 @@ function getStatusSymbol() {
{{ TX.GroupID ? "☀" : "" }}
{{ getStatusSymbol() }}
<a @click="edit = true;">✎</a>
<input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
<Input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
</td>
</tr>
<TransactionEditRow v-if="edit" :transactionid="TX.ID" @save="edit = false" />

5
web/src/dialogs/EditAccount.vue
View File

@ -2,6 +2,7 @@
import { computed, ref } from 'vue';
import Modal from '../components/Modal.vue';
import { useAccountStore } from '../stores/budget-account';
import Input from '../components/Input.vue';
const accountStore = useAccountStore();
const CurrentAccount = computed(() => accountStore.CurrentAccount);
@ -23,7 +24,7 @@ function openEditAccount(e : any) {
<Modal button-text="Edit Account" @open="openEditAccount" @submit="editAccount">
<template v-slot:placeholder>✎</template>
<div class="mt-2 px-7 py-3">
<input
<Input
class="border-2"
type="text"
v-model="accountName"
@ -32,7 +33,7 @@ function openEditAccount(e : any) {
/>
</div>
<div class="mt-2 px-7 py-3">
<input
<Input
class="border-2"
type="checkbox"
v-model="accountOnBudget"

3
web/src/dialogs/NewBudget.vue
View File

@ -2,6 +2,7 @@
import Modal from '../components/Modal.vue';
import { ref } from "vue";
import { useBudgetsStore } from '../stores/budget';
import Input from '../components/Input.vue';
const budgetName = ref("");
function saveBudget() {
@ -12,7 +13,7 @@ function saveBudget() {
<template>
<Modal button-text="New Budget" @submit="saveBudget">
<div class="mt-2 px-7 py-3">
<input class="border-2" type="text" v-model="budgetName" placeholder="Budget name" required />
<Input class="border-2" type="text" v-model="budgetName" placeholder="Budget name" required />
</div>
</Modal>
</template>

5
web/src/pages/Account.vue
View File

@ -8,6 +8,7 @@ import EditAccount from "../dialogs/EditAccount.vue";
import Button from "../components/Button.vue";
import { useTransactionsStore } from "../stores/transactions";
import Modal from "../components/Modal.vue";
import Input from "../components/Input.vue";
defineProps<{
budgetid: string
@ -73,7 +74,7 @@ function createReconcilationTransaction() {
<Currency :value="transactions.ReconcilingBalance" />your current balance?
<Button class="bg-blue-500 mx-3 py-2" @click="submitReconcilation">Yes!</Button>
<br />No, it's:
<input class="text-right" type="number" v-model="TargetReconcilingBalance" />
<Input class="text-right" type="number" v-model="TargetReconcilingBalance" />
Difference:
<Currency :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />
<Button
@ -93,7 +94,7 @@ function createReconcilationTransaction() {
<td>Memo</td>
<td class="text-right">Amount</td>
<td style="width: 80px;">
<input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
<Input v-if="transactions.Reconciling" type="checkbox" @input="setReconciled" />
</td>
</tr>
<TransactionInputRow class="hidden md:table-row" :budgetid="budgetid" :accountid="accountid" />

5
web/src/pages/Login.vue
View File

@ -2,6 +2,7 @@
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useSessionStore } from "../stores/session";
import Input from "../components/Input.vue";
const error = ref("");
const login = ref({ user: "", password: "" });
@ -28,10 +29,10 @@ function formSubmit(e: MouseEvent) {
<template>
<div>
<input type="text" v-model="login.user"
<Input type="text" v-model="login.user"
placeholder="Username"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
<input type="password" v-model="login.password"
<Input type="password" v-model="login.password"
placeholder="Password"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
</div>

7
web/src/pages/Register.vue
View File

@ -2,6 +2,7 @@
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { useSessionStore } from "../stores/session";
import Input from "../components/Input.vue";
const error = ref("");
const login = ref({ email: "", password: "", name: "" });
@ -28,13 +29,13 @@ function formSubmit(e: MouseEvent) {
<template>
<div>
<input type="text" v-model="login.name"
<Input type="text" v-model="login.name"
placeholder="Name"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
<input type="text" v-model="login.email"
<Input type="text" v-model="login.email"
placeholder="Email"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
<input type="password" v-model="login.password"
<Input type="password" v-model="login.password"
placeholder="Password"
class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
</div>

1
web/src/pages/Settings.vue
View File

@ -7,6 +7,7 @@ import { useSessionStore } from "../stores/session";
import Card from "../components/Card.vue";
import Button from "../components/Button.vue";
import { saveAs } from 'file-saver';
import Input from "../components/Input.vue";
const transactionsFile = ref<File | undefined>(undefined);
const assignmentsFile = ref<File | undefined>(undefined);