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

Added vendor card.
Build and Deploy Web App / build-and-deploy (push) Failing after 11s Details

This commit is contained in:
andrewlalis 2025-09-20 11:53:06 -04:00
parent 100652d03a
commit 33f8119ee3
2 changed files with 37 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web-app/src/components/VendorCard.vue Normal file
View File

@ -0,0 +1,33 @@
<script setup lang="ts">
import type { TransactionVendor } from '@/api/transaction';
import AppButton from './common/AppButton.vue';
defineProps<{ vendor: TransactionVendor }>()
defineEmits<{ 'edit': void, 'delete': void }>()
</script>
<template>
<div class="vendor-card">
<div style="flex-shrink: 1;">
<div>
{{ vendor.name }}
</div>
<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>
</div>
</div>
</template>
<style lang="css">
.vendor-card {
display: flex;
justify-content: space-between;
background-color: var(--bg);
border-radius: 0.5rem;
margin: 0.5rem 0;
padding: 0.5rem;
}
</style>

35
web-app/src/pages/VendorsPage.vue
View File

@ -5,6 +5,7 @@ import AppButton from '@/components/common/AppButton.vue'
import AppPage from '@/components/common/AppPage.vue'
import ButtonBar from '@/components/common/ButtonBar.vue'
import EditVendorModal from '@/components/EditVendorModal.vue'
import VendorCard from '@/components/VendorCard.vue'
import { showConfirm } from '@/util/alert'
import { onMounted, ref, useTemplateRef, type Ref } from 'vue'
import { useRoute } from 'vue-router'
@ -55,39 +56,11 @@ 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>
<table class="app-table">
<tbody>
<tr
v-for="vendor in vendors"
:key="vendor.id"
>
<td>{{ vendor.name }}</td>
<td>{{ vendor.description }}</td>
<td style="min-width: 130px">
<AppButton
icon="wrench"
@click="editVendor(vendor)"
/>
<AppButton
icon="trash"
@click="deleteVendor(vendor)"
/>
</td>
</tr>
</tbody>
</table>
<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>