Reformatted source code.

2025-09-24 20:59:25 -04:00 · 2025-09-24 20:59:25 -04:00 · 44ead22c4f
parent 110eb2c912
commit 44ead22c4f
8 changed files with 177 additions and 64 deletions
--- a/web-app/src/components/CategorySelect.vue
+++ b/web-app/src/components/CategorySelect.vue
@ -12,7 +12,7 @@ defineEmits<{ categorySelected: [TransactionCategoryTree | null] }>()
 const categories: Ref<TransactionCategoryTree[]> = ref([])
 const selectedCategory: Ref<TransactionCategoryTree | null> = ref(null)
 const options: Ref<Option<TransactionCategoryTree>[]> = computed(() => {
-  return categories.value.map(c => {
+  return categories.value.map((c) => {
    return { label: c.name, value: c }
  })
 })
@ -37,8 +37,14 @@ function getCategoryById(id: number): TransactionCategoryTree | null {
 }
 </script>
 <template>
-  <VueSelect class="category-select" v-model="selectedCategory" :options="options" placeholder="Select a category"
-    @option-selected="model = selectedCategory?.id ?? null" @option-deselected="model = null">
+  <VueSelect
+    class="category-select"
+    v-model="selectedCategory"
+    :options="options"
+    placeholder="Select a category"
+    @option-selected="model = selectedCategory?.id ?? null"
+    @option-deselected="model = null"
+  >
    <template #option="{ option }">
      {{ '&nbsp;'.repeat(option.value.depth * 4) }} {{ option.label }}
    </template>
--- a/web-app/src/components/EditVendorModal.vue
+++ b/web-app/src/components/EditVendorModal.vue
@ -32,10 +32,7 @@ function canSave() {
  if (!inputValid) return false
  if (props.vendor) {
    const newDesc = description.value.trim().length === 0 ? null : description.value.trim()
-    return (
-      props.vendor.name.trim() !== name.value.trim() ||
-      props.vendor.description !== newDesc
-    )
+    return props.vendor.name.trim() !== name.value.trim() || props.vendor.description !== newDesc
  }
  return true
 }
@ -70,17 +67,31 @@ defineExpose({ show })
      <AppForm>
        <FormGroup>
          <FormControl label="Name">
-            <input type="text" v-model="name" />
+            <input
+              type="text"
+              v-model="name"
+            />
          </FormControl>
-          <FormControl label="Description" style="min-width: 300px">
+          <FormControl
+            label="Description"
+            style="min-width: 300px"
+          >
            <textarea v-model="description"></textarea>
          </FormControl>
        </FormGroup>
      </AppForm>
    </template>
    <template v-slot:buttons>
-      <AppButton :disabled="!canSave()" @click="doSave()">Save</AppButton>
-      <AppButton button-style="secondary" @click="modal?.close()">Cancel</AppButton>
+      <AppButton
+        :disabled="!canSave()"
+        @click="doSave()"
+        >Save</AppButton
+      >
+      <AppButton
+        button-style="secondary"
+        @click="modal?.close()"
+        >Cancel</AppButton
+      >
    </template>
  </ModalWrapper>
 </template>
--- a/web-app/src/components/TagLabel.vue
+++ b/web-app/src/components/TagLabel.vue
@ -8,8 +8,12 @@ defineEmits<{ deleted: void }>()
  <AppBadge>
    <span class="tag-label-hashtag">#</span>
    {{ tag }}
-    <font-awesome-icon v-if="deletable" icon="fa-x" class="tag-label-delete"
-      @click="$emit('deleted')"></font-awesome-icon>
+    <font-awesome-icon
+      v-if="deletable"
+      icon="fa-x"
+      class="tag-label-delete"
+      @click="$emit('deleted')"
+    ></font-awesome-icon>
  </AppBadge>
 </template>
 <style lang="css">
--- a/web-app/src/components/TagsSelect.vue
+++ b/web-app/src/components/TagsSelect.vue
@ -1,20 +1,20 @@
 <script setup lang="ts">
-import { getSelectedProfile } from '@/api/profile';
-import { TransactionApiClient } from '@/api/transaction';
-import { computed, onMounted, ref, type Ref } from 'vue';
-import { useRoute } from 'vue-router';
-import TagLabel from './TagLabel.vue';
-import AppButton from './common/AppButton.vue';
+import { getSelectedProfile } from '@/api/profile'
+import { TransactionApiClient } from '@/api/transaction'
+import { computed, onMounted, ref, type Ref } from 'vue'
+import { useRoute } from 'vue-router'
+import TagLabel from './TagLabel.vue'
+import AppButton from './common/AppButton.vue'

 const route = useRoute()
 const model = defineModel<string[]>({ required: true })
 const existingTags: Ref<string[]> = ref([])
 const availableTags = computed(() => {
-  return existingTags.value.filter(t => !model.value.includes(t))
+  return existingTags.value.filter((t) => !model.value.includes(t))
 })

 const tagSelect: Ref<string | null> = ref(null)
-const enteringCustomTag = computed(() => tagSelect.value == "--CUSTOM_TAG--")
+const enteringCustomTag = computed(() => tagSelect.value == '--CUSTOM_TAG--')
 const customTagInput: Ref<string> = ref('')
 const customTagInputValid = computed(() => {
  const result = customTagInput.value.match('^[a-z0-9-_]{3,32}$')
@ -44,21 +44,38 @@ function addTag() {
 }
 </script>
 <template>
-  <div style="margin-top: 0.5rem; margin-bottom: 0.5rem; font-weight: normal;">
-    <TagLabel v-for="t in model" :key="t" :tag="t" deletable @deleted="model = model.filter((tg) => tg !== t)" />
+  <div style="margin-top: 0.5rem; margin-bottom: 0.5rem; font-weight: normal">
+    <TagLabel
+      v-for="t in model"
+      :key="t"
+      :tag="t"
+      deletable
+      @deleted="model = model.filter((tg) => tg !== t)"
+    />
  </div>
  <div>
    <select v-model="tagSelect">
-      <option v-for="tag in availableTags" :key="tag" :value="tag">
+      <option
+        v-for="tag in availableTags"
+        :key="tag"
+        :value="tag"
+      >
        {{ tag }}
      </option>
-      <option value="--CUSTOM_TAG--">
-        Add a new tag
-      </option>
+      <option value="--CUSTOM_TAG--">Add a new tag</option>
    </select>
-    <input style="margin-left: 0.25rem;" v-model="customTagInput" v-if="enteringCustomTag"
-      placeholder="Custom tag..." />
-    <AppButton size="sm" style="margin-left: 0.25rem;" @click="addTag()" :disabled="!canAddTag">
+    <input
+      style="margin-left: 0.25rem"
+      v-model="customTagInput"
+      v-if="enteringCustomTag"
+      placeholder="Custom tag..."
+    />
+    <AppButton
+      size="sm"
+      style="margin-left: 0.25rem"
+      @click="addTag()"
+      :disabled="!canAddTag"
+    >
      Add Tag
    </AppButton>
  </div>
--- a/web-app/src/components/VendorCard.vue
+++ b/web-app/src/components/VendorCard.vue
@ -1,23 +1,34 @@
 <script setup lang="ts">
-import type { TransactionVendor } from '@/api/transaction';
-import AppButton from './common/AppButton.vue';
+import type { TransactionVendor } from '@/api/transaction'
+import AppButton from './common/AppButton.vue'

 defineProps<{ vendor: TransactionVendor }>()
-defineEmits<{ 'edit': void, 'delete': void }>()
+defineEmits<{ edit: void; delete: void }>()
 </script>
 <template>
  <div class="vendor-card">
-    <div style="flex-shrink: 1;">
+    <div style="flex-shrink: 1">
      <div>
        {{ vendor.name }}
      </div>
-      <div v-if="vendor.description !== null" class="font-size-small text-muted">
+      <div
+        v-if="vendor.description !== null"
+        class="font-size-small text-muted"
+      >
        {{ vendor.description }}
      </div>
    </div>
    <div>
-      <AppButton icon="wrench" size="sm" @click="$emit('edit')"></AppButton>
-      <AppButton icon="trash" size="sm" @click="$emit('delete')"></AppButton>
+      <AppButton
+        icon="wrench"
+        size="sm"
+        @click="$emit('edit')"
+      ></AppButton>
+      <AppButton
+        icon="trash"
+        size="sm"
+        @click="$emit('delete')"
+      ></AppButton>
    </div>
  </div>
 </template>
--- a/web-app/src/components/common/form/FormControl.vue
+++ b/web-app/src/components/common/form/FormControl.vue
@ -17,7 +17,7 @@ defineProps<{
  margin: 0.5rem;
 }

-.app-form-control>label {
+.app-form-control > label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
@ -26,19 +26,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;
--- a/web-app/src/pages/VendorsPage.vue
+++ b/web-app/src/pages/VendorsPage.vue
@ -56,11 +56,25 @@ async function deleteVendor(vendor: TransactionVendor) {
      Vendors are businesses and other entities with which you exchange money. Adding a vendor to
      Finnow allows you to track when you interact with that vendor on a transaction.
    </p>
-    <VendorCard v-for="v in vendors" :key="v.id" :vendor="v" @edit="editVendor(v)" @delete="deleteVendor(v)" />
+    <VendorCard
+      v-for="v in vendors"
+      :key="v.id"
+      :vendor="v"
+      @edit="editVendor(v)"
+      @delete="deleteVendor(v)"
+    />
    <ButtonBar>
-      <AppButton button-type="button" icon="plus" @click="addVendor()">Add Vendor</AppButton>
+      <AppButton
+        button-type="button"
+        icon="plus"
+        @click="addVendor()"
+        >Add Vendor</AppButton
+      >
    </ButtonBar>

-    <EditVendorModal ref="editVendorModal" :vendor="editedVendor" />
+    <EditVendorModal
+      ref="editVendorModal"
+      :vendor="editedVendor"
+    />
  </AppPage>
 </template>
--- a/web-app/src/pages/forms/EditTransactionPage.vue
+++ b/web-app/src/pages/forms/EditTransactionPage.vue
@ -55,12 +55,11 @@ const formValid = computed(() => {
  )
 })
 const unsavedEdits = computed(() => {
-  console.log("Checking if there are unsaved edits...")
+  console.log('Checking if there are unsaved edits...')
  if (!existingTransaction.value) return true
  const tx = existingTransaction.value
  const tagsEqual =
-    tags.value.every((t) => tx.tags.includes(t)) &&
-    tx.tags.every((t) => tags.value.includes(t))
+    tags.value.every((t) => tx.tags.includes(t)) && tx.tags.every((t) => tags.value.includes(t))
  let lineItemsEqual = false
  if (lineItems.value.length === tx.lineItems.length) {
    lineItemsEqual = true
@ -82,7 +81,8 @@ const unsavedEdits = computed(() => {
  const attachmentsChanged =
    attachmentsToUpload.value.length > 0 || removedAttachmentIds.value.length > 0
  const timestampChanged = new Date(timestamp.value).toISOString() !== tx.timestamp
-  const amountChanged = amount.value * Math.pow(10, currency.value?.fractionalDigits ?? 0) !== tx.amount
+  const amountChanged =
+    amount.value * Math.pow(10, currency.value?.fractionalDigits ?? 0) !== tx.amount
  const currencyChanged = currency.value?.code !== tx.currency.code
  const descriptionChanged = description.value !== tx.description
  const vendorChanged = vendor.value?.id !== tx.vendor?.id
@ -281,20 +281,46 @@ 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>

@ -311,16 +337,30 @@ 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>
@ -328,8 +368,12 @@ 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 -->
@ -340,12 +384,18 @@ 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>