Transaction dialog view

src/views/TransactionView.vue

@@ -18,7 +18,7 @@ import {
   Select,
   SelectContent,
   SelectGroup,
-  SelectItem,
+  SelectItem, SelectLabel,
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
@@ -88,9 +88,9 @@ const selectedAccount = ref(null);
 const parseDateString = (dateStr) => {
   const parts = dateStr.split("/");
   return new Date(
-    parseInt(parts[2], 10) + 2000,
-    parseInt(parts[1], 10) - 1,
-    parseInt(parts[0], 10)
+      parseInt(parts[2], 10) + 2000,
+      parseInt(parts[1], 10) - 1,
+      parseInt(parts[0], 10)
   );
 };
 
@@ -146,9 +146,9 @@ const saveTransaction = async (transaction, field, value) => {
 
   try {
     await transactionsStore.updateTransaction(
-      selectedAccount.value.accountNumber,
-      transaction.transactionId,
-      updateData
+        selectedAccount.value.accountNumber,
+        transaction.transactionId,
+        updateData
     );
     console.log("Update successful:", updateData);
   } catch (error) {
@@ -172,12 +172,14 @@ const df = new DateFormatter("nb-NO", {
  * @const {Object} formSchema - Zod schema object for form validation.
  */
 const formSchema = toTypedSchema(
-  z.object({
-    date: z.string({ required_error: "Dato er påkrevd" }),
-    name: z.string().min(1, "Navn er påkrevd"),
-    sum: z.number({ invalid_type_error: "Sum må være et tall" }),
-    category: z.number({ required_error: "Kategori er påkrevd" }),
-  })
+    z.object({
+      date: z.string()
+      .refine(v => v, { message: 'Dato må være valgt' }),
+      name: z.string().min(1, "Navn er påkrevd"),
+      sum: z.number().min(0, "Beløp må være større enn 0"),
+      category: z.number({ required_error: "Kategori er påkrevd" }),
+      transactionType: z.enum(['income', 'expense']),
+    })
 );
 
 /**
@@ -196,10 +198,7 @@ const form = useForm({
   initialValues: {
     name: "",
     sum: "",
-  },
-  defaultValues: {
-    name: "",
-    sum: "",
+    transactionType: "expense",
   },
 });
 
@@ -210,11 +209,14 @@ const form = useForm({
  */
 const onSubmit = form.handleSubmit(async (values) => {
   console.log(values);
+  const isExpense = values.transactionType === 'expense';
+  const sum = isExpense ? -Math.abs(parseFloat(values.sum)) : parseFloat(values.sum);
+
   const transactionData = {
     categoryId: values.category ? parseInt(values.category, 10) : null,
     date: new Date(values.date).toISOString(),
     description: values.name,
-    sum: parseFloat(values.sum),
+    sum: sum,
     accountNumber: parseInt(selectedAccount.value.accountNumber, 10),
   };
 
@@ -222,8 +224,8 @@ const onSubmit = form.handleSubmit(async (values) => {
 
   try {
     await transactionsStore.addTransaction(
-      transactionData,
-      selectedAccount.value.accountNumber
+        transactionData,
+        selectedAccount.value.accountNumber
     );
     form.resetForm();
     open.value = false;
@@ -301,13 +303,13 @@ watchEffect(() => {
  * @watch selectedAccount
  */
 watch(
-  selectedAccount,
-  (newAccount, oldAccount) => {
-    if (newAccount && newAccount.accountNumber !== oldAccount?.accountNumber) {
-      transactionsStore.fetchTransactions(newAccount.accountNumber);
-    }
-  },
-  { immediate: true }
+    selectedAccount,
+    (newAccount, oldAccount) => {
+      if (newAccount && newAccount.accountNumber !== oldAccount?.accountNumber) {
+        transactionsStore.fetchTransactions(newAccount.accountNumber);
+      }
+    },
+    { immediate: true }
 );
 
 /**
@@ -333,8 +335,8 @@ function formatDate(isoString) {
 const displayName = computed(() => {
   const userStore = useUserStore();
   return userStore.user.nickName
-    ? userStore.user.nickName
-    : userStore.user.firstName;
+      ? userStore.user.nickName
+      : userStore.user.firstName;
 });
 
 /**
@@ -349,8 +351,8 @@ const open = ref(false);
 <template>
   <MainLayout>
     <main
-      class="p-4 flex flex-col max-w-screen-lg mx-auto"
-      data-testid="main-container"
+        class="p-4 flex flex-col max-w-screen-lg mx-auto"
+        data-testid="main-container"
     >
       <Card class="md:p-5 px-1 py-5 border-primary-dark bg-transparent border-4">
         <div class="flex flex-row justify-center items-center">
@@ -363,7 +365,7 @@ const open = ref(false);
               <Popover>
                 <PopoverTrigger>
                   <Button
-                    class="bg-transparent active:bg-transparent hover:bg-transparent text-black translate-x-32 xl:translate-x-44 xl:translate-y-2"
+                      class="bg-transparent active:bg-transparent hover:bg-transparent text-black translate-x-32 xl:translate-x-44 xl:translate-y-2"
                   >
                     <CircleHelp size="25" />
                   </Button>
@@ -372,14 +374,14 @@ const open = ref(false);
                   <Sparti :theme="theme" class="-translate-x-8">
                     <span v-if="!savingsAccount && !checkingAccount">
                       Hmm <strong>{{ displayName }}</strong
-                      >,<br />
+                    >,<br />
                       Det ser ut som at du ikke har <br />integrert noen
                       bankkontoer. Gå til <br />profilsiden for å integrere<br />
                       bankkontoer.
                     </span>
                     <span v-else>
                       Psst <strong>{{ displayName }}</strong
-                      >!<br />
+                    >!<br />
                       Her kan du se, legge til, og <br />redigere alle dine
                       transaksjoner.
                     </span>
@@ -395,33 +397,33 @@ const open = ref(false);
             <div class="flex-1 flex justify-center pb-2">
               <DropdownMenu>
                 <DropdownMenuTrigger
-                  v-if="savingsAccount || checkingAccount"
-                  as="Button"
-                  class="dropdown-button flex flex-row justify-center align-middle text-center border-none
+                    v-if="savingsAccount || checkingAccount"
+                    as="Button"
+                    class="dropdown-button flex flex-row justify-center align-middle text-center border-none
                    rounded-md bg-white px-1"
                 >
                   {{ selectedAccount?.name || "Select Account" }}
                   <ChevronDown
-                    v-if="savingsAccount && checkingAccount"
+                      v-if="savingsAccount && checkingAccount"
                   ></ChevronDown>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent
-                  class="dropdown-menu-content bg-white"
-                  v-if="savingsAccount && checkingAccount"
+                    class="dropdown-menu-content bg-white"
+                    v-if="savingsAccount && checkingAccount"
                 >
                   <DropdownMenuItem
-                    class="dropdown-item"
-                    :key="checkingAccount"
-                    @click="selectedAccount = checkingAccount"
-                    data-testid="brukskonto-option"
-                    >{{ checkingAccount.name }}</DropdownMenuItem
+                      class="dropdown-item"
+                      :key="checkingAccount"
+                      @click="selectedAccount = checkingAccount"
+                      data-testid="brukskonto-option"
+                  >{{ checkingAccount.name }}</DropdownMenuItem
                   >
                   <DropdownMenuItem
-                    class="dropdown-item"
-                    :key="savingsAccount"
-                    @click="selectedAccount = savingsAccount"
-                    data-testid="brukskonto-option"
-                    >{{ savingsAccount.name }}</DropdownMenuItem
+                      class="dropdown-item"
+                      :key="savingsAccount"
+                      @click="selectedAccount = savingsAccount"
+                      data-testid="brukskonto-option"
+                  >{{ savingsAccount.name }}</DropdownMenuItem
                   >
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -429,9 +431,9 @@ const open = ref(false);
           </div>
           <div class="w-1/3 flex justify-end">
             <Dialog
-              v-if="savingsAccount || checkingAccount"
-              :open="open"
-              @update:open="(value) => (open = value)"
+                v-if="savingsAccount || checkingAccount"
+                :open="open"
+                @update:open="(value) => (open = value)"
             >
               <DialogTrigger as-child>
                 <Button variant="icons">
@@ -439,19 +441,38 @@ const open = ref(false);
                 </Button>
               </DialogTrigger>
               <DialogContent
-                style="width: 100vw"
-                class="flex items-center justify-center p-4 bg-standard border-none rounded-xl"
+                  style="width: 100vw"
+                  class="flex items-center justify-center p-4 bg-standard border-none rounded-xl"
               >
                 <form
-                  @submit.prevent="onSubmit"
-                  ref="popoverForm"
-                  class="w-full max-w-md flex justify-center align-middle"
+                    @submit.prevent="onSubmit"
+                    ref="popoverForm"
+                    class="w-full max-w-md flex justify-center align-middle"
                 >
                   <div
-                    class="flex flex-col space-y-3 w-full justify-center align-middle items-center"
+                      class="flex flex-col space-y-3 w-full justify-center align-middle items-center"
                   >
+                    <h1 class="text-xl"><strong>Legg til transaksjon</strong></h1>
+                    <FormField v-slot="{ componentField }" name="transactionType">
+                      <FormItem class="flex flex-col">
+                        <FormLabel>Type transaksjon:</FormLabel>
+                        <Select v-bind="componentField">
+                          <SelectTrigger class="border-primary-dark border-2 w-64">
+                            <SelectValue  />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectGroup>
+                              <SelectItem value="income"> Inntekt </SelectItem>
+                              <SelectItem value="expense"> Utgift </SelectItem>
+                            </SelectGroup>
+                          </SelectContent>
+                        </Select>
+                        <FormMessage />
+                      </FormItem>
+                    </FormField>
+
                     <div
-                      class="flex flex-col space-y-0.5 justify-center align-middle"
+                        class="flex flex-col space-y-0.5 justify-center align-middle"
                     >
                       <FormField name="date">
                         <FormItem class="flex flex-col">
@@ -460,10 +481,10 @@ const open = ref(false);
                             <PopoverTrigger as-child>
                               <FormControl>
                                 <Button
-                                  type="button"
-                                  variant="outline"
-                                  class="md:w-96 w-64 h-8 rounded-md border-2 border-primary-dark"
-                                  :class="
+                                    type="button"
+                                    variant="outline"
+                                    class="md:w-96 w-64 h-8 rounded-md border-2 border-primary-dark"
+                                    :class="
                                     cn(
                                       'ps-3 text-start font-normal',
                                       !value && 'text-muted-foreground'
@@ -471,12 +492,12 @@ const open = ref(false);
                                   "
                                 >
                                   <span>{{
-                                    value
-                                      ? df.format(toDate(value))
-                                      : "Velg dato"
-                                  }}</span>
+                                      value
+                                          ? df.format(toDate(value))
+                                          : "Velg dato"
+                                    }}</span>
                                   <CalendarIcon
-                                    class="ms-auto h-4 w-4 opacity-50"
+                                      class="ms-auto h-4 w-4 opacity-50"
                                   />
                                 </Button>
                                 <input hidden class="date-field" />
@@ -485,11 +506,11 @@ const open = ref(false);
                             </PopoverTrigger>
                             <PopoverContent class="w-auto p-0">
                               <Calendar
-                                v-model:placeholder="placeholder"
-                                v-model="value"
-                                calendar-label="Velg dato"
-                                initial-focus
-                                @update:model-value="
+                                  v-model:placeholder="placeholder"
+                                  v-model="value"
+                                  calendar-label="Velg dato"
+                                  initial-focus
+                                  @update:model-value="
                                   (newValue) => {
                                     if (newValue) {
                                       form.setValues({
@@ -513,11 +534,11 @@ const open = ref(false);
                         <FormItem class="flex flex-col">
                           <FormLabel>Navn:</FormLabel>
                           <FormControl>
-                            <input
-                              :value="form.values.name"
-                              placeholder="   Fyll inn navn på transaksjonen"
-                              v-bind="componentField"
-                              class="name-field rounded-md border-2 border-primary-dark md:w-96
+                            <Input
+                                :value="form.values.name"
+                                v-bind="componentField"
+                                placeholder="Fyll inn transaksjonsnavn"
+                                class="placeholder:text-darkest name-field rounded-md border-2 border-primary-dark md:w-96
                                w-64 focus:outline-none focus:ring-0"
                             />
                           </FormControl>
@@ -531,17 +552,17 @@ const open = ref(false);
                           <FormLabel for="category">Kategori:</FormLabel>
                           <Select v-bind="componentField">
                             <SelectTrigger
-                              v-bind="componentField"
-                              class="category-field border-2 border-primary-dark h-8 md:w-96 w-64 focus:outline-none focus:ring-0"
+                                v-bind="componentField"
+                                class="category-field border-2 border-primary-dark h-8 md:w-96 w-64 focus:outline-none focus:ring-0"
                             >
                               <SelectValue placeholder="Velg en kategori" />
                             </SelectTrigger>
                             <SelectContent class="border-none">
                               <SelectGroup>
                                 <SelectItem
-                                  v-for="category in categoryStore.categories"
-                                  :key="category.categoryId"
-                                  :value="
+                                    v-for="category in categoryStore.categories"
+                                    :key="category.categoryId"
+                                    :value="
                                     category.categoryId || 'Ukategorisert'
                                   "
                                 >
@@ -559,12 +580,14 @@ const open = ref(false);
                         <FormItem class="flex flex-col">
                           <FormLabel>Sum:</FormLabel>
                           <FormControl>
-                            <input
-                              type="number"
-                              :value="form.values.sum"
-                              v-bind="componentField"
-                              class="sum-field md:w-96 w-64 rounded-md border-2 border-primary-dark
+                            <Input
+                                type="number"
+                                :value="form.values.sum"
+                                v-bind="componentField"
+                                placeholder="Fyll inn beløp"
+                                class="placeholder:text-darkest sum-field md:w-96 w-64 rounded-md border-2 border-primary-dark
                                focus:outline-none focus:ring-0"
+                                min="0"
                             />
                           </FormControl>
                           <FormMessage />
@@ -572,10 +595,10 @@ const open = ref(false);
                       </FormField>
                     </div>
                     <Button
-                      type="submit"
-                      variant="primary"
-                      class="submit-button md:w-96 w-64 h-10"
-                      >Legg til</Button
+                        type="submit"
+                        variant="primary"
+                        class="submit-button md:w-96 w-64 h-10"
+                    >Legg til</Button
                     >
                   </div>
                 </form>
@@ -594,21 +617,21 @@ const open = ref(false);
           </TableHeader>
           <TableBody>
             <TableRow
-              class="invoice-row h-12 border-primary-dark"
-              v-for="transaction in activeTransactions"
-              :key="transaction.transactionId"
-              data-testid="transaction-row"
+                class="invoice-row h-12 border-primary-dark"
+                v-for="transaction in activeTransactions"
+                :key="transaction.transactionId"
+                data-testid="transaction-row"
             >
               <TableCell class="w-1/4">{{
-                formatDate(transaction.date)
-              }}</TableCell>
+                  formatDate(transaction.date)
+                }}</TableCell>
               <TableCell class="w-1/4">
                 <template v-if="transaction.editing">
                   <input
-                    type="text"
-                    class="w-full border-none focus:outline-none"
-                    v-model="transaction.description"
-                    @blur="
+                      type="text"
+                      class="w-full border-none focus:outline-none"
+                      v-model="transaction.description"
+                      @blur="
                       transaction.description.trim()
                         ? saveTransaction(
                             transaction,
@@ -617,7 +640,7 @@ const open = ref(false);
                           )
                         : null
                     "
-                    @keyup.enter="
+                      @keyup.enter="
                       transaction.description.trim()
                         ? saveTransaction(
                             transaction,
@@ -630,8 +653,8 @@ const open = ref(false);
                 </template>
                 <template v-else>
                   <div
-                    @click="editTransaction(transaction)"
-                    class="cursor-pointer flex justify-between items-center"
+                      @click="editTransaction(transaction)"
+                      class="cursor-pointer flex justify-between items-center"
                   >
                     <span class="break-words max-w-[calc(100%-20px)]">
                       {{ transaction.description }}
@@ -644,23 +667,23 @@ const open = ref(false);
                 <template v-if="transaction.editing">
                   <DropdownMenu>
                     <DropdownMenuTrigger
-                      as="Button"
-                      class="justify-between w-full text-left border-none bg-white h-5"
+                        as="Button"
+                        class="justify-between w-full text-left border-none bg-white h-5"
                     >
                       {{
                         transaction.category
-                          ? transaction.category.name
-                          : "Ukategorisert"
+                            ? transaction.category.name
+                            : "Ukategorisert"
                       }}
                     </DropdownMenuTrigger>
                     <DropdownMenuContent
-                      class="w-full sm:-translate-x-5 md:-translate-x-10 lg:-translate-x-20"
+                        class="w-full sm:-translate-x-5 md:-translate-x-10 lg:-translate-x-20"
                     >
                       <DropdownMenuItem
-                        v-for="category in categoryStore.categories"
-                        :key="category.categoryId"
-                        :value="category.categoryId"
-                        @click="
+                          v-for="category in categoryStore.categories"
+                          :key="category.categoryId"
+                          :value="category.categoryId"
+                          @click="
                           () =>
                             saveTransaction(
                               transaction,
@@ -668,7 +691,7 @@ const open = ref(false);
                               category.categoryId
                             )
                         "
-                        class="text-gray-700 block px-4 py-2 text-sm"
+                          class="text-gray-700 block px-4 py-2 text-sm"
                       >
                         {{ category.name }}
                       </DropdownMenuItem>
@@ -677,14 +700,14 @@ const open = ref(false);
                 </template>
                 <template v-else>
                   <div
-                    @click="editTransaction(transaction)"
-                    class="cursor-pointer flex justify-between items-center"
+                      @click="editTransaction(transaction)"
+                      class="cursor-pointer flex justify-between items-center"
                   >
                     <span class="break-words max-w-[calc(100%-20px)]">
                       {{
                         transaction.category
-                          ? transaction.category.name
-                          : "Ukategorisert"
+                            ? transaction.category.name
+                            : "Ukategorisert"
                       }}
                     </span>
                     <Pencil class="h-2.5"></Pencil>
@@ -700,12 +723,12 @@ const open = ref(false);
           </TableBody>
         </Table>
         <span v-if="!savingsAccount && !checkingAccount" class="p-4"
-          >Integrer en bankkonto i profil for å starte...</span
+        >Integrer en bankkonto i profil for å starte...</span
         >
         <span
-          v-else-if="transactionsStore.transactions.length === 0"
-          class="p-4"
-          >Legg til en transaksjon for å starte...</span
+            v-else-if="transactionsStore.transactions.length === 0"
+            class="p-4"
+        >Legg til en transaksjon for å starte...</span
         >
       </Card>
     </main>