CM-487: add task tab to payroll

src/actions.js

@@ -46,7 +46,7 @@ const PAYROLL_PROJECTION = (modulesManager) => [
   'id',
   'name',
   'paymentMethod',
-  'paymentPlan { code }',
+  'paymentPlan { code, id, name, benefitPlan }',
   `paymentPoint { ${PAYMENT_POINT_PROJECTION(modulesManager).join(' ')} }`,
   'paymentCycle { runYear, runMonth }',
   'benefitConsumption{id, code,individual {firstName, lastName}, benefitAttachment{bill{id, code, terms}}}',

src/components/payroll/PayrollFilter.js

@@ -19,7 +19,7 @@ import {
   MODULE_NAME,
 } from '../../constants';
 import PayrollStatusPicker from './PayrollStatusPicker';
-import PaymentMethodPicker from './PaymentMethodPicker';
+import PaymentMethodPicker from '../../pickers/PaymentMethodPicker';
 
 const useStyles = makeStyles((theme) => ({
   form: {
@@ -130,7 +130,7 @@ function PayrollFilter({
             {
               id: 'status',
               value,
-              filter: `status: ${value}`,
+              filter: value ? `status: ${value}` : EMPTY_STRING,
             },
           ])}
         />

src/components/payroll/PayrollHeadPanel.js

@@ -2,21 +2,21 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
 
-import { Checkbox, FormControlLabel, Grid } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import { withStyles, withTheme } from '@material-ui/core/styles';
 
 import {
-  ControlledField,
   formatMessage,
   FormPanel,
   PublishedComponent,
   TextInput,
   withModulesManager,
+  decodeId,
 } from '@openimis/fe-core';
 import AdvancedFiltersDialog from './AdvancedFiltersDialog';
 import { CLEARED_STATE_FILTER } from '../../constants';
 import PayrollStatusPicker from './PayrollStatusPicker';
-import PaymentMethodPicker from './PaymentMethodPicker';
+import PaymentMethodPicker from '../../pickers/PaymentMethodPicker';
 
 const styles = (theme) => ({
   tableTitle: theme.table.title,
@@ -78,7 +78,9 @@
     return (
       <>
         <AdvancedFiltersDialog
-          object={payroll.benefitPlan}
+          object={payroll?.paymentPlan?.benefitPlan
+            ? JSON.parse(JSON.parse(payroll.paymentPlan.benefitPlan))
+            : null}
           objectToSave={payroll}
           moduleName="social_protection"
           objectType="BenefitPlan"
@@ -104,7 +106,6 @@
           <Grid item xs={3} className={classes.item}>
             <PublishedComponent
               pubRef="contributionPlan.PaymentPlanPicker"
-              withNull
               required
               filterLabels={false}
               onChange={(paymentPlan) => this.updateAttribute('paymentPlan', paymentPlan)}

src/components/payroll/PayrollTab.js

@@ -29,7 +29,9 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-function PayrollTab({ rights, setConfirmedAction, payrollUuid }) {
+function PayrollTab({
+  rights, setConfirmedAction, payrollUuid, isInTask,
+}) {
   const classes = useStyles();
 
   const [activeTab, setActiveTab] = useState(BENEFIT_CONSUMPTION_LIST_TAB_VALUE);
@@ -50,6 +52,8 @@ function PayrollTab({ rights, setConfirmedAction, payrollUuid }) {
           onChange={handleChange}
           isSelected={isSelected}
           tabStyle={tabStyle}
+          payrollUuid={payrollUuid}
+          isInTask={isInTask}
         />
       </Grid>
       <Contributions
@@ -58,6 +62,7 @@ function PayrollTab({ rights, setConfirmedAction, payrollUuid }) {
         value={activeTab}
         setConfirmedAction={setConfirmedAction}
         payrollUuid={payrollUuid}
+        isInTask={isInTask}
       />
     </Paper>
   );

src/components/payroll/PayrollTaskTabPanel.js

@@ -0,0 +1,59 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Tab } from '@material-ui/core';
+import { PublishedComponent, useTranslations, useModulesManager } from '@openimis/fe-core';
+import {
+  MODULE_NAME, PAYROLL_TASK_TAB_VALUE,
+} from '../../constants';
+
+function PayrollTaskTabLabel({
+  onChange, tabStyle, isSelected, modulesManager, payrollUuid, isInTask,
+}) {
+  const { formatMessage } = useTranslations(MODULE_NAME, modulesManager);
+  if (!payrollUuid || isInTask) {
+    return null;
+  }
+  return (
+    <Tab
+      onChange={onChange}
+      className={tabStyle(PAYROLL_TASK_TAB_VALUE)}
+      selected={isSelected(PAYROLL_TASK_TAB_VALUE)}
+      value={PAYROLL_TASK_TAB_VALUE}
+      label={formatMessage('PayrollTaskTab.label')}
+    />
+  );
+}
+
+function PayrollTaskTabPanel({ value, payrollUuid, isInTask }) {
+  const modulesManager = useModulesManager();
+  const dispatch = useDispatch();
+  const fetchTask = modulesManager.getRef('tasksManagement.fetchTask');
+  const task = useSelector((state) => state.tasksManagement?.task);
+  useEffect(() => {
+    dispatch(fetchTask(modulesManager, ['entityType: "Payroll"', `entityId: "${payrollUuid}"`]));
+  }, [payrollUuid]);
+
+  if (isInTask) return null;
+
+  return (
+    <PublishedComponent
+      pubRef="policyHolder.TabPanel"
+      module="payroll"
+      index={PAYROLL_TASK_TAB_VALUE}
+      value={value}
+    >
+      {
+                payrollUuid && (
+                  <PublishedComponent
+                    pubRef="tasksManagement.taskDetailsPage"
+                    module="payroll"
+                    task={task}
+                    hideBody
+                  />
+                )
+            }
+    </PublishedComponent>
+  );
+}
+
+export { PayrollTaskTabLabel, PayrollTaskTabPanel };

src/constants.js

@@ -23,6 +23,7 @@ export const MAX_LENGTH = {
 export const MODULE_NAME = 'payroll';
 
 export const BENEFIT_CONSUMPTION_LIST_TAB_VALUE = 'benefitConsumptionsTab';
+export const PAYROLL_TASK_TAB_VALUE = 'payrollTaskTab';
 
 export const PAYROLL_TABS_LABEL_CONTRIBUTION_KEY = 'payroll.TabPanel.label';
 export const PAYROLL_TABS_PANEL_CONTRIBUTION_KEY = 'payroll.TabPanel.panel';
@@ -62,14 +63,14 @@ export const PAYROLL_STATUS = {
   PENDING_APPROVAL: 'PENDING_APPROVAL',
   APPROVE_FOR_PAYMENT: 'APPROVE_FOR_PAYMENT',
   REJECTED: 'REJECTED',
-  RECONCILIATED: 'RECONCILIATED',
+  RECONCILED: 'RECONCILED',
 };
 
 export const PAYROLL_STATUS_LIST = [
   PAYROLL_STATUS.PENDING_APPROVAL,
   PAYROLL_STATUS.APPROVE_FOR_PAYMENT,
   PAYROLL_STATUS.REJECTED,
-  PAYROLL_STATUS.RECONCILIATED,
+  PAYROLL_STATUS.RECONCILED,
 ];
 
 export const BENEFIT_CONSUMPTION_STATUS = {
@@ -86,3 +87,5 @@ export const BENEFIT_CONSUMPTION_STATUS_LIST = [
   BENEFIT_CONSUMPTION_STATUS.APPROVE_FOR_PAYMENT, BENEFIT_CONSUMPTION_STATUS.REJECTED,
   BENEFIT_CONSUMPTION_STATUS.DUPLICATE, BENEFIT_CONSUMPTION_STATUS.RECONCILED,
 ];
+
+export const BENEFIT_PLAN_CONTENT_TYPE_ID = 175;

src/index.js

@@ -22,7 +22,8 @@
   PayrollReconciliationTaskItemFormatters,
   PayrollReconciliationTaskTableHeaders,
 } from './components/tasks/PayrollReconciliationTasks';
-import {BenefitConsumptionsTabLabel, BenefitConsumptionsTabPanel} from "./components/payroll/BenefitConsumptionTabPanel";
+import { BenefitConsumptionsTabLabel, BenefitConsumptionsTabPanel } from './components/payroll/BenefitConsumptionTabPanel';
+import { PayrollTaskTabLabel, PayrollTaskTabPanel } from './components/payroll/PayrollTaskTabPanel';
 
 const ROUTE_PAYMENT_POINTS = 'paymentPoints';
 const ROUTE_PAYMENT_POINT = 'paymentPoints/paymentPoint';
@@ -60,8 +61,8 @@
       filter: (rights) => rights.includes(RIGHT_PAYROLL_SEARCH),
     },
   ],
-  'payroll.TabPanel.label': [BenefitConsumptionsTabLabel],
-  'payroll.TabPanel.panel': [BenefitConsumptionsTabPanel],
+  'payroll.TabPanel.label': [BenefitConsumptionsTabLabel, PayrollTaskTabLabel],
+  'payroll.TabPanel.panel': [BenefitConsumptionsTabPanel, PayrollTaskTabPanel],
   'tasksManagement.tasks': [{
     text: <FormattedMessage module="payroll" id="payroll.tasks.update.title" />,
     tableHeaders: PayrollTaskTableHeaders,

src/pages/payroll/PayrollPage.js

@@ -151,10 +151,11 @@ function PayrollPage({
     rights.includes(RIGHT_PAYROLL_CREATE) && (
     <div className={classes.page}>
       <Form
+        key={payrollUuid}
         module="payroll"
         title={formatMessageWithValues('payrollPage.title', pageTitle(payroll))}
         titleParams={pageTitle(payroll)}
-        openDirty
+        openDirty={!payrollUuid}
         benefitPlan={editedPayroll}
         edited={editedPayroll}
         onEditedChanged={setEditedPayroll}
@@ -169,6 +170,7 @@ function PayrollPage({
         setConfirmedAction={setConfirmedAction}
         saveTooltip={formatMessage('tooltip.save')}
         payrollUuid={payrollUuid}
+        isInTask={!!taskPayrollUuid}
       />
     </div>
     )

src/components/payroll/PaymentMethodPicker.js → src/pickers/PaymentMethodPicker.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { SelectInput } from '@openimis/fe-core';
-import { fetchPaymentMethods } from '../../actions';
+import { fetchPaymentMethods } from '../actions';
 
 function PaymentMethodPicker({
   value,

src/translations/en.json

@@ -75,7 +75,7 @@
     "payroll.payroll.payrollStatusPicker.PENDING_APPROVAL": "PENDING APPROVAL",
     "payroll.payroll.payrollStatusPicker.APPROVE_FOR_PAYMENT": "APPROVE FOR PAYMENT",
     "payroll.payroll.payrollStatusPicker.REJECTED": "REJECTED",
-    "payroll.payroll.payrollStatusPicker.RECONCILIATED": "RECONCILIATED",
+    "payroll.payroll.payrollStatusPicker.RECONCILED": "RECONCILED",
     "payroll.paymentMethod": "Payment Method",
     "payroll.tasks.update.title": "Approve Payroll Tasks",
     "payroll.tasks.reconciliation.title": "Payroll Reconciliation Tasks",