From 7859106f0dcba1a1ccb3536b59f979ab01cd723a Mon Sep 17 00:00:00 2001
From: NextFire <git@yuru.moe>
Date: Sat, 13 Jan 2024 15:53:29 -0500
Subject: [PATCH] expense desc

---
 components/CountForm.vue                      |  7 ++---
 components/ExpenseModalDialog.vue             | 29 ++++++++++---------
 components/expenses/Card.vue                  |  8 ++---
 components/expenses/View.vue                  | 14 ++++-----
 components/new-expense/Infos.vue              |  9 +++++-
 components/new-expense/Modal.vue              | 18 ++++++------
 composables/useCountFormStore.ts              | 20 ++++++-------
 ...ExpenseStore.ts => useExpenseFormStore.ts} |  6 +++-
 8 files changed, 61 insertions(+), 50 deletions(-)
 rename composables/{useExpenseStore.ts => useExpenseFormStore.ts} (83%)

diff --git a/components/CountForm.vue b/components/CountForm.vue
index 4790a99..d0c1526 100644
--- a/components/CountForm.vue
+++ b/components/CountForm.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const title = defineModel("title");
-const description = defineModel("description");
+const description = defineModel("description", { default: "" });
 const currency = defineModel("currency", { default: "EUR" });
 const members = defineModel("members", { default: "" });
 </script>
@@ -14,10 +14,9 @@ const members = defineModel("members", { default: "" });
       v-model.trim="title"
     />
 
-    <input
-      type="text"
+    <textarea
       placeholder="Description"
-      class="input input-bordered w-full"
+      class="textarea textarea-bordered w-full"
       v-model.trim="description"
     />
 
diff --git a/components/ExpenseModalDialog.vue b/components/ExpenseModalDialog.vue
index b168d3f..068fb08 100644
--- a/components/ExpenseModalDialog.vue
+++ b/components/ExpenseModalDialog.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
   submit: () => void;
 }>();
 
-const expenseStore = useExpenseStore();
+const expenseFormStore = useExpenseFormStore();
 
 const modalRef = ref<HTMLDialogElement | null>(null);
 watchEffect(() => props.setModal(modalRef.value));
@@ -25,8 +25,8 @@ watchEffect(() => props.setModal(modalRef.value));
         <a
           role="tab"
           class="tab space-x-2"
-          :class="{ 'tab-active': expenseStore.tabId === 0 }"
-          @click="expenseStore.tabId = 0"
+          :class="{ 'tab-active': expenseFormStore.tabId === 0 }"
+          @click="expenseFormStore.tabId = 0"
         >
           <DocumentTextIcon class="h-4 w-4" />
           <span>Infos</span>
@@ -34,8 +34,8 @@ watchEffect(() => props.setModal(modalRef.value));
         <a
           role="tab"
           class="tab space-x-2"
-          :class="{ 'tab-active': expenseStore.tabId === 1 }"
-          @click="expenseStore.tabId = 1"
+          :class="{ 'tab-active': expenseFormStore.tabId === 1 }"
+          @click="expenseFormStore.tabId = 1"
         >
           <UserGroupIcon class="h-4 w-4" />
           <span>Participants</span>
@@ -43,19 +43,20 @@ watchEffect(() => props.setModal(modalRef.value));
       </div>
 
       <NewExpenseInfos
-        v-if="expenseStore.tabId === 0"
-        v-model:title="expenseStore.title"
-        v-model:amount="expenseStore.amount"
-        v-model:date="expenseStore.date"
-        v-model:author="expenseStore.author"
+        v-if="expenseFormStore.tabId === 0"
+        v-model:title="expenseFormStore.title"
+        v-model:description="expenseFormStore.description"
+        v-model:amount="expenseFormStore.amount"
+        v-model:date="expenseFormStore.date"
+        v-model:author="expenseFormStore.author"
         :count="count"
         class="mt-4"
       />
       <NewExpenseParticipants
-        v-else-if="expenseStore.tabId === 1"
-        v-model="expenseStore.shares"
+        v-else-if="expenseFormStore.tabId === 1"
+        v-model="expenseFormStore.shares"
         :count="count"
-        :expense-amount="expenseStore.amount ?? 0"
+        :expense-amount="expenseFormStore.amount ?? 0"
       />
 
       <div class="modal-action">
