From 7784fab23f29c95f07cfb9682cb2dd0b3c7d2d2e Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Fri, 15 Aug 2025 14:06:47 +0200
Subject: [PATCH] fixes

---
 components/EditMemberDialog.vue | 74 +++++++++++++++++++++++++++++++--
 components/MemberCard.vue       | 15 ++++---
 components/ViewMemberDialog.vue | 70 +++++++++++++++++++++++++++----
 3 files changed, 139 insertions(+), 20 deletions(-)

diff --git a/components/EditMemberDialog.vue b/components/EditMemberDialog.vue
index 540029d..7ec356c 100644
--- a/components/EditMemberDialog.vue
+++ b/components/EditMemberDialog.vue
@@ -8,10 +8,23 @@
   >
     <v-card>
       <v-card-title class="d-flex align-center pa-6 bg-primary">
-        <v-icon class="mr-3 text-white">mdi-account-edit</v-icon>
-        <h2 class="text-h5 text-white font-weight-bold flex-grow-1">
-          Edit Member: {{ member?.FullName || `${member?.first_name} ${member?.last_name}` }}
-        </h2>
+        <ProfileAvatar
+          v-if="member"
+          :member-id="member.member_id"
+          :member-name="member.FullName || `${member.first_name} ${member.last_name}`"
+          :first-name="member.first_name"
+          :last-name="member.last_name"
+          size="large"
+          class="mr-4"
+          clickable
+          show-border
+          @click="openImageLightbox"
+        />
+        <div class="flex-grow-1">
+          <h2 class="text-h5 text-white font-weight-bold">
+            Edit Member: {{ member?.FullName || `${member?.first_name} ${member?.last_name}` }}
+          </h2>
+        </div>
         <v-btn
           icon
           variant="text"
@@ -243,6 +256,38 @@
       </v-card-actions>
     </v-card>
   </v-dialog>
+
+  <!-- Image Lightbox -->
+  <v-dialog
+    v-model="showImageLightbox"
+    max-width="800"
+    @click:outside="showImageLightbox = false"
+  >
+    <v-card class="pa-0" v-if="member && lightboxImageUrl">
+      <v-card-title class="d-flex align-center pa-4">
+        <span class="text-h6">{{ member.FullName || `${member.first_name} ${member.last_name}` }} - Profile Photo</span>
+        <v-spacer />
+        <v-btn
+          icon
+          variant="text"
+          @click="showImageLightbox = false"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+      <v-card-text class="pa-4">
+        <div class="text-center">
+          <v-img
+            :src="lightboxImageUrl"
+            :alt="`${member.FullName || `${member.first_name} ${member.last_name}`} profile photo`"
+            max-height="500"
+            contain
+            class="mx-auto"
+          />
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
@@ -266,6 +311,10 @@ const formRef = ref();
 const formValid = ref(false);
 const loading = ref(false);
 
