From eb331e6a381f6f5715aaa41ee0ca692c9ed2b64d Mon Sep 17 00:00:00 2001 From: Jimmy Zhen Date: Tue, 3 Sep 2024 13:59:03 -0700 Subject: [PATCH] Implement preview UIs for out-of-office section --- components/PreviewEmail.js | 73 +++++++------------ .../preview_components/previewOutOfOffice.js | 56 ++++++++++++++ 2 files changed, 84 insertions(+), 45 deletions(-) create mode 100644 components/preview_components/previewOutOfOffice.js diff --git a/components/PreviewEmail.js b/components/PreviewEmail.js index 547ae14..39ba95d 100644 --- a/components/PreviewEmail.js +++ b/components/PreviewEmail.js @@ -2,6 +2,7 @@ import Link from 'next/link'; import dayjs from 'dayjs'; import PreviewEventWeekday from './preview_components/previewEventWeekday'; import PreviewOnCallSchedule from './preview_components/previewOnCallSchedule'; +import PreviewOutOfOffice from './preview_components/previewOutOfOffice'; import styles from './PreviewEmail.module.css'; const weekdays = [ @@ -38,7 +39,6 @@ export default function PreviewEmail({ eventWeek }) { for (let i = 0; i < 7; i++) { nutritionists.push(eventInfo[`nutritionist_nutritionist_${i}_value`]); } - // parse JSON array of arrays nutritionists.forEach((nutritionist, index) => { nutritionists[index] = JSON.parse(nutritionist); @@ -47,6 +47,29 @@ export default function PreviewEmail({ eventWeek }) { return nutritionists; } + // collect all out-of-office dates in an array + function setOutOfOfficeDates() { + const outOfOfficeDDates = []; + for (let i = 0; i < 5; i++) { + outOfOfficeDDates.push(eventInfo[`out_of_office_date_${i}`]); + } + return outOfOfficeDDates; + } + + // collect all out-of-office names arrays in an array + function setOutOfOffcieNames() { + const outOfOffcieNames = []; + for (let i = 0; i < 5; i++) { + outOfOffcieNames.push(eventInfo[`out_of_office_anyone_${i}_value`]); + } + // parse JSON array of arrays + outOfOffcieNames.forEach((name, index) => { + outOfOffcieNames[index] = JSON.parse(name); + }); + + return outOfOffcieNames; + } + return (
{/* == Header Section == */} @@ -359,50 +382,10 @@ export default function PreviewEmail({ eventWeek }) { - - - - - - - - - - -
-
- June 26 - June 30 -
- - - - -
- Brooke (leave) -
-
-
- June 26 -
- - - - -
- Wesley -
-
-
- June 30 -
- - - - -
- Devon -
-
+ diff --git a/components/preview_components/previewOutOfOffice.js b/components/preview_components/previewOutOfOffice.js new file mode 100644 index 0000000..156e566 --- /dev/null +++ b/components/preview_components/previewOutOfOffice.js @@ -0,0 +1,56 @@ +import React, { useState } from 'react'; +import dayjs from 'dayjs'; + +function PreviewOutOfOffice({ dates, names }) { + // merge 2 arrays of equal length into an array of objects + function mergeArrays(arr1, arr2, key1 = 'key1', key2 = 'key2') { + if (arr1.length !== arr2.length) { + throw new Error('Arrays must be of equal length'); + } + + const trimmedArr1 = arr1.filter((value) => value.length); + + return trimmedArr1.map((value, index) => ({ + [key1]: value, + [key2]: arr2[index] + })); + } + + let individuals = []; + names = names.map((item) => { + return item.map((individual) => { + return `${individual.firstname} ${individual.lastname}`; + }).join(', '); + }); + + individuals = mergeArrays(dates, names, 'date', 'name'); + + return ( + + + {individuals.map((individual, index) => { + return ( + + + + ); + })} + +
+
+ {individual.date} +
+ + + + + + +
+ {individual.name} +
+
+ ) +} + +export default PreviewOutOfOffice;