Merge pull request #322 from letehaha/fix/select-fields-view

fix: Fix account field view
letehaha · Dec 19, 2024 · 596d5a4 · 596d5a4
2 parents 7f70102 + f27a52a
commit 596d5a4
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 288 deletions.
diff --git a/src/components/dialogs/manage-transaction/components/account-field.vue b/src/components/dialogs/manage-transaction/components/account-field.vue
@@ -7,11 +7,20 @@
           placeholder="Select account"
           :values="accounts"
           label-key="name"
+          value-key="id"
           :disabled="disabled || fromAccountDisabled"
           is-value-preselected
           :model-value="account"
           @update:model-value="updateFormAccount"
-        />
+        >
+          <template #select-bottom-content>
+            <CreateAccountDialog>
+              <UiButton type="button" class="mt-4 w-full" variant="link">
+                Add new account +
+              </UiButton>
+            </CreateAccountDialog>
+          </template>
+        </select-field>
       </form-row>
 
       <form-row>
@@ -20,15 +29,24 @@
           placeholder="Select account"
           :values="filteredAccounts"
           label-key="name"
+          value-key="id"
           :disabled="disabled || toAccountDisabled"
           :model-value="toAccount"
-          @update:model-value="emit('update:to-account', $event)"
-        />
+          @update:model-value="updateToAccount"
+        >
+          <template #select-bottom-content>
+            <CreateAccountDialog>
+              <UiButton type="button" class="mt-4 w-full" variant="link">
+                Add new account +
+              </UiButton>
+            </CreateAccountDialog>
+          </template>
+        </select-field>
       </form-row>
     </template>
     <template v-else>
       <form-row>
-        <select-field-lib
+        <select-field
           label="Account"
           placeholder="Select account"
           :values="accounts"
@@ -46,7 +64,7 @@
               </UiButton>
             </CreateAccountDialog>
           </template>
-        </select-field-lib>
+        </select-field>
       </form-row>
     </template>
   </template>
@@ -73,9 +91,8 @@ import { AccountModel, TRANSACTION_TYPES } from "shared-types";
 import { ROUTES_NAMES } from "@/routes";
 
 import CreateAccountDialog from "@/components/dialogs/create-account-dialog.vue";
-import SelectField from "@/components/fields/select-field.vue";
 import UiButton from "@/components/lib/ui/button/Button.vue";
-import SelectFieldLib from "@/components/fields/select-field-lib.vue";
+import SelectField from "@/components/fields/select-field.vue";
 import InputField from "@/components/fields/input-field.vue";
 
 import FormRow from "./form-row.vue";
@@ -115,4 +132,8 @@ const redirectToCreateAccountPage = async () => {
 const updateFormAccount = (account: AccountModel) => {
   emit("update:account", account);
 };
+
+const updateToAccount = (account: AccountModel) => {
+  emit("update:to-account", account);
+};
 </script>
diff --git a/src/components/fields/select-field-lib.vue b/src/components/fields/select-field-lib.vue