@boarteam/boar-pack-common-frontend 2.6.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boarteam/boar-pack-common-frontend",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Common frontend package for Boar Pack",
   "repository": "git@github.com:boarteam/boar-pack.git",
   "author": "Andrew Balakirev <balakirev.andrey@gmail.com>",
@@ -46,5 +46,5 @@
   "scripts": {
     "yalc:push": "yalc push"
   },
-  "gitHead": "a4d16f61f3a460bf6ba7e4f5e929edc0aef8d949"
+  "gitHead": "fd26e1cd23414aaf4b2aed44640f2eeb2f84b611"
 }

package/src/components/Descriptions/Descriptions.tsx

@@ -16,25 +16,22 @@ import { createStyles } from "antd-style";
 import { debounce } from "lodash";
 import { NamePath } from "antd/lib/form/interface";
 
-const useStyles = createStyles(() => {
+const useStyles = createStyles(({css}) => {
   return {
-    /**
-     * Styles for the ant-descriptions component to show edit icon on hover
-     */
-    antDescriptionsStyles: {
-      '.anticon-edit': {
-        opacity: 0,
-        transition: 'opacity 200ms'
-      },
-      '.ant-descriptions-item-content': {
-        width: '20%',
-      },
-      '.ant-descriptions-item-content:hover': {
-        '.anticon-edit': {
-          opacity: 1
-        },
+    antDescriptionsStyles: css`
+      .ant-descriptions-item-content {
+        .anticon-edit {
+          opacity: 0;
+          transition: opacity 200ms;
+        }
+
+        &:hover {
+          .anticon-edit {
+              opacity: 1;
+          }
+        }
       }
-    }
+    `
   }
 })
 

package/src/components/Descriptions/descriptionTypes.ts

@@ -36,7 +36,7 @@ export type TDescriptionsProps<Entity, CreateDto, UpdateDto, TPathParams = objec
     requestBody: UpdateDto,
     index?: number,
   } & TPathParams) => Promise<Entity>,
-  onCreate: (data: Partial<Entity>) => Promise<void>;
+  onCreate?: (data: Partial<Entity>) => Promise<void>;
   onDelete?: ({}: Partial<Entity> & TPathParams) => Promise<void>,
   pathParams?: TPathParams,
   idColumnName?: string & keyof Entity,

package/src/components/Table/Table.tsx

@@ -9,6 +9,7 @@ import { KEY_SYMBOL, useCreation } from "./useCreation";
 import { getTableDataQueryParams } from "./getTableDataQueryParams";
 import { useEditableTable } from "./useEditableTable";
 import { useBulkEditing } from "./useBulkEditing";
+import { useImportExport } from "./useImportExport";
 
 const useStyles = createStyles(() => {
   return {
@@ -34,6 +35,8 @@ const Table = <Entity extends Record<string | symbol, any>,
     onUpdateMany,
     onDelete,
     onDeleteMany,
+    exportUrl,
+    onImport,
     pathParams,
     idColumnName = 'id',
     entityToCreateDto,
@@ -118,6 +121,11 @@ const Table = <Entity extends Record<string | symbol, any>,
     createNewDefaultParams,
   });
 
+  const { exportButton, importButton, setLastQueryParams } = useImportExport<TPathParams>({
+    exportUrl,
+    onImport,
+  })
+
   useEffect(() => {
     setUpdatePopupData(editableRecord);
     actionRef?.current?.reload();
@@ -158,6 +166,7 @@ const Table = <Entity extends Record<string | symbol, any>,
       queryParams,
       result,
     ]);
+    setLastQueryParams(queryParams);
     return result;
   }
 
@@ -181,6 +190,9 @@ const Table = <Entity extends Record<string | symbol, any>,
           listsHeight: 500,
         },
       }}
+      scroll={{
+        x: 'max-content',
+      }}
       bordered
       search={false}
       editable={editableConfig}
@@ -193,6 +205,8 @@ const Table = <Entity extends Record<string | symbol, any>,
           ? bulkDeleteButton
           : null,
         !viewOnly && createButton || null,
+        !viewOnly && importButton || null,
+        exportUrl && exportButton || null,
         ...toolBarRender && toolBarRender(...args) || [],
       ]}
       columns={columns}

package/src/components/Table/tableTypes.ts

@@ -107,6 +107,8 @@ export interface EditableProps<Entity, CreateDto, UpdateDto, TPathParams = {}> {
   editable?: RowEditableConfig<Entity>;
   afterSave?: (record: Entity) => Promise<void>;
   onCreate?: ({}: { requestBody: CreateDto } & TPathParams) => Promise<Entity>;
+  exportUrl?: string;
+  onImport?: (event: React.ChangeEvent<HTMLInputElement>) => Promise<any>;
   onUpdate: ({}: Partial<Entity> & {
     requestBody: UpdateDto,
     index?: number,

package/src/components/Table/useImportExport.tsx

@@ -0,0 +1,58 @@
+import { Button, Tooltip } from 'antd';
+import { DownloadOutlined, UploadOutlined } from "@ant-design/icons";
+import { useState } from "react";
+import { TGetAllParams } from "./tableTypes";
+import { Link } from "react-router-dom";
+
+export function useImportExport<TPathParams = {}>({
+  exportUrl,
+  onImport
+}: {
+  exportUrl?: string;
+  onImport?: (event: React.ChangeEvent<HTMLInputElement>) => Promise<any>;
+}) {
+  const [isLoadingImport, setIsLoadingImport] = useState(false);
+  const [lastQueryParams, setLastQueryParams] = useState<TGetAllParams & TPathParams>();
+
+  const onImportChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    setIsLoadingImport(true);
+    await onImport?.(event)
+      .then((response) => {
+        console.log(response);
+      })
+      .finally(() => {
+        setIsLoadingImport(false);
+      });
+  }
+
+  const url = exportUrl + (lastQueryParams ? '?' + new URLSearchParams({
+    s: lastQueryParams.s,
+    sort: lastQueryParams.sort?.[0],
+  }).toString() : '');
+  const exportButton = <Tooltip title="Export">
+    <Link to={url} target={'_blank'}>
+      <Button icon={<DownloadOutlined />}/>
+    </Link>
+  </Tooltip>;
+
+  const importButton = <>
+    <Tooltip title="Import">
+      <label htmlFor="import-input">
+        <Button loading={isLoadingImport} icon={<UploadOutlined />} />
+      </label>
+    </Tooltip>
+    <input
+      type="file"
+      id="import-input"
+      style={{ display: "none" }}
+      accept=".xlsx, .xls"
+      onChange={onImportChange}
+    />
+  </>
+
+  return {
+    exportButton,
+    importButton,
+    setLastQueryParams
+  };
+}