andrew
/
finnow
1
0
Fork 0
Code Issues 1 Pull Requests Actions Releases Activity

Improve account history formatting.
Build and Deploy Web App / build-and-deploy (push) Successful in 19s Details

This commit is contained in:
andrewlalis 2025-09-11 15:04:31 -04:00
parent 30764ba624
commit efd51d7f53
6 changed files with 98 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web-app/src/assets/styles/text.css
View File

@ -22,6 +22,10 @@
font-weight: bold; font-weight: bold;
} }
.font-italic {
font-style: italic;
}
.font-size-normal { .font-size-normal {
font-size: 1rem; font-size: 1rem;
} }

70
web-app/src/components/history/AccountHistory.vue
View File

@ -1,15 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { AccountApiClient, AccountHistoryItemType, type AccountHistoryItem, type AccountHistoryJournalEntryItem, type AccountHistoryValueRecordItem } from '@/api/account'; import { AccountApiClient, AccountHistoryItemType, type Account, type AccountHistoryItem, type AccountHistoryJournalEntryItem, type AccountHistoryValueRecordItem } from '@/api/account';
import type { PageRequest } from '@/api/pagination'; import type { PageRequest } from '@/api/pagination';
import { onMounted, ref, type Ref } from 'vue'; import { onMounted, ref, type Ref } from 'vue';
import ValueRecordHistoryItem from './ValueRecordHistoryItem.vue'; import ValueRecordHistoryItem from './ValueRecordHistoryItem.vue';
import JournalEntryHistoryItem from './JournalEntryHistoryItem.vue'; import JournalEntryHistoryItem from './JournalEntryHistoryItem.vue';
import { useRoute } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import AppButton from '../common/AppButton.vue'; import AppButton from '../common/AppButton.vue';
import AppBadge from '../common/AppBadge.vue'; import AppBadge from '../common/AppBadge.vue';
import HistoryItemDivider from './HistoryItemDivider.vue';
import { getSelectedProfile } from '@/api/profile';
const route = useRoute() const route = useRoute()
const props = defineProps<{ accountId: number }>() const router = useRouter()
const props = defineProps<{ account: Account }>()
const historyItems: Ref<AccountHistoryItem[]> = ref([]) const historyItems: Ref<AccountHistoryItem[]> = ref([])
const canLoadMore = ref(true) const canLoadMore = ref(true)
const nextPage: Ref<PageRequest> = ref({ page: 1, size: 10, sorts: [{ attribute: 'timestamp', dir: 'DESC' }] }) const nextPage: Ref<PageRequest> = ref({ page: 1, size: 10, sorts: [{ attribute: 'timestamp', dir: 'DESC' }] })
@ -21,7 +24,7 @@ onMounted(async () => {
async function loadNextPage() { async function loadNextPage() {
const api = new AccountApiClient(route) const api = new AccountApiClient(route)
try { try {
const page = await api.getHistory(props.accountId, nextPage.value) const page = await api.getHistory(props.account.id, nextPage.value)
historyItems.value.push(...page.items) historyItems.value.push(...page.items)
canLoadMore.value = !page.isLast canLoadMore.value = !page.isLast
if (canLoadMore.value) { if (canLoadMore.value) {
@ -56,21 +59,44 @@ function asJE(i: AccountHistoryItem): AccountHistoryJournalEntryItem {
return i as AccountHistoryJournalEntryItem return i as AccountHistoryJournalEntryItem
} }
function canView(item: AccountHistoryItem) {
return item.type === AccountHistoryItemType.JOURNAL_ENTRY ||
item.type === AccountHistoryItemType.VALUE_RECORD
}
function viewItem(item: AccountHistoryItem) {
const profile = getSelectedProfile(route)
if (item.type === AccountHistoryItemType.VALUE_RECORD) {
router.push(`/profiles/${profile}/accounts/${props.account.id}/value-records/${asVR(item).valueRecordId}`)
} else if (item.type === AccountHistoryItemType.JOURNAL_ENTRY) {
router.push(`/profiles/${getSelectedProfile(route)}/transactions/${asJE(item).transactionId}`)
}
}
defineExpose({ reload }) defineExpose({ reload })
</script> </script>
<template> <template>
<div> <div>
<div v-for="item in historyItems" :key="item.timestamp" class="history-item"> <div v-for="item, idx in historyItems" :key="idx">
<div class="history-item-header"> <div class="history-item">
<div class="font-mono font-size-xsmall text-muted">{{ new Date(item.timestamp).toLocaleString() }}</div> <!-- The main body on the left. -->
<div style="flex-grow: 1;">
<div class="font-mono font-size-xsmall text-muted" style="margin-bottom: 0.25rem;">
{{ new Date(item.timestamp).toLocaleString() }}
</div>
<ValueRecordHistoryItem v-if="item.type === AccountHistoryItemType.VALUE_RECORD" :item="asVR(item)"
:account-id="account.id" />
<JournalEntryHistoryItem v-if="item.type === AccountHistoryItemType.JOURNAL_ENTRY" :item="asJE(item)" />
</div>
<!-- A "view item" button on the right. -->
<div>
<AppButton icon="eye" size="sm" @click="viewItem(item)" v-if="canView(item)">View</AppButton>
</div>
</div> </div>
<ValueRecordHistoryItem v-if="item.type === AccountHistoryItemType.VALUE_RECORD" :item="asVR(item)" <HistoryItemDivider v-if="idx + 1 < historyItems.length" />
:account-id="accountId" />
<JournalEntryHistoryItem v-if="item.type === AccountHistoryItemType.JOURNAL_ENTRY" :item="asJE(item)" />
<hr class="m0" />
</div> </div>
<div class="align-center"> <div class="align-center">
<AppButton size="md" @click="loadNextPage()" v-if="canLoadMore">Load more history...</AppButton> <AppButton size="md" @click="loadNextPage()" v-if="canLoadMore">Load more history...</AppButton>
@ -81,19 +107,9 @@ defineExpose({ reload })
</template> </template>
<style lang="css"> <style lang="css">
.history-item { .history-item {
margin-top: 1rem; padding: 0 0.5rem;
margin-bottom: 1rem; margin: 1rem 0;
padding: 0.25rem 1rem; display: flex;
background-color: var(--bg-lighter); justify-content: space-between;
border-radius: 1rem;
}
.history-item-header {
float: right;
text-align: right;
}
.history-item-content {
padding: 0.5rem 0;
} }
</style> </style>

29
web-app/src/components/history/HistoryItemDivider.vue Normal file
View File

@ -0,0 +1,29 @@
<script setup lang="ts">
</script>
<template>
<div class="history-item-divider">
<div class="history-item-divider-line"></div>
<div class="history-item-divider-label">
</div>
<div class="history-item-divider-line"></div>
</div>
</template>
<style lang="css">
.history-item-divider {
display: flex;
flex-direction: row;
align-items: center;
margin: 0.5rem 2rem;
}
.history-item-divider-line {
flex-grow: 1;
background-color: var(--text-muted);
height: 1px;
}
.history-item-divider-label {
margin: 0;
}
</style>

34
web-app/src/components/history/JournalEntryHistoryItem.vue
View File

@ -1,28 +1,24 @@
<script setup lang="ts"> <script setup lang="ts">
import type { AccountHistoryJournalEntryItem } from '@/api/account' import { AccountJournalEntryType, type AccountHistoryJournalEntryItem } from '@/api/account'
import { formatMoney } from '@/api/data'; import { formatMoney } from '@/api/data';
import { getSelectedProfile } from '@/api/profile';
import { useRoute } from 'vue-router';
import AppBadge from '../common/AppBadge.vue'; import AppBadge from '../common/AppBadge.vue';
const route = useRoute()
defineProps<{ item: AccountHistoryJournalEntryItem }>() defineProps<{ item: AccountHistoryJournalEntryItem }>()
</script> </script>
<template> <template>
<div class="history-item-content"> <div>
<div> <AppBadge class="font-mono">{{ formatMoney(item.amount, item.currency) }}</AppBadge>
<RouterLink :to="`/profiles/${getSelectedProfile(route)}/transactions/${item.transactionId}`"> <span v-if="item.journalEntryType === AccountJournalEntryType.DEBIT" class="font-bold text-positive">
Transaction #{{ item.transactionId }} debited
</RouterLink> </span>
entered as a <span v-if="item.journalEntryType === AccountJournalEntryType.CREDIT" class="font-bold text-negative">
<strong>{{ item.journalEntryType.toLowerCase() }}</strong> credited
for this account with a value of </span>
<AppBadge class="font-mono">{{ formatMoney(item.amount, item.currency) }}</AppBadge> to this account via Transaction #{{ item.transactionId }}.
<br />
<p class="font-size-small m0 mt-1"> <br />
{{ item.transactionDescription }} <p class="font-size-xsmall m0 mt-1">
</p> <span class="text-muted">Description: </span>{{ item.transactionDescription }}
</div> </p>
</div> </div>
</template> </template>

22
web-app/src/components/history/ValueRecordHistoryItem.vue
View File

@ -1,26 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import { type AccountHistoryValueRecordItem } from '@/api/account'; import { type AccountHistoryValueRecordItem } from '@/api/account';
import { formatMoney } from '@/api/data'; import { formatMoney } from '@/api/data';
import { useRoute } from 'vue-router';
import AppBadge from '../common/AppBadge.vue'; import AppBadge from '../common/AppBadge.vue';
import { computed } from 'vue';
import { getSelectedProfile } from '@/api/profile';
const route = useRoute()
const props = defineProps<{ item: AccountHistoryValueRecordItem, accountId: number }>()
const valueRecordRoute = computed(() => `/profiles/${getSelectedProfile(route)}/accounts/${props.accountId}/value-records/${props.item.valueRecordId}`)
defineProps<{ item: AccountHistoryValueRecordItem, accountId: number }>()
</script> </script>
<template> <template>
<div class="history-item-content"> <div>
<div> Value recorded as <AppBadge class="font-mono">{{
<RouterLink :to="valueRecordRoute">Value recorded</RouterLink> as <AppBadge class="font-mono">{{ formatMoney(item.value,
formatMoney(item.value, item.currency) }}
item.currency) }} </AppBadge>
</AppBadge>
</div>
</div> </div>
</template> </template>

2
web-app/src/pages/AccountPage.vue
View File

@ -98,7 +98,7 @@ async function addValueRecord() {
<AppButton icon="trash" @click="deleteAccount()">Delete</AppButton> <AppButton icon="trash" @click="deleteAccount()">Delete</AppButton>
</ButtonBar> </ButtonBar>
<AccountHistory :account-id="account.id" v-if="account" ref="history" /> <AccountHistory :account="account" v-if="account" ref="history" />
<AddValueRecordModal v-if="account" :account="account" ref="addValueRecordModal" /> <AddValueRecordModal v-if="account" :account="account" ref="addValueRecordModal" />
</AppPage> </AppPage>