[PUI] Tweaks (inventree#7180)

* Table: Add loading state * Update BOM pricing panel * Fix for TableStringValue - Order of operations
martonmiklos · May 8, 2024 · 082ae88 · 082ae88
1 parent 23ef266
commit 082ae88
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 25 deletions.
diff --git a/src/frontend/src/components/details/Details.tsx b/src/frontend/src/components/details/Details.tsx
@@ -183,14 +183,14 @@ function NameBadge({ pk, type }: { pk: string | number; type: BadgeType }) {
 function TableStringValue(props: Readonly<FieldProps>) {
   let value = props?.field_value;
 
-  if (value === undefined) {
-    return '---';
-  }
-
   if (props.field_data?.value_formatter) {
     value = props.field_data.value_formatter();
   }
 
+  if (value === undefined) {
+    return '---';
+  }
+
   if (props.field_data?.badge) {
     return <NameBadge pk={value} type={props.field_data.badge} />;
   }

diff --git a/src/frontend/src/hooks/UseTable.tsx b/src/frontend/src/hooks/UseTable.tsx
@@ -17,6 +17,8 @@ export type TableState = {
   tableKey: string;
   refreshTable: () => void;
   activeFilters: TableFilter[];
+  isLoading: boolean;
+  setIsLoading: (value: boolean) => void;
   setActiveFilters: (filters: TableFilter[]) => void;
   clearActiveFilters: () => void;
   expandedRecords: any[];
@@ -120,9 +122,13 @@ export function useTable(tableName: string): TableState {
     [records]
   );
 
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
   return {
     tableKey,
     refreshTable,
+    isLoading,
+    setIsLoading,
     activeFilters,
     setActiveFilters,
     clearActiveFilters,

diff --git a/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx b/src/frontend/src/pages/part/pricing/BomPricingPanel.tsx
@@ -34,7 +34,7 @@ import { apiUrl } from '../../../states/ApiState';
 import { TableColumn } from '../../../tables/Column';
 import { DateColumn, PartColumn } from '../../../tables/ColumnRenderers';
 import { InvenTreeTable } from '../../../tables/InvenTreeTable';
-import { NoPricingData } from './PricingPanel';
+import { LoadingPricingData, NoPricingData } from './PricingPanel';
 
 // Display BOM data as a pie chart
 function BomPieChart({
@@ -209,6 +209,10 @@ export default function BomPricingPanel({
 
   const [chartType, setChartType] = useState<string>('pie');
 
+  const hasData: boolean = useMemo(() => {
+    return !table.isLoading && bomPricingData.length > 0;
+  }, [table.isLoading, bomPricingData.length]);
+
   return (
     <Stack spacing="xs">
       <SimpleGrid cols={2}>
@@ -227,26 +231,34 @@ export default function BomPricingPanel({
             modelField: 'sub_part'
           }}
         />
-        {bomPricingData.length > 0 ? (
-          <Stack spacing="xs">
-            {chartType == 'bar' && (
-              <BomBarChart data={bomPricingData} currency={pricing?.currency} />
-            )}
-            {chartType == 'pie' && (
-              <BomPieChart data={bomPricingData} currency={pricing?.currency} />
-            )}
-            <SegmentedControl
-              value={chartType}
-              onChange={setChartType}
-              data={[
-                { value: 'pie', label: t`Pie Chart` },
-                { value: 'bar', label: t`Bar Chart` }
-              ]}
-            />
-          </Stack>
-        ) : (
-          <NoPricingData />
-        )}
+        <Stack spacing="xs">
+          {table.isLoading && <LoadingPricingData />}
+          {hasData && (
+            <Stack spacing="xs">
+              {chartType == 'bar' && (
+                <BomBarChart
+                  data={bomPricingData}
+                  currency={pricing?.currency}
+                />
+              )}
+              {chartType == 'pie' && (
+                <BomPieChart
+                  data={bomPricingData}
+                  currency={pricing?.currency}
+                />
+              )}
+              <SegmentedControl
+                value={chartType}
+                onChange={setChartType}
+                data={[
+                  { value: 'pie', label: t`Pie Chart` },
+                  { value: 'bar', label: t`Bar Chart` }
+                ]}
+              />
+            </Stack>
+          )}
+          {!hasData && !table.isLoading && <NoPricingData />}
+        </Stack>
       </SimpleGrid>
     </Stack>
   );

diff --git a/src/frontend/src/pages/part/pricing/PricingPanel.tsx b/src/frontend/src/pages/part/pricing/PricingPanel.tsx
@@ -4,6 +4,8 @@ import {
   AccordionControlProps,
   Alert,
   Box,
+  Center,
+  Loader,
   Space,
   Stack,
   Text,
@@ -68,3 +70,14 @@ export function NoPricingData() {
     </Stack>
   );
 }
+
+export function LoadingPricingData() {
+  return (
+    <Center>
+      <Stack spacing="xs">
+        <Text>{t`Loading pricing data`}</Text>
+        <Loader />
+      </Stack>
+    </Center>
+  );
+}
diff --git a/src/frontend/src/tables/InvenTreeTable.tsx b/src/frontend/src/tables/InvenTreeTable.tsx
@@ -454,6 +454,10 @@ export function InvenTreeTable<T = any>({
     refetchOnMount: true
   });
 
+  useEffect(() => {
+    tableState.setIsLoading(isFetching);
+  }, [isFetching]);
+
   // Update tableState.records when new data received
   useEffect(() => {
     tableState.setRecords(data ?? []);