Restricted invoice export to 1 at a time BOD-139

client/src/components/accounting-payables-table/accounting-payables-table.component.jsx

@@ -13,7 +13,8 @@ export default function AccountingPayablesTableComponent({
   invoices,
 }) {
   const { t } = useTranslation();
-
+  const [selectedInvoices, setSelectedInvoices] = useState([]);
+  const [transInProgress, setTransInProgress] = useState(false);
   const [state, setState] = useState({
     sortedInfo: {},
     search: "",
@@ -64,6 +65,17 @@ export default function AccountingPayablesTableComponent({
         </Link>
       ),
     },
+    {
+      title: t("jobs.fields.ro_number"),
+      dataIndex: "ro_number",
+      key: "ro_number",
+      sorter: (a, b) => alphaSort(a.job.ro_number, b.job.ro_number),
+      sortOrder:
+        state.sortedInfo.columnKey === "ro_number" && state.sortedInfo.order,
+      render: (text, record) => (
+        <Link to={`/manage/jobs/${record.job.id}`}>{record.job.ro_number}</Link>
+      ),
+    },
     {
       title: t("invoices.fields.date"),
       dataIndex: "date",
@@ -107,14 +119,16 @@ export default function AccountingPayablesTableComponent({
       render: (text, record) => (
         <div>
           <InvoiceExportButton
-            invoiceId={record.id}
-            disabled={!!record.exported}
+
+            invoiceId={record.id} 
+            disabled={transInProgress || !!record.exported}
+            loadingCallback={setTransInProgress}
           />
         </div>
       ),
     },
   ];
-
+console.log('transInProgress', transInProgress)
   const handleSearch = (e) => {
     setState({ ...state, search: e.target.value });
   };
@@ -149,10 +163,22 @@ export default function AccountingPayablesTableComponent({
         }}
         dataSource={dataSource}
         size="small"
-        pagination={{ position: "top" }}
+        pagination={{ position: "top", pageSize: 50 }}
         columns={columns}
         rowKey="id"
         onChange={handleTableChange}
+        rowSelection={{
+          onSelectAll: (selected, selectedRows) =>
+            setSelectedInvoices(selectedRows.map((i) => i.id)),
+          onSelect: (record, selected, selectedRows, nativeEvent) => {
+            setSelectedInvoices(selectedRows.map((i) => i.id));
+          },
+          getCheckboxProps: (record) => ({
+            disabled: record.exported,
+          }),
+          selectedRowKeys: selectedInvoices,
+          type: "checkbox",
+        }}
       />
     </div>
   );