more time report screen width responsiveness work

client/src/components/MainApp/JobPage/TimePage/FullReport/Table/MediumScreen/Head/index.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import getStyle from './style';
+import { getTimezoneAbbreviation } from '../utilities';
+
+function Thead({
+  hasTimes,
+  primaryTimezone,
+  primaryTzLabel,
+  date,
+  hasEarningCols,
+  hasSecondaryTzTimes,
+  colRefs,
+  colWidths,
+  style: styleProp
+}) {
+
+  const defaultTimeColLabel = hasTimes && (
+    'Times' + (hasSecondaryTzTimes ? ` (${getTimezoneAbbreviation(primaryTimezone, date)})` : '')
+  );
+
+  const style = getStyle(styleProp, colWidths);
+
+  return (
+    <thead>
+      <tr style={style.tr}>
+        <th style={style.timesTh} ref={colRefs.times}>
+          {primaryTzLabel || defaultTimeColLabel}
+        </th>
+        <th style={style.durationTh} ref={colRefs.duration}>
+          Hours Worked
+        </th>
+        {hasEarningCols && (
+          <>
+            <th style={style.payRateTh} ref={colRefs.payRate}>
+              Pay Rate
+            </th>
+            <th style={style.amountEarnedTh} ref={colRefs.amountEarned}>
+              Amount Earned
+            </th>
+          </> 
+        )}
+      </tr>
+    </thead>
+  );
+}
+
+export default Thead;

client/src/components/MainApp/JobPage/TimePage/FullReport/Table/MediumScreen/Head/style.js

@@ -0,0 +1,52 @@
+import { labelWeight, contentAreaDividerColor, cellXPadding, cellYPadding } from '../style';
+
+const bottomBorderWidth = '1.5px';
+
+export default function getStyle(styleProp, colWidths = {}) {
+  const th = {
+    fontWeight: labelWeight,
+    border: `${bottomBorderWidth} solid ${contentAreaDividerColor}`,
+    borderWidth: `0 0 ${bottomBorderWidth}`,
+    padding: `${cellYPadding} ${cellXPadding}`
+  };
+
+  const numAmountTh = {
+    ...th,
+    textAlign: 'right'
+  };
+
+  return {
+    tr: {
+      ...styleProp
+    },
+    timesTh: {
+      ...th,
+      textAlign: 'center',
+      width: colWidths.times
+    },
+    firstColNoTimes: {
+      ...th,
+      textAlign: 'right',
+      fontWeight: labelWeight,
+      width: colWidths.times
+    },
+    durationTh: {
+      ...numAmountTh,
+      width: colWidths.duration
+    },
+    payRateTh: {
+      ...numAmountTh,
+      width: colWidths.payRate
+    },
+    amountEarnedTh: {
+      ...numAmountTh,
+      width: colWidths.amountEarned
+    },
+    secondaryTzTimesTh: {
+      ...th,
+      textAlign: 'center',
+      width: colWidths.secondaryTzTimes
+    }
+  };
+};
+

client/src/components/MainApp/JobPage/TimePage/FullReport/Table/MediumScreen/Row/index.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+  formatDurationForReportTable,
+  formatAmountEarnedForReportTable,
+  formatPayRateForReportTable
+} from '../utilities';
+import getStyle from './style';
+import Times from '../../Times';
+
+function Row({
+  hasTimes,
+  hasSecondTzCol,
+  hasSecondaryTzTimes,
+  hasEarningCols,
+  rowData: {
+    times: {
+      sessionTimezone: sessTzTimes,
+      officialTimezone: jobTzTimes
+    } = {},
+    rowLabel,
+    duration,
+    amountEarned,
+    payRate,
+    // _id, // segment id; only defined for rows that represent segments; not currently needed.
+    style: styleProp
+  },
+  isFirstInGroup,
+  date,
+  colWidths
+}) {
+
+  const commonTimesAttrs = { dayDate: date };
+
+  const style = getStyle(styleProp, colWidths, isFirstInGroup);
+
+  return (
+    <tr style={style.tr}>
+      <td style={hasTimes ? style.timesTd : style.firstColNoTimes}>
+        {(hasTimes && hasSecondaryTzTimes && (
+          <Times {...sessTzTimes} {...commonTimesAttrs} />
+        )) ||
+        (hasTimes && hasSecondaryTzTimes && (
+          <Times {...sessTzTimes} {...commonTimesAttrs} />
+        )) ||
+        (rowLabel && (
+          <>{rowLabel}:</>
+        ))}
+      </td>
+      <td style={style.durationTd}>
+        {formatDurationForReportTable(duration)}
+      </td>
+      {hasEarningCols && (
+        amountEarned ? (
+          <>
+            <td style={style.payRateTd}>
+              {formatPayRateForReportTable(payRate)}
+            </td>
+            <td style={style.amountEarnedTd}>
+              {formatAmountEarnedForReportTable(amountEarned)}
+            </td>
+          </>
+        ) : (
+          <>
+            <td style={style.payRateTdUnpaid}>
+              {payRate === null && (
+                <> &mdash; </>
+              )}
+            </td>
+            <td style={style.amountEarnedTdUnpaid}>
+              {amountEarned === null && (
+                <> &mdash; </>
+              )} 
+            </td>
+          </>
+        )
+      )}
+      {hasSecondTzCol && (
+        <td style={style.secondaryTzTimes}>
+          {hasTimes && hasSecondaryTzTimes && (
+            <Times {...jobTzTimes} {...commonTimesAttrs} />
+          )}
+        </td>
+      )}
+    </tr>
+  );
+}
+
+export default Row;

