diff options
| -rw-r--r-- | README.md | 2 | ||||
| -rw-r--r-- | src/components/expense-form.tsx | 35 | ||||
| -rw-r--r-- | src/lib/schemas.ts | 2 |
3 files changed, 34 insertions, 5 deletions
@@ -9,10 +9,10 @@ Spliit is a free and open source alternative to Splitwise. I created it back in - [x] Display group balances - [x] Create reimbursement expenses - [x] Progressive Web App +- [x] Select all/no participant for expenses ### Work in progress -- [ ] Select all/no participant for expenses - [ ] Tell the application who you are when opening a group ## Stack diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx index e354a6a..bdee9d0 100644 --- a/src/components/expense-form.tsx +++ b/src/components/expense-form.tsx @@ -1,6 +1,7 @@ 'use client' import { AsyncButton } from '@/components/async-button' import { SubmitButton } from '@/components/submit-button' +import { Button } from '@/components/ui/button' import { Card, CardContent, @@ -138,7 +139,6 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) { className="text-base max-w-[120px]" type="number" inputMode="decimal" - min={0.01} step={0.01} placeholder="0.00" {...field} @@ -174,7 +174,34 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) { render={() => ( <FormItem className="order-5"> <div className="mb-4"> - <FormLabel>Paid for</FormLabel> + <FormLabel> + Paid for + <Button + variant="link" + type="button" + className="-m-2" + onClick={() => { + const paidFor = form.getValues().paidFor + const allSelected = + paidFor.length === group.participants.length + const newPairFor = allSelected + ? [] + : group.participants.map((p) => p.id) + form.setValue('paidFor', newPairFor, { + shouldDirty: true, + shouldTouch: true, + shouldValidate: true, + }) + }} + > + {form.getValues().paidFor.length === + group.participants.length ? ( + <>Select none</> + ) : ( + <>Select all</> + )} + </Button> + </FormLabel> <FormDescription> Select who the expense was paid for. </FormDescription> @@ -219,7 +246,9 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) { </CardContent> <CardFooter className="gap-2"> - <SubmitButton loadingContent="Submitting…"> + <SubmitButton + loadingContent={isCreate ? <>Creating…</> : <>Saving…</>} + > {isCreate ? <>Create</> : <>Save</>} </SubmitButton> {!isCreate && onDelete && ( diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts index 9c79355..0bebae6 100644 --- a/src/lib/schemas.ts +++ b/src/lib/schemas.ts @@ -66,7 +66,7 @@ export const expenseFormSchema = z.object({ paidBy: z.string({ required_error: 'You must select a participant.' }), paidFor: z .array(z.string()) - .min(1, 'The expense must be paid for at least 1 participant.'), + .min(1, 'The expense must be paid for at least one participant.'), isReimbursement: z.boolean(), }) |