diff --git a/packages/client/src/components/expenses/form/ExpenseFormParticipantList.tsx b/packages/client/src/components/expenses/form/ExpenseFormParticipantList.tsx index 40e6c65..ff75628 100644 --- a/packages/client/src/components/expenses/form/ExpenseFormParticipantList.tsx +++ b/packages/client/src/components/expenses/form/ExpenseFormParticipantList.tsx @@ -1,154 +1,138 @@ import { - Box, - Button, - Dialog, - DialogTitle, - FormControl, - InputLabel, - List, - ListItem, - MenuItem, - Paper, - Select, - Stack, - Typography, - } from "@mui/material"; - import Grid2 from "@mui/material/Unstable_Grid2/Grid2"; - import { useDB, useQuery } from "@vlcn.io/react"; - import { Participant } from "schema"; - import { useState } from "react"; - import { useDbId } from "../../../hooks/useDbId"; - import ExpenseFormParticipantItem from "./ExpenseFormParticipantItem"; - import { useExpenseFormState } from "../../../hooks/useExpenseFormState"; - import { shallow } from "zustand/shallow"; + Box, + Button, + Dialog, + DialogTitle, + List, + ListItem, + Paper, + Stack, + Typography, +} from "@mui/material"; +import Grid2 from "@mui/material/Unstable_Grid2/Grid2"; +import { useDB, useQuery } from "@vlcn.io/react"; +import { Participant } from "schema"; +import { useDbId } from "../../../hooks/useDbId"; +import ExpenseFormParticipantItem from "./ExpenseFormParticipantItem"; +import { useExpenseFormState } from "../../../hooks/useExpenseFormState"; +import { shallow } from "zustand/shallow"; import { GroupAdd } from "@mui/icons-material"; import React from "react"; - - function ParticipantsList() { - const setFormData = useExpenseFormState((state) => state.setData); - const getFormData = useExpenseFormState((state) => state.getData); - const updateAmounts = useExpenseFormState((state) => state.updateAmounts); - const insertParticipant = useExpenseFormState( - (state) => state.insertParticipant - ); - const participantsIndexes = useExpenseFormState( - (state) => [...state.participants.keys()], - shallow - ); - const [addParticipant, setAddParticipant] = useState(""); - const ctx = useDB(useDbId()); - const participants = useQuery(ctx, "SELECT * FROM participants"); - - async function getCoefficientForParticipant( - participantId: Participant["id"] - ) { - return ( - await ctx.db.execO<{ coefficient: string }>( - `SELECT coefficient +function ParticipantsList() { + const setFormData = useExpenseFormState((state) => state.setData); + const getFormData = useExpenseFormState((state) => state.getData); + const updateAmounts = useExpenseFormState((state) => state.updateAmounts); + const insertParticipant = useExpenseFormState( + (state) => state.insertParticipant + ); + const participantsIndexes = useExpenseFormState( + (state) => [...state.participants.keys()], + shallow + ); + const ctx = useDB(useDbId()); + const participants = useQuery(ctx, "SELECT * FROM participants"); + + async function getCoefficientForParticipant( + participantId: Participant["id"] + ) { + return ( + await ctx.db.execO<{ coefficient: string }>( + `SELECT coefficient FROM participant_category_coefficients WHERE participant_id = ? AND category_id = ?`, - [participantId, getFormData().categoryId] - ) - )[0].coefficient; - } - - async function handleInsertParticipant(id: number) { - insertParticipant({ - ...participants.data[id], - coefficient: await getCoefficientForParticipant(participants.data[id].id), + [participantId, getFormData().categoryId] + ) + )[0].coefficient; + } + + async function handleInsertParticipant(id: number) { + insertParticipant({ + ...participants.data[id], + coefficient: await getCoefficientForParticipant(participants.data[id].id), + amount: "", + }); + } + + async function insertAllParticipants() { + const allParticipants = await Promise.all( + participants.data.map(async (participant) => ({ + ...participant, + coefficient: await getCoefficientForParticipant(participant.id), amount: "", - }); - } - - async function insertAllParticipants() { - const allParticipants = await Promise.all( - participants.data.map(async (participant) => ({ - ...participant, - coefficient: await getCoefficientForParticipant(participant.id), - amount: "", - })) - ); - setFormData({ - participants: allParticipants, - }); - updateAmounts(); - } - - /* + })) + ); + setFormData({ + participants: allParticipants, + }); + updateAmounts(); + } + + /* Modal functions (for adding participant 1 by 1) */ - const [open, setOpen] = React.useState(false); + const [open, setOpen] = React.useState(false); - const handleClickOpen = () => { - setOpen(true); - }; + const handleClickOpen = () => { + setOpen(true); + }; - const handleClose = () => { - setOpen(false); - }; + const handleClose = () => { + setOpen(false); + }; - /* + /* End of modal functions */ - return ( + return ( - + Participating to this expense - - - Add participant - - {participants.data.map((participant, index) => ( - { - handleInsertParticipant(index); - updateAmounts(); - setAddParticipant(""); - setOpen(false); - }} - > - {participant.name} - - ))} - - - + + Add participant + + {participants.data.map((participant, index) => ( + { + handleInsertParticipant(index); + updateAmounts(); + setOpen(false); + }} + > + {participant.name} + + ))} + + + - + - + {participantsIndexes.map((index) => ( - + - + ))} - + - + - ); - } - - export default ParticipantsList; - \ No newline at end of file + ); +} + +export default ParticipantsList;