client/src/components/MainApp/JobPage/TimePage/FullReport/Table/MediumScreen/Row/style.js

@@ -0,0 +1,58 @@
+import { labelWeight, contentAreaDividerColor, cellXPadding, cellYPadding } from '../style';
+
+export default function getStyle(styleProp, colWidths = {}, isFirstRowInGroup) {
+
+  const borderTopPxWidth = isFirstRowInGroup ? 1.5 : 0.7;
+  const td = {
+    borderColor: contentAreaDividerColor,
+    borderWidth: `${borderTopPxWidth}px 0 0`,
+    padding: `${cellYPadding} ${cellXPadding}`
+  };
+  const numAmountTd = {
+    ...td,
+    textAlign: 'right'
+  };
+
+  return {
+    tr: {
+      ...styleProp
+    },
+    timesTd: {
+      ...td,
+      textAlign: 'center',
+      width: colWidths.times
+    },
+    firstColNoTimes: {
+      ...td,
+      textAlign: 'right',
+      fontWeight: labelWeight,
+      width: colWidths.times
+    },
+    durationTd: {
+      ...numAmountTd,
+      width: colWidths.duration
+    },
+    payRateTd: {
+      ...numAmountTd,
+      width: colWidths.payRate
+    },
+    amountEarnedTd: {
+      ...numAmountTd,
+      width: colWidths.amountEarned
+    },
+    payRateTdUnpaid: {
+      ...numAmountTd,
+      paddingRight: `calc(${cellXPadding} + 1.5em)`,
+      width: colWidths.payRate
+    },
+    amountEarnedTdUnpaid: {
+      ...numAmountTd,
+      paddingRight: `calc(${cellXPadding} + 0.75em)`,
+      width: colWidths.amountEarned
+    },
+    secondaryTzTimes: {
+      ...td,
+      width: colWidths.secondaryTzTimes
+    },
+  };
+};

client/src/components/MainApp/JobPage/TimePage/FullReport/Table/MediumScreen/RowsGroup/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Row from '../Row';
+
+function RowsGroup({
+  rows,
+  ...otherProps
+}) {
+
+  return rows.map(
+    (rowData, index) => (
+      <Row
+        key={index}
+        {...{
+          rowData,
+          ...otherProps
+        }}
+        isFirstInGroup={index === 0}
+      />
+    )
+  );
+}
+
+export default RowsGroup;

client/src/components/MainApp/JobPage/TimePage/FullReport/Table/MediumScreen/index.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import getStyle from './style';
+import Thead from './Head';
+import RowsGroup from './RowsGroup';
+
+function Table({
+  rowGroups,
+  hasTimes,
+  hasSecondTzCol,
+  hasEarningCols,
+  date,
+  style: styleProp,
+  hasSecondaryTzTimes: hasSecondTzTimesProp,
+  primaryTimezone,
+  secondaryTimezone,
+  hasSecondaryTzTimes,
+  colWidths,
+  colRefs
+}) {
+
+  const commonAttrs = {
+    date,
+    hasEarningCols,
+    hasSecondTzCol,
+    colWidths,
+  };
+
+  // const style = getStyle(styleProp, colWidths);
+
+  return (
+    <>
+      <Thead
+        {...{
+          ...commonAttrs,
+          hasTimes,
+          primaryTimezone,
+          secondaryTimezone,
+          hasSecondaryTzTimes,
+          colRefs,
+        }}
+      />
+      <tbody>
+        {rowGroups.map(
+          ({ rows, hasTimes: groupHasTimes = hasTimes }, index) => (
+            <RowsGroup
+              key={index}
+              {...commonAttrs}
+              {...{ rows }}
+              hasTimes={groupHasTimes}
+              hasSecondaryTzTimes={groupHasTimes && hasSecondaryTzTimes}
+            />
+          )
+        )}
+      </tbody>
+    </>
+  );
+}
+
+export default Table;

client/src/components/MainApp/JobPage/TimePage/FullReport/Table/MediumScreen/style.js

@@ -0,0 +1,5 @@
+export * from '../style';
+
+export default function getStyle() {
+  return {};
+};

client/src/components/MainApp/JobPage/TimePage/FullReport/Table/MediumScreen/utilities/index.js

@@ -0,0 +1 @@
+export * from '../../utilities';

client/src/components/MainApp/JobPage/TimePage/FullReport/Table/WideScreen/Row/Times/index.js → client/src/components/MainApp/JobPage/TimePage/FullReport/Table/Times/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import getStyle, { getDateStyle } from './style';
-import { formatSegmentTimesForReportTable } from '../../utilities';
+import { formatSegmentTimesForReportTable } from '../utilities';
 
 function Times({
   dayDate,
@@ -15,9 +15,6 @@ function Times({
 
   return (
     <>
-      {/* <span style={style.startTime}>
-        {startTime.time}<DateDisplay date={startTime.date} />
-      </span> */}
       <TimeAndDateDisplay timeInfo={startTime} style={style.startTime} />
       &nbsp;&ndash;&nbsp;
       <TimeAndDateDisplay timeInfo={endTime} style={style.endTime} />

client/src/components/MainApp/JobPage/TimePage/FullReport/Table/WideScreen/Row/index.js

@@ -5,7 +5,7 @@ import {
   formatPayRateForReportTable
 } from '../utilities';
 import getStyle from './style';
-import Times from './Times';
+import Times from '../../Times';
 
 function Row({
   hasTimes,