Admin loads associations on-demand, not immediately

adminapp/src/components/AddressInputs.jsx

@@ -1,6 +1,6 @@
 import api from "../api";
 import { useGlobalApiState } from "../hooks/globalApiState";
-import formHelpers from "../modules/formHelpers";
+import { stub } from "../modules/formHelpers";
 import ResponsiveStack from "./ResponsiveStack";
 import AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -23,7 +23,7 @@ export default function AddressInputs({ address, onFieldChange }) {
     onFieldChange({ address: { ...address, ...a } });
   }
   function handleAddressOn() {
-    onFieldChange({ address: formHelpers.initialAddress });
+    onFieldChange({ address: stub.address });
   }
   function handleAddressOff() {
     onFieldChange({ address: null });

adminapp/src/components/AuditActivityList.jsx

@@ -1,16 +1,16 @@
 import formatDate from "../modules/formatDate";
 import AdminLink from "./AdminLink";
 import AdminMarkdown from "./AdminMarkdown";
-import RelatedList from "./RelatedList";
+import RelatedListRemote from "./RelatedListRemote";
 import { makeStyles } from "@mui/styles";
 import React from "react";
 
 export default function AuditActivityList({ activities }) {
   return (
-    <RelatedList
+    <RelatedListRemote
       title="Audit Activities"
       headers={["At", "Summary", "Message", "Member"]}
-      rows={activities}
+      collection={activities}
       keyRowAttr="id"
       toCells={(row) => [
         formatDate(row.createdAt),

adminapp/src/components/AuditLogs.jsx

@@ -1,15 +1,15 @@
 import { dayjs } from "../modules/dayConfig";
 import AdminLink from "./AdminLink";
-import RelatedList from "./RelatedList";
+import RelatedListRemote from "./RelatedListRemote";
 import isEmpty from "lodash/isEmpty";
 import React from "react";
 
 export default function AuditLogs({ auditLogs }) {
   return (
-    <RelatedList
+    <RelatedListRemote
       title="Audit Logs"
       headers={["At", "Event", "By", "Context"]}
-      rows={auditLogs}
+      collection={auditLogs}
       keyRowAttr="id"
       toCells={(row) => [dayjs(row.at).format("lll"), event(row), by(row), context(row)]}
     />

adminapp/src/components/CategoriesRelatedList.jsx

@@ -1,12 +1,12 @@
 import AdminLink from "./AdminLink";
-import RelatedList from "./RelatedList";
+import RelatedListRemote from "./RelatedListRemote";
 import React from "react";
 
 export default function CategoriesRelatedList({ categories }) {
   return (
-    <RelatedList
+    <RelatedListRemote
       title="Categories"
-      rows={categories}
+      collection={categories}
       headers={["Id", "Name", "Slug", "Parent"]}
       keyRowAttr="id"
       toCells={(row) => [

adminapp/src/components/EligibilityAssignmentsRelatedList.jsx

@@ -1,13 +1,13 @@
 import createRelativeUrl from "../shared/createRelativeUrl";
 import AdminLink from "./AdminLink";
-import RelatedList from "./RelatedList";
+import RelatedListRemote from "./RelatedListRemote";
 import React from "react";
 
 export default function EligibilityAssignmentsRelatedList({ model, type, title }) {
   return (
-    <RelatedList
+    <RelatedListRemote
       title={title || "Eligibility Assignments"}
-      rows={model.eligibilityAssignments}
+      collection={model.eligibilityAssignments}
       addNewLabel="Assign attribute"
       addNewLink={createRelativeUrl(`/eligibility-assignment/new`, {
         assigneeId: model.id,

adminapp/src/components/EligibilityRequirementsRelatedList.jsx

@@ -1,13 +1,13 @@
 import createRelativeUrl from "../shared/createRelativeUrl";
 import AdminLink from "./AdminLink";
-import RelatedList from "./RelatedList";
+import RelatedListRemote from "./RelatedListRemote";
 import React from "react";
 
 export default function EligibilityRequirementsRelatedList({ model, type }) {
   return (
-    <RelatedList
+    <RelatedListRemote
       title="Eligibility Requirements"
-      rows={model.eligibilityRequirements}
+      collection={model.eligibilityRequirements}
       addNewLabel="Add requirement"
       addNewLink={createRelativeUrl(`/eligibility-requirement/new`, {
         resourceId: model.id,

adminapp/src/components/ImageFileInput.jsx

@@ -1,4 +1,4 @@
-import formHelpers from "../modules/formHelpers";
+import { stub } from "../modules/formHelpers";
 import MultiLingualText from "./MultiLingualText";
 import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import { Button, FormHelperText, FormLabel, Stack } from "@mui/material";
@@ -18,7 +18,7 @@ import React from "react";
  * @constructor
  */
 function ImageFileInput({ image, caption, required, onImageChange, onCaptionChange }) {
-  caption = caption || formHelpers.initialTranslation;
+  caption = caption || stub.translation;
   let src = {};
   if (image?.url) {
     src = image.url;

adminapp/src/components/LedgerBookTransactionRelatedList.jsx

@@ -3,19 +3,19 @@ import { scaleMoney } from "../shared/money";
 import Money from "../shared/react/Money";
 import AdminLink from "./AdminLink";
 import ForwardTo from "./ForwardTo";
-import RelatedList from "./RelatedList";
+import RelatedListRemote from "./RelatedListRemote";
 import React from "react";
 
-export default function LedgerBookTransactionsRelatedList({ ledger, title, rows }) {
+export default function LedgerBookTransactionsRelatedList({ ledger, title, collection }) {
   return (
-    <RelatedList
+    <RelatedListRemote
       title={
         <span>
           {title} <ForwardTo to={ledger.adminLink} />
         </span>
       }
       headers={["Id", "Applied", "Amount", "Originating", "Receiving"]}
-      rows={rows}
+      collection={collection}
       keyRowAttr="id"
       toCells={(row) => [
         <AdminLink key="id" model={row} />,

adminapp/src/components/OneToManyEditor.jsx

@@ -1,3 +1,4 @@
+import { assertFullCollection, setCollectionItems } from "../modules/apicollection";
 import mergeAt from "../shared/mergeAt";
 import withoutAt from "../shared/withoutAt";
 import AutocompleteSearch from "./AutocompleteSearch";
@@ -7,20 +8,27 @@ import { Box, FormLabel, Icon, Stack } from "@mui/material";
 import Button from "@mui/material/Button";
 import React from "react";
 
-export default function OneToManyEditor({ title, items, setItems, apiItemSearch }) {
+export default function OneToManyEditor({
+  title,
+  collection,
+  setCollection,
+  apiItemSearch,
+}) {
+  assertFullCollection(collection);
+
   const handleAdd = () => {
-    setItems([...items, { id: 0 }]);
+    setCollectionItems(setCollection, [...collection.items, { id: 0 }]);
   };
   const handleRemove = (index) => {
-    setItems(withoutAt(items, index));
+    setCollectionItems(setCollection, withoutAt(collection.items, index));
   };
   function handleChange(index, fields) {
-    setItems(mergeAt(items, index, fields));
+    setCollectionItems(setCollection, mergeAt(collection.items, index, fields));
   }
   return (
     <>
       <FormLabel>{`${title}s`}</FormLabel>
-      {items?.map((o, i) => (
+      {collection.items?.map((o, i) => (
         <ModelItem
           key={i + title}
           {...o}

adminapp/src/components/PaymentAccountRelatedLists.jsx

@@ -1,14 +1,13 @@
 import useRoleAccess from "../hooks/useRoleAccess";
 import { dayjs } from "../modules/dayConfig";
-import { formatMoney } from "../shared/money";
+import formatDate from "../modules/formatDate";
+import { formatMoney, scaleMoney } from "../shared/money";
 import Money from "../shared/react/Money";
 import AdminLink from "./AdminLink";
-import LedgerBookTransactionsRelatedList from "./LedgerBookTransactionRelatedList";
 import Link from "./Link";
-import RelatedList from "./RelatedList";
+import RelatedListRemote from "./RelatedListRemote";
 import first from "lodash/first";
 import get from "lodash/get";
-import map from "lodash/map";
 import React from "react";
 
 export default function PaymentAccountRelatedLists({ paymentAccount }) {
@@ -24,9 +23,9 @@ export default function PaymentAccountRelatedLists({ paymentAccount }) {
 
   return (
     <>
-      <RelatedList
+      <RelatedListRemote
         title="Originated Funding Transactions"
-        rows={paymentAccount.originatedFundingTransactions}
+        collection={paymentAccount.originatedFundingTransactions}
         headers={["Id", "Created", "Status", "Amount"]}
         keyRowAttr="id"
         toCells={(row) => [
@@ -36,9 +35,9 @@ export default function PaymentAccountRelatedLists({ paymentAccount }) {
           <Money key="amt">{row.amount}</Money>,
         ]}
       />
-      <RelatedList
+      <RelatedListRemote
         title="Originated Payouts"
-        rows={paymentAccount.originatedPayoutTransactions}
+        collection={paymentAccount.originatedPayoutTransactions}
         headers={["Id", "Created", "Status", "Amount"]}
         keyRowAttr="id"
         toCells={(row) => [
@@ -48,16 +47,16 @@ export default function PaymentAccountRelatedLists({ paymentAccount }) {
           <Money key="amt">{row.amount}</Money>,
         ]}
       />
-      <RelatedList
+      <RelatedListRemote
         title={`Ledgers - ${formatMoney(paymentAccount.totalBalance)}`}
         headers={headers}
-        rows={paymentAccount.ledgers}
+        collection={paymentAccount.ledgers}
         keyRowAttr="id"
         toCells={(row) => {
           const cells = [
             <AdminLink key="id" model={row} />,
             row.currency,
-            map(row.vendorServiceCategories, "name").join(", "),
+            AdminLink.Array(row.categories.items, (c) => <AdminLink model={c} label />),
             <Money key="balance">{row.balance}</Money>,
           ];
           if (canCreateBook) {
@@ -78,14 +77,24 @@ export default function PaymentAccountRelatedLists({ paymentAccount }) {
           return cells;
         }}
       />
-      {paymentAccount.ledgers.map((ledger) => (
-        <LedgerBookTransactionsRelatedList
-          ledger={ledger}
-          title={`Ledger ${ledger.label} (${ledger.id}) - ${formatMoney(ledger.balance)}`}
-          key={ledger.id}
-          rows={ledger.combinedBookTransactions}
-        />
-      ))}
+      <RelatedListRemote
+        title="All Book Transactions"
+        collection={paymentAccount.allBookTransactions}
+        headers={["Id", "Applied", "Amount", "Originating", "Receiving"]}
+        keyRowAttr="id"
+        toCells={(row) => [
+          row.id,
+          formatDate(row.appliedAt),
+          <Money>
+            {scaleMoney(
+              row.amount,
+              row.originatingLedger.accountId === paymentAccount.id ? -1 : 1
+            )}
+          </Money>,
+          <AdminLink model={row.originatingLedger} label />,
+          <AdminLink model={row.receivingLedger} label />,
+        ]}
+      />
     </>
   );
 }

adminapp/src/components/Programs.jsx

@@ -40,7 +40,7 @@ export default function Programs({
   }
 
   const combinedProgramStates = {};
-  programs.forEach((c) => (combinedProgramStates[c.id] = true));
+  programs.items.forEach((c) => (combinedProgramStates[c.id] = true));
   merge(combinedProgramStates, newProgramStates);
 
   if (editing.isOff) {
@@ -58,8 +58,8 @@ export default function Programs({
       // whether the program is associated with the resource.
       // If all programs aren't loaded yet,
       // show just the ones associated with the resource.
-      const iterablePrograms = allPrograms || programs;
-      iterablePrograms?.forEach((c) =>
+      const iterablePrograms = allPrograms || programs.items;
+      iterablePrograms.forEach((c) =>
         displayables.push({
           key: c.id,
           label: c.name.en || c.name,