expense desc

Japan7 · Jan 13, 2024 · 7859106 · 7859106
1 parent 31cd30d
commit 7859106
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 50 deletions.
diff --git 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
@@ -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,37 +25,38 @@ 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>
         </a>
         <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>
         </a>
       </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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 → composables/useExpenseFormStore.ts b/composables/useExpenseStore.ts → 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,13 +21,15 @@ 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;
   }
 
   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,