Merge pull request #23 from MadOPcode/feature/work-periods-part-2

Fixes for issues mentioned in feedback

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}>
@@ -53,12 +51,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({

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

@@ -3,10 +3,5 @@
 }
 
 .sectionSucceeded {
-  margin-bottom: 10px;
-  background: #1dcfa0;
-}
-
-.sectionFailed {
-  background: #ff7b7b;
+  margin-bottom: 5px;
 }

src/routes/WorkPeriods/utils/toasts.jsx

@@ -44,8 +44,6 @@ export function makeToastPaymentsSuccess(resourceCount) {
  * payments were successfully scheduled
  * @param {number} props.resourcesFailedCount the number of periods for which
  * payments were failed to be scheduled
- * @param {Array} [props.resourcesSucceeded] periods for which payments were
- * successfully scheduled
  * @param {Array} [props.resourcesFailed] periods for which payments were failed
  * to be scheduled
  */

src/services/workPeriods.js

@@ -142,6 +142,20 @@ export const postWorkPeriodsPayments = (payments) => {
  * @returns {Promise}
  */
 export const postWorkPeriodsPaymentsAll = (query) => {
+  for (let key in query) {
+    let value = query[key];
+    if (typeof value !== "number" && !value) {
+      delete query[key];
+      continue;
+    }
+    if (Array.isArray(value)) {
+      if (value.length) {
+        query[key] = value.join(",");
+      } else {
+        delete query[key];
+      }
+    }
+  }
   return axios
     .post(`${PAYMENTS_API_URL}/query`, { query })
     .then(extractResponseData);

src/store/actionTypes/workPeriods.js

@@ -17,8 +17,6 @@ export const WP_SET_BILLING_ACCOUNT = "WP_SET_BILLING_ACCOUNT";
 export const WP_SET_DETAILS_WORKING_DAYS = "WP_SET_DETAILS_WORKING_DAYS";
 export const WP_SET_DETAILS_HIDE_PAST_PERIODS =
   "WP_SET_DETAILS_HIDE_PAST_PERIODS";
-export const WP_SET_DETAILS_LOCK_WORKING_DAYS =
-  "WP_SET_DETAILS_LOCK_WORKING_DAYS";
 export const WP_SET_PAGE_NUMBER = "WP_SET_PAGE_NUMBER";
 export const WP_SET_PAGE_SIZE = "WP_SET_PAGE_SIZE";
 export const WP_SET_DATE_RANGE = "WP_SET_DATE_RANGE";

src/store/actions/workPeriods.js

@@ -185,11 +185,6 @@ export const setDetailsHidePastPeriods = (periodId, hide) => ({
   payload: { periodId, hide },
 });
 
-export const setDetailsLockWorkingDays = (periodId, lock) => ({
-  type: ACTION_TYPE.WP_SET_DETAILS_LOCK_WORKING_DAYS,
-  payload: { periodId, lock },
-});
-
 /**
  * Creates an action to reset working periods' filters.
  *

src/store/reducers/workPeriods.js

@@ -59,7 +59,6 @@ const initPeriodDetails = (
   periodsVisible: [],
   periodsIsLoading: true,
   hidePastPeriods: false,
-  lockWorkingDays: false,
 });
 
 const initialState = {
@@ -375,21 +374,6 @@ const actionHandlers = {
       periodsDetails,
     };
   },
-  [ACTION_TYPE.WP_SET_DETAILS_LOCK_WORKING_DAYS]: (
-    state,
-    { periodId, lock }
-  ) => {
-    const periodsDetails = { ...state.periodsDetails };
-    let periodDetails = periodsDetails[periodId];
-    if (!periodDetails) {
-      return state;
-    }
-    periodsDetails[periodId] = { ...periodDetails, lockWorkingDays: lock };
-    return {
-      ...state,
-      periodsDetails,
-    };
-  },
   [ACTION_TYPE.WP_SET_DETAILS_WORKING_DAYS]: (
     state,
     { parentPeriodId, periodId, workingDays }
@@ -455,7 +439,15 @@ const actionHandlers = {
         delete periodsSelected[periodId];
       }
     }
-    if (Object.keys(periodsSelected).length === state.pagination.pageSize) {
+    const selectedCount = Object.keys(periodsSelected).length;
+    const pageSize = state.pagination.pageSize;
+    const totalCount = state.pagination.totalCount;
+    if (totalCount > pageSize) {
+      if (selectedCount === pageSize) {
+        isSelectedPeriodsVisible = true;
+      }
+    } else if (selectedCount === totalCount) {
+      isSelectedPeriodsAll = true;
       isSelectedPeriodsVisible = true;
     }
     return {
@@ -549,7 +541,15 @@ const actionHandlers = {
     const isSelected = !periodsSelected[periodId];
     if (isSelected) {
       periodsSelected[periodId] = true;
-      if (Object.keys(periodsSelected).length === state.pagination.pageSize) {
+      const selectedCount = Object.keys(periodsSelected).length;
+      const pageSize = state.pagination.pageSize;
+      const totalCount = state.pagination.totalCount;
+      if (totalCount > pageSize) {
+        if (selectedCount === pageSize) {
+          isSelectedPeriodsVisible = true;
+        }
+      } else if (selectedCount === totalCount) {
+        isSelectedPeriodsAll = true;
         isSelectedPeriodsVisible = true;
       }
     } else {
@@ -580,18 +580,22 @@ const actionHandlers = {
     };
   },
   [ACTION_TYPE.WP_TOGGLE_PERIODS_VISIBLE]: (state, on) => {
-    const isSelected = on === null ? !state.isSelectedPeriodsVisible : on;
+    let isSelectedPeriodsAll = false;
+    const isSelectedPeriodsVisible =
+      on === null ? !state.isSelectedPeriodsVisible : on;
     const periodsSelected = {};
-    if (isSelected) {
+    if (isSelectedPeriodsVisible) {
       for (let period of state.periods) {
         periodsSelected[period.id] = true;
       }
+      isSelectedPeriodsAll =
+        state.periods.length === state.pagination.totalCount;
     }
     return {
       ...state,
       periodsSelected,
-      isSelectedPeriodsAll: false,
-      isSelectedPeriodsVisible: isSelected,
+      isSelectedPeriodsAll,
+      isSelectedPeriodsVisible,
     };
   },
   [ACTION_TYPE.WP_TOGGLE_PROCESSING_PAYMENTS]: (state, on) => {