[cms] feat: switch proposal token to proposal name on invoice lineitem

src/actions/api.js

@@ -344,16 +344,16 @@ export const onFetchAdminInvoices = () =>
 
 export const onFetchProposalsBatchWithoutState = (
   tokens,
-  fetchPropsoals = true,
+  fetchProposals = true,
   fetchVoteSummary = true
 ) =>
   withCsrf(async (_, __, csrf) => {
     const res = await Promise.all([
-      fetchPropsoals && api.proposalsBatch(csrf, tokens),
+      fetchProposals && api.proposalsBatch(csrf, tokens),
       fetchVoteSummary && api.proposalsBatchVoteSummary(csrf, tokens)
     ]);
     const proposals =
-      fetchPropsoals && res.find((res) => res && res.proposals).proposals;
+      fetchProposals && res.find((res) => res && res.proposals).proposals;
     const summaries =
       fetchVoteSummary && res.find((res) => res && res.summaries).summaries;
     return [proposals, summaries];

src/components/Diff/Diff.jsx

@@ -157,7 +157,7 @@ export const DiffText = ({ newText, oldText }) => {
   ));
 };
 
-export const DiffInvoices = ({ oldData, newData, className }) => {
+export const DiffInvoices = ({ oldData, newData, className, proposals }) => {
   const newLineitems = setLineitemParams(newData.lineitems, {
     rate: newData.contractorrate
   });
@@ -169,7 +169,7 @@ export const DiffInvoices = ({ oldData, newData, className }) => {
 
   return (
     <SheetRenderer headers={createTableHeaders()} className={className}>
-      <DiffLineitemsDatasheet lineItems={lineitemsDiff} />
+      <DiffLineitemsDatasheet lineItems={lineitemsDiff} proposals={proposals} />
     </SheetRenderer>
   );
 };

src/components/Diff/DiffLineitems.jsx

@@ -1,10 +1,11 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useCallback } from "react";
 import PropTypes from "prop-types";
 import { classNames, useTheme } from "pi-ui";
 import { fromUSDCentsToUSDUnits, fromMinutesToHours } from "src/helpers";
 import styles from "./Diff.module.css";
 import { TableRow } from "src/components/InvoiceDatasheet/InvoiceDatasheet";
 import { getTotalsLine } from "src/components/InvoiceDatasheet/helpers";
+import get from "lodash/get";
 
 const renderGrid = (lineItems) =>
   lineItems.reduce(
@@ -15,7 +16,7 @@ const renderGrid = (lineItems) =>
         domain,
         subdomain,
         description,
-        proposaltoken,
+        proposalname,
         subuserid,
         subrate,
         labor,
@@ -40,7 +41,7 @@ const renderGrid = (lineItems) =>
           value: description,
           multiline: true
         },
-        { value: proposaltoken },
+        { value: proposalname },
         { value: subuserid },
         { value: subRate },
         { value: laborHours },
@@ -57,15 +58,23 @@ const renderGrid = (lineItems) =>
     { grid: [], expenseTotal: 0, laborTotal: 0, total: 0 }
   );
 
