MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-18 22:33:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Group events on group dialog

Browse Source
This commit is contained in:
Natsumi
2025-11-19 01:41:53 +11:00
parent b1d661c086
commit 69848b6fdc
7 changed files with 173 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/api/group.js
View File

@@ -702,6 +702,33 @@ const groupReq = {
getGroupCalendar(groupId) {
return request(`calendar/${groupId}`, {
method: 'GET'
}).then((json) => {
const args = {
json,
params: {
groupId
}
};
return args;
});
},
/**
* @param {{
groupId: string,
eventId: string
}} params
* @return { Promise<{json: any, params}> }
*/
getGroupCalendarEvent(params) {
return request(`calendar/${params.groupId}/${params.eventId}`, {
method: 'GET'
}).then((json) => {
const args = {
json,
params
};
return args;
});
},

4
src/app.scss
View File

@@ -428,6 +428,10 @@ hr.x-vertical-divider {
border-radius: 2px;
}
.x-friend-item-no-hover:hover {
background: unset !important;
}
.x-friend-item-border:hover {
border-top-left-radius: 25px;
border-top-right-radius: 5px;

90
src/components/dialogs/GroupDialog/GroupDialog.vue
View File

@@ -546,6 +546,44 @@
>
</div>
</div>
<div class="x-friend-item x-friend-item-no-hover" style="width: 100%; cursor: default">
<div class="detail" style="overflow: visible">
<span class="name">{{ t('dialog.group.info.upcoming_events') }}</span>
<template v-if="upcomingCalenderEvents.length > 0">
<br />
<div class="grid-view events-row">
<GroupCalendarEventCard
v-for="value in upcomingCalenderEvents"
:key="value.id"
:event="value"
:is-following="value.userInterest?.isFollowing"
@update-following-calendar-data="updateFollowingCalendarData"
mode="grid"
card-class="group-dialog-grid-card" />
</div>
</template>
<span v-else class="extra">-</span>
</div>
</div>
<div class="x-friend-item x-friend-item-no-hover" style="width: 100%; cursor: default">
<div class="detail" style="overflow: visible">
<span class="name">{{ t('dialog.group.info.past_events') }}</span>
<template v-if="pastCalenderEvents.length > 0">
<br />
<div class="grid-view events-row">
<GroupCalendarEventCard
v-for="value in pastCalenderEvents"
:key="value.id"
:event="value"
:is-following="value.userInterest?.isFollowing"
@update-following-calendar-data="updateFollowingCalendarData"
mode="grid"
card-class="group-dialog-grid-card" />
</div>
</template>
<span v-else class="extra">-</span>
</div>
</div>
<div class="x-friend-item" style="cursor: default">
<div class="detail">
<span class="name">{{ t('dialog.group.info.members') }}</span>
@@ -1147,7 +1185,7 @@
View,
Warning
} from '@element-plus/icons-vue';
import { nextTick, reactive, ref, watch } from 'vue';
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -1173,6 +1211,7 @@
import { getNextDialogIndex } from '../../../shared/utils/base/ui';
import { groupRequest } from '../../../api';
import GroupCalendarEventCard from '../../../views/Tools/components/GroupCalendarEventCard.vue';
import GroupPostEditDialog from './GroupPostEditDialog.vue';
import PreviousInstancesGroupDialog from '../PreviousInstancesDialog/PreviousInstancesGroupDialog.vue';
@@ -1235,6 +1274,28 @@
roleId: ''
});
const pastCalenderEvents = computed(() => {
if (!groupDialog.value.calendar) {
return [];
}
const now = Date.now();
return groupDialog.value.calendar.filter((event) => {
const eventEnd = new Date(event.endsAt).getTime();
return eventEnd < now;
});
});
const upcomingCalenderEvents = computed(() => {
if (!groupDialog.value.calendar) {
return [];
}
const now = Date.now();
return groupDialog.value.calendar.filter((event) => {
const eventEnd = new Date(event.endsAt).getTime();
return eventEnd >= now;
});
});
watch(
() => groupDialog.value.loading,
() => {
@@ -1764,4 +1825,31 @@
...obj
};
}
function updateFollowingCalendarData(event) {
const calendar = groupDialog.value.calendar;
for (let i = 0; i < calendar.length; i++) {
if (calendar[i].id === event.id) {
calendar[i] = {
...calendar[i],
...event
};
break;
}
}
}
</script>
<style lang="scss" scoped>
.time-group-container {
display: flex;
flex-direction: column;
gap: 8px;
overflow: visible;
}
.events-row {
display: flex;
flex-wrap: wrap;
gap: 16px;
overflow: visible;
}
</style>

6
src/localization/en.json
View File

@@ -315,7 +315,7 @@
},
"prompt": {
"title": "Mutual Friend Graph",
"message": "No cached mutual friend graph data was found. Start fetching now?\\nThis may take a while, we will notify you when it is finishes",
"message": "No cached mutual friend graph data was found. Start fetching now? This may take a while, we will notify you when it is finishes",
"confirm": "Start Fetch",
"cancel": "Maybe Later"
},
@@ -1229,7 +1229,9 @@
"role_updated_at": "Updated At:",
"role_created_at": "Created At:",
"role_permissions": "Permissions:",
"last_visited": "Last Visited"
"last_visited": "Last Visited",
"past_events": "Past Events",
"upcoming_events": "Upcoming Events"
},
"posts": {
"header": "Posts",

38
src/stores/group.js
View File

@@ -45,6 +45,7 @@ export const useGroupStore = defineStore('Group', () => {
announcement: {},
posts: [],
postsFiltered: [],
calendar: [],
members: [],
memberSearch: '',
memberSearchResults: [],
@@ -141,6 +142,7 @@ export const useGroupStore = defineStore('Group', () => {
D.galleries = {};
D.members = [];
D.memberFilter = groupDialogFilterOptions.everyone;
D.calendar = [];
groupRequest
.getCachedGroup({
groupId
@@ -461,12 +463,45 @@ export const useGroupStore = defineStore('Group', () => {
});
}
});
groupRequest.getGroupCalendar(groupId).then((args) => {
if (groupDialog.value.id === args.params.groupId) {
D.calendar = args.json.results;
for (const event of D.calendar) {
applyGroupEvent(event);
// fetch again for isFollowing
groupRequest
.getGroupCalendarEvent({
groupId,
eventId: event.id
})
.then((args) => {
Object.assign(
event,
applyGroupEvent(args.json)
);
});
}
}
});
}
nextTick(() => (D.isGetGroupDialogGroupLoading = false));
return args;
});
}
function applyGroupEvent(event) {
return {
userInterest: {
createdAt: null,
isFollowing: false,
updatedAt: null
},
...event,
title: replaceBioSymbols(event.title),
description: replaceBioSymbols(event.description)
};
}
async function updateInGameGroupOrder() {
inGameGroupOrder.value = [];
try {
@@ -1102,6 +1137,7 @@ export const useGroupStore = defineStore('Group', () => {
handleGroupRepresented,
showModerateGroupDialog,
showGroupMemberModerationDialog,
onGroupLeft
onGroupLeft,
applyGroupEvent
};
});

10
src/views/Tools/components/GroupCalendarEventCard.vue
View File

@@ -77,7 +77,7 @@
import { useGroupStore } from '../../../stores';
const { t } = useI18n();
const { cachedGroups, showGroupDialog } = useGroupStore();
const { cachedGroups } = useGroupStore();
const props = defineProps({
event: {
@@ -100,7 +100,7 @@
}
});
const emit = defineEmits(['update-following-calendar-data']);
const emit = defineEmits(['update-following-calendar-data', 'click-action']);
const showGroupName = computed(() => props.mode === 'timeline');
@@ -182,7 +182,7 @@
const capitalizeFirst = (str) => str?.charAt(0).toUpperCase() + str?.slice(1);
const onGroupClick = () => {
showGroupDialog(props.event.ownerId);
emit('click-action');
};
</script>
@@ -203,6 +203,10 @@
flex: 0 0 280px;
max-width: 280px;
}
&.group-dialog-grid-card {
flex: 0 0 320px;
max-width: 320px;
}
:deep(.el-card__body) {
overflow: visible;
}

9
src/views/Tools/dialogs/GroupCalendarDialog.vue
View File

@@ -36,7 +36,8 @@
mode="timeline"
:is-following="isEventFollowing(value.id)"
:card-class="{ 'grouped-card': timeGroup.events.length > 1 }"
@update-following-calendar-data="updateFollowingCalendarData" />
@update-following-calendar-data="updateFollowingCalendarData"
@click-action="showGroupDialog(value.ownerId)" />
</div>
</el-timeline-item>
</el-timeline>
@@ -99,6 +100,7 @@
mode="grid"
:is-following="isEventFollowing(event.id)"
@update-following-calendar-data="updateFollowingCalendarData"
@click-action="showGroupDialog(event.ownerId)"
card-class="grid-card" />
</div>
</div>
@@ -131,7 +133,7 @@
import GroupCalendarEventCard from '../components/GroupCalendarEventCard.vue';
const { cachedGroups } = useGroupStore();
const { cachedGroups, applyGroupEvent, showGroupDialog } = useGroupStore();
const { t } = useI18n();
@@ -341,8 +343,7 @@
try {
const response = await groupRequest.getFollowingGroupCalendars(dayjs(selectedDay.value).toISOString());
response.results.forEach((event) => {
event.title = replaceBioSymbols(event.title);
event.description = replaceBioSymbols(event.description);
applyGroupEvent(event);
});
followingCalendar.value = response.results;
} catch (error) {