verified invoices vs projectMonth sync with separate backend endpoint

Author: Laoujin

backend/src/controllers/invoices.ts

@@ -188,32 +188,67 @@ export const updateInvoiceController = async (req: ConfacRequest, res: Response)
   }
   await saveAudit(req, 'invoice', originalInvoice, invoice, ['projectMonth.consultantId']);
 
-  let projectMonth;
-  if (invoice?.projectMonth?.projectMonthId) {
-    // TODO: This should be a separate route once security is implemented
-    // Right now it is always updating the projectMonth.verified but this only changes when the invoice.verified changes
-    // This is now 'fixed' on the frontend.
-    projectMonth = await req.db.collection(CollectionNames.PROJECTS_MONTH)
-      .findOneAndUpdate({_id: new ObjectID(invoice.projectMonth.projectMonthId)}, {$set: {verified: invoice.verified}});
-  }
-
   const invoiceResponse = {_id, ...invoice};
   const result: Array<any> = [{
     type: 'invoice',
     model: invoiceResponse,
   }];
   emitEntityEvent(req, SocketEventTypes.EntityUpdated, CollectionNames.INVOICES, invoiceResponse._id, invoiceResponse);
 
-  if (projectMonth && projectMonth.ok && projectMonth.value) {
-    const projectMonthResponse = projectMonth.value;
-    result.push({
-      type: 'projectMonth',
-      model: projectMonthResponse,
-    });
-    emitEntityEvent(req, SocketEventTypes.EntityUpdated, CollectionNames.PROJECTS_MONTH, projectMonthResponse._id, projectMonthResponse);
+  return res.send(result);
+};
+
+
+
+export const verifyInvoiceController = async (req: ConfacRequest, res: Response) => {
+  const {id, verified}: { id: string; verified: boolean; } = req.body;
+
+  const saveResult = await req.db.collection<IInvoice>(CollectionNames.INVOICES)
+    .findOneAndUpdate({_id: new ObjectID(id)}, {$set: {verified}}, {returnOriginal: true});
+
+  if (!saveResult?.value) {
+    return res.status(404).send('Invoice not found');
   }
 
-  return res.send(result);
+  if (saveResult.value.verified === verified) {
+    return res.status(200).send();
+  }
+
+  const originalInvoice = saveResult.value;
+  const invoice = {...originalInvoice, verified};
+  await saveAudit(req, 'invoice', originalInvoice, invoice);
+
+  const result: Array<any> = [{
+    type: 'invoice',
+    model: invoice,
+  }];
+
+  emitEntityEvent(req, SocketEventTypes.EntityUpdated, CollectionNames.INVOICES, invoice._id, invoice);
+
+  if (invoice?.projectMonth?.projectMonthId) {
+    let shouldUpdateProjectMonth = true;
+    if (verified && invoice.creditNotas?.length) {
+      const creditNotes = await req.db.collection<IInvoice>(CollectionNames.INVOICES)
+        .find({_id: {$in: invoice.creditNotas.map(id => new ObjectID(id))}})
+        .toArray();
+
+      shouldUpdateProjectMonth = creditNotes.every(creditNote => creditNote.verified);
+    }
+
+    if (shouldUpdateProjectMonth) {
+      const projectMonth = await req.db.collection(CollectionNames.PROJECTS_MONTH)
+        .findOneAndUpdate({_id: new ObjectID(invoice.projectMonth.projectMonthId)}, {$set: {verified}}, {returnOriginal: false});
+
+      emitEntityEvent(req, SocketEventTypes.EntityUpdated, CollectionNames.PROJECTS_MONTH, invoice.projectMonth.projectMonthId, projectMonth.value);
+
+      result.push({
+        type: 'projectMonth',
+        model: projectMonth.value,
+      });
+    }
+  }
+
+  return res.status(200).send(result);
 };
 
 

backend/src/routes/invoices.ts

@@ -2,7 +2,7 @@ import {Router} from 'express';
 import { emailInvoiceController } from '../controllers/emailInvoices';
 import {
   getInvoicesController, createInvoiceController, previewPdfInvoiceController, deleteInvoiceController,
-  updateInvoiceController, generateExcelForInvoicesController, getInvoiceXmlController,
+  updateInvoiceController, generateExcelForInvoicesController, getInvoiceXmlController, verifyInvoiceController
 } from '../controllers/invoices';
 
 const invoicesRouter = Router();
