From 863ad9abe737124da159d2184f7f31362a106b3f Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Thu, 7 Aug 2025 23:05:46 +0200
Subject: [PATCH] fixed both the member edit display issue and the flag
 positioning problems in the nationality input

---
 components/MultipleNationalityInput.vue | 76 ++++++++++++++++++++++---
 server/api/members/[id].put.ts          | 21 ++++---
 2 files changed, 81 insertions(+), 16 deletions(-)

diff --git a/components/MultipleNationalityInput.vue b/components/MultipleNationalityInput.vue
index bd3d937..371c8ac 100644
--- a/components/MultipleNationalityInput.vue
+++ b/components/MultipleNationalityInput.vue
@@ -19,26 +19,30 @@
           @update:model-value="updateNationalities"
         >
           <template #selection="{ item }">
-            <div class="d-flex align-center gap-2">
+            <div class="flag-selection d-flex align-center">
               <CountryFlag 
                 :country-code="item.value" 
                 :show-name="false" 
                 size="small" 
+                class="flag-icon"
               />
-              <span>{{ item.title }}</span>
+              <span class="country-name">{{ item.title }}</span>
             </div>
           </template>
           
           <template #item="{ props: itemProps, item }">
-            <v-list-item v-bind="itemProps">
+            <v-list-item v-bind="itemProps" class="flag-list-item">
               <template #prepend>
-                <CountryFlag 
-                  :country-code="item.raw.code" 
-                  :show-name="false" 
-                  size="small" 
-                />
+                <div class="flag-prepend">
+                  <CountryFlag 
+                    :country-code="item.raw.code" 
+                    :show-name="false" 
+                    size="small" 
+                    class="flag-icon"
+                  />
+                </div>
               </template>
-              <v-list-item-title>{{ item.raw.name }}</v-list-item-title>
+              <v-list-item-title class="country-name">{{ item.raw.name }}</v-list-item-title>
             </v-list-item>
           </template>
         </v-select>
@@ -282,6 +286,60 @@ onMounted(() => {
   }
 }
 
+/* Flag alignment fixes */
+.flag-selection {
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+}
+
+.flag-prepend {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+  margin-right: 8px;
+}
+
+.flag-icon {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  flex-shrink: 0;
+}
+
+.country-name {
+  line-height: 1.5;
+  align-self: center;
+}
+
+.flag-list-item {
+  min-height: 40px;
+}
+
+:deep(.flag-list-item .v-list-item__prepend) {
+  align-self: center;
+  margin-inline-end: 8px;
+}
+
+:deep(.flag-selection .flag-icon) {
+  margin-right: 6px;
+}
+
+/* Vuetify overrides for better flag alignment */
+:deep(.v-select .v-field__input) {
+  align-items: center;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+:deep(.v-select .v-selection-control-group) {
+  display: flex;
+  align-items: center;
+}
+
 /* Priority countries styling in dropdowns */
 :deep(.v-list-item[data-country="MC"]) {
   background-color: rgba(var(--v-theme-primary), 0.04);
diff --git a/server/api/members/[id].put.ts b/server/api/members/[id].put.ts
index 76082e9..ccf5c79 100644
--- a/server/api/members/[id].put.ts
+++ b/server/api/members/[id].put.ts
@@ -1,4 +1,4 @@
-import { updateMember, handleNocoDbError } from '~/server/utils/nocodb';
+import { updateMember, getMemberById, handleNocoDbError } from '~/server/utils/nocodb';
 import { createSessionManager } from '~/server/utils/session';
 import type { Member, MembershipStatus } from '~/utils/types';
 
@@ -58,17 +58,24 @@ export default defineEventHandler(async (event) => {
     console.log('[api/members/[id].put] Sanitized data fields:', Object.keys(memberData));
 
     // Update member in NocoDB
-    const updatedMember = await updateMember(id, memberData);
+    await updateMember(id, memberData);
 
-    console.log('[api/members/[id].put] ✅ Member updated successfully:', id);
+    console.log('[api/members/[id].put] ✅ Member updated successfully, fetching complete record:', id);
 
-    // Return processed member
+    // Fetch the complete updated member record to ensure we have all fields
+    const completeMember = await getMemberById(id);
+    console.log('[api/members/[id].put] Complete member fetched with fields:', Object.keys(completeMember));
+
+    // Return processed member with computed fields
     const processedMember = {
-      ...updatedMember,
-      FullName: `${updatedMember.first_name || ''} ${updatedMember.last_name || ''}`.trim(),
-      FormattedPhone: formatPhoneNumber(updatedMember.phone)
+      ...completeMember,
+      FullName: `${completeMember.first_name || ''} ${completeMember.last_name || ''}`.trim(),
+      FormattedPhone: formatPhoneNumber(completeMember.phone)
     };
 
+    console.log('[api/members/[id].put] Processed member FullName:', processedMember.FullName);
+    console.log('[api/members/[id].put] Processed member nationality:', processedMember.nationality);
+
     return {
       success: true,
       data: processedMember,