gorb/frontend
4
0
Fork 0
Code Issues 7 Pull requests 3 Projects Releases Packages 1 Wiki Activity Actions

feat: finish profile popup
Some checks failed
ci/woodpecker/push/build-and-publish Pipeline failed
Details

Browse source
This commit is contained in:
Twig 2025-07-19 16:54:05 +02:00
parent b5857b706f
commit ce306a2f72
No known key found for this signature in database
2 changed files with 16 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

16
components/Guild/MemberEntry.vue
View file

@ -1,10 +1,10 @@
<template> <template>
<div class="member-item" @click.prevent="toggleModalPopup" tabindex="0"> <div class="member-item" @click.prevent="showModalPopup" tabindex="0">
<Avatar :profile="props.member" class="member-avatar"/> <Avatar :profile="props.member" class="member-avatar"/>
<span class="member-display-name">{{ getDisplayName(props.member) }}</span> <span class="member-display-name">{{ getDisplayName(props.member) }}</span>
</div> </div>
<ModalProfilePopup v-if="modalPopupVisible" <ModalProfilePopup v-if="modalPopupVisible" :profile="props.member"
:profile="props.member"/> :whendone="hideModalPopup"/>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -17,8 +17,14 @@ const props = defineProps<{
const modalPopupVisible = ref<boolean>(false); const modalPopupVisible = ref<boolean>(false);
function toggleModalPopup() { function showModalPopup() {
modalPopupVisible.value = !modalPopupVisible.value console.log("hello there")
modalPopupVisible.value = true
}
function hideModalPopup() {
console.log("gone")
modalPopupVisible.value = false
} }
</script> </script>

8
components/Modal/ProfilePopup.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<ModalBase :obscure="true"> <ModalBase :obscure="true" :onClose="props.whendone" :onCloseButton="props.whendone">
<div id="profile-container"> <div id="profile-container">
<div id="profile-header"> <div id="profile-header">
<div id="header-mask"></div> <div id="header-mask"></div>
@ -65,10 +65,12 @@ import Button from '../UserInterface/Button.vue';
const { addFriend, fetchMe } = useApi(); const { addFriend, fetchMe } = useApi();
const props = defineProps<ModalProps & { const props = defineProps<ModalProps & {
profile: GuildMemberResponse profile: GuildMemberResponse,
whendone: any
}>(); }>();
const friendsSinceRequest = await getFriendsSince(props.profile) const friendsSinceRequest = await getFriendsSince(props.profile)
const me = await fetchMe() as UserResponse
const displayName = getDisplayName(props.profile) const displayName = getDisplayName(props.profile)
const username = getUsername(props.profile) const username = getUsername(props.profile)
@ -80,7 +82,7 @@ const joinDate = getGuildJoinDate(props.profile)
const friendsSince = friendsSinceRequest const friendsSince = friendsSinceRequest
const uuid = getUuid(props.profile) const uuid = getUuid(props.profile)
const me = await fetchMe() as UserResponse
function toDateString(date: Date): string { function toDateString(date: Date): string {
return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' }) return date.toLocaleDateString(undefined, { day: '2-digit', month: 'short', year: 'numeric' })