mirrors/spliit
1
0
Fork 0
mirror of https://github.com/spliit-app/spliit.git synced 2026-02-12 18:46:13 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add splitmode and shares to expenses

Browse Source
This commit is contained in:
Sebastien Castiel
2023-12-15 17:00:23 -05:00
parent 0fb0c42ff5
commit 4decb5e6a3
8 changed files with 190 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@@ -34,6 +34,7 @@
"react-hook-form": "^7.47.0",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7",
"ts-pattern": "^5.0.6",
"uuid": "^9.0.1",
"zod": "^3.22.4"
},
@@ -5749,6 +5750,11 @@
"integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
"license": "Apache-2.0"
},
"node_modules/ts-pattern": {
"version": "5.0.6",
"resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.0.6.tgz",
"integrity": "sha512-Y+jOjihlFriWzcBjncPCf2/am+Hgz7LtsWs77pWg5vQQKLQj07oNrJryo/wK2G0ndNaoVn2ownFMeoeAuReu3Q=="
},
"node_modules/tsconfig-paths": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",

1
package.json
View File

@@ -35,6 +35,7 @@
"react-hook-form": "^7.47.0",
"tailwind-merge": "^1.14.0",
"tailwindcss-animate": "^1.0.7",
"ts-pattern": "^5.0.6",
"uuid": "^9.0.1",
"zod": "^3.22.4"
},

2
prisma/migrations/20231215203936_add_shares_in_expenses/migration.sql Normal file
View File

@@ -0,0 +1,2 @@
-- AlterTable
ALTER TABLE "ExpensePaidFor" ADD COLUMN "shares" INTEGER NOT NULL DEFAULT 1;

5
prisma/migrations/20231215213409_add_split_mode/migration.sql Normal file
View File

@@ -0,0 +1,5 @@
-- CreateEnum
CREATE TYPE "SplitMode" AS ENUM ('EVENLY', 'BY_SHARES', 'BY_PERCENTAGE', 'BY_AMOUNT');
-- AlterTable
ALTER TABLE "Expense" ADD COLUMN "splitMode" "SplitMode" NOT NULL DEFAULT 'EVENLY';

9
prisma/schema.prisma
View File

@@ -39,14 +39,23 @@ model Expense {
paidFor ExpensePaidFor[]
groupId String
isReimbursement Boolean @default(false)
splitMode SplitMode @default(EVENLY)
createdAt DateTime @default(now())
}
enum SplitMode {
EVENLY
BY_SHARES
BY_PERCENTAGE
BY_AMOUNT
}
model ExpensePaidFor {
expense Expense @relation(fields: [expenseId], references: [id], onDelete: Cascade)
participant Participant @relation(fields: [participantId], references: [id], onDelete: Cascade)
expenseId String
participantId String
shares Int @default(1)
@@id([expenseId, participantId])
}

155
src/components/expense-form.tsx
View File

