Merge pull request #751 from lethemanh/685-view-more-events-in-month-view

685 view more events in month view

src/components/Calendar/Calendar.tsx

@@ -11,7 +11,7 @@ import { extractEventBaseUuid } from '@/utils/extractEventBaseUuid'
 import { setSelectedCalendars as setSelectedCalendarsToStorage } from '@/utils/storage/setSelectedCalendars'
 import { useSelectedCalendars } from '@/utils/storage/useSelectedCalendars'
 import { browserDefaultTimeZone } from '@/utils/timezone'
-import type { EventApi, LocaleInput } from '@fullcalendar/core'
+import type { EventApi, LocaleInput, MoreLinkArg } from '@fullcalendar/core'
 import { CalendarApi, DateSelectArg } from '@fullcalendar/core'
 import frLocale from '@fullcalendar/core/locales/fr'
 import ruLocale from '@fullcalendar/core/locales/ru'
@@ -46,6 +46,7 @@ import { CALENDAR_VIEWS } from './utils/constants'
 import Sidebar from './Sidebar/SideBar'
 import TempSearchDialog from './TempSearchDialog'
 import { setIsMobileSearchOpen } from '@/features/Calendars/CalendarSlice'
+import ViewMoreEvents from './ViewMoreEvents'
 
 const localeMap: Record<string, LocaleInput | undefined> = {
   fr: frLocale,
@@ -315,6 +316,18 @@ const CalendarApp: React.FC<CalendarAppProps> = ({
   const [tempUsers, setTempUsers] = useState<User[]>([])
   const [tempEvent, setTempEvent] = useState<CalendarEvent>({} as CalendarEvent)
 
+  const [isMoreEventsDrawerOpen, setIsMoreEventsDrawerOpen] = useState(false)
+  const [moreEvents, setMoreEvents] = useState<EventApi[]>([])
+
+  const handleMoreLinkClick = (arg: MoreLinkArg): string | void => {
+    if (!isMobile) return
+
+    setMoreEvents(arg.hiddenSegs.map(seg => seg.event))
+    setIsMoreEventsDrawerOpen(true)
+
+    return 'none'
+  }
+
   useEffect(() => {
     if (view !== 'calendar') return
     const targetView =
@@ -447,6 +460,7 @@ const CalendarApp: React.FC<CalendarAppProps> = ({
               timeGridWeek: { titleFormat: { month: 'long', year: 'numeric' } }
             }}
             dayMaxEvents={true}
+            moreLinkClick={handleMoreLinkClick}
             events={eventToFullCalendarFormat(
               filteredEvents,
               filteredTempEvents,
@@ -614,17 +628,26 @@ const CalendarApp: React.FC<CalendarAppProps> = ({
       </div>
 
       {isMobile && (
-        <TempSearchDialog
-          tempUsers={tempUsers}
-          setTempUsers={setTempUsers}
-          onClose={() => {
-            dispatch(setIsMobileSearchOpen(false))
-            onCloseSidebar()
-          }}
-          handleToggleEventPreview={() =>
-            eventHandlers.handleDateSelect(null as unknown as DateSelectArg)
-          }
-        />
+        <>
+          <TempSearchDialog
+            tempUsers={tempUsers}
+            setTempUsers={setTempUsers}
+            onClose={() => {
+              dispatch(setIsMobileSearchOpen(false))
+              onCloseSidebar()
+            }}
+            handleToggleEventPreview={() =>
+              eventHandlers.handleDateSelect(null as unknown as DateSelectArg)
+            }
+          />
+          <ViewMoreEvents
+            isOpen={isMoreEventsDrawerOpen}
+            onOpen={() => setIsMoreEventsDrawerOpen(true)}
+            onClose={() => setIsMoreEventsDrawerOpen(false)}
+            moreEvents={moreEvents}
+            handleEventClick={eventHandlers.handleEventClick}
+          />
+        </>
       )}
     </main>
   )

src/components/Calendar/ViewMoreEvents.tsx

@@ -0,0 +1,60 @@
+import type { EventApi, EventClickArg } from '@fullcalendar/core'
+import {
+  List,
+  ListItem,
+  SwipeableDrawer,
+  ListItemButton,
+  ListItemText,
+  ListItemIcon
+} from '@linagora/twake-mui'
+import RepeatIcon from '@mui/icons-material/Repeat'
+
+interface ViewMoreEventsProps {
+  isOpen: boolean
+  onOpen: () => void
+  onClose: () => void
+  moreEvents: EventApi[]
+  handleEventClick: (arg: EventClickArg) => void
+}
+
+const ViewMoreEvents: React.FC<ViewMoreEventsProps> = ({
+  isOpen,
+  onOpen,
+  onClose,
+  moreEvents,
+  handleEventClick
+}: ViewMoreEventsProps) => {
+  return (
+    <SwipeableDrawer
+      anchor="bottom"
+      open={isOpen}
+      onClose={onClose}
+      onOpen={onOpen}
+    >
+      <List sx={{ p: 2, overflowY: 'auto' }}>
+        {moreEvents.map((event, index) => (
+          <ListItem key={index} disablePadding>
+            <ListItemButton
+              onClick={() => {
+                onClose()
+                handleEventClick({
+                  event,
+                  jsEvent: { preventDefault: () => {} }
+                } as EventClickArg)
+              }}
+            >
+              <ListItemText primary={event.title} />
+              {event.extendedProps.recurrenceId && (
+                <ListItemIcon>
+                  <RepeatIcon />
+                </ListItemIcon>
+              )}
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+    </SwipeableDrawer>
+  )
+}
+
+export default ViewMoreEvents