Added start of hints for form controls.

web-app/src/components/common/form/FormControl.vue

@@ -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;

web-app/src/pages/forms/EditTransactionPage.vue

@@ -281,46 +281,20 @@ function getLocalDateTimeStringFromUTCTimestamp(timestamp: string) {
       <FormGroup>
         <!-- Basic properties -->
         <FormControl label="Timestamp">
-          <input
+          <input type="datetime-local" v-model="timestamp" step="1" :disabled="loading" style="min-width: 250px" />
-            type="datetime-local"
-            v-model="timestamp"
-            step="1"
-            :disabled="loading"
-            style="min-width: 250px"
-          />
         </FormControl>
         <FormControl label="Amount">
-          <input
+          <input type="number" v-model="amount" step="0.01" min="0.01" :disabled="loading" style="max-width: 100px" />
-            type="number"
-            v-model="amount"
-            step="0.01"
-            min="0.01"
-            :disabled="loading"
-            style="max-width: 100px"
-          />
         </FormControl>
         <FormControl label="Currency">
-          <select
+          <select v-model="currency" :disabled="loading || availableCurrencies.length === 1">
-            v-model="currency"
+            <option v-for="currency in availableCurrencies" :key="currency.code" :value="currency">
-            :disabled="loading || availableCurrencies.length === 1"
-          >
-            <option
-              v-for="currency in availableCurrencies"
-              :key="currency.code"
-              :value="currency"
-            >
               {{ currency.code }}
             </option>
           </select>
         </FormControl>
-        <FormControl
+        <FormControl label="Description" style="min-width: 200px">
-          label="Description"
+          <textarea v-model="description" :disabled="loading"></textarea>
-          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
+          <select v-model="creditedAccountId" :disabled="loading">
-            v-model="creditedAccountId"
+            <option v-for="account in availableAccounts" :key="account.id" :value="account.id">
-            :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
+          <select v-model="debitedAccountId" :disabled="loading">
-            v-model="debitedAccountId"
+            <option v-for="account in availableAccounts" :key="account.id" :value="account.id">
-            :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
+      <LineItemsEditor v-if="currency" v-model="lineItems" :currency="currency"
-        v-if="currency"
+        :transaction-amount="floatMoneyToInteger(amount, 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
+        <FileSelector :initial-files="existingTransaction?.attachments ?? []"
-          :initial-files="existingTransaction?.attachments ?? []"
+          v-model:uploaded-files="attachmentsToUpload" v-model:removed-files="removedAttachmentIds" />
-          v-model:uploaded-files="attachmentsToUpload"
-          v-model:removed-files="removedAttachmentIds"
-        />
       </FormGroup>
 
-      <FormActions
+      <FormActions @cancel="doCancel()" :disabled="loading || !formValid || !unsavedEdits"
-        @cancel="doCancel()"
+        :submit-text="editing ? 'Save' : 'Add'" />
-        :disabled="loading || !formValid || !unsavedEdits"
-        :submit-text="editing ? 'Save' : 'Add'"
-      />
     </AppForm>
   </AppPage>
 </template>