fix: quotes table loading position; scroll to top after change page o…

…r pageSize
vtex-apps · Jan 23, 2025 · e916792 · e916792
1 parent 38d759f
commit e916792
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 130 deletions.
diff --git a/react/components/QuotesTable.css b/react/components/QuotesTable.css
@@ -0,0 +1,4 @@
+.tableContainer :global(.dtc) > :global(.vtex-styleguide-9-x-rotate) {
+  position: absolute;
+  top: 200px;
+}
diff --git a/react/components/QuotesTable.tsx b/react/components/QuotesTable.tsx
@@ -19,6 +19,7 @@ import OrganizationAndCostCenterFilter from './OrganizationAndCostCenterFilter'
 import type { OrgAndCC } from './OrganizationAndCostCenterFilter'
 import { LabelByStatusMap } from '../utils/status'
 import { getEmptySimpleQuote } from '../utils/helpers'
+import styles from './QuotesTable.css'
 
 interface QuotesTableProps {
   permissions: string[]
@@ -400,151 +401,155 @@ const QuotesTable: FunctionComponent<QuotesTableProps> = ({
 
   return (
     <PageBlock>
-      <Table
-        density="low"
-        fullWidth
-        items={quotes}
-        loading={loading}
-        schema={getSchema()}
-        lineActions={lineActions}
-        onRowClick={({ rowData: { id } }: CellRendererProps) => {
-          if (!id) return
-
-          navigate({
-            page: 'store.b2b-quote-details',
-            params: { id },
-          })
-        }}
-        emptyStateLabel={formatMessage(tableMessages.emptyState)}
-        pagination={{
-          onNextClick: () => {
-            cleanChildrenStates()
-            handleNextClick()
-          },
-          onPrevClick: () => {
-            cleanChildrenStates()
-            handlePrevClick()
-          },
-          onRowsChange: (e: ChangeEvent<HTMLInputElement>) => {
-            cleanChildrenStates()
-            handleRowsChange(e)
-          },
-          currentItemFrom: (page - 1) * pageSize + 1,
-          currentItemTo: total < page * pageSize ? total : page * pageSize,
-          textShowRows: formatMessage(tableMessages.showRows),
-          textOf: formatMessage(tableMessages.of),
-          totalItems: total,
-          rowsOptions: [25, 50, 100],
-        }}
-        toolbar={{
-          inputSearch: {
-            value: searchValue,
-            placeholder: formatMessage(tableMessages.placeholderSearch),
-            onChange: (e: React.FormEvent<HTMLInputElement>) => {
+      <div className={`${styles.tableContainer} relative`}>
+        <Table
+          density="low"
+          fullWidth
+          items={quotes}
+          loading={loading}
+          schema={getSchema()}
+          lineActions={lineActions}
+          onRowClick={({ rowData: { id } }: CellRendererProps) => {
+            if (!id) return
+
+            navigate({
+              page: 'store.b2b-quote-details',
+              params: { id },
+            })
+          }}
+          emptyStateLabel={formatMessage(tableMessages.emptyState)}
+          pagination={{
+            onNextClick: () => {
               cleanChildrenStates()
-              handleInputSearchChange(e)
+              handleNextClick()
             },
-            onClear: () => {
+            onPrevClick: () => {
               cleanChildrenStates()
-              handleInputSearchClear()
+              handlePrevClick()
             },
-            onSubmit: () => {
+            onRowsChange: (e: ChangeEvent<HTMLInputElement>) => {
               cleanChildrenStates()
-              handleInputSearchSubmit()
+              handleRowsChange(e)
             },
-          },
-          fields: {
-            label: formatMessage(tableMessages.toggleFields),
-            showAllLabel: formatMessage(tableMessages.showAllFields),
-            hideAllLabel: formatMessage(tableMessages.hideAllFields),
-          },
-          newLine: {
-            label: formatMessage(tableMessages.newQuote),
-            handleCallback: handleNewQuote,
-          },
-        }}
-        sort={{
-          sortedBy,
-          sortOrder,
-        }}
-        onSort={(sortArgs: { sortOrder: string; sortedBy: string }) => {
-          cleanChildrenStates()
-          handleSort(sortArgs)
-        }}
-        filters={{
-          alwaysVisibleFilters: [
-            'status',
-            ...(showCostCenterFilter ? ['organizationAndCostCenter'] : []),
-          ],
-          statements: filterStatements,
-          onChangeStatements: (statements: FilterStatement[]) => {
-            cleanChildrenStates()
-            handleFiltersChange(statements)
-          },
-          clearAllFiltersButtonLabel: formatMessage(tableMessages.clearFilters),
-          collapseLeft: true,
-          options: {
-            status: {
-              label: formatMessage(tableMessages.statusFilter),
-              renderFilterLabel: (st: any) => {
-                if (!st?.object) {
-                  // you should treat empty object cases only for alwaysVisibleFilters
-                  return formatMessage(tableMessages.filtersAll)
-                }
-
-                const keys = st.object ? Object.keys(st.object) : []
-                const isAllTrue = !keys.some((key) => !st.object[key])
-                const isAllFalse = !keys.some((key) => st.object[key])
-                const trueKeys = keys.filter((key) => st.object[key])
-                let trueKeysLabel = ''
-
-                trueKeys.forEach((key, index) => {
-                  trueKeysLabel += `${key}${
-                    index === trueKeys.length - 1 ? '' : ', '
-                  }`
-                })
-
-                if (isAllTrue) {
-                  return formatMessage(tableMessages.filtersAll)
-                }
-
-                if (isAllFalse) {
-                  return formatMessage(tableMessages.filtersNone)
-                }
-
-                return `${trueKeysLabel}`
+            currentItemFrom: (page - 1) * pageSize + 1,
+            currentItemTo: total < page * pageSize ? total : page * pageSize,
+            textShowRows: formatMessage(tableMessages.showRows),
+            textOf: formatMessage(tableMessages.of),
+            totalItems: total,
+            rowsOptions: [25, 50, 100],
+          }}
+          toolbar={{
+            inputSearch: {
+              value: searchValue,
+              placeholder: formatMessage(tableMessages.placeholderSearch),
+              onChange: (e: React.FormEvent<HTMLInputElement>) => {
+                cleanChildrenStates()
+                handleInputSearchChange(e)
               },
-              verbs: [
-                {
-                  label: formatMessage(tableMessages.filtersIncludes),
-                  value: 'includes',
-                  object: statusSelectorObject,
-                },
-              ],
+              onClear: () => {
+                cleanChildrenStates()
+                handleInputSearchClear()
+              },
+              onSubmit: () => {
+                cleanChildrenStates()
+                handleInputSearchSubmit()
+              },
+            },
+            fields: {
+              label: formatMessage(tableMessages.toggleFields),
+              showAllLabel: formatMessage(tableMessages.showAllFields),
+              hideAllLabel: formatMessage(tableMessages.hideAllFields),
+            },
+            newLine: {
+              label: formatMessage(tableMessages.newQuote),
+              handleCallback: handleNewQuote,
             },
-            ...(showCostCenterFilter && {
-              organizationAndCostCenter: {
-                label: formatMessage(tableMessages.organizationAndCostCenter),
+          }}
+          sort={{
+            sortedBy,
+            sortOrder,
+          }}
+          onSort={(sortArgs: { sortOrder: string; sortedBy: string }) => {
+            cleanChildrenStates()
+            handleSort(sortArgs)
+          }}
+          filters={{
+            alwaysVisibleFilters: [
+              'status',
+              ...(showCostCenterFilter ? ['organizationAndCostCenter'] : []),
+            ],
+            statements: filterStatements,
+            onChangeStatements: (statements: FilterStatement[]) => {
+              cleanChildrenStates()
+              handleFiltersChange(statements)
+            },
+            clearAllFiltersButtonLabel: formatMessage(
+              tableMessages.clearFilters
+            ),
+            collapseLeft: true,
+            options: {
+              status: {
+                label: formatMessage(tableMessages.statusFilter),
                 renderFilterLabel: (st: any) => {
                   if (!st?.object) {
                     // you should treat empty object cases only for alwaysVisibleFilters
                     return formatMessage(tableMessages.filtersAll)
                   }
 
-                  return '...'
+                  const keys = st.object ? Object.keys(st.object) : []
+                  const isAllTrue = !keys.some((key) => !st.object[key])
+                  const isAllFalse = !keys.some((key) => st.object[key])
+                  const trueKeys = keys.filter((key) => st.object[key])
+                  let trueKeysLabel = ''
+
+                  trueKeys.forEach((key, index) => {
+                    trueKeysLabel += `${key}${
+                      index === trueKeys.length - 1 ? '' : ', '
+                    }`
+                  })
+
+                  if (isAllTrue) {
+                    return formatMessage(tableMessages.filtersAll)
+                  }
+
+                  if (isAllFalse) {
+                    return formatMessage(tableMessages.filtersNone)
+                  }
+
+                  return `${trueKeysLabel}`
                 },
                 verbs: [
                   {
-                    label: '',
-                    value: '=',
-                    object: organizationFilter,
+                    label: formatMessage(tableMessages.filtersIncludes),
+                    value: 'includes',
+                    object: statusSelectorObject,
                   },
                 ],
               },
-            }),
-          },
-        }}
-      />
+              ...(showCostCenterFilter && {
+                organizationAndCostCenter: {
+                  label: formatMessage(tableMessages.organizationAndCostCenter),
+                  renderFilterLabel: (st: any) => {
+                    if (!st?.object) {
+                      // you should treat empty object cases only for alwaysVisibleFilters
+                      return formatMessage(tableMessages.filtersAll)
+                    }
+
+                    return '...'
+                  },
+                  verbs: [
+                    {
+                      label: '',
+                      value: '=',
+                      object: organizationFilter,
+                    },
+                  ],
+                },
+              }),
+            },
+          }}
+        />
+      </div>
     </PageBlock>
   )
 }

diff --git a/react/components/QuotesTableContainer.tsx b/react/components/QuotesTableContainer.tsx
@@ -19,11 +19,22 @@ let isAuthenticated =
 
 const QuotesTableContainer: FunctionComponent = () => {
   const { navigate, rootPath } = useRuntime()
-  const [paginationState, setPaginationState] = useState({
+  const [paginationState, setPaginationStateOriginal] = useState({
     page: 1,
     pageSize: 25,
   })
 
+  const setPaginationState = (
+    paginationArgs: typeof paginationState,
+    scrollToTop = true
+  ) => {
+    setPaginationStateOriginal(paginationArgs)
+
+    if (scrollToTop) {
+      window.scrollTo(0, 0)
+    }
+  }
+
   const [filterState, setFilterState] = useState({
     filterStatements: [] as FilterStatement[],
     organization: [] as string[],
@@ -186,10 +197,13 @@ const QuotesTableContainer: FunctionComponent = () => {
       filterStatements: statements,
     })
 
-    setPaginationState({
-      ...paginationState,
-      page: 1,
-    })
+    setPaginationState(
+      {
+        ...paginationState,
+        page: 1,
+      },
+      false
+    )
 
     refetch({
       page: 1,