From 89862212c237fcbed113c05321775b66886a9d2e Mon Sep 17 00:00:00 2001 From: Max Makaluk <70341920+FussuChalice@users.noreply.github.com> Date: Sat, 5 Oct 2024 17:49:45 +0300 Subject: [PATCH 1/8] feat(features): add monthly_view for meetings --- src/features/index.ts | 1 + src/features/meetings/monthly_view/index.tsx | 1128 +++++++++++++++++ .../meetings/monthly_view/useMonthlyView.tsx | 393 ++++++ .../monthly_view/week_badge/index.tsx | 27 + .../monthly_view/week_badge/index.types.tsx | 3 + .../monthly_view/week_hoverbox/index.tsx | 64 + .../week_hoverbox/index.types.tsx | 8 + src/locales/en/meetings.json | 6 +- src/pages/meetings/midweek/index.tsx | 56 +- src/pages/meetings/midweek/useMidweek.tsx | 8 + 10 files changed, 1681 insertions(+), 13 deletions(-) create mode 100644 src/features/meetings/monthly_view/index.tsx create mode 100644 src/features/meetings/monthly_view/useMonthlyView.tsx create mode 100644 src/features/meetings/monthly_view/week_badge/index.tsx create mode 100644 src/features/meetings/monthly_view/week_badge/index.types.tsx create mode 100644 src/features/meetings/monthly_view/week_hoverbox/index.tsx create mode 100644 src/features/meetings/monthly_view/week_hoverbox/index.types.tsx diff --git a/src/features/index.ts b/src/features/index.ts index add899f343..37f17330c1 100644 --- a/src/features/index.ts +++ b/src/features/index.ts @@ -61,6 +61,7 @@ export { default as MidweekExport } from './meetings/midweek_export'; export { default as MyAssignments } from './meetings/my_assignments'; export { default as ScheduleAutofillDialog } from './meetings/schedule_autofill'; export { default as WeekSelector } from './meetings/week_selector'; +export { default as MonthlyView } from './meetings/monthly_view'; /* --------------------------------- Persons -------------------------------- */ export { default as PersonAssignment } from './persons/assignments'; diff --git a/src/features/meetings/monthly_view/index.tsx b/src/features/meetings/monthly_view/index.tsx new file mode 100644 index 0000000000..63c8c00626 --- /dev/null +++ b/src/features/meetings/monthly_view/index.tsx @@ -0,0 +1,1128 @@ +import { Box } from '@mui/material'; +import useAppTranslation from '@hooks/useAppTranslation'; +import { MenuItem, Select, Typography } from '@components/index'; +import WeekBadge from './week_badge'; +import PersonSelector from '../person_selector'; +import { AssignmentCode } from '@definition/assignment'; +import Divider from '@components/divider'; +import { + IconLivingPart, + IconMinistryPart, + IconTreasuresPart, +} from '@components/icons'; +import MeetingSection from '../meeting_section'; +import useMonthlyView from './useMonthlyView'; +import WeekHoverBox from './week_hoverbox'; + +const MonthlyView = () => { + const { + selectedWeeks, + getWeekLocale, + selectedMonth, + monthNames, + setSelectedMonth, + classCount, + showDoublePerson, + openingPrayerAuto, + closingPrayerAuto, + openTGW, + openAYF, + openLC, + handleToggleTGW, + handleToggleAYF, + handleToggleLC, + ayfParts1, + ayfParts2, + ayfParts3, + ayfParts4, + ayfCount, + showAYFParts1Assistant, + showAYFParts2Assistant, + showAYFParts3Assistant, + showAYFParts4Assistant, + showAYFParts1DoublePerson, + showAYFParts2DoublePerson, + showAYFParts3DoublePerson, + showAYFParts4DoublePerson, + lcNoAssignParts1, + lcNoAssignParts2, + lcNoAssignParts3, + hasCustomPart, + lcCount, + } = useMonthlyView(); + + const { t } = useAppTranslation(); + + return ( + + {/* --------------------------- MonhlyView Header -------------------------- */} + + + {selectedWeeks.map((value, index) => { + return ( + + ); + })} + + {/* -------------------------------- Chairman -------------------------------- */} + + + {t('tr_chairman')} + + {selectedWeeks.map((value, index) => { + return ( + + ); + })} + + + {classCount === 2 && ( + <> + + + {t('tr_auxClassCounselor')} + + {selectedWeeks.map((value, index) => { + return showDoublePerson[index] ? ( + + ) : ( + + ); + })} + + + + )} + {/* ----------------------------- Opening prayer ----------------------------- */} + {!openingPrayerAuto && ( + + + {t('tr_openingPrayer')} + + {selectedWeeks.map((value, index) => { + return ( + + ); + })} + + )} + {/* ------------------------ Treasures from God’s Word ----------------------- */} + } + expanded={openTGW} + onToggle={handleToggleTGW} + > + {/* --- tgw_talk --- */} + <> + + + {t('tr_tgwTalk')} + + {selectedWeeks.map((value, index) => { + return ( + <> + + + + + ); + })} + + + + {/* --- tgw_gems --- */} + <> + + + {t('tr_tgwGems')} + + {selectedWeeks.map((value, index) => { + return ( + <> + + + + + ); + })} + + + + {/* --- tgw_bible_reading --- */} + <> + + + + {t('tr_mainHall')} + + + + + {t('tr_bibleReading')} + + {selectedWeeks.map((value, index) => { + return ( + + ); + })} + + {classCount === 2 && ( + <> + + + + {t('tr_auxClassroom')} + + + + + {selectedWeeks.map((value, index) => { + return showDoublePerson[index] ? ( + + ) : ( + + ); + })} + + + )} + + + {/* ------------------ Apply yourself to the field ministry ------------------ */} + } + expanded={openAYF} + onToggle={handleToggleAYF} + > + {/* --- ayf_part1 --- */} + <> + + + + {t('tr_mainHall')} + + + + + {t('tr_ayfAssignment', { assignmentNumber: '1' })} + + {selectedWeeks.map((value, index) => { + return ( + + + {showAYFParts1Assistant[index] ? ( + + ) : ( + + )} + + ); + })} + + {classCount === 2 && ( + <> + + + + {t('tr_auxClassroom')} + + + + + {selectedWeeks.map((value, index) => { + return ( + showAYFParts1DoublePerson && ( + + + {showAYFParts1Assistant[index] ? ( + + ) : ( + + )} + + ) + ); + })} + + + )} + + + {/* --- ayf_part2 --- */} + <> + + + + {t('tr_mainHall')} + + + + + {t('tr_ayfAssignment', { assignmentNumber: '2' })} + + {selectedWeeks.map((value, index) => { + return ayfCount[index] > 1 ? ( + + + {showAYFParts2Assistant[index] ? ( + + ) : ( + + )} + + ) : ( + + ); + })} + + {classCount === 2 && ( + <> + + + + {t('tr_auxClassroom')} + + + + + {selectedWeeks.map((value, index) => { + return ayfCount[index] > 1 && showAYFParts2DoublePerson ? ( + + + {showAYFParts2Assistant[index] ? ( + + ) : ( + + )} + + ) : ( + + ); + })} + + + )} + + + {/* --- ayf_part3 --- */} + <> + + + + {t('tr_mainHall')} + + + + + {t('tr_ayfAssignment', { assignmentNumber: '3' })} + + {selectedWeeks.map((value, index) => { + return ayfCount[index] > 2 ? ( + + + {showAYFParts3Assistant[index] ? ( + + ) : ( + + )} + + ) : ( + + ); + })} + + {classCount === 2 && ( + <> + + + + {t('tr_auxClassroom')} + + + + + {selectedWeeks.map((value, index) => { + return ayfCount[index] > 2 && showAYFParts3DoublePerson ? ( + + + {showAYFParts3Assistant[index] ? ( + + ) : ( + + )} + + ) : ( + + ); + })} + + + )} + + + {/* --- ayf_part4 --- */} + {ayfCount.some((ayfAssign) => ayfAssign > 3) && ( + <> + + + + {t('tr_mainHall')} + + + + + {t('tr_ayfAssignment', { assignmentNumber: '4' })} + + {selectedWeeks.map((value, index) => { + return ayfCount[index] > 3 ? ( + + + {showAYFParts4Assistant[index] ? ( + + ) : ( + + )} + + ) : ( + + ); + })} + + {classCount === 2 && ( + <> + + + + {t('tr_auxClassroom')} + + + + + {selectedWeeks.map((value, index) => { + return ayfCount[index] > 3 && showAYFParts4DoublePerson ? ( + + + {showAYFParts4Assistant[index] ? ( + + ) : ( + + )} + + ) : ( + + ); + })} + + + )} + + )} + + {/* -------------------------- Living as christians -------------------------- */} + } + expanded={openLC} + onToggle={handleToggleLC} + > + {/* --- lc_part1 --- */} + <> + + + {t('tr_lcPartNum', { partNumber: '1' })} + + {selectedWeeks.map((value, index) => { + return !lcNoAssignParts1[index] ? ( + + ) : ( + + ); + })} + + + + {/* --- lc_part2 --- */} + {lcCount.some((lcRecordCount) => lcRecordCount > 1) && ( + <> + + + {t('tr_lcPartNum', { partNumber: '2' })} + + {selectedWeeks.map((value, index) => { + return lcCount[index] > 1 && !lcNoAssignParts2[index] ? ( + + ) : ( + + ); + })} + + + + )} + {/* --- lc_part3 --- */} + {hasCustomPart.some((customPart) => customPart) && ( + <> + + + {t('tr_lcPartNum', { partNumber: '2' })} + + {selectedWeeks.map((value, index) => { + return lcCount[index] > 1 && !lcNoAssignParts3[index] ? ( + + ) : ( + + ); + })} + + + + )} + {/* --- lc_cbs --- */} + <> + + + {t('tr_cbs')} + + {selectedWeeks.map((value, index) => { + return showDoublePerson[index] ? ( + <> + + + + + + + + ) : ( + + ); + })} + + + + {!closingPrayerAuto && ( + + + {t('tr_closingPrayer')} + + {selectedWeeks.map((value, index) => { + return ( + + ); + })} + + )} + + + ); +}; + +export default MonthlyView; diff --git a/src/features/meetings/monthly_view/useMonthlyView.tsx b/src/features/meetings/monthly_view/useMonthlyView.tsx new file mode 100644 index 0000000000..2673d7cfca --- /dev/null +++ b/src/features/meetings/monthly_view/useMonthlyView.tsx @@ -0,0 +1,393 @@ +import { AssignmentCode } from '@definition/assignment'; +import { Week } from '@definition/week_type'; +import useAppTranslation from '@hooks/useAppTranslation'; +import { + sourcesCheckAYFExplainBeliefsAssignment, + sourcesCheckLCAssignments, +} from '@services/app/sources'; +import { JWLangState, monthNamesState } from '@states/app'; +import { schedulesState } from '@states/schedules'; +import { + midweekMeetingClassCountState, + midweekMeetingClosingPrayerAutoAssign, + midweekMeetingOpeningPrayerAutoAssign, + userDataViewState, +} from '@states/settings'; +import { sourcesFormattedState, sourcesState } from '@states/sources'; +import { SetStateAction, useEffect, useState } from 'react'; +import { useRecoilValue } from 'recoil'; + +const useMonthlyView = () => { + const { t } = useAppTranslation(); + + const monthNames = useRecoilValue(monthNamesState); + const sourcesFormatted = useRecoilValue(sourcesFormattedState); + const sources = useRecoilValue(sourcesState); + const schedules = useRecoilValue(schedulesState); + const dataView = useRecoilValue(userDataViewState); + const classCount = useRecoilValue(midweekMeetingClassCountState); + const lang = useRecoilValue(JWLangState); + const openingPrayerAuto = useRecoilValue( + midweekMeetingOpeningPrayerAutoAssign + ); + const closingPrayerAuto = useRecoilValue( + midweekMeetingClosingPrayerAutoAssign + ); + + const getWeeksByMonthAndYear = (year: number, month: number) => { + let weeks = []; + sourcesFormatted.forEach((srcYear) => { + if (srcYear.value == year) { + weeks = srcYear.months.find( + (formattedMonth) => formattedMonth.value == month + ).weeks; + } + }); + return weeks; + }; + + const currentYear = new Date().getFullYear().toString(); + + const [selectedMonth, setSelectedMonth] = useState(new Date().getMonth()); + const [selectedWeeks, setSelectedWeeks] = useState( + getWeeksByMonthAndYear(parseInt(currentYear), selectedMonth) + ); + + const [weeksTypes, setWeeksTypes] = useState( + Array(selectedWeeks.length).fill(Week.NORMAL) + ); + const [ayfCount, setAyfCount] = useState(Array(selectedWeeks.length).fill(1)); + const [ayfParts1, setAyfParts1] = useState( + Array(selectedWeeks.length).fill(null) + ); + const [ayfParts2, setAyfParts2] = useState( + Array(selectedWeeks.length).fill(null) + ); + const [ayfParts3, setAyfParts3] = useState( + Array(selectedWeeks.length).fill(null) + ); + const [ayfParts4, setAyfParts4] = useState( + Array(selectedWeeks.length).fill(null) + ); + const [isTalkAYFParts1, setIsTalkAYFParts1] = useState( + Array(selectedWeeks.length).fill(false) + ); + const [isTalkAYFParts2, setIsTalkAYFParts2] = useState( + Array(selectedWeeks.length).fill(false) + ); + const [isTalkAYFParts3, setIsTalkAYFParts3] = useState( + Array(selectedWeeks.length).fill(false) + ); + const [isTalkAYFParts4, setIsTalkAYFParts4] = useState( + Array(selectedWeeks.length).fill(false) + ); + const [lcCount, setLcCount] = useState(Array(selectedWeeks.length).fill(1)); + const [customPartEnabled, setCustomPartEnabled] = useState( + Array(selectedWeeks.length).fill(true) + ); + const [lcNoAssignParts1, setLcNoAssignParts1] = useState( + Array(selectedWeeks.length).fill(false) + ); + const [lcNoAssignParts2, setLcNoAssignParts2] = useState( + Array(selectedWeeks.length).fill(false) + ); + const [lcNoAssignParts3, setLcNoAssignParts3] = useState( + Array(selectedWeeks.length).fill(false) + ); + const [isOverwriteLCParts1, setIsOverwriteLCParts1] = useState( + Array(selectedWeeks.length).fill(false) + ); + const [isOverwriteLCParts2, setIsOverwriteLCParts2] = useState( + Array(selectedWeeks.length).fill(false) + ); + const [hasCustomPart, setHasCustomPart] = useState( + Array(selectedWeeks.length).fill(false) + ); + + const [openTGW, setOpenTGW] = useState(true); + const [openAYF, setOpenAYF] = useState(true); + const [openLC, setOpenLC] = useState(true); + + const monthName = monthNames[selectedMonth]; + + const getWeekLocale = (date, monthName) => { + return t('tr_longDateNoYearLocale', { + date, + month: monthName, + }); + }; + + const showDoublePerson = weeksTypes.map((week) => { + return week.value !== Week.CO_VISIT; + }); + + const showAYFPartAssistant = ( + ayfPart: AssignmentCode[], + isTalkAYFPart: unknown[] + ) => { + return ayfPart.map((value, index) => { + return ( + (value !== AssignmentCode.MM_ExplainingBeliefs && + value !== AssignmentCode.MM_Talk && + value !== AssignmentCode.MM_Discussion) || + (value === AssignmentCode.MM_ExplainingBeliefs && !isTalkAYFPart[index]) + ); + }); + }; + + const showAYFPartDoublePerson = (ayfPart: AssignmentCode[]) => { + return ayfPart.map((value, index) => { + return showDoublePerson[index] && value !== AssignmentCode.MM_Discussion; + }); + }; + + const showAYFParts1Assistant = showAYFPartAssistant( + ayfParts1, + isTalkAYFParts1 + ); + const showAYFParts2Assistant = showAYFPartAssistant( + ayfParts2, + isTalkAYFParts2 + ); + const showAYFParts3Assistant = showAYFPartAssistant( + ayfParts3, + isTalkAYFParts3 + ); + const showAYFParts4Assistant = showAYFPartAssistant( + ayfParts4, + isTalkAYFParts4 + ); + + const showAYFParts1DoublePerson = showAYFPartDoublePerson(ayfParts1); + const showAYFParts2DoublePerson = showAYFPartDoublePerson(ayfParts2); + const showAYFParts3DoublePerson = showAYFPartDoublePerson(ayfParts3); + const showAYFParts4DoublePerson = showAYFPartDoublePerson(ayfParts4); + + const handleToggleTGW = () => setOpenTGW((prev) => !prev); + + const handleToggleAYF = () => setOpenAYF((prev) => !prev); + + const handleToggleLC = () => setOpenLC((prev) => !prev); + + const changeValueInArrayState = ( + func: (value: SetStateAction) => void, + index: number, + value: unknown + ) => { + func((prev) => { + const newTmpArray = [...prev]; + newTmpArray[index] = value; + return newTmpArray; + }); + }; + + useEffect(() => { + setSelectedWeeks( + getWeeksByMonthAndYear(parseInt(currentYear), selectedMonth) + ); + }, [selectedMonth]); + + useEffect(() => { + selectedWeeks.forEach((value, index) => { + const source = sources.find((record) => record.weekOf === value); + const schedule = schedules.find((record) => record.weekOf === value); + + const weekType = schedule.midweek_meeting.week_type.find( + (record) => record.type === dataView + ); + + changeValueInArrayState(setWeeksTypes, index, weekType); + + changeValueInArrayState( + setAyfCount, + index, + source.midweek_meeting.ayf_count[lang] + ); + + changeValueInArrayState( + setAyfParts1, + index, + source.midweek_meeting.ayf_part1.type[lang] + ); + + if ( + source.midweek_meeting.ayf_part1.type[lang] === + AssignmentCode.MM_ExplainingBeliefs + ) { + changeValueInArrayState( + setIsTalkAYFParts1, + index, + sourcesCheckAYFExplainBeliefsAssignment( + source.midweek_meeting.ayf_part1.src[lang] + ) + ); + } + + changeValueInArrayState( + setAyfParts2, + index, + source.midweek_meeting.ayf_part2.type[lang] + ); + + if ( + source.midweek_meeting.ayf_part2.type[lang] === + AssignmentCode.MM_ExplainingBeliefs + ) { + changeValueInArrayState( + setIsTalkAYFParts2, + index, + sourcesCheckAYFExplainBeliefsAssignment( + source.midweek_meeting.ayf_part2.src[lang] + ) + ); + } + + changeValueInArrayState( + setAyfParts3, + index, + source.midweek_meeting.ayf_part3.type[lang] + ); + + if ( + source.midweek_meeting.ayf_part3.type[lang] === + AssignmentCode.MM_ExplainingBeliefs + ) { + changeValueInArrayState( + setIsTalkAYFParts3, + index, + sourcesCheckAYFExplainBeliefsAssignment( + source.midweek_meeting.ayf_part3.src[lang] + ) + ); + } + + changeValueInArrayState( + setAyfParts4, + index, + source.midweek_meeting.ayf_part4.type[lang] + ); + + if ( + source.midweek_meeting.ayf_part4.type[lang] === + AssignmentCode.MM_ExplainingBeliefs + ) { + changeValueInArrayState( + setIsTalkAYFParts4, + index, + sourcesCheckAYFExplainBeliefsAssignment( + source.midweek_meeting.ayf_part4.src[lang] + ) + ); + } + + const lcCountOverride = + source.midweek_meeting.lc_count.override.find( + (record) => record.type === dataView + )?.value || 0; + const lcCount = source.midweek_meeting.lc_count.default[lang]; + changeValueInArrayState(setLcCount, index, lcCount); + changeValueInArrayState( + setCustomPartEnabled, + index, + lcCountOverride < lcCount + 1 + ); + changeValueInArrayState( + setHasCustomPart, + index, + lcCountOverride > lcCount + ); + + const lc1SrcOverride = + source.midweek_meeting.lc_part1.title.override.find( + (record) => record.type === dataView + )?.value; + const lc1SrcDefault = source.midweek_meeting.lc_part1.title.default[lang]; + const lc1Src = + lc1SrcOverride?.length > 0 ? lc1SrcOverride : lc1SrcDefault; + + changeValueInArrayState( + setIsOverwriteLCParts1, + index, + lc1SrcOverride?.length > 0 + ); + + if (lc1Src?.length > 0) { + const noAssign = sourcesCheckLCAssignments(lc1Src); + changeValueInArrayState(setLcNoAssignParts1, index, noAssign); + } + + const lc2SrcOverride = + source.midweek_meeting.lc_part2.title.override.find( + (record) => record.type === dataView + )?.value; + const lc2SrcDefault = source.midweek_meeting.lc_part2.title.default[lang]; + const lc2Src = + lc2SrcOverride?.length > 0 ? lc2SrcOverride : lc2SrcDefault; + + changeValueInArrayState( + setIsOverwriteLCParts2, + index, + lc2SrcOverride?.length > 0 + ); + + if (lc2Src?.length > 0) { + const noAssign = sourcesCheckLCAssignments(lc2Src); + changeValueInArrayState(setLcNoAssignParts2, index, noAssign); + } + + const lc3Src = + source.midweek_meeting.lc_part3.title.find( + (record) => record.type === dataView + )?.value || ''; + + if (lc3Src.length > 0) { + const noAssign = sourcesCheckLCAssignments(lc3Src); + changeValueInArrayState(setLcNoAssignParts3, index, noAssign); + } + }); + }, [selectedWeeks, schedules, sources, lang, dataView, selectedMonth]); + + return { + currentYear, + monthName, + getWeekLocale, + selectedMonth, + setSelectedMonth, + selectedWeeks, + weeksTypes, + openingPrayerAuto, + closingPrayerAuto, + classCount, + ayfCount, + ayfParts1, + ayfParts2, + ayfParts3, + ayfParts4, + handleToggleAYF, + handleToggleLC, + handleToggleTGW, + lcNoAssignParts1, + lcNoAssignParts2, + lcNoAssignParts3, + customPartEnabled, + openAYF, + openLC, + openTGW, + monthNames, + showDoublePerson, + showAYFParts1Assistant, + showAYFParts1DoublePerson, + showAYFParts2Assistant, + showAYFParts2DoublePerson, + showAYFParts3Assistant, + showAYFParts3DoublePerson, + showAYFParts4Assistant, + showAYFParts4DoublePerson, + isOverwriteLCParts1, + isOverwriteLCParts2, + hasCustomPart, + lcCount, + }; +}; + +export default useMonthlyView; diff --git a/src/features/meetings/monthly_view/week_badge/index.tsx b/src/features/meetings/monthly_view/week_badge/index.tsx new file mode 100644 index 0000000000..d35b7f8758 --- /dev/null +++ b/src/features/meetings/monthly_view/week_badge/index.tsx @@ -0,0 +1,27 @@ +import Typography from '@components/typography'; +import { Box } from '@mui/material'; +import { WeekBadgeType } from './index.types'; + +const WeekBadge = (props: WeekBadgeType) => { + return ( + + + {props.text} + + + ); +}; + +export default WeekBadge; diff --git a/src/features/meetings/monthly_view/week_badge/index.types.tsx b/src/features/meetings/monthly_view/week_badge/index.types.tsx new file mode 100644 index 0000000000..2f9827138b --- /dev/null +++ b/src/features/meetings/monthly_view/week_badge/index.types.tsx @@ -0,0 +1,3 @@ +export type WeekBadgeType = { + text: string; +}; diff --git a/src/features/meetings/monthly_view/week_hoverbox/index.tsx b/src/features/meetings/monthly_view/week_hoverbox/index.tsx new file mode 100644 index 0000000000..a9ce8392cc --- /dev/null +++ b/src/features/meetings/monthly_view/week_hoverbox/index.tsx @@ -0,0 +1,64 @@ +import { Box, Popper } from '@mui/material'; +import React, { useRef, useState } from 'react'; +import { WeekHoverBoxType } from './index.types'; +import MeetingPart from '@features/meetings/meeting_part'; + +const WeekHoverBox = (props: WeekHoverBoxType) => { + const [hoverTimeout, setHoverTimeout] = useState(null); + const [anchorEl, setAnchorEl] = useState(null); + const [open, setOpen] = useState(false); + const boxRef = useRef(null); + + const handleMouseEnter = () => { + const timeout = setTimeout(() => { + setAnchorEl(boxRef.current); + setOpen(true); + }, 3000); // 3 seconds delay + setHoverTimeout(timeout); + }; + + const handleMouseLeave = () => { + if (hoverTimeout) { + clearTimeout(hoverTimeout); + setHoverTimeout(null); + } + setOpen(false); // Close the Popper when the mouse leaves the box + }; + + return ( + <> + + {props.children} + + + + + + + + + ); +}; + +export default WeekHoverBox; diff --git a/src/features/meetings/monthly_view/week_hoverbox/index.types.tsx b/src/features/meetings/monthly_view/week_hoverbox/index.types.tsx new file mode 100644 index 0000000000..dbe81cc120 --- /dev/null +++ b/src/features/meetings/monthly_view/week_hoverbox/index.types.tsx @@ -0,0 +1,8 @@ +import { SourceAssignmentType } from '@definition/sources'; +import { ReactNode } from 'react'; + +export type WeekHoverBoxType = { + children: ReactNode; + type: SourceAssignmentType; + week: string; +}; diff --git a/src/locales/en/meetings.json b/src/locales/en/meetings.json index 84a6a5a734..f2127f2117 100644 --- a/src/locales/en/meetings.json +++ b/src/locales/en/meetings.json @@ -145,5 +145,9 @@ "tr_deliveredBy": "Delivers: {{ name }}", "tr_toCurrentWeek": "To current week", "tr_recordAttendance": "Attendance records", - "tr_assignmentPreferences": "Assignment preferences" + "tr_assignmentPreferences": "Assignment preferences", + "tr_weeklyView": "Weekly view", + "tr_monthlyView": "Monthly view", + "tr_ayfAssignment": "Assignment {{ assignmentNumber }}", + "tr_lcPartNum": "Part {{ partNumber }}" } diff --git a/src/pages/meetings/midweek/index.tsx b/src/pages/meetings/midweek/index.tsx index 36ad1360f1..d4480543ba 100644 --- a/src/pages/meetings/midweek/index.tsx +++ b/src/pages/meetings/midweek/index.tsx @@ -1,7 +1,14 @@ import { Box } from '@mui/material'; -import { IconGenerate, IconPrint, IconPublish } from '@components/icons'; +import { + IconCalendarMonth, + IconCalendarWeek, + IconGenerate, + IconPrint, + IconPublish, +} from '@components/icons'; import { MidweekExport, + MonthlyView, ScheduleAutofillDialog, WeekSelector, } from '@features/index'; @@ -33,6 +40,9 @@ const MidweekMeeting = () => { handleCloseQuickSettings, handleOpenQuickSettings, quickSettingsOpen, + openWeekView, + handleOpenWeekView, + handleCloseWeekView, } = useMidweek(); return ( @@ -76,6 +86,24 @@ const MidweekMeeting = () => { buttons={ hasWeeks && ( <> + {openWeekView && desktopUp ? ( + + ) : ( + + )} + - ) : ( - - )} + {openWeekView + ? desktopUp && ( + + ) + : desktopUp && ( + + )}