@@ -15,6 +15,7 @@ invoicesRouter.post('/preview', previewPdfInvoiceController);
 invoicesRouter.post('/excel', generateExcelForInvoicesController);
 
 invoicesRouter.put('/', updateInvoiceController as any);
+invoicesRouter.put('/verify', verifyInvoiceController as any);
 
 invoicesRouter.delete('/', deleteInvoiceController as any);
 invoicesRouter.get('/xml/:id', getInvoiceXmlController);

frontend/src/actions/invoiceActions.ts

@@ -116,10 +116,33 @@ export const syncCreditNotas = (invoice: InvoiceModel, previousCreditNotas: stri
 
 
 
-export function toggleInvoiceVerify(data: InvoiceModel) {
-  const successMsg = data.verified ? t('invoice.isNotVerifiedConfirm') : t('invoice.isVerifiedConfirm');
-  const newData: InvoiceModel | any = {...data, verified: !data.verified};
-  return updateInvoiceRequest(newData, successMsg, false); // change andGoHome? also need 'navigate' from router
+export function toggleInvoiceVerify(data: InvoiceModel, toggleBusy = true) {
+  return dispatch => {
+    if (toggleBusy)
+      dispatch(busyToggle());
+
+    request.put(buildUrl('/invoices/verify'))
+      .set('Content-Type', 'application/json')
+      .set('Authorization', authService.getBearer())
+      .set('x-socket-id', socketService.socketId)
+      .set('Accept', 'application/json')
+      .send({id: data._id, verified: !data.verified})
+      .then(res => {
+        if (res) {
+          dispatch({
+            type: ACTION_TYPES.MODELS_UPDATED,
+            payload: res.body,
+          });
+        }
+
+        success(data.verified ? t('invoice.isNotVerifiedConfirm') : t('invoice.isVerifiedConfirm'));
+      })
+      .catch(catchHandler)
+      .then(() => {
+        if (toggleBusy)
+          dispatch(busyToggle.off())
+      });
+  };
 }
 
 

frontend/src/components/enhancers/EnhanceWithBusySpinner.tsx

@@ -3,6 +3,11 @@ import {SpinnerIcon} from '../controls/Icon';
 
 
 type EnhanceWithBusySpinnerProps = {
+  /**
+   * Typically busy spinner requires the busyToggle to be dispatched
+   * For some components we don't do a global busyToggle
+   **/
+  withoutStoreBusy?: boolean,
   isBusy: boolean,
   onClick: Function,
   model: any,
@@ -27,8 +32,8 @@ export const EnhanceWithBusySpinner = <P extends object>(ComposedComponent: Reac
   }
 
   render() {
-    const {isBusy, onClick, model, ...props} = this.props;
-    if (isBusy && this.state.isBusy) {
+    const {isBusy, onClick, model, withoutStoreBusy, ...props} = this.props;
+    if ((isBusy || withoutStoreBusy) && this.state.isBusy) {
       return <SpinnerIcon style={{marginLeft: 0}} />;
     }
 

frontend/src/components/invoice/invoice-list/InvoiceVerifyIconToggle.tsx

@@ -9,10 +9,10 @@ import {EnhanceWithClaim, EnhanceWithClaimProps} from '../../enhancers/EnhanceWi
 
 type InvoiceVerifyIconToggleProps = EnhanceWithClaimProps & {
   invoice: InvoiceModel,
-  toggleValid?: (valid: boolean) => void;
+  toggleBusy?: boolean,
 }
 
-export const InvoiceVerifyIconToggle = EnhanceWithClaim(({invoice, toggleValid, ...props}: InvoiceVerifyIconToggleProps) => {
+export const InvoiceVerifyIconToggle = EnhanceWithClaim(({invoice, toggleBusy, ...props}: InvoiceVerifyIconToggleProps) => {
   const dispatch = useDispatch();
   if (invoice.isQuotation) {
     return null;
@@ -22,14 +22,10 @@ export const InvoiceVerifyIconToggle = EnhanceWithClaim(({invoice, toggleValid,
   const title = invoice.verified ? t('invoice.unverifyActionTooltip') : t('invoice.verifyActionTooltip', {days: daysPassed});
   return (
     <BusyVerifyIcon
+      withoutStoreBusy={!toggleBusy}
       model={invoice}
       style={{marginLeft: 8}}
-      onClick={() => {
-        dispatch(toggleInvoiceVerify(invoice) as any);
-        if (toggleValid) {
-          toggleValid(!invoice.verified);
-        }
-      }}
+      onClick={() => dispatch(toggleInvoiceVerify(invoice, toggleBusy) as any)}
       title={title}
       {...props}
     />

frontend/src/components/invoice/invoice-table/InvoiceListRowActions.tsx

@@ -15,15 +15,14 @@ export type InvoiceListRowAction = 'comment' | 'edit' | 'validate' | 'download'
 
 type InvoiceListRowActionsProps = {
   invoice: InvoiceModel;
-  /** When from the ProjectMonth listing, also update the state of the form there */
-  toggleValid?: (valid: boolean) => void;
+  toggleBusy?: boolean;
   /** Hides some buttons when true */
   small?: boolean;
   buttons?: InvoiceListRowAction[]
   hideEdit?: boolean
 }
 
-export const InvoiceListRowActions = ({invoice, toggleValid, small = false, buttons, hideEdit}: InvoiceListRowActionsProps) => {
+export const InvoiceListRowActions = ({invoice, small = false, buttons, hideEdit, toggleBusy}: InvoiceListRowActionsProps) => {
   const dispatch = useDispatch();
   const invoiceType = invoice.isQuotation ? 'quotation' : 'invoice';
 
@@ -54,7 +53,7 @@ export const InvoiceListRowActions = ({invoice, toggleValid, small = false, butt
         />
       )}
       {!hideEdit && (buttons?.includes('validate') ?? true) &&
-        <InvoiceVerifyIconToggle claim={Claim.ValidateInvoices} invoice={invoice} toggleValid={toggleValid} />
+        <InvoiceVerifyIconToggle claim={Claim.ValidateInvoices} invoice={invoice} toggleBusy={toggleBusy} />
       }
       {(buttons?.includes('download') ?? true) && !small &&
         <InvoiceDownloadIcon invoice={invoice} fileType='pdf' />

frontend/src/components/invoice/invoice-table/getInvoiceListRowClass.ts

@@ -7,6 +7,20 @@ export function getInvoiceListRowClass(invoice: InvoiceModel, invoicePayDays: nu
   return rowTableClassName;
 }
 
+export function getInvoiceDueDateStyle(invoice: InvoiceModel): React.CSSProperties {
+  const variant = getInvoiceDueDateVariant(invoice);
+  switch (variant) {
+    case 'danger':
+      return {backgroundColor: '#f8d7da'};
+    case 'warning':
+      return {backgroundColor: '#fff3cd'};
+    case 'info':
+      return {backgroundColor: '#cff4fc'};
+    default:
+      return {backgroundColor: 'rgba(40, 167, 69, 0.2)'};
+  }
+}
+
 /**
  * Gets the Bootstrap variant based on the Invoice due date
  */

frontend/src/components/project/controls/ProjectMonthProformaStatusSelect.tsx

@@ -1,4 +1,3 @@
-import {CSSProperties} from 'react';
 import {ButtonGroup as ReactButtonGroup} from 'react-bootstrap';
 import {ProjectMonthProformaStatus} from '../models/ProjectMonthModel';
 import {EnhanceWithClaim} from '../../enhancers/EnhanceWithClaim';

frontend/src/components/project/models/ProjectMonthModel.ts

@@ -19,12 +19,11 @@ export interface ProjectMonthModel {
   timesheet: ProjectMonthTimesheet;
   inbound: ProjectMonthInbound;
   note?: string;
-  comments: IComment[]
+  comments: IComment[];
   /** The invoice orderNr when ProjectMonthConfig.changingOrderNr */
   orderNr: string;
   audit: IAudit;
   verified: ProjectMonthStatus;
-  verifiedInvoices: string[];
   attachments: Attachment[];
 }
 

frontend/src/components/project/models/getNewProject.ts

@@ -48,7 +48,6 @@ export const getNewProjectMonth = (): ProjectMonthModel => ({
   comments: [],
   orderNr: '',
   verified: false,
-  verifiedInvoices: [],
   attachments: [],
   audit: {} as IAudit,
 });

frontend/src/components/project/models/getProjectMonthFeature.tsx

@@ -124,14 +124,6 @@ const projectListConfig = (config: ProjectMonthFeatureBuilderConfig): IList<Full
   }, {
     key: 'outbound',
     value: p => <ProjectMonthOutboundCell fullProjectMonth={p} />,
-    className: p => {
-      if (p.invoice) {
-        if (p.details.verified) {
-          return 'validated';
-        }
-      }
-      return undefined;
-    },
     footer: (models: FullProjectMonthModel[]) => {
       if (!models.length) {
         return null;

frontend/src/components/project/project-month-list/table/outbound/OutboundInvoice.tsx

@@ -3,17 +3,15 @@ import { InvoiceNumberCell } from '../../../../invoice/invoice-table/InvoiceNumb
 import { InvoiceListRowActions } from '../../../../invoice/invoice-table/InvoiceListRowActions';
 import { InvoiceEmail } from './InvoiceEmail';
 import InvoiceModel from '../../../../invoice/models/InvoiceModel';
-import { CSSProperties } from 'react';
 
 interface OutboundInvoiceProps {
   invoice: InvoiceModel;
-  toggleValid: (valid: boolean) => void;
   className?: string;
-  style?: CSSProperties
+  style?: React.CSSProperties;
 }
 
 
-export const OutboundInvoice = ({ invoice, toggleValid, className, style }: OutboundInvoiceProps) => {
+export const OutboundInvoice = ({ invoice, className, style }: OutboundInvoiceProps) => {
   return (
     <div className={`outbound-invoice-cell ${className || ''}`} style={style}>
       <div>
@@ -27,7 +25,7 @@ export const OutboundInvoice = ({ invoice, toggleValid, className, style }: Outb
         <InvoiceEmail invoice={invoice} />
       </div>
       <div className="icons-cell">
-        <InvoiceListRowActions invoice={invoice} toggleValid={toggleValid} small buttons={['validate', 'preview']} />
+        <InvoiceListRowActions invoice={invoice} small buttons={['validate', 'preview']} toggleBusy={false} />
       </div>
     </div>
   );

frontend/src/components/project/project-month-list/table/outbound/ProjectMonthOutboundCell.tsx

@@ -10,8 +10,7 @@ import { OutboundInvoice } from './OutboundInvoice';
 import { Claim } from '../../../../users/models/UserModel';
 import { useSelector } from 'react-redux';
 import { ConfacState } from '../../../../../reducers/app-state';
-import InvoiceModel from '../../../../invoice/models/InvoiceModel';
-import { getInvoiceDueDateVariant } from '../../../../invoice/invoice-table/getInvoiceListRowClass';
+import { getInvoiceDueDateStyle } from '../../../../invoice/invoice-table/getInvoiceListRowClass';
 
 
 interface ProjectMonthOutboundCellProps {
@@ -30,28 +29,8 @@ export const ProjectMonthOutboundCell = ({fullProjectMonth}: ProjectMonthOutboun
   const [orderNr, setOrderNr/* , saveOrderNr */] = useDebouncedSave<string>(fullProjectMonth.details.orderNr || '', dispatcher);
 
 
-  const toggleValid = (verified: boolean | 'forced', invoice?: InvoiceModel) => {
-    if (!invoice) {
-      dispatch(patchProjectsMonth({...fullProjectMonth.details, verified}) as any);
-    }
-
-    if (verified === 'forced') {
-      dispatch(patchProjectsMonth({...fullProjectMonth.details, verified}) as any);
-    }
-
-    if (verified) {
-      dispatch(patchProjectsMonth({
-        ...fullProjectMonth.details,
-        verified: invoice!.creditNotas.every(invoiceId => fullProjectMonth.details.verifiedInvoices.includes(invoiceId)),
-        verifiedInvoices: [...fullProjectMonth.details.verifiedInvoices, invoice!._id]
-      }) as any);
-    } else {
-      dispatch(patchProjectsMonth({
-        ...fullProjectMonth.details,
-        verified,
-        verifiedInvoices: fullProjectMonth.details.verifiedInvoices.filter(n => n !== invoice!._id)
-      }) as any);
-    }
+  const toggleValid = (verified: boolean | 'forced') => {
+    dispatch(patchProjectsMonth({...fullProjectMonth.details, verified}) as any);
   };
 
   const ValidityToggle = (
@@ -120,16 +99,9 @@ export const ProjectMonthOutboundCell = ({fullProjectMonth}: ProjectMonthOutboun
           <OutboundInvoice
             key={i!.number}
             invoice={i!}
-            toggleValid={(valid) => toggleValid(valid, i!)}
-            className={
-              fullProjectMonth.details.verifiedInvoices.includes(i!._id) ?
-              'validated' :
-              `table-${getInvoiceDueDateVariant(i!)}`
-            }
-            style={{backgroundColor: !fullProjectMonth.details.verifiedInvoices.includes(i!._id) ? 'var(--bs-table-bg)' : undefined}}
+            style={getInvoiceDueDateStyle(i!)}
           />
-        ))
-      }
+        ))}
     </>
-  )
+  );
 };