matt
/
monacousa-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixes
Build And Push Image / docker (push) Successful in 1m27s Details

This commit is contained in:
Matt 2025-08-15 14:06:47 +02:00
parent 4adbb0465a
commit 7784fab23f
3 changed files with 139 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
components/EditMemberDialog.vue
View File

@ -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">
<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>

15
components/MemberCard.vue
View File

@ -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">

70
components/ViewMemberDialog.vue
View File

@ -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>