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

Replace modelValue by models for id and name

Browse Source
This commit is contained in:
Jan Bader 2022-02-25 21:09:31 +00:00
parent a452482381
commit be3829baf8
4 changed files with 32 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,21 +8,15 @@ export interface Suggestion {
Name: string
}
interface Data {
Selected: Suggestion | undefined
SearchQuery: String
Suggestions: Suggestion[]
}
const props = defineProps<{
modelValue: Suggestion | undefined,
text: String,
id: String | undefined,
type: String
}>();
const Selected = ref<Suggestion | undefined>(props.modelValue || undefined);
const SearchQuery = ref(props.modelValue?.Name || "");
const SearchQuery = ref(props.text || "");
const Suggestions = ref<Array<Suggestion>>([]);
const emit = defineEmits(["update:modelValue"]);
const emit = defineEmits(["update:id", "update:text"]);
watch(SearchQuery, () => {
load(SearchQuery.value);
});
@ -30,7 +24,8 @@ function saveTransaction(e: MouseEvent) {
e.preventDefault();
};
function load(text: String) {
emit('update:modelValue', { ID: null, Name: text });
emit('update:id', null);
emit('update:text', text);
if (text == "") {
Suggestions.value = [];
return;
@ -56,13 +51,12 @@ function keypress(e: KeyboardEvent) {
const currentIndex = inputElements.indexOf(el);
const nextElement = inputElements[currentIndex < inputElements.length - 1 ? currentIndex + 1 : 0];
(<HTMLInputElement>nextElement).focus();
}
};
function selectElement(element: Suggestion) {
Selected.value = element;
emit('update:id', element.ID);
emit('update:text', element.Name);
Suggestions.value = [];
emit('update:modelValue', element);
};
function select(e: MouseEvent) {
const target = (<HTMLInputElement>e.target);
@ -74,8 +68,8 @@ function select(e: MouseEvent) {
selectElement(selected);
};
function clear() {
Selected.value = undefined;
emit('update:modelValue', { ID: null, Name: SearchQuery.value });
emit('update:id', null);
emit('update:text', SearchQuery.value);
};
</script>
@ -84,10 +78,10 @@ function clear() {
<input
class="border-b-2 border-black"
@keypress="keypress"
v-if="Selected == undefined"
v-if="id == undefined"
v-model="SearchQuery"
/>
<span @click="clear" v-if="Selected != undefined" class="bg-gray-300">{{ Selected.Name }}</span>
<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
v-for="suggestion in Suggestions"

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

@ -1,54 +1,49 @@
<script lang="ts" setup>
import { computed, ref } from "vue";
import Autocomplete, { Suggestion } from './Autocomplete.vue'
import { Transaction, useAccountStore } from '../stores/budget-account'
import { computed } from "vue";
import Autocomplete from './Autocomplete.vue'
import { useAccountStore } from '../stores/budget-account'
const props = defineProps<{
transaction: Transaction
transactionid: string
}>()
const TransactionDate = ref(props.transaction.Date.substring(0, 10));
const Payee = ref<Suggestion | undefined>({ID: "", Name: props.transaction.Payee});
const Category = ref<Suggestion | undefined>({ID: "", Name: props.transaction.Category});
const Memo = ref(props.transaction.Memo);
const Amount = ref(props.transaction.Amount);
const accountStore = useAccountStore();
const Transaction = accountStore.Transactions.get(props.transactionid)!;
const payload = computed(() => JSON.stringify({
date: TransactionDate.value,
payee: Payee.value,
category: Category.value,
memo: Memo.value,
amount: Amount.value,
date: Transaction.Date,
payee: Transaction.Payee,
category: Transaction.Category,
memo: Transaction.Memo,
amount: Transaction.Amount,
state: "Uncleared"
}));
const accountStore = useAccountStore();
function saveTransaction(e: MouseEvent) {
e.preventDefault();
console.log(props.transaction);
//accountStore.saveTransaction(payload.value);
accountStore.saveTransaction(payload.value);
}
</script>
<template>
<tr>
<td style="width: 90px;" class="text-sm">
<input class="border-b-2 border-black" type="date" v-model="TransactionDate" />
<input class="border-b-2 border-black" type="date" v-model="Transaction.Date" />
</td>
<td style="max-width: 150px;">
<Autocomplete v-model="Payee" type="payees" />
<Autocomplete v-model:text="Transaction.Payee" v-model:id="Transaction.PayeeID" type="payees" />
</td>
<td style="max-width: 200px;">
<Autocomplete v-model="Category" type="categories" />
<Autocomplete v-model:text="Transaction.Category" v-model:id="Transaction.CategoryID" type="categories" />
</td>
<td>
<input class="block w-full border-b-2 border-black" type="text" v-model="Memo" />
<input class="block w-full border-b-2 border-black" type="text" v-model="Transaction.Memo" />
</td>
<td style="width: 80px;" class="text-right">
<input
class="text-right block w-full border-b-2 border-black"
type="currency"
v-model="Amount"
v-model="Transaction.Amount"
/>
</td>
<td style="width: 20px;">

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

@ -37,7 +37,7 @@ const CurrentBudgetID = computed(()=> useBudgetsStore().CurrentBudgetID);
</td>
<td class="text-right">{{ transaction.GroupID ? "☀" : "" }}<a @click="edit = true;">✎</a></td>
</tr>
<TransactionEditRow v-if="edit" :transaction="transaction" />
<TransactionEditRow v-if="edit" :transactionid="transaction.ID" />
</template>
<style>

2
web/src/stores/budget-account.ts
View File

@ -18,10 +18,12 @@ export interface Transaction {
TransferAccount: string,
CategoryGroup: string,
Category: string,
CategoryID: string,
Memo: string,
Status: string,
GroupID: string,
Payee: string,
PayeeID: string,
Amount: number,
}