mirror of
https://github.com/whekin/household-bot.git
synced 2026-03-31 14:04:04 +00:00
fix(miniapp): prevent focus loss in destinations form
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { Show, For, createSignal } from 'solid-js'
|
import { Show, For, Index, createSignal } from 'solid-js'
|
||||||
import { ArrowLeft, Globe, Plus, User } from 'lucide-solid'
|
import { ArrowLeft, Globe, Plus, User } from 'lucide-solid'
|
||||||
import { useNavigate } from '@solidjs/router'
|
import { useNavigate } from '@solidjs/router'
|
||||||
|
|
||||||
@@ -686,18 +686,18 @@ export default function SettingsRoute() {
|
|||||||
fallback={<p class="empty-state">{copy().rentPaymentDestinationsEmpty}</p>}
|
fallback={<p class="empty-state">{copy().rentPaymentDestinationsEmpty}</p>}
|
||||||
>
|
>
|
||||||
<div style={{ display: 'grid', gap: '12px' }}>
|
<div style={{ display: 'grid', gap: '12px' }}>
|
||||||
<For each={billingForm().rentPaymentDestinations}>
|
<Index each={billingForm().rentPaymentDestinations}>
|
||||||
{(destination, index) => (
|
{(destination, index) => (
|
||||||
<Card muted wide>
|
<Card muted wide>
|
||||||
<div class="editor-grid">
|
<div class="editor-grid">
|
||||||
<Field label={copy().rentPaymentDestinationLabel} wide>
|
<Field label={copy().rentPaymentDestinationLabel} wide>
|
||||||
<Input
|
<Input
|
||||||
value={destination.label}
|
value={destination().label}
|
||||||
onInput={(e) =>
|
onInput={(e) =>
|
||||||
setBillingForm((f) => {
|
setBillingForm((f) => {
|
||||||
const next = [...f.rentPaymentDestinations]
|
const next = [...f.rentPaymentDestinations]
|
||||||
next[index()] = {
|
next[index] = {
|
||||||
...next[index()]!,
|
...next[index]!,
|
||||||
label: e.currentTarget.value
|
label: e.currentTarget.value
|
||||||
}
|
}
|
||||||
return { ...f, rentPaymentDestinations: next }
|
return { ...f, rentPaymentDestinations: next }
|
||||||
@@ -707,12 +707,12 @@ export default function SettingsRoute() {
|
|||||||
</Field>
|
</Field>
|
||||||
<Field label={copy().rentPaymentDestinationRecipient} wide>
|
<Field label={copy().rentPaymentDestinationRecipient} wide>
|
||||||
<Input
|
<Input
|
||||||
value={destination.recipientName ?? ''}
|
value={destination().recipientName ?? ''}
|
||||||
onInput={(e) =>
|
onInput={(e) =>
|
||||||
setBillingForm((f) => {
|
setBillingForm((f) => {
|
||||||
const next = [...f.rentPaymentDestinations]
|
const next = [...f.rentPaymentDestinations]
|
||||||
next[index()] = {
|
next[index] = {
|
||||||
...next[index()]!,
|
...next[index]!,
|
||||||
recipientName: e.currentTarget.value || null
|
recipientName: e.currentTarget.value || null
|
||||||
}
|
}
|
||||||
return { ...f, rentPaymentDestinations: next }
|
return { ...f, rentPaymentDestinations: next }
|
||||||
@@ -722,12 +722,12 @@ export default function SettingsRoute() {
|
|||||||
</Field>
|
</Field>
|
||||||
<Field label={copy().rentPaymentDestinationBank} wide>
|
<Field label={copy().rentPaymentDestinationBank} wide>
|
||||||
<Input
|
<Input
|
||||||
value={destination.bankName ?? ''}
|
value={destination().bankName ?? ''}
|
||||||
onInput={(e) =>
|
onInput={(e) =>
|
||||||
setBillingForm((f) => {
|
setBillingForm((f) => {
|
||||||
const next = [...f.rentPaymentDestinations]
|
const next = [...f.rentPaymentDestinations]
|
||||||
next[index()] = {
|
next[index] = {
|
||||||
...next[index()]!,
|
...next[index]!,
|
||||||
bankName: e.currentTarget.value || null
|
bankName: e.currentTarget.value || null
|
||||||
}
|
}
|
||||||
return { ...f, rentPaymentDestinations: next }
|
return { ...f, rentPaymentDestinations: next }
|
||||||
@@ -737,12 +737,12 @@ export default function SettingsRoute() {
|
|||||||
</Field>
|
</Field>
|
||||||
<Field label={copy().rentPaymentDestinationAccount} wide>
|
<Field label={copy().rentPaymentDestinationAccount} wide>
|
||||||
<Input
|
<Input
|
||||||
value={destination.account}
|
value={destination().account}
|
||||||
onInput={(e) =>
|
onInput={(e) =>
|
||||||
setBillingForm((f) => {
|
setBillingForm((f) => {
|
||||||
const next = [...f.rentPaymentDestinations]
|
const next = [...f.rentPaymentDestinations]
|
||||||
next[index()] = {
|
next[index] = {
|
||||||
...next[index()]!,
|
...next[index]!,
|
||||||
account: e.currentTarget.value
|
account: e.currentTarget.value
|
||||||
}
|
}
|
||||||
return { ...f, rentPaymentDestinations: next }
|
return { ...f, rentPaymentDestinations: next }
|
||||||
@@ -752,12 +752,12 @@ export default function SettingsRoute() {
|
|||||||
</Field>
|
</Field>
|
||||||
<Field label={copy().rentPaymentDestinationLink} wide>
|
<Field label={copy().rentPaymentDestinationLink} wide>
|
||||||
<Input
|
<Input
|
||||||
value={destination.link ?? ''}
|
value={destination().link ?? ''}
|
||||||
onInput={(e) =>
|
onInput={(e) =>
|
||||||
setBillingForm((f) => {
|
setBillingForm((f) => {
|
||||||
const next = [...f.rentPaymentDestinations]
|
const next = [...f.rentPaymentDestinations]
|
||||||
next[index()] = {
|
next[index] = {
|
||||||
...next[index()]!,
|
...next[index]!,
|
||||||
link: e.currentTarget.value || null
|
link: e.currentTarget.value || null
|
||||||
}
|
}
|
||||||
return { ...f, rentPaymentDestinations: next }
|
return { ...f, rentPaymentDestinations: next }
|
||||||
@@ -767,12 +767,12 @@ export default function SettingsRoute() {
|
|||||||
</Field>
|
</Field>
|
||||||
<Field label={copy().rentPaymentDestinationNote} wide>
|
<Field label={copy().rentPaymentDestinationNote} wide>
|
||||||
<Textarea
|
<Textarea
|
||||||
value={destination.note ?? ''}
|
value={destination().note ?? ''}
|
||||||
onInput={(e) =>
|
onInput={(e) =>
|
||||||
setBillingForm((f) => {
|
setBillingForm((f) => {
|
||||||
const next = [...f.rentPaymentDestinations]
|
const next = [...f.rentPaymentDestinations]
|
||||||
next[index()] = {
|
next[index] = {
|
||||||
...next[index()]!,
|
...next[index]!,
|
||||||
note: e.currentTarget.value || null
|
note: e.currentTarget.value || null
|
||||||
}
|
}
|
||||||
return { ...f, rentPaymentDestinations: next }
|
return { ...f, rentPaymentDestinations: next }
|
||||||
@@ -788,7 +788,7 @@ export default function SettingsRoute() {
|
|||||||
setBillingForm((f) => ({
|
setBillingForm((f) => ({
|
||||||
...f,
|
...f,
|
||||||
rentPaymentDestinations: f.rentPaymentDestinations.filter(
|
rentPaymentDestinations: f.rentPaymentDestinations.filter(
|
||||||
(_, idx) => idx !== index()
|
(_, idx) => idx !== index
|
||||||
)
|
)
|
||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
@@ -799,7 +799,7 @@ export default function SettingsRoute() {
|
|||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
)}
|
||||||
</For>
|
</Index>
|
||||||
</div>
|
</div>
|
||||||
</Show>
|
</Show>
|
||||||
<div>
|
<div>
|
||||||
|
|||||||
Reference in New Issue
Block a user