Merge pull request #24 from topcoder-platform/feature/work-periods-part-2

Feature/work periods part 2

Author: maxceem

src/components/Checkbox/styles.module.scss

@@ -56,6 +56,7 @@ input.checkbox {
   border-radius: 3px;
   line-height: 18px;
   user-select: none;
+  background-color: #fff;
   color: transparent;
 
   &::before {

src/components/ProjectName/index.jsx

@@ -1,18 +1,21 @@
-import React, { useContext, useEffect } from "react";
+import React, { memo, useContext, useEffect } from "react";
 import PT from "prop-types";
 import cn from "classnames";
 import { ProjectNameContext } from "components/ProjectNameContextProvider";
 import styles from "./styles.module.scss";
 
 const ProjectName = ({ className, projectId }) => {
   const [getName, fetchName] = useContext(ProjectNameContext);
+
   useEffect(() => {
     fetchName(projectId);
   }, [fetchName, projectId]);
 
+  const projectName = getName(projectId) || projectId;
+
   return (
-    <span className={cn(styles.container, className)}>
-      {getName(projectId) || projectId}
+    <span className={cn(styles.container, className)} title={projectName}>
+      {projectName}
     </span>
   );
 };
@@ -22,4 +25,4 @@ ProjectName.propTypes = {
   projectId: PT.number.isRequired,
 };
 
-export default ProjectName;
+export default memo(ProjectName);

src/components/ProjectName/styles.module.scss

@@ -1,5 +1,10 @@
 @import "styles/mixins";
 
 .container {
+  display: block;
+  max-width: 20em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   @include roboto-medium;
 }

src/components/SearchHandleField/styles.module.scss

@@ -2,6 +2,7 @@
 @import "styles/mixins";
 
 .container {
+  z-index: 3;
   position: relative;
   display: flex;
   align-items: center;

src/routes/WorkPeriods/components/PeriodDetails/index.jsx

@@ -12,7 +12,6 @@ import {
   hideWorkPeriodDetails,
   setBillingAccount,
   setDetailsHidePastPeriods,
-  // setDetailsLockWorkingDays,
 } from "store/actions/workPeriods";
 import styles from "./styles.module.scss";
 import { updateWorkPeriodBillingAccount } from "store/thunks/workPeriods";
@@ -42,7 +41,6 @@ const PeriodDetails = ({ className, details, isDisabled, isFailed }) => {
     periodsVisible,
     periodsIsLoading,
     hidePastPeriods,
-    // lockWorkingDays,
   } = details;
 
   const onHideDetailsBtnClick = useCallback(() => {
@@ -56,13 +54,6 @@ const PeriodDetails = ({ className, details, isDisabled, isFailed }) => {
     [dispatch, periodId]
   );
 
-  // const onChangeLockWorkingDays = useCallback(
-  //   (lock) => {
-  //     dispatch(setDetailsLockWorkingDays(periodId, lock));
-  //   },
-  //   [dispatch, periodId]
-  // );
-
   const onChangeBillingAccount = useCallback(
     (value) => {
       dispatch(setBillingAccount(periodId, value));
@@ -113,16 +104,6 @@ const PeriodDetails = ({ className, details, isDisabled, isFailed }) => {
                 </div>
               </div>
             </div>
-            {/* <div className={styles.lockWorkingDaysSection}>
-              <div className={styles.sectionLabel}>Lock Working Days</div>
-              <Toggle
-                size="small"
-                className={styles.lockWorkingDaysToggle}
-                name={`rb_lck_wd_${periodId}`}
-                onChange={onChangeLockWorkingDays}
-                isOn={lockWorkingDays}
-              />
-            </div> */}
             <div className={styles.billingAccountSection}>
               <div className={styles.sectionLabel}>Billing Account</div>
               <SelectField
@@ -188,7 +169,7 @@ PeriodDetails.propTypes = {
     billingAccounts: PT.arrayOf(
       PT.shape({
         label: PT.string.isRequired,
-        value: PT.string.isRequired,
+        value: PT.number.isRequired,
       })
     ),
     billingAccountsError: PT.string,
@@ -197,7 +178,6 @@ PeriodDetails.propTypes = {
     periodsVisible: PT.array.isRequired,
     periodsIsLoading: PT.bool.isRequired,
     hidePastPeriods: PT.bool.isRequired,
-    lockWorkingDays: PT.bool.isRequired,
   }).isRequired,
   isDisabled: PT.bool.isRequired,
   isFailed: PT.bool.isRequired,

src/routes/WorkPeriods/components/PeriodDetails/styles.module.scss

@@ -69,14 +69,6 @@
   color: #e90c5a;
 }
 
-.lockWorkingDaysSection {
-  margin-top: 19px;
-}
-
-.lockWorkingDaysToggle {
-  margin-top: 6px;
-}
-
 .billingAccountSection {
   margin-top: 13px;
 }

src/routes/WorkPeriods/components/PeriodItem/index.jsx

@@ -166,16 +166,12 @@ PeriodItem.propTypes = {
     billingAccountId: PT.number.isRequired,
     billingAccounts: PT.arrayOf(
       PT.shape({
-        value: PT.string.isRequired,
         label: PT.string.isRequired,
+        value: PT.number.isRequired,
       })
-    ),
+    ).isRequired,
     billingAccountsIsLoading: PT.bool.isRequired,
-    periods: PT.arrayOf(
-      PT.shape({
-        id: PT.string.isRequired,
-      })
-    ),
+    periods: PT.array.isRequired,
     periodsIsLoading: PT.bool.isRequired,
   }),
 };

src/routes/WorkPeriods/components/PeriodsHistoryItem/index.jsx

@@ -105,7 +105,7 @@ PeriodsHistoryItem.propTypes = {
     endDate: PT.oneOfType([PT.string, PT.number]).isRequired,
     paymentStatus: PT.string.isRequired,
     payments: PT.array,
-    weeklyRate: PT.number.isRequired,
+    weeklyRate: PT.number,
     workingDays: PT.number.isRequired,
   }).isRequired,
   currentStartDate: PT.oneOfType([PT.string, PT.number, PT.object]).isRequired,

src/routes/WorkPeriods/components/PeriodsSelectionMessage/index.jsx

@@ -29,25 +29,20 @@ const PeriodsSelectionMessage = ({ className }) => {
     dispatch(toggleWorkingPeriodsAll());
   }, [dispatch]);
 
-  const infoText = isSelectedAll
-    ? `All ${totalCount} Records are selected. `
-    : `All ${pageSize} Records on this page are selected. `;
-  const btnText = isSelectedAll
-    ? "Deselect"
-    : `Select all ${totalCount} Records`;
-
   return (
     <div className={cn(styles.container, className)}>
-      {isSelectedVisible && (
+      {isSelectedVisible && totalCount > pageSize && (
         <span className={styles.message}>
-          {infoText}
+          {isSelectedAll
+            ? `All ${totalCount} Records are selected. `
+            : `All ${pageSize} Records on this page are selected. `}
           <span
             className={styles.button}
             onClick={onBtnClick}
             role="button"
             tabIndex={0}
           >
-            {btnText}
+            {isSelectedAll ? "Deselect" : `Select all ${totalCount} Records`}
           </span>
         </span>
       )}

src/routes/WorkPeriods/components/ToastPaymentsWarning/index.jsx

@@ -8,10 +8,17 @@ import styles from "./styles.module.scss";
  * payments have been scheduled or failed to schedule.
  *
  * @param {Object} props component properties
+ * @param {number} props.resourcesSucceededCount the number of resources
+ * for which payments have been successfully scheduled
+ * @param {Array} [props.resourcesFailed] array with data for resources
+ * for which payments were failed to be scheduled
+ * @param {number} props.resourcesFailedCount the number of resources
+ * for which payments were failed to be scheduled
+ * @param {() => void} [props.remove] function that must be called
+ * on toast message removal intent
  * @returns {JSX.Element}
  */
 const ToastPaymentsWarning = ({
-  resourcesSucceeded,
   resourcesSucceededCount,
   resourcesFailed,
   resourcesFailedCount,
@@ -23,15 +30,6 @@ const ToastPaymentsWarning = ({
         <div className={styles.sectionTitle}>
           Payment scheduled for {resourcesSucceededCount} resources
         </div>
-        {resourcesSucceeded && resourcesSucceeded.length && (
-          <div className={styles.periodsSucceeded}>
-            {resourcesSucceeded.map((period) => (
-              <div key={period.workPeriodId} className={styles.periodSucceeded}>
-                {period.workPeriodId}
-              </div>
-            ))}
-          </div>
-        )}
       </div>
       <div className={styles.sectionFailed}>
         <div className={styles.sectionTitle}>
@@ -54,12 +52,6 @@ const ToastPaymentsWarning = ({
 };
 
 ToastPaymentsWarning.propTypes = {
-  resourcesSucceeded: PT.arrayOf(
-    PT.shape({
-      workPeriodId: PT.string.isRequired,
-      amount: PT.number,
-    })
-  ),
   resourcesSucceededCount: PT.number.isRequired,
   resourcesFailed: PT.arrayOf(
     PT.shape({