support for downloading as csv via data table manager

traboda · Feb 7, 2024 · cb52ed3 · cb52ed3
1 parent 58bf26d
commit cb52ed3
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chaya-ui",
-  "version": "1.0.0-beta.76",
+  "version": "1.0.0-beta.77",
   "description": "Modern, Functional Design System & Components for React",
   "scripts": {
     "tailwind": "tailwindcss -i ./src/style.scss -o ./dist/style.css -c ./tailwind.config.cjs",
@@ -68,6 +68,7 @@
     "@storybook/testing-library": "^0.2.2",
     "@storybook/theming": "^7.6.4",
     "@types/color": "^3.0.3",
+    "@types/papaparse": "^5.3.14",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@types/webappsec-credential-management": "^0.6.4",
@@ -84,9 +85,10 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-react": "^7.32.1",
     "eslint-plugin-storybook": "^0.6.15",
+    "flatten-anything": "^3.0.5",
     "immer": "^9.0.21",
     "loadash": "^1.0.0",
-    "nanoid": "5.0.3",
+    "papaparse": "^5.4.1",
     "postcss": "^8.4.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/src/components/DataTableManager.tsx b/src/components/DataTableManager.tsx
@@ -1,5 +1,7 @@
 'use client';
 import React, { useState, useEffect } from 'react';
+import Papa from 'papaparse';
+import { flatten } from 'flatten-anything';
 
 import Close from '../utils/icons/close';
 import Filter from '../utils/icons/filter';
@@ -58,7 +60,7 @@ export type DataTableManagerProps = {
   isFilteringInitialised?: boolean,
 
   // download
-  onDownload?: () => void,
+  onDownload?: () => Promise<object[]> | object[],
   isDownloadLoading?: boolean,
 
   // create
@@ -109,6 +111,21 @@ const DataTableManager = ({
   const [_keyword, _setKeyword] = useState(keyword || '');
   const [showFilters, setShowFilters] = useState(isFilteringInitialised);
 
+  const handleDownload = async () => {
+    if (typeof onDownload !== 'function')
+      return;
+    const data = await onDownload();
+    if (!data) return;
+    const csv = Papa.unparse(data?.map((i) => flatten(i)));
+    const csvData = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const csvURL = window.URL.createObjectURL(csvData);
+    const link = document.createElement('a');
+    link.setAttribute('href', csvURL);
+    link.setAttribute('download', `${labels.label || 'data'}_${new Date().getTime()}.csv`);
+    document.body.appendChild(link);
+    link.click();
+  };
+
   useEffect(() => {
     _setKeyword(keyword || '');
   }, [keyword]);
@@ -199,7 +216,7 @@ const DataTableManager = ({
               type="button"
               variant="minimal"
               color="shade"
-              onClick={onDownload}
+              onClick={handleDownload}
               isLoading={isDownloadLoading}
               isDisabled={isDownloadLoading}
             >
@@ -297,7 +314,7 @@ const DataTableManager = ({
               onClick={onCancelSelections}
             />
           </div>
-          <div className="dsr-w-full md:dsr-w-1/2 lg:dsr-w-2/3 dsr-px-2 dsr-py-2 dsr-flex dsr-items-center dsr-justify-end dsr-gap-1">
+          <div className="dsr-w-full md:dsr-w-1/2 lg:dsr-w-2/3 dsr-px-2 dsr-py-2 dsr-flex dsr-items-center dsr-justify-end dsr-gap-2">
             {selectionActions?.filter((a) => !a.isHidden).map((a) => (
               <Button
                 variant="minimal"

diff --git a/src/components/DropdownFilter.tsx b/src/components/DropdownFilter.tsx
@@ -9,6 +9,7 @@ import SearchBox from './SearchBox';
 import Dropdown from './Dropdown';
 import ListViewItem from './ListView/item';
 import { IconInputType } from './Icon';
+import SkeletonItem from './SkeletonItem';
 
 const defaultLabels = {
   searchPlaceholder: 'Search',
@@ -68,7 +69,10 @@ const DropdownRender = ({
 
   useEffect(onLoad, []);
 
-  const availableOptions = options ? options.filter((f) => keyword.length == 0 || f.label.toLowerCase().startsWith(keyword.toLowerCase())) : [];
+  const availableOptions =
+  options ?
+    options.filter((f) => keyword.length == 0 || f.label.toLowerCase().startsWith(keyword.toLowerCase()))
+    : [];
 
   useEffect(() => {
     optionRefs.current = Array(availableOptions.length).fill(null).map(() => React.createRef());
@@ -134,16 +138,28 @@ const DropdownRender = ({
           setKeyword={setKeyword}
         />
       </div>
-      <div className="dsr-w-full dsr-px-2 dsr-py-1 dsr-bg-background dsr-border-b dsr-border-neutral-200/50">
-        <span className="dsr-opacity-80 dsr-uppercase dsr-font-semibold dsr-text-xs">
-          {labels.optionsTitle}
-        </span>
-      </div>
-      <div className="dsr-max-h-[30vh] dsr-overflow-y-auto">
+      {labels.optionsTitle?.length > 0 ? (
+        <div className="dsr-w-full dsr-px-2 dsr-py-1 dsr-bg-background dsr-border-b dsr-border-neutral-200/50">
+          <span className="dsr-opacity-80 dsr-uppercase dsr-font-semibold dsr-text-xs">
+            {labels.optionsTitle}
+          </span>
+        </div>
+      ) : null}
+      <div
+        className={clsx([
+          !(labels.optionsTitle?.length > 0) && 'dsr-border-t dsr-border-neutral-200/50',
+          'dsr-max-h-[30vh] dsr-overflow-y-auto',
+        ])}
+      >
         {isFetching ? (
-          <div>
-            Fetching
-          </div>
+          <ul>
+            {Array.from({ length: 4 }).map((_, index) => (
+              <div key={index} className="dsr-flex dsr-items-center dsr-p-2 dsr-gap-2">
+                <SkeletonItem variant="wave" w={24} h={24} />
+                <SkeletonItem variant="wave" w="80%" h={24} />
+              </div>
+            ))}
+          </ul>
         ) : (
           <ul tabIndex={-1} role="listbox">
             {availableOptions.map((field, index) => (
@@ -245,7 +261,7 @@ const DropdownFilter = ({
       try {
         const fetchedOptions = await onFetch(searchKeyword);
         setOptions((prev) => {
-          const newOptions = fetchedOptions.filter((option) => !prev.find((prevOption) => prevOption.value === option.value));
+          const newOptions = (fetchedOptions || []).filter((option) => !prev.find((prevOption) => prevOption.value === option.value));
           return [...prev, ...newOptions];
         });
       } catch (error) {

diff --git a/src/components/SkeletonItem/index.tsx b/src/components/SkeletonItem/index.tsx
@@ -9,10 +9,11 @@ export type SkeletonItemProps = {
   variant?: 'wave' | 'pulse'
   w?: string | number
   h?: string | number
-  className?: string
+  className?: string,
+  children?: React.ReactNode,
 };
 
-const SkeletonItem = ({ circular, minWidth, w, h, className, variant = 'wave' } : SkeletonItemProps) => (
+const SkeletonItem = ({ circular, minWidth, w, h, className, variant = 'wave', children } : SkeletonItemProps) => (
   <div
     className={clsx([
       circular ? 'dsr-rounded-full' : 'dsr-rounded-lg',
@@ -25,7 +26,9 @@ const SkeletonItem = ({ circular, minWidth, w, h, className, variant = 'wave' }
       width: w ?? '20px',
       height: h ?? '20px',
     }}
-  />
+  >
+    {children}
+  </div>
 );
 
 

diff --git a/stories/components/display/DataTable.stories.tsx b/stories/components/display/DataTable.stories.tsx
@@ -399,7 +399,7 @@ const DataTableManagerTemplate: Story<DataTableProps<ItemType>> = (args) => {
         <DataTableManager
           keyword={keyword}
           setKeyword={setKeyword}
-          onDownload={() => window.alert('Download')}
+          onDownload={() => { window.alert('Download'); return []; }}
           onCreate={() => window.alert('Create')}
           tabs={[
             { label: 'All', key: 'all' },
@@ -416,7 +416,6 @@ const DataTableManagerTemplate: Story<DataTableProps<ItemType>> = (args) => {
               labels: {
                 label: 'Category',
                 searchLabel: 'Search Category',
-                optionsTitle: 'Category',
               },
               options: [
                 { value: 'hardware', label: 'Hardware' },