+// Lightbox state
+const showImageLightbox = ref(false);
+const lightboxImageUrl = ref<string | null>(null);
+
 // Form data - using snake_case field names
 const form = ref({
   first_name: '',
@@ -539,6 +588,23 @@ watch(() => props.member, (newMember) => {
     populateForm();
   }
 });
+
+// Lightbox functionality
+const openImageLightbox = async () => {
+  if (!props.member?.member_id) return;
+  
+  try {
+    // Fetch the original sized image for the lightbox
+    const response = await $fetch(`/api/profile/image/${props.member.member_id}/medium`) as any;
+    if (response?.success && response?.imageUrl) {
+      lightboxImageUrl.value = response.imageUrl;
+      showImageLightbox.value = true;
+    }
+  } catch (error) {
+    console.warn('Could not load image for lightbox:', error);
+    // Could show a snackbar here if needed
+  }
+};
 </script>
 
 <style scoped>
diff --git a/components/MemberCard.vue b/components/MemberCard.vue
index 1c10e15..9bf9296 100644
--- a/components/MemberCard.vue
+++ b/components/MemberCard.vue
@@ -62,15 +62,14 @@
     <!-- Card Content -->
     <v-card-text class="pb-4 pt-3">
       <div class="d-flex align-center mb-2">
-        <v-avatar
-          :color="avatarColor"
-          size="40"
+        <ProfileAvatar
+          :member-id="member.member_id"
+          :member-name="displayName"
+          :first-name="member.first_name"
+          :last-name="member.last_name"
+          size="medium"
           class="mr-3"
-        >
-          <span class="text-white font-weight-bold">
-            {{ memberInitials }}
-          </span>
-        </v-avatar>
+        />
         
         <div class="flex-grow-1">
           <h3 class="text-subtitle-1 font-weight-bold mb-1">
diff --git a/components/ViewMemberDialog.vue b/components/ViewMemberDialog.vue
index e235c34..856532c 100644
--- a/components/ViewMemberDialog.vue
+++ b/components/ViewMemberDialog.vue
@@ -9,15 +9,17 @@
     <v-card v-if="member">
       <!-- Header -->
       <v-card-title class="d-flex align-center pa-6 bg-primary">
-        <v-avatar
-          :color="avatarColor"
-          size="48"
+        <ProfileAvatar
+          :member-id="member.member_id"
+          :member-name="member.FullName || `${member.first_name} ${member.last_name}`"
+          :first-name="member.first_name"
+          :last-name="member.last_name"
+          size="large"
           class="mr-4"
-        >
-          <span class="text-white font-weight-bold text-h6">
-            {{ memberInitials }}
-          </span>
-        </v-avatar>
+          clickable
+          show-border
+          @click="openImageLightbox"
+        />
         
         <div class="flex-grow-1">
           <h2 class="text-h5 text-white font-weight-bold">
@@ -192,6 +194,38 @@
       </v-card-actions>
     </v-card>
   </v-dialog>
+
+  <!-- Image Lightbox -->
+  <v-dialog
+    v-model="showImageLightbox"
+    max-width="800"
+    @click:outside="showImageLightbox = false"
+  >
+    <v-card class="pa-0" v-if="member && lightboxImageUrl">
+      <v-card-title class="d-flex align-center pa-4">
+        <span class="text-h6">{{ member.FullName || `${member.first_name} ${member.last_name}` }} - Profile Photo</span>
+        <v-spacer />
+        <v-btn
+          icon
+          variant="text"
+          @click="showImageLightbox = false"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+      <v-card-text class="pa-4">
+        <div class="text-center">
+          <v-img
+            :src="lightboxImageUrl"
+            :alt="`${member.FullName || `${member.first_name} ${member.last_name}`} profile photo`"
+            max-height="500"
+            contain
+            class="mx-auto"
+          />
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-dialog>
 </template>
 
 <script setup lang="ts">
@@ -214,6 +248,10 @@ const props = withDefaults(defineProps<Props>(), {
 
 defineEmits<Emits>();
 
+// Lightbox state
+const showImageLightbox = ref(false);
+const lightboxImageUrl = ref<string | null>(null);
+
 // Computed properties
 const memberInitials = computed(() => {
   if (!props.member) return '';
@@ -295,6 +333,22 @@ const formatDate = (dateString: string): string => {
     return dateString;
   }
 };
+
+const openImageLightbox = async () => {
+  if (!props.member?.member_id) return;
+  
+  try {
+    // Fetch the original sized image for the lightbox
+    const response = await $fetch(`/api/profile/image/${props.member.member_id}/medium`) as any;
+    if (response?.success && response?.imageUrl) {
+      lightboxImageUrl.value = response.imageUrl;
+      showImageLightbox.value = true;
+    }
+  } catch (error) {
+    console.warn('Could not load image for lightbox:', error);
+    // Could show a snackbar here if needed
+  }
+};
 </script>
 
 <style scoped>