-const DiffLineitems = ({ lineItems }) => {
+const DiffLineitems = ({ lineItems, proposals }) => {
   const { themeName } = useTheme();
   const isDarkTheme = themeName === "dark";
 
-  const { grid, expenseTotal, laborTotal, total } = useMemo(
-    () => renderGrid(lineItems),
-    [lineItems]
+  const getProposalName = useCallback(
+    (token) => get(proposals, [token, "name"]),
+    [proposals]
   );
 
+  const { grid, expenseTotal, laborTotal, total } = useMemo(() => {
+    const newLineItems = lineItems.map((item) => ({
+      ...item,
+      proposalname: getProposalName(item.proposaltoken)
+    }));
+    return renderGrid(newLineItems);
+  }, [lineItems, getProposalName]);
+
   const numberOfCols = grid.length && grid[0] && grid[0].items.length;
 
   const newTotals = [

src/components/Invoice/Invoice.jsx

@@ -23,7 +23,7 @@ import ThumbnailGrid from "src/components/Files";
 import { useLoaderContext } from "src/containers/Loader";
 import VersionPicker from "src/components/VersionPicker";
 
-const Invoice = ({ invoice, extended, approvedProposalsTokens }) => {
+const Invoice = ({ invoice, extended, approvedProposals }) => {
   const {
     censorshiprecord,
     file,
@@ -113,6 +113,7 @@ const Invoice = ({ invoice, extended, approvedProposalsTokens }) => {
                       )}
                       version={version}
                       token={invoiceToken}
+                      proposals={approvedProposals}
                     />
                   )}
                 </Subtitle>
@@ -189,7 +190,7 @@ const Invoice = ({ invoice, extended, approvedProposalsTokens }) => {
                   value={invoice && invoice.input.lineitems}
                   readOnly
                   userRate={invContractorRate / 100}
-                  proposalsTokens={approvedProposalsTokens || []}
+                  proposals={approvedProposals || []}
                 />
               </>
             )}
@@ -203,7 +204,7 @@ const Invoice = ({ invoice, extended, approvedProposalsTokens }) => {
 
 Invoice.propTypes = {
   invoice: PropTypes.object.isRequired,
-  approvedProposalsTokens: PropTypes.array
+  approvedProposals: PropTypes.array
 };
 
 export default Invoice;

src/components/InvoiceDatasheet/InvoiceDatasheet.jsx

@@ -11,6 +11,7 @@ import CellRenderer from "./components/CellRenderer";
 import TableButton from "./components/TableButton";
 import usePolicy from "src/hooks/api/usePolicy";
 import useSubContractors from "src/hooks/api/useSubContractors";
+
 import {
   processCellsChange,
   convertLineItemsToGrid,
@@ -50,13 +51,23 @@ const InvoiceDatasheet = React.memo(function InvoiceDatasheet({
   readOnly,
   userRate,
   errors,
-  proposalsTokens
+  proposals
 }) {
   const { policy } = usePolicy();
   const { subContractors } = useSubContractors();
   const [grid, setGrid] = useState([]);
   const [currentRate, setCurrentRate] = useState(userRate || 0);
 
+  const proposalsOptions = useMemo(
+    () =>
+      proposals &&
+      proposals.map((p) => ({
+        label: p.name,
+        value: p.censorshiprecord.token
+      })),
+    [proposals]
+  );
+
   const handleCellsChange = useCallback(
     (changes) => {
       const { grid: newGrid } = processCellsChange(grid, changes, userRate);
@@ -93,7 +104,7 @@ const InvoiceDatasheet = React.memo(function InvoiceDatasheet({
         errors,
         currentRate,
         policy,
-        proposalsTokens,
+        proposalsOptions,
         subContractors
       );
       setGrid(grid);
@@ -104,7 +115,7 @@ const InvoiceDatasheet = React.memo(function InvoiceDatasheet({
       errors,
       currentRate,
       policy,
-      proposalsTokens,
+      proposalsOptions,
       subContractors
     ]
   );
@@ -242,7 +253,7 @@ InvoiceDatasheet.propTypes = {
   value: PropTypes.array.isRequired,
   readOnly: PropTypes.bool.isRequired,
   onChange: PropTypes.func,
-  proposalsTokens: PropTypes.array.isRequired
+  proposals: PropTypes.array.isRequired
 };
 
 InvoiceDatasheet.defaultProps = {

src/components/InvoiceDatasheet/components/LazySelector.jsx

@@ -0,0 +1,37 @@
+import React, { useState, useCallback, useMemo } from "react";
+import { Select } from "pi-ui";
+
+const fetchingOption = {
+  isFetchingOption: true,
+  label: "Fetch more...",
+  value: ""
+};
+
+const LazySelector = ({ options, onFetch, needsFetch, onChange, onCommit }) => {
+  const [selected, setSelected] = useState();
+  const getValueObj = useCallback(
+    (value) => options.find((op) => op.value === value),
+    [options]
+  );
+
+  const handleChange = useCallback(
+    ({ isFetchingOption = false, value }) => {
+      if (isFetchingOption) {
+        onFetch();
+      } else {
+        setSelected(getValueObj(value));
+        onChange(value);
+        onCommit(value);
+      }
+    },
+    [onFetch, setSelected, onChange, onCommit, getValueObj]
+  );
+
+  const ops = useMemo(
+    () => (needsFetch ? [...options, fetchingOption] : options),
+    [options, needsFetch]
+  );
+  return <Select options={ops} value={selected} onChange={handleChange} />;
+};
+
+export default LazySelector;

src/components/InvoiceDatasheet/helpers.js

@@ -7,7 +7,9 @@ import {
 import {
   selectWrapper,
   textAreaWrapper,
-  multilineTextWrapper
+  multilineTextWrapper,
+  proposalViewWrapper,
+  proposalSelectWrapper
 } from "./wrappers";
 
 export const columnTypes = {
@@ -75,7 +77,7 @@ export const convertLineItemsToGrid = (
   errors,
   userRate = 0,
   policy,
-  proposalsTokens,
+  proposalsOptions,
   subContractors
 ) => {
   const {
@@ -140,11 +142,8 @@ export const convertLineItemsToGrid = (
           readOnly,
           value: line.proposaltoken,
           error: rowErrors && rowErrors.proposaltoken,
-          dataEditor: selectWrapper(
-            proposalsTokens.map((token) => {
-              return { label: token, value: token };
-            })
-          )
+          dataEditor: proposalSelectWrapper(proposalsOptions),
+          valueViewer: proposalViewWrapper(proposalsOptions)
         },
         {
           readOnly: isSubContractorReadonly,
@@ -238,7 +237,7 @@ export const createTableHeaders = () => [
   { value: "Domain", readOnly: true, width: "12rem" },
   { value: "Subdomain", readOnly: true, width: "14rem" },
   { value: "Description", readOnly: true, width: "30rem" },
-  { value: "Proposal Token", readOnly: true, width: "10rem" },
+  { value: "Proposal", readOnly: true, width: "30rem" },
   { value: "Subcontr. ID", readOnly: true, width: "10rem" },
   { value: "Subcontr. Rate (USD)", readOnly: true, width: "8rem" },
   { value: "Labor (hours)", readOnly: true, width: "7rem" },
@@ -363,3 +362,6 @@ export const processCellsChange = (currentGrid, changes, userRate = 0) => {
     { grid: currentGrid }
   );
 };
+
+export const getProposalsOptions = (proposals = []) =>
+  proposals.map((p) => ({ label: p.name, value: p.censorshiprecord.token }));

src/components/InvoiceDatasheet/wrappers.jsx

@@ -1,8 +1,18 @@
-import React from "react";
+import React, { useCallback, useState } from "react";
 import SelectEditor from "./components/SelectEditor";
 import TextArea from "./components/TextArea";
+import LazySelector from "./components/LazySelector";
+import { getProposalsOptions } from "./helpers";
+import { isEmpty } from "src/helpers";
+import { Spinner } from "pi-ui";
+import useApprovedProposals from "src/hooks/api/useApprovedProposals";
+import drop from "lodash/drop";
+import take from "lodash/take";
+
 import { multilineCellValue, textWrapper } from "./InvoiceDatasheet.module.css";
 
+const PROPOSAL_PAGE_SIZE = 20;
+
 export const selectWrapper = (options) => (props) => (
   <SelectEditor {...{ ...props, options }} />
 );
@@ -16,3 +26,65 @@ export const textAreaWrapper = () => (props) => (
 export const multilineTextWrapper = () => ({ value }) => (
   <div className={multilineCellValue}>{value}</div>
 );
+
+export const proposalViewWrapper = (proposals) => ({ cell: { value } }) => {
+  const findProposal = useCallback(
+    (v) => proposals && proposals.find((p) => p.value === v),
+    []
+  );
+
+  const selectedProposal = findProposal(value);
+
+  return (
+    <>
+      {!isEmpty(value) && !selectedProposal && <Spinner invert />}
+      <span>{selectedProposal && selectedProposal.label}</span>
+    </>
+  );
+};
+
+export const proposalSelectWrapper = (initialOptions) => (props) => {
+  const {
+    proposals,
+    proposalsTokens,
+    onFetchProposalsBatch
+  } = useApprovedProposals();
+
+  const [needsFetch, setNeedsFetch] = useState(
+    proposalsTokens.length > proposals.length
+  );
+  const [loading, setLoading] = useState(false);
+
+  const [options, setOptions] = useState(initialOptions);
+
+  const fetchProposalsBatch = useCallback(async () => {
+    const remainingTokens = drop(proposalsTokens, options.length);
+    const tokenParams = take(remainingTokens, PROPOSAL_PAGE_SIZE);
+    setLoading(true);
+    const res = await onFetchProposalsBatch(tokenParams, false);
+    const fetchedProposals = res && res[0];
+    setNeedsFetch(remainingTokens.length - fetchedProposals.length > 0);
+    setLoading(false);
+    const newOptions = [...options, ...getProposalsOptions(fetchedProposals)];
+    setOptions(newOptions);
+    return;
+  }, [proposalsTokens, onFetchProposalsBatch, options, setOptions]);
+
+  return (
+    <>
+      {!loading && (
+        <LazySelector
+          options={options}
+          onFetch={fetchProposalsBatch}
+          needsFetch={needsFetch}
+          {...props}
+        />
+      )}
+      {loading && (
+        <div className="margin-top-s">
+          <Spinner invert />
+        </div>
+      )}
+    </>
+  );
+};