Enhances expense and pay dialogs
Improves the UI of the "Add Expense" and "Pay Balance" dialogs by using `q-input` and `q-select` components with `filled` and `dense` properties. This provides a cleaner and more modern look and feel. Ensures dialog content is only rendered when the dialog is visible.
This commit is contained in:
parent
5589d813f0
commit
4bd83d6937
1 changed files with 90 additions and 76 deletions
|
|
@ -46,7 +46,7 @@
|
|||
</q-btn>
|
||||
</div>
|
||||
<div v-else>
|
||||
<q-spinner color="primary" size="md" />
|
||||
<q-spinner color="primary" size="md"></q-spinner>
|
||||
Loading balance...
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
@ -114,7 +114,7 @@
|
|||
</q-item>
|
||||
</q-list>
|
||||
<div v-else>
|
||||
<q-spinner color="primary" size="sm" />
|
||||
<q-spinner color="primary" size="sm"></q-spinner>
|
||||
Loading accounts...
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
|
@ -124,85 +124,99 @@
|
|||
|
||||
<!-- Add Expense Dialog -->
|
||||
<q-dialog v-model="expenseDialog.show" position="top">
|
||||
<q-card class="q-pa-lg lnbits__dialog-card">
|
||||
<q-card-section>
|
||||
<h6 class="q-my-none q-mb-md">Add Expense</h6>
|
||||
<q-form @submit="submitExpense" class="q-gutter-md">
|
||||
<q-input
|
||||
v-model="expenseDialog.description"
|
||||
label="Description"
|
||||
placeholder="e.g., Groceries for the house"
|
||||
required
|
||||
/>
|
||||
<q-input
|
||||
v-model.number="expenseDialog.amount"
|
||||
type="number"
|
||||
label="Amount (sats)"
|
||||
required
|
||||
min="1"
|
||||
/>
|
||||
<q-select
|
||||
v-model="expenseDialog.expenseAccount"
|
||||
:options="expenseAccounts"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
label="Expense Category"
|
||||
required
|
||||
/>
|
||||
<q-select
|
||||
v-model="expenseDialog.isEquity"
|
||||
:options="[
|
||||
{label: 'Liability (Castle owes me)', value: false},
|
||||
{label: 'Equity (My contribution)', value: true}
|
||||
]"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
emit-value
|
||||
map-options
|
||||
label="Type"
|
||||
required
|
||||
/>
|
||||
<q-input
|
||||
v-model="expenseDialog.reference"
|
||||
label="Reference (optional)"
|
||||
placeholder="e.g., Receipt #123"
|
||||
/>
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn unelevated color="primary" type="submit" :loading="expenseDialog.loading">
|
||||
Submit Expense
|
||||
</q-btn>
|
||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
<q-card v-if="expenseDialog.show" class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||
<q-form @submit="submitExpense" class="q-gutter-md">
|
||||
<div class="text-h6 q-mb-md">Add Expense</div>
|
||||
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="expenseDialog.description"
|
||||
label="Description *"
|
||||
placeholder="e.g., Groceries for the house"
|
||||
></q-input>
|
||||
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.number="expenseDialog.amount"
|
||||
type="number"
|
||||
label="Amount (sats) *"
|
||||
min="1"
|
||||
></q-input>
|
||||
|
||||
<q-select
|
||||
filled
|
||||
dense
|
||||
v-model="expenseDialog.expenseAccount"
|
||||
:options="expenseAccounts"
|
||||
option-label="name"
|
||||
option-value="id"
|
||||
emit-value
|
||||
map-options
|
||||
label="Expense Category *"
|
||||
></q-select>
|
||||
|
||||
<q-select
|
||||
filled
|
||||
dense
|
||||
v-model="expenseDialog.isEquity"
|
||||
:options="[
|
||||
{label: 'Liability (Castle owes me)', value: false},
|
||||
{label: 'Equity (My contribution)', value: true}
|
||||
]"
|
||||
option-label="label"
|
||||
option-value="value"
|
||||
emit-value
|
||||
map-options
|
||||
label="Type *"
|
||||
></q-select>
|
||||
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.trim="expenseDialog.reference"
|
||||
label="Reference (optional)"
|
||||
placeholder="e.g., Receipt #123"
|
||||
></q-input>
|
||||
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn unelevated color="primary" type="submit" :loading="expenseDialog.loading">
|
||||
Submit Expense
|
||||
</q-btn>
|
||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
<!-- Pay Balance Dialog -->
|
||||
<q-dialog v-model="payDialog.show" position="top">
|
||||
<q-card class="q-pa-lg lnbits__dialog-card">
|
||||
<q-card-section>
|
||||
<h6 class="q-my-none q-mb-md">Pay Balance</h6>
|
||||
<p v-if="balance">Amount owed: <strong>{% raw %}{{ formatSats(Math.abs(balance.balance)) }}{% endraw %} sats</strong></p>
|
||||
<q-form @submit="submitPayment" class="q-gutter-md">
|
||||
<q-input
|
||||
v-model.number="payDialog.amount"
|
||||
type="number"
|
||||
label="Amount to pay (sats)"
|
||||
required
|
||||
min="1"
|
||||
:max="balance ? Math.abs(balance.balance) : 0"
|
||||
/>
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn unelevated color="primary" type="submit" :loading="payDialog.loading">
|
||||
Generate Invoice
|
||||
</q-btn>
|
||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card-section>
|
||||
<q-card v-if="payDialog.show" class="q-pa-lg q-pt-xl lnbits__dialog-card">
|
||||
<q-form @submit="submitPayment" class="q-gutter-md">
|
||||
<div class="text-h6 q-mb-md">Pay Balance</div>
|
||||
|
||||
<div v-if="balance" class="q-mb-md">
|
||||
Amount owed: <strong>{% raw %}{{ formatSats(Math.abs(balance.balance)) }}{% endraw %} sats</strong>
|
||||
</div>
|
||||
|
||||
<q-input
|
||||
filled
|
||||
dense
|
||||
v-model.number="payDialog.amount"
|
||||
type="number"
|
||||
label="Amount to pay (sats) *"
|
||||
min="1"
|
||||
:max="balance ? Math.abs(balance.balance) : 0"
|
||||
></q-input>
|
||||
|
||||
<div class="row q-mt-lg">
|
||||
<q-btn unelevated color="primary" type="submit" :loading="payDialog.loading">
|
||||
Generate Invoice
|
||||
</q-btn>
|
||||
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
|
||||
</div>
|
||||
</q-form>
|
||||
</q-card>
|
||||
</q-dialog>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue