Group calendar cringe toggle

src/api/group.js

@@ -735,24 +735,30 @@ const groupReq = {
     /**
      * @type {import('../types/api/group').GetCalendars}
      */
-    getGroupCalendars(date) {
-        return request(`calendar?date=${date}`, {
-            method: 'GET'
+    getGroupCalendars(params) {
+        return request('calendar', {
+            method: 'GET',
+            params
         });
     },
 
     /**
      * @type {import('../types/api/group').GetFollowingCalendars}
      */
-    getFollowingGroupCalendars(date) {
-        return request(`calendar/following?date=${date}`, {
-            method: 'GET'
+    getFollowingGroupCalendars(params) {
+        return request('calendar/following', {
+            method: 'GET',
+            params
         });
     },
 
-    getFeaturedGroupCalendars(date) {
-        return request(`calendar/featured?date=${date}`, {
-            method: 'GET'
+    /**
+     * @type {import('../types/api/group').GetFeaturedCalendars}
+     */
+    getFeaturedGroupCalendars(params) {
+        return request('calendar/featured', {
+            method: 'GET',
+            params
         });
     },
 

src/localization/en.json

@@ -1814,7 +1814,8 @@
                 "description": "Description",
                 "export_to_calendar": "Export to Calendar",
                 "download_ics": "Download .ics"
-            }
+            },
+            "featured_events": "Featured Events"
         },
         "moderate_group": {
             "header": "Moderate Group Member",

src/service/request.js

@@ -371,7 +371,16 @@ export async function processBulk(options) {
     try {
         while (true) {
             const result = await fn(params);
-            const batchSize = result.json.length;
+            let batchSize = 0;
+            if (Array.isArray(result.json)) {
+                batchSize = result.json.length;
+            } else if (Array.isArray(result.results)) {
+                batchSize = result.results.length;
+            } else {
+                throw new Error(
+                    'Invalid result format: expected an array in result.json or result.results'
+                );
+            }
 
             if (typeof handle === 'function') {
                 handle(result);
@@ -379,6 +388,9 @@ export async function processBulk(options) {
             if (batchSize === 0) {
                 break;
             }
+            if (typeof result.hasNext === 'boolean' && !result.hasNext) {
+                break;
+            }
 
             if (N > 0) {
                 totalFetched += batchSize;

src/types/api/group.d.ts

@@ -7,9 +7,17 @@ export type GetGroup = (params: {
     params: { groupId: string; includeRoles?: boolean };
 }>;
 
-export type GetCalendars = (date: string) => Promise<CalendarResponse>;
+export type GetCalendars = (params: {
+    date: string;
+}) => Promise<CalendarResponse>;
 
-export type GetFollowingCalendars = (date: string) => Promise<CalendarResponse>;
+export type GetFollowingCalendars = (params: {
+    date: string;
+}) => Promise<CalendarResponse>;
+
+export type GetFeaturedCalendars = (params: {
+    date: string;
+}) => Promise<CalendarResponse>;
 
 // API response types
 interface GetGroupResponse {

src/views/Tools/components/GroupCalendarEventCard.vue

@@ -1,6 +1,6 @@
 <template>
     <el-card :body-style="{ padding: '0px' }" class="event-card" :class="cardClass">
-        <img :src="bannerUrl" class="banner" />
+        <img :src="bannerUrl" @click="showFullscreenImageDialog(bannerUrl)" class="banner" />
         <div class="event-content">
             <div class="event-title">
                 <div v-if="showGroupName" class="event-group-name" @click="onGroupClick">
@@ -71,10 +71,12 @@
     import { computed } from 'vue';
     import { useI18n } from 'vue-i18n';
 
+    import { useGalleryStore, useGroupStore } from '../../../stores';
     import { AppDebug } from '../../../service/appConfig';
     import { formatDateFilter } from '../../../shared/utils';
     import { groupRequest } from '../../../api';
-    import { useGroupStore } from '../../../stores';
+
+    const { showFullscreenImageDialog } = useGalleryStore();
 
     const { t } = useI18n();
     const { cachedGroups } = useGroupStore();
@@ -211,6 +213,7 @@
             overflow: visible;
         }
         .banner {
+            cursor: pointer;
             width: 100%;
             object-fit: cover;
             border-radius: 8px 8px 0 0;

src/views/Tools/dialogs/GroupCalendarDialog.vue

@@ -17,6 +17,10 @@
                     }}
                 </el-button>
             </div>
+            <div class="featured-switch">
+                <span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span>
+                <el-switch v-model="showFeaturedEvents" @change="toggleFeaturedEvents" size="small" />
+            </div>
         </template>
         <div class="top-content">
             <transition name="el-fade-in-linear" mode="out-in">
@@ -120,20 +124,21 @@
 </template>
 
 <script setup>
-    import { computed, ref, watch } from 'vue';
+    import { computed, onMounted, ref, watch } from 'vue';
     import { ArrowRight } from '@element-plus/icons-vue';
     import { useI18n } from 'vue-i18n';
 
     import dayjs from 'dayjs';
 
-    import { formatDateFilter } from '../../../shared/utils';
+    import { formatDateFilter, getGroupName, replaceBioSymbols } from '../../../shared/utils';
     import { groupRequest } from '../../../api';
-    import { replaceBioSymbols } from '../../../shared/utils';
+    import { processBulk } from '../../../service/request';
     import { useGroupStore } from '../../../stores';
 
     import GroupCalendarEventCard from '../components/GroupCalendarEventCard.vue';
+    import configRepository from '../../../service/config';
 
-    const { cachedGroups, applyGroupEvent, showGroupDialog } = useGroupStore();
+    const { applyGroupEvent, showGroupDialog } = useGroupStore();
 
     const { t } = useI18n();
 
@@ -148,25 +153,30 @@
 
     const calendar = ref([]);
     const followingCalendar = ref([]);
+    const featuredCalendar = ref([]);
     const selectedDay = ref(new Date());
     const isLoading = ref(false);
     const viewMode = ref('timeline');
     const searchQuery = ref('');
     const groupCollapsed = ref({});
+    const showFeaturedEvents = ref(false);
+    const groupNamesCache = new Map();
+
+    onMounted(async () => {
+        showFeaturedEvents.value = await configRepository.getBool('VRCX_groupCalendarShowFeaturedEvents', false);
+    });
+
+    function toggleFeaturedEvents() {
+        configRepository.setBool('VRCX_groupCalendarShowFeaturedEvents', showFeaturedEvents.value);
+        updateCalenderData();
+    }
 
     watch(
         () => props.visible,
         async (newVisible) => {
             if (newVisible) {
                 selectedDay.value = new Date();
-                isLoading.value = true;
-                await Promise.all([getCalendarData(), getFollowingCalendarData()])
-                    .catch((error) => {
-                        console.error('Error fetching calendar data:', error);
-                    })
-                    .finally(() => {
-                        isLoading.value = false;
-                    });
+                updateCalenderData();
             }
         }
     );
@@ -179,27 +189,42 @@
                 const oldMonth = dayjs(oldDate).format('YYYY-MM');
 
                 if (newMonth !== oldMonth) {
-                    isLoading.value = true;
-                    await Promise.all([getCalendarData(), getFollowingCalendarData()])
-                        .catch((error) => {
-                            console.error('Error fetching calendar data:', error);
-                        })
-                        .finally(() => {
-                            isLoading.value = false;
-                        });
+                    updateCalenderData();
                 }
             }
         }
     );
 
+    async function updateCalenderData() {
+        isLoading.value = true;
+        let fetchPromises = [getCalendarData(), getFollowingCalendarData()];
+        if (showFeaturedEvents.value) {
+            fetchPromises.push(getFeaturedCalendarData());
+        }
+        await Promise.all(fetchPromises)
+            .catch((error) => {
+                console.error('Error fetching calendar data:', error);
+            })
+            .finally(() => {
+                isLoading.value = false;
+            });
+    }
+
     const groupedByGroupEvents = computed(() => {
         const currentMonth = dayjs(selectedDay.value).month();
         const currentYear = dayjs(selectedDay.value).year();
 
-        const currentMonthEvents = calendar.value.filter((event) => {
+        let currentMonthEvents = calendar.value.filter((event) => {
             const eventDate = dayjs(event.startsAt);
             return eventDate.month() === currentMonth && eventDate.year() === currentYear;
         });
+        if (showFeaturedEvents.value) {
+            const featuredMonthEvents = featuredCalendar.value.filter((event) => {
+                const eventDate = dayjs(event.startsAt);
+                return eventDate.month() === currentMonth && eventDate.year() === currentYear;
+            });
+            currentMonthEvents = currentMonthEvents.concat(featuredMonthEvents);
+        }
 
         const groupMap = new Map();
         currentMonthEvents.forEach((event) => {
@@ -216,7 +241,7 @@
 
         return Array.from(groupMap.entries()).map(([groupId, events]) => ({
             groupId,
-            groupName: getGroupName(events[0]),
+            groupName: groupNamesCache.get(groupId),
             events: events
         }));
     });
@@ -269,6 +294,15 @@
             }
             result[currentDate].push(item);
         });
+        if (showFeaturedEvents.value) {
+            featuredCalendar.value.forEach((item) => {
+                const currentDate = formatDateKey(item.startsAt);
+                if (!Array.isArray(result[currentDate])) {
+                    result[currentDate] = [];
+                }
+                result[currentDate].push(item);
+            });
+        }
 
         Object.values(result).forEach((events) => {
             events.sort((a, b) => dayjs(a.startsAt).diff(dayjs(b.startsAt)));
@@ -321,36 +355,88 @@
 
     const formatDateKey = (date) => formatDateFilter(date, 'date');
 
-    function getGroupName(event) {
-        if (!event) return '';
-        return cachedGroups.get(event.ownerId)?.name || '';
+    function getGroupNameFromCache(groupId) {
+        if (!groupNamesCache.has(groupId)) {
+            getGroupName(groupId).then((name) => {
+                groupNamesCache.set(groupId, name);
+            });
+        }
     }
 
     async function getCalendarData() {
+        calendar.value = [];
         try {
-            const response = await groupRequest.getGroupCalendars(dayjs(selectedDay.value).toISOString());
-            response.results.forEach((event) => {
-                event.title = replaceBioSymbols(event.title);
-                event.description = replaceBioSymbols(event.description);
+            await processBulk({
+                fn: groupRequest.getGroupCalendars,
+                N: -1,
+                params: {
+                    n: 100,
+                    offset: 0,
+                    date: dayjs(selectedDay.value).toISOString()
+                },
+                handle(args) {
+                    args.results.forEach((event) => {
+                        event.title = replaceBioSymbols(event.title);
+                        event.description = replaceBioSymbols(event.description);
+                        applyGroupEvent(event);
+                        getGroupNameFromCache(event.ownerId);
+                    });
+                    calendar.value.push(...args.results);
+                }
             });
-            calendar.value = response.results;
         } catch (error) {
             console.error('Error fetching calendars:', error);
         }
     }
 
     async function getFollowingCalendarData() {
+        followingCalendar.value = [];
         try {
-            const response = await groupRequest.getFollowingGroupCalendars(dayjs(selectedDay.value).toISOString());
-            response.results.forEach((event) => {
-                applyGroupEvent(event);
+            await processBulk({
+                fn: groupRequest.getFollowingGroupCalendars,
+                N: -1,
+                params: {
+                    n: 100,
+                    offset: 0,
+                    date: dayjs(selectedDay.value).toISOString()
+                },
+                handle(args) {
+                    args.results.forEach((event) => {
+                        applyGroupEvent(event);
+                        getGroupNameFromCache(event.ownerId);
+                    });
+                    followingCalendar.value.push(...args.results);
+                }
             });
-            followingCalendar.value = response.results;
         } catch (error) {
             console.error('Error fetching following calendars:', error);
         }
     }
 
+    async function getFeaturedCalendarData() {
+        featuredCalendar.value = [];
+        try {
+            await processBulk({
+                fn: groupRequest.getFeaturedGroupCalendars,
+                N: -1,
+                params: {
+                    n: 100,
+                    offset: 0,
+                    date: dayjs(selectedDay.value).toISOString()
+                },
+                handle(args) {
+                    args.results.forEach((event) => {
+                        applyGroupEvent(event);
+                        getGroupNameFromCache(event.ownerId);
+                    });
+                    featuredCalendar.value.push(...args.results);
+                }
+            });
+        } catch (error) {
+            console.error('Error fetching featured calendars:', error);
+        }
+    }
+
     function updateFollowingCalendarData(updatedEvent) {
         const index = followingCalendar.value.findIndex((item) => item.id === updatedEvent.id);
         if (index !== -1) {
@@ -477,6 +563,16 @@
         }
     }
 
+    .featured-switch {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 10px;
+        .featured-switch-text {
+            font-size: 13px;
+            margin-right: 5px;
+        }
+    }
+
     .timeline-view {
         position: absolute;
         top: 0;