@@ -64,7 +65,7 @@ watchEffect(() => props.setModal(modalRef.value));
         </form>
         <button
           class="btn btn-primary"
-          :disabled="!expenseStore.formValid"
+          :disabled="!expenseFormStore.formValid"
           @click="submit"
         >
           Save
diff --git a/components/expenses/Card.vue b/components/expenses/Card.vue
index 789c97b..f4033b8 100644
--- a/components/expenses/Card.vue
+++ b/components/expenses/Card.vue
@@ -36,7 +36,7 @@ const impact = computed(() => {
   }
 });
 
-const expenseStore = useExpenseStore();
+const expenseFormStore = useExpenseFormStore();
 </script>
 
 <template>
@@ -45,11 +45,11 @@ const expenseStore = useExpenseStore();
     :class="{ 'opacity-50': expense.title === 'Reimbursement' }"
     @click="
       () => {
-        expenseStore.$reset();
+        expenseFormStore.$reset();
         for (const m of count.members ?? []) {
-          expenseStore.shares[m.id] = { fraction: 0, amount: '' };
+          expenseFormStore.shares[m.id] = { fraction: 0, amount: '' };
         }
-        expenseStore.load(expense);
+        expenseFormStore.load(expense);
         showModal();
       }
     "
diff --git a/components/expenses/View.vue b/components/expenses/View.vue
index 691192b..a21b5b7 100644
--- a/components/expenses/View.vue
+++ b/components/expenses/View.vue
@@ -37,7 +37,7 @@ const selfTotal = computed(() =>
 const modalRef = ref<HTMLDialogElement | null>(null);
 const supprModalRef = ref<HTMLDialogElement | null>(null);
 
-const expenseStore = useExpenseStore();
+const expenseFormStore = useExpenseFormStore();
 const selectedExpense = ref<ExpenseData>();
 
 const submit = async () => {
@@ -48,13 +48,13 @@ const submit = async () => {
     },
     body: JSON.stringify({
       countId: props.count.id,
-      title: expenseStore.title,
-      // description: description.value,
-      amount: expenseStore.amount,
-      date: new Date(expenseStore.date!).toISOString(),
-      authorId: expenseStore.author,
+      title: expenseFormStore.title,
+      description: expenseFormStore.description,
+      amount: expenseFormStore.amount,
+      date: new Date(expenseFormStore.date!).toISOString(),
+      authorId: expenseFormStore.author,
       // FIXME: this is really ugly
-      shares: Object.entries(expenseStore.shares)
+      shares: Object.entries(expenseFormStore.shares)
         .map(([memberId, share]) => ({
           memberId: parseInt(memberId),
           fraction: share.fraction !== "" ? share.fraction : undefined,
diff --git a/components/new-expense/Infos.vue b/components/new-expense/Infos.vue
index 6382895..435c801 100644
--- a/components/new-expense/Infos.vue
+++ b/components/new-expense/Infos.vue
@@ -2,6 +2,7 @@
 defineProps<{ count: CountData }>();
 
 const title = defineModel<string>("title");
+const description = defineModel<string>("description");
 const amount = defineModel<number>("amount");
 const date = defineModel<string>("date");
 const author = defineModel<number>("author");
@@ -16,11 +17,17 @@ const author = defineModel<number>("author");
       v-model.trim="title"
     />
 
+    <textarea
+      placeholder="Description"
+      class="textarea textarea-bordered w-full"
+      v-model.trim="description"
+    />
+
     <div class="flex items-center gap-x-2">
       <input
         type="number"
         placeholder="Amount"
-        class="input input-bordered w-full text-right"
+        class="input input-bordered w-full"
         v-model="amount"
       />
       <span class="text-xl">€</span>
diff --git a/components/new-expense/Modal.vue b/components/new-expense/Modal.vue
index e33193f..cd26e22 100644
--- a/components/new-expense/Modal.vue
+++ b/components/new-expense/Modal.vue
@@ -3,7 +3,7 @@ import { PlusIcon } from "@heroicons/vue/24/solid";
 
 const props = defineProps<{ count: CountData }>();
 
-const expenseStore = useExpenseStore();
+const expenseFormStore = useExpenseFormStore();
 
 const modalRef = ref<HTMLDialogElement | null>(null);
 
@@ -15,13 +15,13 @@ const submit = async () => {
     },
     body: JSON.stringify({
       countId: props.count.id,
-      title: expenseStore.title,
-      // description: description.value,
-      amount: expenseStore.amount,
-      date: new Date(expenseStore.date!).toISOString(),
-      authorId: expenseStore.author,
+      title: expenseFormStore.title,
+      description: expenseFormStore.description,
+      amount: expenseFormStore.amount,
+      date: new Date(expenseFormStore.date!).toISOString(),
+      authorId: expenseFormStore.author,
       // FIXME: this is really ugly
-      shares: Object.entries(expenseStore.shares)
+      shares: Object.entries(expenseFormStore.shares)
         .map(([memberId, share]) => ({
           memberId: parseInt(memberId),
           fraction: share.fraction !== "" ? share.fraction : undefined,
@@ -42,9 +42,9 @@ const submit = async () => {
     class="btn btn-primary btn-block h-full"
     @click="
       () => {
-        expenseStore.$reset();
+        expenseFormStore.$reset();
         for (const m of count.members ?? []) {
-          expenseStore.shares[m.id] = { fraction: 1, amount: '' };
+          expenseFormStore.shares[m.id] = { fraction: 1, amount: '' };
         }
         modalRef?.showModal();
       }
diff --git a/composables/useCountFormStore.ts b/composables/useCountFormStore.ts
index 5d4f2ad..f44306e 100644
--- a/composables/useCountFormStore.ts
+++ b/composables/useCountFormStore.ts
@@ -2,27 +2,27 @@ import _ from "lodash";
 import { defineStore } from "pinia";
 
 export const useCountFormStore = defineStore("count-form", () => {
-  const title = ref("");
-  const description = ref("");
+  const title = ref<string>();
+  const description = ref<string>();
   const currency = ref("EUR");
-  const members = ref("");
+  const members = ref<string>();
 
   const membersArray = computed(() =>
-    _.uniq(members.value.split("\n").filter((m) => m))
+    _.uniq(members.value?.split("\n").filter((m) => m))
   );
 
-  const formValid = computed(() => title.value && membersArray.value);
+  const formValid = computed(() => title.value && membersArray.value.length);
 
   function $reset() {
-    title.value = "";
-    description.value = "";
+    title.value = undefined;
+    description.value = undefined;
     currency.value = "EUR";
-    members.value = "";
+    members.value = undefined;
   }
 
   function load(count: CountData) {
-    title.value = count.title ?? "";
-    description.value = count.description ?? "";
+    title.value = count.title;
+    description.value = count.description ?? undefined;
     currency.value = count.currency ?? "EUR";
     members.value = count.members.map((m) => m.name).join("\n");
   }
diff --git a/composables/useExpenseStore.ts b/composables/useExpenseFormStore.ts
similarity index 83%
rename from composables/useExpenseStore.ts
rename to composables/useExpenseFormStore.ts
index 1c89e02..ffb7a08 100644
--- a/composables/useExpenseStore.ts
+++ b/composables/useExpenseFormStore.ts
@@ -1,8 +1,9 @@
 import { defineStore } from "pinia";
 
-export const useExpenseStore = defineStore("expense", () => {
+export const useExpenseFormStore = defineStore("expense", () => {
   const tabId = ref(0);
   const title = ref<string>();
+  const description = ref<string>();
   const amount = ref<number>();
   const date = ref<string>();
   const author = ref<number>();
@@ -20,6 +21,7 @@ export const useExpenseStore = defineStore("expense", () => {
   function $reset() {
     tabId.value = 0;
     title.value = undefined;
+    description.value = undefined;
     amount.value = undefined;
     date.value = new Date().toISOString().split("T")[0];
     author.value = undefined;
@@ -27,6 +29,7 @@ export const useExpenseStore = defineStore("expense", () => {
 
   function load(expense: ExpenseData) {
     title.value = expense.title;
+    description.value = expense.description ?? undefined;
     amount.value = expense.amount;
     date.value = new Date(expense.date).toISOString().split("T")[0];
     author.value = expense.authorId;
@@ -41,6 +44,7 @@ export const useExpenseStore = defineStore("expense", () => {
   return {
     tabId,
     title,
+    description,
     amount,
     date,
     author,