lnbits-exts/castle
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 2 Packages Wiki Activity Actions

Enhances expense and pay dialogs

Browse source 
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:
padreug 2025-10-22 13:10:33 +02:00
parent 5589d813f0
commit 4bd83d6937
1 changed files with 90 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

166
templates/castle/index.html
View file

@ -46,7 +46,7 @@
</q-btn> </q-btn>
</div> </div>
<div v-else> <div v-else>
<q-spinner color="primary" size="md" /> <q-spinner color="primary" size="md"></q-spinner>
Loading balance... Loading balance...
</div> </div>
</q-card-section> </q-card-section>
@ -114,7 +114,7 @@
</q-item> </q-item>
</q-list> </q-list>
<div v-else> <div v-else>
<q-spinner color="primary" size="sm" /> <q-spinner color="primary" size="sm"></q-spinner>
Loading accounts... Loading accounts...
</div> </div>
</q-card-section> </q-card-section>
@ -124,85 +124,99 @@
<!-- Add Expense Dialog --> <!-- Add Expense Dialog -->
<q-dialog v-model="expenseDialog.show" position="top"> <q-dialog v-model="expenseDialog.show" position="top">
<q-card class="q-pa-lg lnbits__dialog-card"> <q-card v-if="expenseDialog.show" class="q-pa-lg q-pt-xl lnbits__dialog-card">
<q-card-section> <q-form @submit="submitExpense" class="q-gutter-md">
<h6 class="q-my-none q-mb-md">Add Expense</h6> <div class="text-h6 q-mb-md">Add Expense</div>
<q-form @submit="submitExpense" class="q-gutter-md">
<q-input <q-input
v-model="expenseDialog.description" filled
label="Description" dense
placeholder="e.g., Groceries for the house" v-model.trim="expenseDialog.description"
required label="Description *"
/> placeholder="e.g., Groceries for the house"
<q-input ></q-input>
v-model.number="expenseDialog.amount"
type="number" <q-input
label="Amount (sats)" filled
required dense
min="1" v-model.number="expenseDialog.amount"
/> type="number"
<q-select label="Amount (sats) *"
v-model="expenseDialog.expenseAccount" min="1"
:options="expenseAccounts" ></q-input>
option-label="name"
option-value="id" <q-select
emit-value filled
map-options dense
label="Expense Category" v-model="expenseDialog.expenseAccount"
required :options="expenseAccounts"
/> option-label="name"
<q-select option-value="id"
v-model="expenseDialog.isEquity" emit-value
:options="[ map-options
{label: 'Liability (Castle owes me)', value: false}, label="Expense Category *"
{label: 'Equity (My contribution)', value: true} ></q-select>
]"
option-label="label" <q-select
option-value="value" filled
emit-value dense
map-options v-model="expenseDialog.isEquity"
label="Type" :options="[
required {label: 'Liability (Castle owes me)', value: false},
/> {label: 'Equity (My contribution)', value: true}
<q-input ]"
v-model="expenseDialog.reference" option-label="label"
label="Reference (optional)" option-value="value"
placeholder="e.g., Receipt #123" emit-value
/> map-options
<div class="row q-mt-lg"> label="Type *"
<q-btn unelevated color="primary" type="submit" :loading="expenseDialog.loading"> ></q-select>
Submit Expense
</q-btn> <q-input
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn> filled
</div> dense
</q-form> v-model.trim="expenseDialog.reference"
</q-card-section> 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-card>
</q-dialog> </q-dialog>
<!-- Pay Balance Dialog --> <!-- Pay Balance Dialog -->
<q-dialog v-model="payDialog.show" position="top"> <q-dialog v-model="payDialog.show" position="top">
<q-card class="q-pa-lg lnbits__dialog-card"> <q-card v-if="payDialog.show" class="q-pa-lg q-pt-xl lnbits__dialog-card">
<q-card-section> <q-form @submit="submitPayment" class="q-gutter-md">
<h6 class="q-my-none q-mb-md">Pay Balance</h6> <div class="text-h6 q-mb-md">Pay Balance</div>
<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"> <div v-if="balance" class="q-mb-md">
<q-input Amount owed: <strong>{% raw %}{{ formatSats(Math.abs(balance.balance)) }}{% endraw %} sats</strong>
v-model.number="payDialog.amount" </div>
type="number"
label="Amount to pay (sats)" <q-input
required filled
min="1" dense
:max="balance ? Math.abs(balance.balance) : 0" v-model.number="payDialog.amount"
/> type="number"
<div class="row q-mt-lg"> label="Amount to pay (sats) *"
<q-btn unelevated color="primary" type="submit" :loading="payDialog.loading"> min="1"
Generate Invoice :max="balance ? Math.abs(balance.balance) : 0"
</q-btn> ></q-input>
<q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
</div> <div class="row q-mt-lg">
</q-form> <q-btn unelevated color="primary" type="submit" :loading="payDialog.loading">
</q-card-section> 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-card>
</q-dialog> </q-dialog>