Merge pull request #330 from joriswijnant/issue-191-split-inbound

Issue 191 split inbound

Author: Laoujin

frontend/src/components/invoice/controls/InvoiceCreditNotas.tsx

@@ -56,10 +56,10 @@ export const InvoiceCreditNotas = ({ model, onChange}: InvoiceCreditNotasProps)
       'buttons'
     ],
     buttons: ['comment', 'edit', 'validate', 'preview'],
-    currentInvoice: model
+    currentInvoice: model,
+    defaultSorter: (a, b) => a.number - b.number
   });
 
-  feature.list.sorter = (a, b) => a.number - b.number;
 
   const saveCreditNotas = (selectedInvoices: ListSelectionItem<InvoiceModel>) => {
     if(Array.isArray(selectedInvoices)) {

frontend/src/components/invoice/models/getInvoiceFeature.tsx

@@ -26,7 +26,8 @@ export type InvoiceFeatureBuilderConfig = IFeatureBuilderConfig<InvoiceModel, Li
   disableFilters?: boolean;
   invoicesTotalOnly?: boolean;
   buttons?: InvoiceListRowAction[];
-  currentInvoice?: InvoiceModel
+  currentInvoice?: InvoiceModel,
+  defaultSorter?: (a: InvoiceModel, b: InvoiceModel) => number
 };
 
 export interface IInvoiceListData {
@@ -100,7 +101,7 @@ export function createInvoiceList(config: InvoiceFeatureBuilderConfig): IFeature
     list: {
       rows: listRows,
       data: config.data,
-      sorter: (a, b) => b.number - a.number,
+      sorter: config.defaultSorter ?? ( (a, b) => b.number - a.number ),
       filter: !config.disableFilters ? {
         fullTextSearch: searchInvoices,
         updateFilter: config.setFilters,

frontend/src/components/invoice/models/getNewInvoice.ts

@@ -2,7 +2,7 @@
 import InvoiceModel from './InvoiceModel';
 import {ConfigModel} from '../../config/models/ConfigModel';
 import {ClientModel} from '../../client/models/ClientModels';
-import {getInvoiceDate, today} from './invoice-date-strategy';
+import {today} from './invoice-date-strategy';
 
 
 export type NewInvoiceType = Partial<Omit<InvoiceModel, '_id'>> & {
@@ -70,7 +70,7 @@ export const getNewClonedInvoice = (
 
   return getNewInvoice(invoiceBlueprint.config, invoices, [], {
     ...invoiceBlueprint,
-    lines: invoiceToCopy.lines.map(line => ({...line, amount: 0, audit: {} })),
+    lines: invoiceToCopy.lines.map(line => ({...line, amount: line.amount*-1, audit: {} })),
     creditNotas: [...invoiceBlueprint.creditNotas, invoiceBlueprint.number],
     note: '',
     comments: []

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

@@ -23,6 +23,7 @@ export interface ProjectMonthModel {
   orderNr: string;
   audit: IAudit;
   verified: ProjectMonthStatus;
+  verifiedInvoices: number[];
   attachments: Attachment[];
 }
 

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

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

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

@@ -8,7 +8,6 @@ import {ProjectMonthTimesheetCell} from '../project-month-list/table/ProjectMont
 import {ProjectMonthConsultantCell} from '../project-month-list/table/ProjectMonthConsultantCell';
 import {ProjectMonthInboundCell} from '../project-month-list/table/inbound/ProjectMonthInboundCell';
 import {ProjectMonthOutboundCell} from '../project-month-list/table/outbound/ProjectMonthOutboundCell';
-import {getInvoiceDueDateVariant} from '../../invoice/invoice-table/getInvoiceListRowClass';
 import {ProjectMonthNotesCell} from '../project-month-list/table/ProjectMonthNotesCell';
 import {ConsultantCountFooter} from '../project-month-list/table/footers/ConsultantCountFooter';
 import { ProjectClientForecastFooter } from "../project-month-list/table/footers/ProjectClientForecastFooter";
@@ -69,7 +68,7 @@ const projectListConfig = (config: ProjectMonthFeatureBuilderConfig): IList<Full
     key: 'project',
     value: p => <ProjectMonthConsultantCell fullProjectMonth={p} />,
     className: p => {
-      if (p.details.verified || p.invoice?.verified) {
+      if (p.details.verified) {
         return 'validated';
       }
       return undefined;
@@ -127,10 +126,9 @@ const projectListConfig = (config: ProjectMonthFeatureBuilderConfig): IList<Full
     value: p => <ProjectMonthOutboundCell fullProjectMonth={p} />,
     className: p => {
       if (p.invoice) {
-        if (p.invoice.verified) {
+        if (p.details.verified) {
           return 'validated';
         }
-        return `table-${getInvoiceDueDateVariant(p.invoice)}`;
       }
       return undefined;
     },
@@ -145,7 +143,7 @@ const projectListConfig = (config: ProjectMonthFeatureBuilderConfig): IList<Full
     key: 'notes',
     value: p => <ProjectMonthNotesCell fullProjectMonth={p} />,
     className: p => {
-      if (p.details.verified || p.invoice?.verified) {
+      if (p.details.verified) {
         return 'validated';
       }
       return undefined;

frontend/src/components/project/project-month-list/table/inbound/InboundAmountForecast.tsx

@@ -44,7 +44,6 @@ export const InboundAmountForecast = ({ fullProjectMonth, includeTax = true }: I
   let amount = timesheetConfig.amount;
   if (includeTax &&
     (!fullProjectMonth.partner || !fullProjectMonth.partner.country?.trim() || belgiums.includes(fullProjectMonth.partner.country))) {
-      const temp = amount
       amount *= (1 + tax / 100);
   }
 

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

@@ -1,34 +1,35 @@
-import { FullProjectMonthModel } from '../../../models/FullProjectMonthModel';
 import { moneyFormat, formatDate } from '../../../../utils';
 import { InvoiceNumberCell } from '../../../../invoice/invoice-table/InvoiceNumberCell';
 import { InvoiceListRowActions } from '../../../../invoice/invoice-table/InvoiceListRowActions';
 import { InvoiceEmail } from './InvoiceEmail';
+import InvoiceModel from '../../../../invoice/models/InvoiceModel';
+import { CSSProperties } from 'react';
 
 interface OutboundInvoiceProps {
-  fullProjectMonth: FullProjectMonthModel;
+  invoice: InvoiceModel;
   toggleValid: (valid: boolean) => void;
+  className?: string;
+  style?: CSSProperties
 }
 
 
-export const OutboundInvoice = ({ fullProjectMonth, toggleValid }: OutboundInvoiceProps) => {
-  if (!fullProjectMonth.invoice) {
-    return null;
-  }
+export const OutboundInvoice = ({ invoice, toggleValid, className, style }: OutboundInvoiceProps) => {
+
 
   return (
-    <div className="outbound-invoice-cell">
+    <div className={`outbound-invoice-cell ${className || ''}`} style={style}>
       <div>
-        <span style={{ whiteSpace: 'nowrap' }}>{moneyFormat(fullProjectMonth.invoice.money.total)}</span>
+        <span style={{ whiteSpace: 'nowrap' }}>{moneyFormat(invoice.money.total)}</span>
         <span>
-          <InvoiceNumberCell invoice={fullProjectMonth.invoice} />
-          &nbsp;({formatDate(fullProjectMonth.invoice.date, 'D/M')})
+          <InvoiceNumberCell invoice={invoice} />
+          &nbsp;({formatDate(invoice.date, 'D/M')})
         </span>
       </div>
       <div className="email">
-        <InvoiceEmail invoice={fullProjectMonth.invoice} />
+        <InvoiceEmail invoice={invoice} />
       </div>
       <div className="icons-cell">
-        <InvoiceListRowActions invoice={fullProjectMonth.invoice} toggleValid={toggleValid} small buttons={['validate', 'preview']} />
+        <InvoiceListRowActions invoice={invoice} toggleValid={toggleValid} small buttons={['validate', 'preview']} />
       </div>
     </div>
   );

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

@@ -8,6 +8,10 @@ import {useDebouncedSave} from '../../../../hooks/useDebounce';
 import { CreateInvoiceButton } from './CreateInvoiceButton';
 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';
 
 
 interface ProjectMonthOutboundCellProps {
@@ -18,19 +22,39 @@ interface ProjectMonthOutboundCellProps {
 /** Outbound form cell for a ProjectMonth row */
 export const ProjectMonthOutboundCell = ({fullProjectMonth}: ProjectMonthOutboundCellProps) => {
   const dispatch = useDispatch();
+  const invoices = useSelector((state: ConfacState) => state.invoices)
 
   const dispatcher = (orderNr: string) => {
     dispatch(patchProjectsMonth({...fullProjectMonth.details, orderNr}) as any);
   };
   const [orderNr, setOrderNr/* , saveOrderNr */] = useDebouncedSave<string>(fullProjectMonth.details.orderNr || '', dispatcher);
 
 
-  const toggleValid = (verified: boolean | 'forced') => {
-    dispatch(patchProjectsMonth({...fullProjectMonth.details, verified}) as any);
+  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(invoiceNbr => fullProjectMonth.details.verifiedInvoices.includes(invoiceNbr)),
+        verifiedInvoices: [...fullProjectMonth.details.verifiedInvoices, invoice!.number]
+      }) as any);
+    } else {
+      dispatch(patchProjectsMonth({
+        ...fullProjectMonth.details,
+        verified,
+        verifiedInvoices: fullProjectMonth.details.verifiedInvoices.filter(n => n !== invoice!.number)
+      }) as any);
+    }
   };
 
-
-
   const ValidityToggle = (
     <ValidityToggleButton
       claim={Claim.ValidateProjectMonth}
@@ -82,8 +106,31 @@ export const ProjectMonthOutboundCell = ({fullProjectMonth}: ProjectMonthOutboun
   }
 
 
+  const invoiceList = [
+    ...fullProjectMonth.invoice.creditNotas,
+    fullProjectMonth.invoice.number
+  ]
 
   return (
-    <OutboundInvoice fullProjectMonth={fullProjectMonth} toggleValid={toggleValid} />
-  );
+    <>
+      {invoiceList
+        .sort((a, b) => a - b)
+        .map(nbr => invoices.find(i => !i.isQuotation && i.number === nbr))
+        .filter(i => i !== undefined)
+        .map(i => (
+          <OutboundInvoice
+            key={i!.number}
+            invoice={i!}
+            toggleValid={(valid) => toggleValid(valid, i!)}
+            className={
+              fullProjectMonth.details.verifiedInvoices.includes(i!.number) ?
+              'validated' :
+              `table-${getInvoiceDueDateVariant(i!)}`
+            }
+            style={{backgroundColor: !fullProjectMonth.details.verifiedInvoices.includes(i!.number) ? 'var(--bs-table-bg)' : undefined}}
+          />
+        ))
+      }
+    </>
+  )
 };