Merge pull request #263 from Ferlab-Ste-Justine/fix/FLUI-29-42-39/sea…

…rchafter fix(pagination): FLUI-29 FLUI-42 FLUI-39 fix searchafter
Ferlab-Ste-Justine · Mar 30, 2023 · f263d62 · f263d62
2 parents 631d137 + e8149bc
commit f263d62
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 17 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "5.5.6",
+    "version": "5.5.7",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"
@@ -101,4 +101,4 @@
         "url": "https://github.com/Ferlab-Ste-Justine/ferlab-ui/issues"
     },
     "homepage": "https://github.com/Ferlab-Ste-Justine/ferlab-ui#readme"
-}
+}
diff --git a/packages/ui/src/components/ProTable/Header/ItemsCount/index.tsx b/packages/ui/src/components/ProTable/Header/ItemsCount/index.tsx
@@ -30,6 +30,7 @@ export const ItemsCount = ({
     const to = from + (isLastPage && hasLessThanPageSize ? total % size : size) - 1;
 
     const formatNumber = () => (dictionnary.numberFormat ? dictionnary.numberFormat(total) : total);
+
     return (
         <Space className={className}>
             {(to < size && page === 1) || total === 0 ? (

diff --git a/packages/ui/src/components/ProTable/Pagination/index.tsx b/packages/ui/src/components/ProTable/Pagination/index.tsx
@@ -16,6 +16,7 @@ const Pagination = ({
     current,
     defaultViewPerQuery,
     dictionary,
+    loading,
     onChange,
     onPageChange,
     onShowSizeChange,
@@ -28,7 +29,8 @@ const Pagination = ({
     const isDisabled =
         queryConfig.searchAfter === undefined ||
         total === 0 ||
-        queryConfig.firstPageFlag?.toString() === searchAfter?.tail?.toString();
+        queryConfig.firstPageFlag?.toString() === searchAfter?.tail?.toString() ||
+        loading;
 
     return (
         <Space className={styles.pagination}>
@@ -37,10 +39,13 @@ const Pagination = ({
                 onSelect={(viewPerQuery: PaginationViewPerQuery) => {
                     setQueryConfig({
                         ...queryConfig,
+                        firstPageFlag: undefined,
+                        operations: undefined,
+                        searchAfter: undefined,
                         size: viewPerQuery,
                         sort: queryConfig.operations?.previous ? reverseSortDirection(queryConfig) : queryConfig.sort,
                     });
-
+                    onChange(1, queryConfig.size);
                     onViewQueryChange?.(viewPerQuery);
                     onShowSizeChange();
                 }}
@@ -89,7 +94,7 @@ const Pagination = ({
                 {dictionary?.pagination?.previous || 'Prev.'}
             </Button>
             <Button
-                disabled={total === 0 || total < queryConfig.size}
+                disabled={total === 0 || total < queryConfig.size || loading}
                 onClick={() => {
                     setQueryConfig({
                         ...queryConfig,

diff --git a/packages/ui/src/components/ProTable/index.tsx b/packages/ui/src/components/ProTable/index.tsx
@@ -82,8 +82,8 @@ export const generateColumnState = <RecordType,>(
     };
 };
 
+// eslint-disable-next-line @typescript-eslint/ban-types
 const ProTable = <RecordType extends object & { key: string } = any>({
-    tableId,
     columns,
     pagination,
     wrapperClassName = '',
@@ -99,19 +99,29 @@ const ProTable = <RecordType extends object & { key: string } = any>({
             total: 0,
         },
         marginBtm: 12,
-        onClearSelection: () => {},
-        onColumnSortChange: () => {},
-        onSelectAllResultsChange: () => {},
-        onSelectedRowsChange: () => {},
-        onTableExportClick: () => {},
+        onClearSelection: () => {
+            // optional function when omit
+        },
+        onColumnSortChange: () => {
+            // optional function when omit
+        },
+        onSelectAllResultsChange: () => {
+            // optional function when omit
+        },
+        onSelectedRowsChange: () => {
+            // optional function when omit
+        },
+        onTableExportClick: () => {
+            // optional function when omit
+        },
     },
     initialSelectedKey = [],
     enableRowSelection = false,
     initialColumnState,
     dictionary = {},
     summaryColumns,
-    onSelectionChange,
     tableRef,
+    loading,
     ...tableProps
 }: TProTableProps<RecordType>): React.ReactElement => {
     //    const columnState = generateColumnState(initialColumnState!, columns);
@@ -123,7 +133,7 @@ const ProTable = <RecordType extends object & { key: string } = any>({
     const [selectedRowKeys, setSelectedRowKeys] = useState<any[]>(initialSelectedKey);
 
     useEffect(() => {
-        const orderedColumns = generateColumnState(initialColumnState!, columns);
+        const orderedColumns = generateColumnState(initialColumnState ?? [], columns);
         setLeftColumnsState(orderedColumns.left);
         setColumnsState(orderedColumns.dynamic);
         setRightColumnsState(orderedColumns.right);
@@ -233,6 +243,9 @@ const ProTable = <RecordType extends object & { key: string } = any>({
         return { ...column, title };
     };
 
+    const isProColumnsType = (c: ProColumnTypes<RecordType> | undefined): c is ProColumnTypes<RecordType> =>
+        !isEmpty(c);
+
     const tablePropsExtra: TPropsTablePropsExtra = {};
     if (summaryColumns) {
         tablePropsExtra.summary = () => (
@@ -258,7 +271,7 @@ const ProTable = <RecordType extends object & { key: string } = any>({
                 className={tableHeaderClassName}
                 dictionary={dictionary}
                 extra={getExtraConfig()}
-                extraSpacing={headerConfig.extraSpacing!}
+                extraSpacing={headerConfig.extraSpacing}
                 hideItemsCount={headerConfig.hideItemsCount}
                 onClearSelection={() => {
                     if (headerConfig.onClearSelection) {
@@ -288,8 +301,8 @@ const ProTable = <RecordType extends object & { key: string } = any>({
                         ?.concat(columnsState, rightColumnsState)
                         .filter(({ visible }) => visible)
                         .sort((a, b) => a.index - b.index)
-                        .map(({ key }) => columns.find((column) => column.key === key)!)
-                        .filter((column) => !isEmpty(column))
+                        .map(({ key }) => columns.find((column) => column.key === key))
+                        .filter(isProColumnsType)
                         .map(generateColumnTitle)}
                     locale={{
                         emptyText: (
@@ -332,6 +345,7 @@ const ProTable = <RecordType extends object & { key: string } = any>({
                                       handleOnSelectRowsChange(selectedRowKeys, selectedRows);
 
                                       if (tableProps.rowSelection?.onChange) {
+                                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                                           // @ts-ignore
                                           tableProps.rowSelection.onChange(selectedRowKeys, selectedRows);
                                       }
@@ -358,6 +372,7 @@ const ProTable = <RecordType extends object & { key: string } = any>({
                 <Pagination
                     {...(pagination as IPaginationProps)}
                     dictionary={dictionary}
+                    loading={loading ? true : false}
                     onPageChange={() => {
                         if (selectedAllResults) {
                             handleOnSelectRowsChange([], []);
@@ -367,7 +382,7 @@ const ProTable = <RecordType extends object & { key: string } = any>({
                     onShowSizeChange={() => {
                         handleOnSelectRowsChange([], []);
                     }}
-                    total={tableProps.dataSource?.length || headerConfig.itemCount?.total || 0}
+                    total={headerConfig.itemCount?.total || 0}
                 />
             )}
         </Space>

diff --git a/packages/ui/src/components/ProTable/types.ts b/packages/ui/src/components/ProTable/types.ts
@@ -12,6 +12,7 @@ export enum PaginationDirection {
 }
 
 export interface IPaginationProps {
+    loading: boolean;
     current: number;
     setQueryConfig: TQueryConfigCb;
     queryConfig: IQueryConfig;

diff --git a/packages/ui/src/components/ProTable/utils.ts b/packages/ui/src/components/ProTable/utils.ts
@@ -23,3 +23,16 @@ export const reverseSortDirection = (queryConfig: IQueryConfig): ISort[] =>
             order: sort.order === SortDirection.Asc ? SortDirection.Desc : SortDirection.Asc,
         };
     });
+
+export const resetSearchAfterQueryConfig = (
+    queryConfig: IQueryConfig,
+    setQueryConfig: (queryConfig: IQueryConfig) => void,
+): void => {
+    setQueryConfig({
+        ...queryConfig,
+        firstPageFlag: undefined,
+        operations: undefined,
+        pageIndex: 1,
+        searchAfter: undefined,
+    });
+};