diff --git a/converter/svg/sources/name=sort-down.svg b/converter/svg/sources/name=sort-down.svg new file mode 100644 index 0000000000..0620c60d62 --- /dev/null +++ b/converter/svg/sources/name=sort-down.svg @@ -0,0 +1,4 @@ + + + + diff --git a/converter/svg/sources/name=sort-up.svg b/converter/svg/sources/name=sort-up.svg new file mode 100644 index 0000000000..a6e3caa37b --- /dev/null +++ b/converter/svg/sources/name=sort-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/icons/IconSortDown.tsx b/src/components/icons/IconSortDown.tsx new file mode 100644 index 0000000000..2fc8c8dd52 --- /dev/null +++ b/src/components/icons/IconSortDown.tsx @@ -0,0 +1,43 @@ +import { SvgIcon, SxProps, Theme } from '@mui/material'; + +type IconProps = { + color?: string; + width?: number; + height?: number; + sx?: SxProps; + className?: string; +}; + +const IconSortDown = ({ + color = '#222222', + width = 24, + height = 24, + sx = {}, + className, +}: IconProps) => { + return ( + + + + + + + ); +}; + +export default IconSortDown; diff --git a/src/components/icons/IconSortUp.tsx b/src/components/icons/IconSortUp.tsx new file mode 100644 index 0000000000..7eddde50e7 --- /dev/null +++ b/src/components/icons/IconSortUp.tsx @@ -0,0 +1,43 @@ +import { SvgIcon, SxProps, Theme } from '@mui/material'; + +type IconProps = { + color?: string; + width?: number; + height?: number; + sx?: SxProps; + className?: string; +}; + +const IconSortUp = ({ + color = '#222222', + width = 24, + height = 24, + sx = {}, + className, +}: IconProps) => { + return ( + + + + + + + ); +}; + +export default IconSortUp; diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 9c21497824..eb539c21b4 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -293,3 +293,5 @@ export { default as IconWeek } from './IconWeek'; export { default as IconWine } from './IconWine'; export { default as IconWork } from './IconWork'; export { default as IconYahoo } from './IconYahoo'; +export { default as IconSortDown } from './IconSortDown'; +export { default as IconSortUp } from './IconSortUp'; diff --git a/src/components/tabs/index.types.ts b/src/components/tabs/index.types.ts index d44542f3ad..606b984028 100644 --- a/src/components/tabs/index.types.ts +++ b/src/components/tabs/index.types.ts @@ -57,13 +57,33 @@ export interface CustomTabProps extends TabOwnProps { */ indicatorMode?: boolean; + /** + * Callback function triggered when the active tab changes. + * Provides the new active tab index as a parameter. + * + * @param activeTab - The index of the newly selected tab. + */ onChange?: (activeTab: number) => void; + /** + * Optional class name for styling the tab container or component. + */ className?: string; + /** + * The variant of the tabs, aligning with the MUI `TabsOwnProps` variant. + * Examples include `"scrollable"` or `"standard"`. + */ variant?: TabsOwnProps['variant']; + /** + * Minimum height for the tab component. + * Useful for ensuring consistent tab sizes. + */ minHeight?: string; + /** + * Custom styling applied to the tab component using MUI's `sx` prop. + */ sx?: SxProps; } diff --git a/src/features/meetings/week_selector/index.tsx b/src/features/meetings/week_selector/index.tsx index 84db5603fe..5341278b5c 100644 --- a/src/features/meetings/week_selector/index.tsx +++ b/src/features/meetings/week_selector/index.tsx @@ -1,5 +1,10 @@ import { Box, Collapse } from '@mui/material'; -import { IconClearMultiple, IconCollapse } from '@components/icons'; +import { + IconClearMultiple, + IconCollapse, + IconSortDown, + IconSortUp, +} from '@components/icons'; import { useAppTranslation, useBreakpoints } from '@hooks/index'; import useWeekSelector from './useWeekSelector'; import AssignmentsDelete from '../assignments_delete'; @@ -22,6 +27,8 @@ const WeekSelector = () => { openDelete, handleOpenDelete, meeting, + sortDown, + handleToggleSort, } = useWeekSelector(); return ( @@ -58,15 +65,36 @@ const WeekSelector = () => { onClick={desktopUp ? null : handleToggleExpand} > {t('tr_meetingWeeks')} - {!desktopUp && ( - + { + e.stopPropagation(); + handleToggleSort(); }} - /> - )} + > + {sortDown ? ( + + ) : ( + + )} + + {!desktopUp && ( + + )} + diff --git a/src/features/meetings/week_selector/months_container/index.tsx b/src/features/meetings/week_selector/months_container/index.tsx index 367467f587..708a6aaa21 100644 --- a/src/features/meetings/week_selector/months_container/index.tsx +++ b/src/features/meetings/week_selector/months_container/index.tsx @@ -2,7 +2,9 @@ import { Box } from '@mui/material'; import { MonthsContainerType } from './index.types'; import MonthItem from '../month_item'; -const MonthsContainer = ({ months }: MonthsContainerType) => { +const MonthsContainer = ({ months, reverse = false }: MonthsContainerType) => { + const displayedMonths = reverse ? [...months].reverse() : months; + return ( { }, }} > - {months.map((month) => ( + {displayedMonths.map((month) => ( ))} diff --git a/src/features/meetings/week_selector/months_container/index.types.ts b/src/features/meetings/week_selector/months_container/index.types.ts index 98c91d4c15..65e5edd778 100644 --- a/src/features/meetings/week_selector/months_container/index.types.ts +++ b/src/features/meetings/week_selector/months_container/index.types.ts @@ -2,4 +2,5 @@ import { SourcesFormattedType } from '@definition/sources'; export type MonthsContainerType = { months: SourcesFormattedType['months']; + reverse?: boolean; }; diff --git a/src/features/meetings/week_selector/useWeekSelector.tsx b/src/features/meetings/week_selector/useWeekSelector.tsx index e5a12cc940..e110df7161 100644 --- a/src/features/meetings/week_selector/useWeekSelector.tsx +++ b/src/features/meetings/week_selector/useWeekSelector.tsx @@ -19,13 +19,14 @@ const useWeekSelector = () => { const [expanded, setExpanded] = useState(true); const [openDelete, setOpenDelete] = useState(false); + const [sortDown, setSortDown] = useState(false); const meeting: MeetingType = location.pathname === '/midweek-meeting' ? 'midweek' : 'weekend'; const tabs = sources.map((year) => ({ label: year.value.toString(), - Component: , + Component: , })); const currentYear = @@ -41,6 +42,10 @@ const useWeekSelector = () => { setExpanded((prev) => !prev); }; + const handleToggleSort = () => { + setSortDown((prev) => !prev); + }; + const handleOpenDelete = () => setOpenDelete(true); const handleCloseDelete = () => setOpenDelete(false); @@ -67,6 +72,8 @@ const useWeekSelector = () => { handleCloseDelete, handleOpenDelete, meeting, + sortDown, + handleToggleSort, }; };