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

Added start of hints for form controls.
Build and Deploy Web App / build-and-deploy (push) Successful in 19s Details

This commit is contained in:
andrewlalis 2025-09-24 21:09:51 -04:00
parent 44ead22c4f
commit 9763fd7abe
2 changed files with 24 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web-app/src/components/common/form/FormControl.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
defineProps<{
label: string
hint?: string
}>()
</script>
<template>
@ -9,6 +10,9 @@ defineProps<{
{{ label }}
<slot></slot>
</label>
<p v-if="hint" style="margin-top: 0.1rem; margin-bottom: 0;" class="font-size-small text-muted">
{{ hint }}
</p>
</div>
</template>
<style lang="css">
@ -17,7 +21,7 @@ defineProps<{
margin: 0.5rem;
}
.app-form-control > label {
.app-form-control>label {
display: flex;
flex-direction: column;
font-size: 0.9rem;
@ -26,19 +30,19 @@ defineProps<{
/* Styles for different form controls under here: */
.app-form-control > label input {
.app-form-control>label input {
font-size: 16px;
font-family: 'OpenSans', sans-serif;
padding: 0.25rem 0.5rem;
}
.app-form-control > label textarea {
.app-form-control>label textarea {
font-size: 16px;
font-family: 'OpenSans', sans-serif;
padding: 0.25rem 0.5rem;
}
.app-form-control > label select {
.app-form-control>label select {
font-size: 16px;
font-family: 'OpenSans', sans-serif;
padding: 0.25rem 0.5rem;

82
web-app/src/pages/forms/EditTransactionPage.vue
View File

@ -281,46 +281,20 @@ function getLocalDateTimeStringFromUTCTimestamp(timestamp: string) {
<FormGroup>
<!-- Basic properties -->
<FormControl label="Timestamp">
<input
type="datetime-local"
v-model="timestamp"
step="1"
:disabled="loading"
style="min-width: 250px"
/>
<input type="datetime-local" v-model="timestamp" step="1" :disabled="loading" style="min-width: 250px" />
</FormControl>
<FormControl label="Amount">
<input
type="number"
v-model="amount"
step="0.01"
min="0.01"
:disabled="loading"
style="max-width: 100px"
/>
<input type="number" v-model="amount" step="0.01" min="0.01" :disabled="loading" style="max-width: 100px" />
</FormControl>
<FormControl label="Currency">
<select
v-model="currency"
:disabled="loading || availableCurrencies.length === 1"
>
<option
v-for="currency in availableCurrencies"
:key="currency.code"
:value="currency"
>
<select v-model="currency" :disabled="loading || availableCurrencies.length === 1">
<option v-for="currency in availableCurrencies" :key="currency.code" :value="currency">
{{ currency.code }}
</option>
</select>
</FormControl>
<FormControl
label="Description"
style="min-width: 200px"
>
<textarea
v-model="description"
:disabled="loading"
></textarea>
<FormControl label="Description" style="min-width: 200px">
<textarea v-model="description" :disabled="loading"></textarea>
</FormControl>
</FormGroup>
@ -337,30 +311,16 @@ function getLocalDateTimeStringFromUTCTimestamp(timestamp: string) {
<FormGroup>
<!-- Accounts -->
<FormControl label="Credited Account">
<select
v-model="creditedAccountId"
:disabled="loading"
>
<option
v-for="account in availableAccounts"
:key="account.id"
:value="account.id"
>
<select v-model="creditedAccountId" :disabled="loading">
<option v-for="account in availableAccounts" :key="account.id" :value="account.id">
{{ account.name }} ({{ account.numberSuffix }})
</option>
<option :value="null">None</option>
</select>
</FormControl>
<FormControl label="Debited Account">
<select
v-model="debitedAccountId"
:disabled="loading"
>
<option
v-for="account in availableAccounts"
:key="account.id"
:value="account.id"
>
<select v-model="debitedAccountId" :disabled="loading">
<option v-for="account in availableAccounts" :key="account.id" :value="account.id">
{{ account.name }} ({{ account.numberSuffix }})
</option>
<option :value="null">None</option>
@ -368,12 +328,8 @@ function getLocalDateTimeStringFromUTCTimestamp(timestamp: string) {
</FormControl>
</FormGroup>
<LineItemsEditor
v-if="currency"
v-model="lineItems"
:currency="currency"
:transaction-amount="floatMoneyToInteger(amount, currency)"
/>
<LineItemsEditor v-if="currency" v-model="lineItems" :currency="currency"
:transaction-amount="floatMoneyToInteger(amount, currency)" />
<FormGroup>
<!-- Tags -->
@ -384,18 +340,12 @@ function getLocalDateTimeStringFromUTCTimestamp(timestamp: string) {
<FormGroup>
<h5>Attachments</h5>
<FileSelector
:initial-files="existingTransaction?.attachments ?? []"
v-model:uploaded-files="attachmentsToUpload"
v-model:removed-files="removedAttachmentIds"
/>
<FileSelector :initial-files="existingTransaction?.attachments ?? []"
v-model:uploaded-files="attachmentsToUpload" v-model:removed-files="removedAttachmentIds" />
</FormGroup>
<FormActions
@cancel="doCancel()"
:disabled="loading || !formValid || !unsavedEdits"
:submit-text="editing ? 'Save' : 'Add'"
/>
<FormActions @cancel="doCancel()" :disabled="loading || !formValid || !unsavedEdits"
:submit-text="editing ? 'Save' : 'Add'" />
</AppForm>
</AppPage>
</template>