@@ -32,6 +32,7 @@ import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
import { zodResolver } from '@hookform/resolvers/zod'
import { useSearchParams } from 'next/navigation'
import { useForm } from 'react-hook-form'
import { match } from 'ts-pattern'
export type Props = {
group: NonNullable<Awaited<ReturnType<typeof getGroup>>>
@@ -50,7 +51,11 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
title: expense.title,
amount: String(expense.amount / 100) as unknown as number, // hack
paidBy: expense.paidById,
paidFor: expense.paidFor.map(({ participantId }) => participantId),
paidFor: expense.paidFor.map(({ participantId, shares }) => ({
participant: participantId,
shares,
})),
splitMode: expense.splitMode,
isReimbursement: expense.isReimbursement,
}
: searchParams.get('reimbursement')
@@ -60,7 +65,11 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
(Number(searchParams.get('amount')) || 0) / 100,
) as unknown as number, // hack
paidBy: searchParams.get('from') ?? undefined,
paidFor: [searchParams.get('to') ?? undefined],
paidFor: [
searchParams.get('to')
? { participant: searchParams.get('to')!, shares: 1 }
: undefined,
],
isReimbursement: true,
}
: { title: '', amount: 0, paidFor: [], isReimbursement: false },
@@ -130,7 +139,7 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
control={form.control}
name="amount"
render={({ field }) => (
<FormItem className="order-2 sm:order-3">
<FormItem className="order-3 sm:order-4">
<FormLabel>Amount</FormLabel>
<div className="flex items-baseline gap-2">
<span>{group.currency}</span>
@@ -173,6 +182,41 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
name="paidFor"
render={() => (
<FormItem className="order-5">
<FormField
control={form.control}
name="splitMode"
render={({ field }) => (
<FormItem className="order-2 sm:order-3 mb-4">
<FormLabel>Split mode</FormLabel>
<FormControl>
<Select
onValueChange={field.onChange}
defaultValue={field.value}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="EVENLY">Evenly</SelectItem>
<SelectItem value="BY_SHARES">
Unevenly – By shares
</SelectItem>
<SelectItem value="BY_PERCENTAGE">
Unevenly – By percentage
</SelectItem>
<SelectItem value="BY_AMOUNT">
Unevenly – By amount
</SelectItem>
</SelectContent>
</Select>
</FormControl>
<FormDescription>
Select how to split the expense.
</FormDescription>
</FormItem>
)}
/>
<div className="mb-4">
<FormLabel>
Paid for
@@ -184,10 +228,13 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
const paidFor = form.getValues().paidFor
const allSelected =
paidFor.length === group.participants.length
const newPairFor = allSelected
const newPaidFor = allSelected
? []
: group.participants.map((p) => p.id)
form.setValue('paidFor', newPairFor, {
: group.participants.map((p) => ({
participant: p.id,
shares: 1,
}))
form.setValue('paidFor', newPaidFor, {
shouldDirty: true,
shouldTouch: true,
shouldValidate: true,
@@ -213,28 +260,80 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
name="paidFor"
render={({ field }) => {
return (
<FormItem
key={id}
className="flex flex-row items-start space-x-3 space-y-0"
>
<FormControl>
<Checkbox
checked={field.value?.includes(id)}
onCheckedChange={(checked) => {
return checked
? field.onChange([...field.value, id])
: field.onChange(
field.value?.filter(
(value) => value !== id,
),
)
}}
/>
</FormControl>
<FormLabel className="text-sm font-normal">
{name}
</FormLabel>
</FormItem>
<div className="flex items-center">
<FormItem
key={id}
className="flex-1 flex flex-row items-start space-x-3 space-y-0"
>
<FormControl>
<Checkbox
checked={field.value?.some(
({ participant }) => participant === id,
)}
onCheckedChange={(checked) => {
return checked
? field.onChange([
...field.value,
{ participant: id, shares: 1 },
])
: field.onChange(
field.value?.filter(
(value) => value.participant !== id,
),
)
}}
/>
</FormControl>
<FormLabel className="text-sm font-normal">
{name}
</FormLabel>
</FormItem>
{field.value?.some(
({ participant }) => participant === id,
) &&
form.getValues().splitMode !== 'EVENLY' && (
<div className="flex gap-1 items-baseline">
<FormControl>
<Input
className="w-[100px]"
type="number"
value={
field.value?.find(
({ participant }) =>
participant === id,
)?.shares
}
onChange={(event) =>
field.onChange(
field.value.map((p) =>
p.participant === id
? {
participant: id,
shares: Number(
event.target.value,
),
}
: p,
),
)
}
inputMode="numeric"
step={1}
/>
</FormControl>
<span className="text-sm">
{match(form.getValues().splitMode)
.with('EVENLY', () => <></>)
.with('BY_SHARES', () => <>share(s)</>)
.with('BY_PERCENTAGE', () => <>%</>)
.with('BY_AMOUNT', () => (
<>{group.currency}</>
))
.exhaustive()}
</span>
</div>
)}
</div>
)
}}
/>

45
src/lib/api.ts
View File

@@ -36,7 +36,7 @@ export async function createExpense(
for (const participant of [
expenseFormValues.paidBy,
...expenseFormValues.paidFor,
...expenseFormValues.paidFor.map((p) => p.participant),
]) {
if (!group.participants.some((p) => p.id === participant))
throw new Error(`Invalid participant ID: ${participant}`)
@@ -50,10 +50,12 @@ export async function createExpense(
amount: expenseFormValues.amount,
title: expenseFormValues.title,
paidById: expenseFormValues.paidBy,
splitMode: expenseFormValues.splitMode,
paidFor: {
createMany: {
data: expenseFormValues.paidFor.map((paidFor) => ({
participantId: paidFor,
participantId: paidFor.participant,
shares: paidFor.shares,
})),
},
},
@@ -84,12 +86,14 @@ export async function getGroupExpensesParticipants(groupId: string) {
export async function getGroups(groupIds: string[]) {
const prisma = await getPrisma()
return (await prisma.group.findMany({
where: { id: { in: groupIds } },
include: { _count: { select: { participants: true } } },
})).map(group => ({
return (
await prisma.group.findMany({
where: { id: { in: groupIds } },
include: { _count: { select: { participants: true } } },
})
).map((group) => ({
...group,
createdAt: group.createdAt.toISOString()
createdAt: group.createdAt.toISOString(),
}))
}
@@ -106,7 +110,7 @@ export async function updateExpense(
for (const participant of [
expenseFormValues.paidBy,
...expenseFormValues.paidFor,
...expenseFormValues.paidFor.map((p) => p.participant),
]) {
if (!group.participants.some((p) => p.id === participant))
throw new Error(`Invalid participant ID: ${participant}`)
@@ -119,17 +123,34 @@ export async function updateExpense(
amount: expenseFormValues.amount,
title: expenseFormValues.title,
paidById: expenseFormValues.paidBy,
splitMode: expenseFormValues.splitMode,
paidFor: {
connectOrCreate: expenseFormValues.paidFor.map((paidFor) => ({
create: expenseFormValues.paidFor
.filter(
(p) =>
!existingExpense.paidFor.some(
(pp) => pp.participantId === p.participant,
),
)
.map((paidFor) => ({
participantId: paidFor.participant,
shares: paidFor.shares,
})),
update: expenseFormValues.paidFor.map((paidFor) => ({
where: {
expenseId_participantId: { expenseId, participantId: paidFor },
expenseId_participantId: {
expenseId,
participantId: paidFor.participant,
},
},
data: {
shares: paidFor.shares,
},
create: { participantId: paidFor },
})),
deleteMany: existingExpense.paidFor.filter(
(paidFor) =>
!expenseFormValues.paidFor.some(
(pf) => pf === paidFor.participantId,
(pf) => pf.participant === paidFor.participantId,
),
),
},

8
src/lib/schemas.ts
View File

@@ -1,3 +1,4 @@
import { SplitMode } from '@prisma/client'
import * as z from 'zod'
export const groupFormSchema = z
@@ -65,8 +66,13 @@ export const expenseFormSchema = z.object({
),
paidBy: z.string({ required_error: 'You must select a participant.' }),
paidFor: z
.array(z.string())
.array(z.object({ participant: z.string(), shares: z.number().int() }))
.min(1, 'The expense must be paid for at least one participant.'),
splitMode: z
.enum<SplitMode, [SplitMode, ...SplitMode[]]>(
Object.values(SplitMode) as any,
)
.default('EVENLY'),
isReimbursement: z.boolean(),
})