Create paginator component

specifyweb/frontend/js_src/lib/components/DataModel/collection.ts

@@ -159,7 +159,7 @@ export const fetchRows = async <
   TABLE_NAME extends keyof Tables,
   SCHEMA extends Tables[TABLE_NAME],
   FIELDS extends RR<
-    string | keyof SCHEMA['fields'],
+    string | Exclude<keyof SCHEMA['fields'], 'fields'>,
     RA<'boolean' | 'null' | 'number' | 'string'>
   >
 >(
@@ -169,7 +169,7 @@ export const fetchRows = async <
     fields,
     distinct = false,
     ...filters
-  }: CollectionFetchFilters<SCHEMA> & {
+  }: Omit<CollectionFetchFilters<SCHEMA>, 'fields'> & {
     readonly fields: FIELDS;
     readonly distinct?: boolean;
   },

specifyweb/frontend/js_src/lib/components/FormEditor/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useLiveState } from '../../hooks/useLiveState';
-import {f} from '../../utils/functools';
+import { f } from '../../utils/functools';
 import type { RA } from '../../utils/types';
 import { defined } from '../../utils/types';
 import type { AppResourceTabProps } from '../AppResources/TabDefinitions';
@@ -40,7 +40,7 @@ export function FormEditorWrapper(): JSX.Element {
     parsed: [initialParsed],
     syncer: { deserializer },
     onChange: handleChange,
-    onSetCleanup:handleSetCleanup
+    onSetCleanup: handleSetCleanup,
   } = React.useContext(FormEditorContext)!;
 
   const originalParsed = React.useRef<ViewSets | undefined>(undefined);
