refactor splitExpense calls

components/CountForm.vue

@@ -13,12 +13,14 @@ const members = defineModel("members", { default: "" });
       class="input input-bordered w-full"
       v-model.trim="title"
     />
+
     <input
       type="text"
       placeholder="Description"
       class="input input-bordered w-full"
       v-model.trim="description"
     />
+
     <label class="form-control w-full">
       <div class="label">
         <span class="label-text">Currency</span>
@@ -27,6 +29,7 @@ const members = defineModel("members", { default: "" });
         <option disabled value="EUR">EUR</option>
       </select>
     </label>
+
     <label class="form-control w-full">
       <div class="label">
         <span class="label-text">Members</span>

components/expenses/Card.vue

@@ -2,6 +2,7 @@
 const props = defineProps<{
   count: CountData;
   expense: ExpenseData;
+  resolvedShares: number[];
   showModal: () => void;
   currentMember?: number;
 }>();
@@ -10,16 +11,6 @@ const author = computed(() => {
   return props.count.members.find((m) => m.id === props.expense.authorId);
 });
 
-const resolvedShares = computed(() =>
-  splitExpense(
-    props.expense.amount,
-    props.expense.shares.map((s) => ({
-      fraction: s.fraction !== null ? s.fraction : undefined,
-      amount: s.amount !== null ? s.amount : undefined,
-    }))
-  )
-);
-
 const concerns = computed(() => {
   const concerned: MemberData[] = [];
   const notConcerned: MemberData[] = [];
@@ -37,7 +28,7 @@ const impact = computed(() => {
   const idx = props.expense.shares.findIndex(
     (s) => s.memberId === props.currentMember
   );
-  const selfShare = idx !== -1 ? resolvedShares.value[idx] : 0;
+  const selfShare = idx !== -1 ? props.resolvedShares[idx] : 0;
   if (props.expense.authorId === props.currentMember) {
     return props.expense.amount - selfShare;
   } else {

components/expenses/View.vue

@@ -14,27 +14,31 @@ const total = computed(() =>
   props.count.expenses.reduce((acc, e) => acc + e.amount, 0)
 );
 
-const selfTotal = computed(() => {
-  return props.count.expenses.reduce((acc, e) => {
-    const resolved = splitExpense(
+const allResolvedShares = computed(() =>
+  sortedExpenses.value.map((e) =>
+    computeSharesAmount(
       e.amount,
       e.shares.map((s) => ({
         fraction: s.fraction !== null ? s.fraction : undefined,
         amount: s.amount !== null ? s.amount : undefined,
       }))
-    );
+    )
+  )
+);
 
+const selfTotal = computed(() =>
+  sortedExpenses.value.reduce((acc, e, i) => {
     const idx = e.shares.findIndex((s) => s.memberId === props.currentMember);
-    const selfShare = idx !== -1 ? resolved[idx] : 0;
+    const selfShare = idx !== -1 ? allResolvedShares.value[i][idx] : 0;
     return acc + selfShare;
-  }, 0);
-});
+  }, 0)
+);
 
 const modalRef = ref<HTMLDialogElement | null>(null);
 const supprModalRef = ref<HTMLDialogElement | null>(null);
 
-const selectedExpense = ref<ExpenseData>();
 const expenseStore = useExpenseStore();
+const selectedExpense = ref<ExpenseData>();
 
 const submit = async () => {
   const res = await $fetch(`/api/expenses/${selectedExpense.value!.id}`, {
@@ -80,14 +84,16 @@ const submitDelete = async () => {
   <div>
     <main class="pb-14 flex flex-col gap-y-2">
       <ExpensesCard
-        v-for="e in sortedExpenses"
+        v-for="(e, i) in sortedExpenses"
         :key="e.id"
         :count="count"
         :expense="e"
+        :resolved-shares="allResolvedShares[i]"
         :show-modal="() => modalRef?.showModal()"
         :current-member="currentMember"
         @click="selectedExpense = e"
       />
+
       <ExpenseModalDialog
         title="Edit Expense"
         :set-modal="(m) => (modalRef = m)"
@@ -101,6 +107,7 @@ const submitDelete = async () => {
           <TrashIcon class="h-6 w-6" />
           <span>Delete Expense</span>
         </button>
+
         <dialog ref="supprModalRef" class="modal modal-bottom sm:modal-middle">
           <div class="modal-box prose">
             <h2>Confirm</h2>
@@ -113,22 +120,26 @@ const submitDelete = async () => {
               </button>
             </div>
           </div>
+
           <form method="dialog" class="modal-backdrop">
             <button>close</button>
           </form>
         </dialog>
       </ExpenseModalDialog>
     </main>
+
     <div class="btm-nav container mx-auto p-1 gap-x-1 z-50">
       <div class="card card-compact bg-base-200 text-xs cursor-default">
         <template v-if="currentMember">
           <h3 class="uppercase">My Total</h3>
           <p class="font-bold">€{{ selfTotal.toFixed(2) }}</p>
         </template>
       </div>
+
       <div class="cursor-default">
         <NewExpenseModal :count="count" />
       </div>
+
       <div class="card card-compact bg-base-200 text-xs cursor-default">
         <h3 class="uppercase">Total Expenses</h3>
         <p class="font-bold">€{{ total.toFixed(2) }}</p>

components/new-expense/Infos.vue

@@ -15,6 +15,7 @@ const author = defineModel<number>("author");
       class="input input-bordered w-full"
       v-model.trim="title"
     />
+
     <div class="flex items-center gap-x-2">
       <input
         type="number"
@@ -24,12 +25,14 @@ const author = defineModel<number>("author");
       />
       <span class="text-xl">€</span>
     </div>
+
     <label class="form-control w-full">
       <div class="label">
         <span class="label-text">Date</span>
       </div>
       <input type="date" class="input input-bordered w-full" v-model="date" />
     </label>
+
     <label class="form-control w-full">
       <div class="label">
         <span class="label-text">Author</span>

components/new-expense/Participants.vue

@@ -15,7 +15,7 @@ const updateSharesAmount = () => {
       return;
     }
   }
-  const shares = splitExpense(props.expenseAmount, formattedShares);
+  const shares = computeSharesAmount(props.expenseAmount, formattedShares);
   for (let i = 0; i < mIds.length; i++) {
     model.value[mIds[i]] = {
       fraction: model.value[mIds[i]].fraction,

utils/shares.ts

@@ -1,4 +1,4 @@
-export function splitExpense(
+export function computeSharesAmount(
   amount: number,
   shares: { fraction?: number; amount?: number }[]
 ): number[] {
@@ -26,17 +26,20 @@ export function splitExpense(
     if (resolved[idx] === undefined) {
       const share = shares[idx];
 
+      let amount: number;
       if (share.fraction === undefined) {
         throw new Error("Invalid share");
-      }
-
-      let amount = share.fraction * (left / nparts);
-      if (amount < 0) {
+      } else if (share.fraction === 0) {
         amount = 0;
-      } else if (amount > left) {
-        amount = left;
       } else {
-        amount = Math.ceil(amount * 100) / 100;
+        amount = share.fraction * (left / nparts);
+        if (amount < 0) {
+          amount = 0;
+        } else if (amount > left) {
+          amount = left;
+        } else {
+          amount = Math.ceil(amount * 100) / 100;
+        }
       }
 
       resolved[idx] = amount;
@@ -53,7 +56,7 @@ export function computeBalances(
   members: MemberData[]
 ) {
   const resolved = expenses.map((e) =>
-    splitExpense(
+    computeSharesAmount(
       e.amount,
       e.shares.map((s) => ({
         fraction: s.fraction !== null ? s.fraction : undefined,