Add export button to all list using built in export functionality of …

…refinedev Signed-off-by: Vika <vika.vorkin@gmail.com>
Donkie · Feb 8, 2024 · ad8f914 · ad8f914
1 parent babb95d
commit ad8f914
Show file tree

Hide file tree

Showing 11 changed files with 91 additions and 28 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -11,7 +11,7 @@
     "@ant-design/icons": "^5.2.6",
     "@loadable/component": "^5.16.2",
     "@refinedev/antd": "^5.37.0",
-    "@refinedev/core": "^4.46.0",
+    "@refinedev/core": "^4.47.0",
     "@refinedev/kbar": "^1.3.4",
     "@refinedev/react-router-v6": "^4.5.4",
     "@refinedev/simple-rest": "^5.0.0",
@@ -65,4 +65,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
diff --git a/client/public/locales/hu/common.json b/client/public/locales/hu/common.json
@@ -161,7 +161,8 @@
         "unArchive": "Arhiválás visszavonása",
         "clone": "Másolás",
         "clear": "Törlés",
-        "saveAndAdd": "Mentés és hozzáadás"
+        "saveAndAdd": "Mentés és hozzáadás",
+        "export": "Exportálás"
     },
     "filament": {
         "fields_help": {

diff --git a/client/public/locales/it/common.json b/client/public/locales/it/common.json
@@ -162,7 +162,8 @@
         "unArchive": "Ripristina",
         "clone": "Clona",
         "clear": "Pulisci",
-        "saveAndAdd": "Salva e aggiungi"
+        "saveAndAdd": "Salva e aggiungi",
+        "export": "Esporta"
     },
     "filament": {
         "fields_help": {

diff --git a/client/public/locales/ru/common.json b/client/public/locales/ru/common.json
@@ -28,7 +28,8 @@
         "notAccessTitle": "У вас нет разрешения на доступ",
         "hideColumns": "Скрыть столбцы",
         "clearFilters": "Очистить фильтр",
-        "saveAndAdd": "Сохранить и добавить"
+        "saveAndAdd": "Сохранить и добавить",
+        "export": "Экспорт"
     },
     "warnWhenUnsavedChanges": "Вы уверены, что хотите выйти? У вас есть несохраненные изменения.",
     "notifications": {

diff --git a/client/public/locales/uk/common.json b/client/public/locales/uk/common.json
@@ -21,7 +21,8 @@
         "notAccessTitle": "У Вас бракує прав для доступу",
         "clone": "Клонувати",
         "unArchive": "Розархівувати",
-        "saveAndAdd": "Зберегти та додати"
+        "saveAndAdd": "Зберегти та додати",
+        "export": "Експорт"
     },
     "spool": {
         "fields": {

diff --git a/client/public/locales/zh/common.json b/client/public/locales/zh/common.json
@@ -28,7 +28,8 @@
         "notAccessTitle": "您没有访问权限",
         "hideColumns": "隐藏列",
         "clearFilters": "清除筛选器",
-        "saveAndAdd": "保存并添加"
+        "saveAndAdd": "保存并添加",
+        "export": "导出到"
     },
     "warnWhenUnsavedChanges": "您确定要离开吗？您有未保存的更改。",
     "notifications": {

diff --git a/client/src/pages/filaments/list.tsx b/client/src/pages/filaments/list.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation } from "@refinedev/core";
-import { useTable, List } from "@refinedev/antd";
+import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation, useExport } from "@refinedev/core";
+import { useTable, List, ExportButton } from "@refinedev/antd";
 import { Table, Button, Dropdown } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
@@ -28,6 +28,7 @@ import { removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { useNavigate } from "react-router-dom";
 import { useCurrency } from "../../utils/settings";
+import { flatten } from "../../utils/objects";
 
 dayjs.extend(utc);
 
@@ -84,6 +85,13 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
   // Load initial state
   const initialState = useInitialTableState(namespace);
 
+  const { triggerExport, isLoading } = useExport<IFilament>({
+      mapData: item => flatten(item),
+      unparseConfig: {
+          columns: allColumnsWithExtraFields
+      }
+  });
+
   // Fetch data from the API
   // To provide the live updates, we use a custom solution (useLiveify) instead of the built-in refine "liveMode" feature.
   // This is because the built-in feature does not call the liveProvider subscriber with a list of IDs, but instead
@@ -213,6 +221,9 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
             </Button>
           </Dropdown>
           {defaultButtons}
+          <ExportButton type="dashed" onClick={triggerExport} loading={isLoading} >
+              {t("buttons.export")}
+          </ExportButton>
         </>
       )}
     >

diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { IResourceComponentsProps, useInvalidate, useNavigation, useTranslate } from "@refinedev/core";
-import { useTable, List } from "@refinedev/antd";
+import { IResourceComponentsProps, useInvalidate, useNavigation, useTranslate, useExport } from "@refinedev/core";
+import { useTable, List, ExportButton } from "@refinedev/antd";
 import { Table, Button, Dropdown, Modal } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
@@ -38,6 +38,7 @@ import { removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { useNavigate } from "react-router-dom";
 import { useCurrency } from "../../utils/settings";
+import { flatten } from "../../utils/objects";
 
 dayjs.extend(utc);
 
@@ -111,6 +112,12 @@ 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<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.
   // This is because the built-in feature does not call the liveProvider subscriber with a list of IDs, but instead
@@ -308,6 +315,9 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
             </Button>
           </Dropdown>
           {defaultButtons}
+          <ExportButton type="dashed" onClick={triggerExport} loading={isLoading} >
+            {t("buttons.export")}
+          </ExportButton>
         </>
       )}
     >

diff --git a/client/src/pages/vendors/list.tsx b/client/src/pages/vendors/list.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation } from "@refinedev/core";
-import { useTable, List } from "@refinedev/antd";
+import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation, useExport } from "@refinedev/core";
+import { useTable, List, ExportButton } from "@refinedev/antd";
 import { Table, Button, Dropdown } from "antd";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
@@ -12,6 +12,7 @@ import { useLiveify } from "../../components/liveify";
 import { removeUndefined } from "../../utils/filtering";
 import { EntityType, useGetFields } from "../../utils/queryFields";
 import { useNavigate } from "react-router-dom";
+import { flatten } from "../../utils/objects";
 
 dayjs.extend(utc);
 
@@ -30,6 +31,13 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
   // Load initial state
   const initialState = useInitialTableState(namespace);
 
+    const { triggerExport, isLoading } = useExport<IVendor>({
+        mapData: item => flatten(item),
+        unparseConfig: {
+          columns: allColumnsWithExtraFields
+        }
+    });
+
   // Fetch data from the API
   const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<IVendor>({
     syncWithLocation: false,
@@ -145,6 +153,9 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
             </Button>
           </Dropdown>
           {defaultButtons}
+          <ExportButton type="dashed" onClick={triggerExport} loading={isLoading} >
+              {t("buttons.export")}
+          </ExportButton>
         </>
       )}
     >

diff --git a/client/src/utils/objects.ts b/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;
+};