Skip to content

Commit

Permalink
Implement preview UIs for out-of-office section
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimmyzhen
jimmyzhen committed Sep 3, 2024
1 parent 2d05eed commit eb331e6
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 45 deletions.
73 changes: 28 additions & 45 deletions components/PreviewEmail.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [
Expand Down Expand Up @@ -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);
Expand All @@ -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 (
<div className={styles['preview-container']}>
{/* == Header Section == */}
Expand Down Expand Up @@ -359,50 +382,10 @@ export default function PreviewEmail({ eventWeek }) {
</tr>
<tr>
<td className="em_section_table" align="left" valign="top">
<table align="left" width="100%" border={0} cellSpacing={0} cellPadding={0}>
<tbody><tr>
<td align="left" valign="top" className="em_section_table_ooo_by_day">
<div className="em_section_table_event_day">
<i className="fa-solid fa-calendar-days em_section_table_event_day_icon" />June 26 - June 30
</div>
<table align="left" width="100%" border={0} cellSpacing={0} cellPadding={0}>
<tbody><tr>
<td align="left" valign="top" className="em_section_table_event_time">
Brooke (leave)
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="left" valign="top" className="em_section_table_ooo_by_day">
<div className="em_section_table_event_day">
<i className="fa-solid fa-calendar-days em_section_table_event_day_icon" />June 26
</div>
<table align="left" width="100%" border={0} cellSpacing={0} cellPadding={0}>
<tbody><tr>
<td align="left" valign="top" className="em_section_table_event_time">
Wesley
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="left" valign="top" className="em_section_table_ooo_by_day">
<div className="em_section_table_event_day">
<i className="fa-solid fa-calendar-days em_section_table_event_day_icon" />June 30
</div>
<table align="left" width="100%" border={0} cellSpacing={0} cellPadding={0}>
<tbody><tr>
<td align="left" valign="top" className="em_section_table_event_time">
Devon
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<PreviewOutOfOffice
dates={setOutOfOfficeDates()}
names={setOutOfOffcieNames()}
/>
</td>
</tr>
</tbody></table>
Expand Down
56 changes: 56 additions & 0 deletions components/preview_components/previewOutOfOffice.js
View file
Original file line number Diff line number Diff line change
@@ -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 (
<table align="left" width="100%" border={0} cellSpacing={0} cellPadding={0}>
<tbody>
{individuals.map((individual, index) => {
return (
<tr key={index}>
<td align="left" valign="top" className="em_section_table_ooo_by_day">
<div className="em_section_table_event_day">
<i className="fa-solid fa-calendar-days em_section_table_event_day_icon" />{individual.date}
</div>
<table align="left" width="100%" border={0} cellSpacing={0} cellPadding={0}>
<tbody>
<tr>
<td align="left" valign="top" className="em_section_table_event_time">
{individual.name}
</td>
</tr>
</tbody>
</table>
</td>
</tr>
);
})}
</tbody>
</table>
)
}

export default PreviewOutOfOffice;

0 comments on commit eb331e6

Please sign in to comment.