From 5596740cd29ab91f80e5822c3e9689802b6fa989 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sat, 15 Oct 2022 13:56:08 -0800
Subject: [PATCH] fix: selector value binding (#87)

---
 frontend/components/Form/Select.vue | 20 +++++++++++++-------
 frontend/pages/item/[id]/edit.vue   | 14 ++++++++++++--
 frontend/pages/profile.vue          |  2 +-
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/frontend/components/Form/Select.vue b/frontend/components/Form/Select.vue
index 5c84066b..f9d9128c 100644
--- a/frontend/components/Form/Select.vue
+++ b/frontend/components/Form/Select.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-  const emit = defineEmits(["update:modelValue"]);
+  const emit = defineEmits(["update:modelValue", "update:value"]);
   const props = defineProps({
     label: {
       type: String,
@@ -37,26 +37,32 @@
       type: String,
       default: "name",
     },
-    value: {
+    valueKey: {
       type: String,
       default: null,
-      required: false,
+    },
+    value: {
+      type: String,
+      default: "",
     },
   });
 
   const selectedIdx = ref(-1);
+
   const internalSelected = useVModel(props, "modelValue", emit);
 
   watch(selectedIdx, newVal => {
     internalSelected.value = props.items[newVal];
   });
 
+  watch(internalSelected, newVal => {
+    if (props.valueKey) {
+      emit("update:value", newVal[props.valueKey]);
+    }
+  });
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function compare(a: any, b: any): boolean {
-    if (props.value) {
-      return a[props.value] === b[props.value];
-    }
-
     if (a === b) {
       return true;
     }
diff --git a/frontend/pages/item/[id]/edit.vue b/frontend/pages/item/[id]/edit.vue
index 8ab71d44..522e406d 100644
--- a/frontend/pages/item/[id]/edit.vue
+++ b/frontend/pages/item/[id]/edit.vue
@@ -233,6 +233,7 @@
     loading: false,
 
     // Values
+    obj: {},
     id: "",
     title: "",
     type: "",
@@ -248,11 +249,13 @@
     editState.title = attachment.document.title;
     editState.type = attachment.type;
     editState.modal = true;
+
+    editState.obj = attachmentOpts.find(o => o.value === attachment.type);
   }
 
   async function updateAttachment() {
     editState.loading = true;
-
+    console.log(editState.type);
     const { error, data } = await api.items.updateAttachment(itemId.value, editState.id, {
       title: editState.title,
       type: editState.type,
@@ -282,7 +285,14 @@
       <template #title> Attachment Edit </template>
 
       <FormTextField v-model="editState.title" label="Attachment Title" />
-      <FormSelect v-model="editState.type" label="Attachment Type" value="value" name="text" :items="attachmentOpts" />
+      <FormSelect
+        v-model="editState.obj"
+        v-model:value="editState.type"
+        label="Attachment Type"
+        value-key="value"
+        name="text"
+        :items="attachmentOpts"
+      />
       <div class="modal-action">
         <BaseButton :loading="editState.loading" @click="updateAttachment"> Update </BaseButton>
       </div>
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 7245cc7b..5abb0f0b 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -226,7 +226,7 @@
         </template>
 
         <div v-if="group" class="p-5 pt-0">
-          <FormSelect v-model="currency" value="code" label="Currency Format" :items="currencies" />
+          <FormSelect v-model="currency" label="Currency Format" :items="currencies" />
           <p class="m-2 text-sm">Example: {{ currencyExample }}</p>
 
           <div class="mt-4 flex justify-end">