Fix: collections pagination and other admin UX improvements

CHANGELOG.md

@@ -5,9 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-
 ## [Unreleased]
 
+### Fixed
+
+- Pagination bug on admin organization details collections assignment UI
+
+### Added
+
+- Loading indicators for admin organization details: cost centers, collections, payment terms, price tables, and sellers
+
 ## [1.31.2] - 2024-03-14
 
 ### Changed
@@ -23,6 +30,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [1.31.0] - 2024-02-27
 
 ### Added
+
 - Add help footer on bulk import upload modal
 
 ## [1.30.2] - 2024-01-31
@@ -70,7 +78,8 @@ Arabic, Bulgarian, Catalan, Czech, Danish, German, Greek, English, Spanish, Finn
 ## [1.28.1] - 2023-11-06
 
 ### Fixed
-- Arabic, Bulgarian, Catalan, Czech, Danish, German, Greek, English, Spanish, Finnish, French, Indonesian, Italian, Japanese, Korean, Dutch, Norwegian, Polish, Portuguese, Romanian, Russian, Slovakian, Slovenian, Swedish, Thai and Ukrainian translations. 
+
+- Arabic, Bulgarian, Catalan, Czech, Danish, German, Greek, English, Spanish, Finnish, French, Indonesian, Italian, Japanese, Korean, Dutch, Norwegian, Polish, Portuguese, Romanian, Russian, Slovakian, Slovenian, Swedish, Thai and Ukrainian translations.
 
 ## [1.28.0] - 2023-10-18
 

react/admin/OrganizationDetails/OrganizationDetailsCollections.tsx

@@ -18,9 +18,9 @@
   collectionsState,
   setCollectionsState,
 }: {
   getSchema: (argument?: any) => any
   collectionsState: Collection[]
   setCollectionsState: (value: any) => void
 }) => {
   /**
    * Hooks
@@ -42,17 +42,19 @@
   const {
     data: collectionsData,
     refetch: refetchCollections,
-  } = useQuery(GET_COLLECTIONS, { ssr: false })
+    loading,
+  } = useQuery(GET_COLLECTIONS, {
+    variables: collectionPaginationState,
+    notifyOnNetworkStatusChange: true,
+    ssr: false,
+  })
 
   /**
    * Effects
    */
 
   useEffect(() => {
-    if (
-      !collectionsData?.collections?.items?.length ||
-      collectionOptions.length
-    ) {
+    if (!collectionsData?.collections?.items?.length) {
       return
     }
 
@@ -171,6 +173,7 @@
             fullWidth
             schema={getSchema('availableCollections')}
             items={collectionOptions}
+            loading={loading}
             pagination={{
               onNextClick: handleCollectionsNextClick,
               onPrevClick: handleCollectionsPrevClick,
@@ -189,7 +192,7 @@
               textShowRows: formatMessage(messages.showRows),
               textOf: formatMessage(messages.of),
               totalItems: collectionsData?.collections?.paging?.total ?? 0,
-              rowsOptions: [25, 50, 100],
+              rowsOptions: [25, 50],
             }}
             bulkActions={organizationBulkAction(
               handleAddCollections,

react/admin/OrganizationDetails/OrganizationDetailsCostCenters.tsx

@@ -87,15 +87,17 @@ const OrganizationDetailsCostCenters = ({
    * Mutations
    */
   const [createCostCenter] = useMutation(CREATE_COST_CENTER)
-  const { data: costCentersData, refetch: refetchCostCenters } = useQuery(
-    GET_COST_CENTERS,
-    {
-      variables: { ...costCenterPaginationState, id: params?.id },
-      fetchPolicy: 'network-only',
-      skip: !params?.id,
-      ssr: false,
-    }
-  )
+  const {
+    data: costCentersData,
+    refetch: refetchCostCenters,
+    loading,
+  } = useQuery(GET_COST_CENTERS, {
+    variables: { ...costCenterPaginationState, id: params?.id },
+    fetchPolicy: 'network-only',
+    notifyOnNetworkStatusChange: true,
+    skip: !params?.id,
+    ssr: false,
+  })
 
   //! CUSTOM FIELDS
   const {
@@ -286,6 +288,7 @@ const OrganizationDetailsCostCenters = ({
         <Table
           fullWidth
           schema={getCostCenterSchema()}
+          loading={loading}
           items={costCentersData?.getCostCentersByOrganizationId?.data}
           onRowClick={({
             rowData: { id },

react/admin/OrganizationDetails/OrganizationDetailsPayTerms.tsx

@@ -38,7 +38,7 @@ const OrganizationDetailsPayTerms = ({
    * Queries
    */
 
-  const { data: paymentTermsData } = useQuery<{
+  const { data: paymentTermsData, loading } = useQuery<{
     getPaymentTerms: PaymentTerm[]
   }>(GET_PAYMENT_TERMS, { ssr: false })
 
@@ -47,10 +47,7 @@ const OrganizationDetailsPayTerms = ({
    */
 
   useEffect(() => {
-    if (
-      !paymentTermsData?.getPaymentTerms?.length ||
-      paymentTermsOptions.length
-    ) {
+    if (!paymentTermsData?.getPaymentTerms?.length) {
       return
     }
 
@@ -131,6 +128,7 @@ const OrganizationDetailsPayTerms = ({
             fullWidth
             schema={getSchema('availablePayments')}
             items={paymentTermsOptions}
+            loading={loading}
             bulkActions={organizationBulkAction(
               handleAddPaymentTerms,
               messages.addToOrg,

react/admin/OrganizationDetails/OrganizationDetailsPriceTables.tsx

@@ -34,7 +34,9 @@ const OrganizationDetailsPriceTables = ({
   /**
    * Queries
    */
-  const { data: priceTablesData } = useQuery(GET_PRICE_TABLES, { ssr: false })
+  const { data: priceTablesData, loading } = useQuery(GET_PRICE_TABLES, {
+    ssr: false,
+  })
 
   /**
    * Effects
@@ -120,6 +122,7 @@ const OrganizationDetailsPriceTables = ({
             fullWidth
             schema={getSchema('availablePriceTables')}
             items={priceTableOptions}
+            loading={loading}
             bulkActions={organizationBulkAction(
               handleAddPriceTables,
               messages.addToOrg,

react/admin/OrganizationDetails/OrganizationDetailsSellers.tsx

@@ -39,7 +39,7 @@ const OrganizationDetailsSellers = ({
   /**
    * Queries
    */
-  const { data: sellersData } = useQuery(GET_SELLERS)
+  const { data: sellersData, loading } = useQuery(GET_SELLERS)
 
   /**
    * Effects
@@ -107,6 +107,7 @@ const OrganizationDetailsSellers = ({
             fullWidth
             schema={getSchema()}
             items={sellersState}
+            loading={loading}
             bulkActions={organizationBulkAction(
               handleRemoveSellers,
               messages.removeFromOrg,