@@ -61,10 +61,8 @@ export function FormEditorWrapper(): JSX.Element {
         (parsed, changedViewNames): void => {
           setChanged((changed) => new Set([...changed, ...changedViewNames]));
           setParsed(parsed);
-          handleChange(() =>
-            updateXml(deserializer(parsed))
-          );
-          handleSetCleanup(async ()=>
+          handleChange(() => updateXml(deserializer(parsed)));
+          handleSetCleanup(async () =>
             Promise.all(
               Array.from(changed, async (viewName) =>
                 clearUrlCache(getViewSetApiUrl(viewName))

specifyweb/frontend/js_src/lib/components/Forms/ResourceView.tsx

@@ -276,8 +276,6 @@ export function ResourceView<SCHEMA extends AnySchema>({
    * navigation buttons don't jump around a lot as you navigate between
    * records
    */
-  const isFullHeight =
-    dialog === 'modal' && typeof headerButtons === 'function' && !isSubForm;
 
   return (
     <Dialog
@@ -300,9 +298,7 @@ export function ResourceView<SCHEMA extends AnySchema>({
         )
       }
       className={{
-        container: `${dialogClassNames.normalContainer} ${
-          isFullHeight ? 'h-full' : ''
-        }`,
+        container: dialogClassNames.normalContainer,
         content: `${className.formStyles} ${dialogClassNames.flexContent}`,
       }}
       dimensionsKey={viewName ?? resource?.specifyTable.view}

specifyweb/frontend/js_src/lib/components/Molecules/Dialog.tsx

@@ -287,6 +287,8 @@ export function Dialog({
     [positionKey]
   );
 
+  useFreezeDialogSize(container, dimensionsKey);
+
   const isFullScreen = containerClassName.includes(dialogClassNames.fullScreen);
 
   const draggableContainer: Props['contentElement'] = React.useCallback(
@@ -569,3 +571,45 @@ function useTitleChangeNotice(dimensionKey: string | undefined): void {
       );
   }, [dimensionKey]);
 }
+
+function useFreezeDialogSize(
+  containerSizeRef: HTMLDivElement | null,
+  dimensionKey: string | undefined
+): void {
+  React.useEffect(() => {
+    if (dimensionKey === undefined) return;
+    if (containerSizeRef === null) return undefined;
+    let oldHeight = containerSizeRef.offsetHeight;
+    let oldWidth = containerSizeRef.offsetWidth;
+    const resizeObserver = new ResizeObserver(() => {
+      const newHeight = containerSizeRef.offsetHeight;
+      const newWidth = containerSizeRef.offsetWidth;
+
+      const width = f.parseInt(containerSizeRef.style.width);
+      const height = f.parseInt(containerSizeRef.style.height);
+      const hasBeenChanged =
+        typeof width === 'number' && typeof height === 'number';
+
+      if (oldHeight !== undefined && newHeight < oldHeight && !hasBeenChanged) {
+        containerSizeRef.style.minHeight = `${oldHeight}px`;
+      } else oldHeight = newHeight;
+
+      if (oldWidth !== undefined && newWidth < oldWidth && !hasBeenChanged) {
+        containerSizeRef.style.minWidth = `${oldWidth}px`;
+      } else oldWidth = newWidth;
+
+      if (hasBeenChanged) {
+        containerSizeRef.style.minHeight = '';
+        containerSizeRef.style.minWidth = '';
+      }
+    });
+
+    resizeObserver.observe(containerSizeRef);
+
+    return () => {
+      resizeObserver.disconnect();
+      containerSizeRef.style.minHeight = '';
+      containerSizeRef.style.minWidth = '';
+    };
+  }, [containerSizeRef, dimensionKey]);
+}

specifyweb/frontend/js_src/lib/components/Molecules/Paginator.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import { useCachedState } from '../../hooks/useCachedState';
+import { commonText } from '../../localization/common';
+import type { GetSet } from '../../utils/types';
+import { Select } from '../Atoms/Form';
+import { formatNumber } from '../Atoms/Internationalization';
+import { Slider } from '../FormSliders/Slider';
+
+/**
+ * Infinity hitting the practical limits
+ */
+const infinity = 500;
+export const pageSizes = [10, 50, 100, infinity];
+
+export type Paginators = 'recordSets' | 'queryBuilder';
+
+export function usePaginator(
+  cacheName: Paginators,
+  defaultRowsPerPage: typeof pageSizes[number] = 10
+): {
+  readonly paginator: (totalCount: number | undefined) => JSX.Element;
+  readonly currentPage: GetSet<number>;
+  readonly limit: number;
+  readonly offset: number;
+} {
+  const getSetPage = React.useState<number>(0);
+  const [currentPage, setCurrentPage] = getSetPage;
+  const [pageSize = defaultRowsPerPage, setPageSize] = useCachedState(
+    'pageSizes',
+    cacheName
+  );
+  return {
+    paginator(totalCount): JSX.Element {
+      const pageCount =
+        totalCount === undefined ? 0 : Math.ceil(totalCount / pageSize);
+      return (
+        <div className="flex flex-wrap gap-2">
+          <span className="flex-1" />
+          {pageSize === infinity ? undefined : (
+            <div>
+              <Slider
+                count={pageCount ?? 0}
+                value={currentPage}
+                onChange={setCurrentPage}
+              />
+            </div>
+          )}
+          <div className="flex flex-1 justify-end">
+            <Select
+              className={pageSize === infinity ? 'w-auto' : 'w-16'}
+              value={pageSize}
+              onValueChange={(rawNewPageSize): void => {
+                const newPageSize = Number.parseInt(rawNewPageSize);
+                const currentIndex = currentPage * pageSize;
+                setPageSize(newPageSize);
+                setCurrentPage(Math.floor(currentIndex / newPageSize));
+              }}
+            >
+              {pageSizes.map((size) => (
+                <option key={size} value={size}>
+                  {size === infinity
+                    ? commonText.unlimited()
+                    : formatNumber(size)}
+                </option>
+              ))}
+            </Select>
+          </div>
+        </div>
+      );
+    },
+    currentPage: getSetPage,
+    limit: pageSize,
+    offset: currentPage * pageSize,
+  };
+}

specifyweb/frontend/js_src/lib/components/Molecules/Sorting.tsx

@@ -51,8 +51,14 @@ export function useSortConfig<NAME extends keyof SortConfigs>(
     mapper: (item: T) => boolean | number | string | null | undefined
   ) => RA<T>
 ] {
-  const [sortConfig = { sortField: defaultField, ascending }, setSortConfig] =
-    useCachedState('sortConfig', cacheKey);
+  const defaultValue = React.useMemo(
+    () => ({ sortField: defaultField, ascending }),
+    [defaultField, ascending]
+  );
+  const [sortConfig = defaultValue, setSortConfig] = useCachedState(
+    'sortConfig',
+    cacheKey
+  );
   const handleClick = React.useCallback(
     (sortField: SortConfigs[NAME]) => {
       const newSortConfig: SortConfig<SortConfigs[NAME]> = {

specifyweb/frontend/js_src/lib/components/QueryBuilder/Import.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { useAsyncState } from '../../hooks/useAsyncState';
 import { commonText } from '../../localization/common';
 import { queryText } from '../../localization/query';
 import { wbPlanText } from '../../localization/wbPlan';
@@ -14,29 +15,25 @@ import { Form } from '../Atoms/Form';
 import { icons } from '../Atoms/Icons';
 import { Submit } from '../Atoms/Submit';
 import { LoadingContext } from '../Core/Contexts';
+import { fetchRows } from '../DataModel/collection';
 import { getField } from '../DataModel/helpers';
-import type {
-  SerializedRecord,
-  SerializedResource,
-} from '../DataModel/helperTypes';
+import type { SerializedRecord } from '../DataModel/helperTypes';
 import type { SpecifyResource } from '../DataModel/legacyTypes';
 import { getResourceApiUrl } from '../DataModel/resource';
 import { tables } from '../DataModel/tables';
 import type { SpQuery } from '../DataModel/types';
 import { userInformation } from '../InitialContext/userInformation';
-import { Dialog, LoadingScreen } from '../Molecules/Dialog';
+import { Dialog } from '../Molecules/Dialog';
 import { FilePicker, fileToText } from '../Molecules/FilePicker';
 import { TableIcon } from '../Molecules/TableIcon';
 import { generateMappingPathPreview } from '../WbPlanView/mappingPreview';
 import { QueryFieldSpec } from './fieldSpec';
 
 export function QueryImport({
   onClose: handleClose,
-  queries,
 }: {
   readonly onClose: () => void;
-  readonly queries: RA<SerializedResource<SpQuery>> | undefined;
-}): JSX.Element {
+}): JSX.Element | null {
   const loading = React.useContext(LoadingContext);
   const navigate = useNavigate();
 
@@ -53,7 +50,20 @@ export function QueryImport({
       navigate(`/specify/query/${queryResource.id}/`);
   }, [queryResource, hiddenFields]);
 
-  return typeof queries === 'object' ? (
+  const [queriesNames] = useAsyncState(
+    React.useCallback(
+      async () =>
+        fetchRows('SpQuery', {
+          fields: { name: ['string'] },
+          distinct: true,
+          limit: 0,
+        }),
+      []
+    ),
+    true
+  );
+
+  return typeof queriesNames === 'object' ? (
     <Dialog
       buttons={commonText.cancel()}
       header={commonText.import()}
@@ -123,7 +133,7 @@ export function QueryImport({
                       'name',
                       getUniqueName(
                         queryResource.get('name'),
-                        queries.map(({ name }) => name),
+                        queriesNames.map(({ name }) => name),
                         getField(tables.SpQuery, 'name').length
                       )
                     )
@@ -164,7 +174,5 @@ export function QueryImport({
         )}
       </>
     </Dialog>
-  ) : (
-    <LoadingScreen />
-  );
+  ) : null;
 }