Add flatten util for objects and used it for CSV exported data (han…

…dle nested objects)

client/src/pages/filaments/list.tsx

@@ -24,7 +24,7 @@ import {
 } from "../../components/otherModels";
 import { useLiveify } from "../../components/liveify";
 import { removeUndefined } from "../../utils/filtering";
-import {IVendor} from "../vendors/model";
+import { flatten } from "../../utils/objects";
 
 dayjs.extend(utc);
 
@@ -76,7 +76,9 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   // Load initial state
   const initialState = useInitialTableState(namespace);
 
-  const { triggerExport, isLoading } = useExport<IVendor>();
+  const { triggerExport, isLoading } = useExport<IFilament>({
+      mapData: item => flatten(item)
+  });
 
   // Fetch data from the API
   // To provide the live updates, we use a custom solution (useLiveify) instead of the built-in refine "liveMode" feature.

client/src/pages/spools/list.tsx

@@ -34,6 +34,7 @@ import {
 } from "../../components/otherModels";
 import { useLiveify } from "../../components/liveify";
 import { removeUndefined } from "../../utils/filtering";
+import { flatten } from "../../utils/objects";
 
 dayjs.extend(utc);
 
@@ -98,7 +99,11 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
   // State for the switch to show archived spools
   const [showArchived, setShowArchived] = useSavedState("spoolList-showArchived", false);
 
-  const { triggerExport, isLoading } = useExport<ISpoolCollapsed>();
+  const { triggerExport, isLoading } = useExport<ISpool>(
+      {
+        mapData: item => flatten(item)
+      }
+  );
 
   // Fetch data from the API
   // To provide the live updates, we use a custom solution (useLiveify) instead of the built-in refine "liveMode" feature.

client/src/pages/vendors/list.tsx

@@ -10,6 +10,7 @@ import { EditOutlined, EyeOutlined, FilterOutlined, PlusSquareOutlined } from "@
 import { DateColumn, RichColumn, SortedColumn, ActionsColumn } from "../../components/column";
 import { useLiveify } from "../../components/liveify";
 import { removeUndefined } from "../../utils/filtering";
+import { flatten } from "../../utils/objects";
 
 dayjs.extend(utc);
 
@@ -24,7 +25,9 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   // Load initial state
   const initialState = useInitialTableState(namespace);
 
-    const { triggerExport, isLoading } = useExport<IVendor>();
+    const { triggerExport, isLoading } = useExport<IVendor>({
+        mapData: item => flatten(item)
+    });
 
   // Fetch data from the API
   const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<IVendor>({

client/src/utils/objects.ts

@@ -0,0 +1,13 @@
+export const flatten = (data: object, prefix: string = '', delimiter: string = '.') => {
+  const result: { [key: string]: string | number | null } = {};
+
+  Object.entries(data).forEach(([key, value]) => {
+    if (typeof value === 'object') {
+      Object.assign(result, flatten(value, `${prefix}${key}${delimiter}`, delimiter));
+    } else {
+      result[`${prefix}${key}`] = value;
+    }
+  });
+
+  return result;
+};