- Failed to schedule payment for {resourcesFailedCount} resources
+ Failed to schedule payment for{" "}
+ {formatPlural(resourcesFailedCount, "resource")}
{resourcesFailed && resourcesFailed.length ? ":" : ""}
{resourcesFailed && resourcesFailed.length && (
diff --git a/src/routes/WorkPeriods/index.jsx b/src/routes/WorkPeriods/index.jsx
index 3e9649f..25d6a96 100644
--- a/src/routes/WorkPeriods/index.jsx
+++ b/src/routes/WorkPeriods/index.jsx
@@ -20,28 +20,25 @@ import styles from "./styles.module.scss";
* @returns {JSX.Element}
*/
const WorkPeriods = () => (
-
+
-
+
-
+
diff --git a/src/routes/WorkPeriods/styles.module.scss b/src/routes/WorkPeriods/styles.module.scss
index 84a9490..ef2c3b6 100644
--- a/src/routes/WorkPeriods/styles.module.scss
+++ b/src/routes/WorkPeriods/styles.module.scss
@@ -1,31 +1,57 @@
-.container {
-}
-
-.periodsBlock {
-}
+@import "styles/mixins";
.periodsHeader {
display: flex;
+ flex-wrap: wrap;
justify-content: space-between;
align-items: center;
- padding: 13px 13px 13px 32px;
-}
+ padding: 13px 13px 13px 29px;
-.periodsFooter {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 13px 13px 13px 32px;
+ @include desktop {
+ flex-wrap: nowrap;
+ }
}
.periodCount {
+ margin-right: 20px;
+ margin-bottom: 13px;
white-space: nowrap;
+
+ @include tablet {
+ margin-bottom: 0;
+ }
+
+ @include desktop {
+ margin-right: 40px;
+ }
}
.periodWeekPicker {
- margin-left: 40px;
+ margin-bottom: 13px;
+
+ @include tablet {
+ margin-bottom: 0;
+ }
+}
+
+.periodsPaginationTop {
+ width: 100%;
+
+ @include tablet {
+ margin-left: 20px;
+ width: auto;
+ min-width: 382px;
+ }
+
+ @include desktop {
+ margin-left: 40px;
+ min-width: 505px;
+ }
}
-.periodsPagination {
- margin-left: 40px;
+.periodsFooter {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ padding: 13px 13px 13px 32px;
}
diff --git a/src/store/actionTypes/workPeriods.js b/src/store/actionTypes/workPeriods.js
index de5fdf2..30ddbd2 100644
--- a/src/store/actionTypes/workPeriods.js
+++ b/src/store/actionTypes/workPeriods.js
@@ -34,4 +34,5 @@ export const WP_TOGGLE_PERIOD = "WP_TOGGLE_PERIOD";
export const WP_TOGGLE_PERIODS_ALL = "WP_TOGGLE_PERIODS_ALL";
export const WP_TOGGLE_PERIODS_VISIBLE = "WP_TOGGLE_PERIODS_VISIBLE";
export const WP_TOGGLE_PROCESSING_PAYMENTS = "WP_TOGGLE_PROCESSING_PAYMENTS";
+export const WP_TOGGLE_WORKING_DAYS_UPDATED = "WP_TOGGLE_WORKING_DAYS_UPDATED";
export const WP_UPDATE_STATE_FROM_QUERY = "WP_UPDATE_STATE_FROM_QUERY";
diff --git a/src/store/actions/workPeriods.js b/src/store/actions/workPeriods.js
index e1e72a4..c4ef757 100644
--- a/src/store/actions/workPeriods.js
+++ b/src/store/actions/workPeriods.js
@@ -384,11 +384,24 @@ export const toggleWorkingPeriodsVisible = (on = null) => ({
* @param {?boolean} on whether to turn processing-payments state on or off
* @returns {Object}
*/
-export const toggleWorkPeriodsProcessingPeyments = (on = null) => ({
+export const toggleWorkPeriodsProcessingPayments = (on = null) => ({
type: ACTION_TYPE.WP_TOGGLE_PROCESSING_PAYMENTS,
payload: on,
});
+/**
+ * Creates an action denoting the change of working-days-updated flag for
+ * working period with the specified id.
+ *
+ * @param {string} periodId working period id
+ * @param {boolean} on whether to toggle working-days-updated flag on or off.
+ * @returns {Object}
+ */
+export const toggleWorkingDaysUpdated = (periodId, on) => ({
+ type: ACTION_TYPE.WP_TOGGLE_WORKING_DAYS_UPDATED,
+ payload: { periodId, on },
+});
+
/**
* Creates an action denoting an update of working periods state slice using
* the provided query.
diff --git a/src/store/reducers/workPeriods.js b/src/store/reducers/workPeriods.js
index e34ddeb..4aaa439 100644
--- a/src/store/reducers/workPeriods.js
+++ b/src/store/reducers/workPeriods.js
@@ -38,6 +38,14 @@ const initFilters = () => ({
userHandle: "",
});
+const initPeriodData = (period) => {
+ const data = period.data;
+ data.cancelSource = null;
+ data.daysWorkedIsUpdated = false;
+ delete period.data;
+ return data;
+};
+
const initPeriodDetails = (
periodId,
rbId,
@@ -114,9 +122,7 @@ const actionHandlers = {
: oldPagination;
const periodsData = {};
for (let period of periods) {
- period.data.cancelSource = null;
- periodsData[period.id] = period.data;
- delete period.data;
+ periodsData[period.id] = initPeriodData(period);
}
return {
...state,
@@ -200,9 +206,7 @@ const actionHandlers = {
}
const periodsData = state.periodsData[0];
for (let period of details.periods) {
- period.data.cancelSource = null;
- periodsData[period.id] = period.data;
- delete period.data;
+ periodsData[period.id] = initPeriodData(period);
}
periodDetails = {
...periodDetails,
@@ -545,6 +549,7 @@ const actionHandlers = {
periodsData[periodId] = {
...periodData,
cancelSource,
+ daysWorkedIsUpdated: false,
};
return {
...state,
@@ -561,6 +566,7 @@ const actionHandlers = {
...periodData,
...data,
cancelSource: null,
+ daysWorkedIsUpdated: true,
};
return {
...state,
@@ -576,6 +582,7 @@ const actionHandlers = {
periodsData[periodId] = {
...periodData,
cancelSource: null,
+ daysWorkedIsUpdated: false,
};
return {
...state,
@@ -680,6 +687,21 @@ const actionHandlers = {
isSelectedPeriodsVisible,
};
},
+ [ACTION_TYPE.WP_TOGGLE_WORKING_DAYS_UPDATED]: (state, { periodId, on }) => {
+ const periodsData = state.periodsData[0];
+ const periodData = periodsData[periodId];
+ if (!periodData || periodData.daysWorkedIsUpdated === on) {
+ return state;
+ }
+ periodsData[periodId] = {
+ ...periodData,
+ daysWorkedIsUpdated: on,
+ };
+ return {
+ ...state,
+ periodsData: [periodsData],
+ };
+ },
[ACTION_TYPE.WP_TOGGLE_PROCESSING_PAYMENTS]: (state, on) => {
let periodsFailed = state.periodsFailed;
let isProcessingPayments = on === null ? !state.isProcessingPayments : on;
diff --git a/src/store/thunks/workPeriods.js b/src/store/thunks/workPeriods.js
index a406918..358c716 100644
--- a/src/store/thunks/workPeriods.js
+++ b/src/store/thunks/workPeriods.js
@@ -293,16 +293,26 @@ export const updateWorkPeriodWorkingDays =
* @param {function} getState function returning redux store root state
*/
export const processPayments = async (dispatch, getState) => {
- dispatch(actions.toggleWorkPeriodsProcessingPeyments(true));
const state = getState();
+ const isProcessing = selectors.getWorkPeriodsIsProcessingPayments(state);
+ if (isProcessing) {
+ return;
+ }
+ dispatch(actions.toggleWorkPeriodsProcessingPayments(true));
const isSelectedAll = selectors.getWorkPeriodsIsSelectedAll(state);
const { pageSize, totalCount } = selectors.getWorkPeriodsPagination(state);
- if (isSelectedAll && totalCount > pageSize) {
- processPaymentsAll(dispatch, getState);
- } else {
- processPaymentsSpecific(dispatch, getState);
+ const promise =
+ isSelectedAll && totalCount > pageSize
+ ? processPaymentsAll(dispatch, getState)
+ : processPaymentsSpecific(dispatch, getState);
+ // The promise returned by processPaymentsAll or processPaymentsSpecific
+ // should never be rejected but adding try-catch block just in case.
+ try {
+ await promise;
+ } catch (error) {
+ console.error(error);
}
- dispatch(actions.toggleWorkPeriodsProcessingPeyments(false));
+ dispatch(actions.toggleWorkPeriodsProcessingPayments(false));
};
const processPaymentsAll = async (dispatch, getState) => {
diff --git a/src/utils/formatters.js b/src/utils/formatters.js
index d3c0a17..de354bb 100644
--- a/src/utils/formatters.js
+++ b/src/utils/formatters.js
@@ -71,6 +71,18 @@ export function formatPaymentStatus(status) {
return paymentStatus;
}
+/**
+ * Creates the string with the number of items and the word describing the item
+ * possibly in plural form.
+ *
+ * @param {number} count number of items
+ * @param {string} baseWord word describing the item
+ * @returns {string}
+ */
+export function formatPlural(count, baseWord) {
+ return `${count} ${baseWord}${count > 1 ? "s" : ""}`;
+}
+
/**
* Formats user handle link.
*