Support COT catalog number configurations in the Query Builder

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

@@ -1,18 +1,29 @@
 import React from 'react';
 
-import { usePromise } from '../../hooks/useAsyncState';
+import { useAsyncState, usePromise } from '../../hooks/useAsyncState';
 import { useId } from '../../hooks/useId';
 import { commonText } from '../../localization/common';
 import { queryText } from '../../localization/query';
 import { resourcesText } from '../../localization/resources';
+import type { RA } from '../../utils/types';
+import { filterArray } from '../../utils/types';
 import { Button } from '../Atoms/Button';
 import { Select } from '../Atoms/Form';
 import { icons } from '../Atoms/Icons';
-import type { Tables } from '../DataModel/types';
+import type { SpecifyResource } from '../DataModel/legacyTypes';
+import { resourceFromUrl } from '../DataModel/resource';
+import { fetchContext as fetchDomain, schema } from '../DataModel/schema';
+import type { CollectionObjectType, Tables } from '../DataModel/types';
 import { fetchFormatters } from '../Formatters/formatters';
 import { customSelectElementBackground } from '../WbPlanView/CustomSelectElement';
 
-export function QueryFieldFormatter({
+type SimpleFormatter = {
+  readonly name: string;
+  readonly title: string;
+  readonly isDefault: boolean;
+};
+
+export function QueryFieldRecordFormatter({
   type,
   tableName,
   formatter,
@@ -24,7 +35,7 @@ export function QueryFieldFormatter({
   readonly onChange: ((formatter: string | undefined) => void) | undefined;
 }): JSX.Element | null {
   const [formatters] = usePromise(fetchFormatters, false);
-  const availableFormatters = React.useMemo(
+  const availableFormatters = React.useMemo<RA<SimpleFormatter> | undefined>(
     () =>
       // Some code duplication, but required by TypeScript
       (type === 'formatter'
@@ -50,24 +61,103 @@ export function QueryFieldFormatter({
     [type, formatters, tableName]
   );
 
+  return (
+    <FormatSelect
+      availableFormatters={availableFormatters}
+      currentFormat={formatter}
+      onChange={handleChange}
+    />
+  );
+}
+
+export function CatalogNumberFormatSelection({
+  formatter,
+  onChange: handleChange,
+}: {
+  readonly formatter: string | undefined;
+  readonly onChange: ((formatter: string | undefined) => void) | undefined;
+}): JSX.Element | null {
+  const [availableFormatters] = useAsyncState(
+    React.useCallback(
+      async () =>
+        fetchDomain
+          .then(async (schema) =>
+            Promise.all(
+              Object.keys(schema.collectionObjectTypeCatalogNumberFormats).map(
+                async (cotUri) =>
+                  resourceFromUrl(cotUri, {
+                    noBusinessRules: true,
+                  })?.fetch() as Promise<
+                    SpecifyResource<CollectionObjectType> | undefined
+                  >
+              )
+            )
+          )
+          .then((cots) =>
+            filterArray(cots).map((cot) => {
+              const format =
+                cot.get('catalogNumberFormatName') ??
+                schema.catalogNumFormatName;
+              return {
+                name: format,
+                title: cot.get('name'),
+                isDefault: false,
+              };
+            })
+          ),
+      []
+    ),
+    false
+  );
+
+  return (
+    <FormatSelect
+      availableFormatters={availableFormatters}
+      currentFormat={formatter}
+      showSingular={
+        Object.values(schema.collectionObjectTypeCatalogNumberFormats).some(
+          (format) => format !== null && format !== schema.catalogNumFormatName
+        ) ||
+        (formatter !== undefined &&
+          !Object.values(schema.collectionObjectTypeCatalogNumberFormats)
+            .filter((formatName) => formatName !== null)
+            .includes(formatter))
+      }
+      onChange={handleChange}
+    />
+  );
+}
+
+function FormatSelect({
+  availableFormatters,
+  currentFormat,
+  showSingular = false,
+  onChange: handleChange,
+}: {
+  readonly availableFormatters: RA<SimpleFormatter> | undefined;
+  readonly currentFormat: string | undefined;
+  readonly showSingular?: boolean;
+  readonly onChange: ((formatter: string | undefined) => void) | undefined;
+}): JSX.Element | null {
   const [formatterSelectIsOpen, setFormatterSelect] = React.useState(false);
 
   const id = useId('formatters-selection');
 
   return availableFormatters === undefined ? (
-    typeof formatter === 'string' ? (
+    typeof currentFormat === 'string' ? (
       <>{commonText.loading()}</>
     ) : null
-  ) : availableFormatters.length > 1 ? (
+  ) : showSingular || availableFormatters.length > 1 ? (
     <>
       <Button.Small
         aria-controls={id('list')}
         aria-label={queryText.chooseFormatter()}
         className={`${
-          availableFormatters.find((selected) => selected.name === formatter)
-            ?.isDefault ||
-          formatter === undefined ||
-          formatter === ''
+          availableFormatters.find(
+            (selected) => selected.name === currentFormat
+          )?.isDefault ||
+          currentFormat === undefined ||
+          currentFormat === ''
             ? 'bg-white dark:bg-neutral-600'
             : 'bg-yellow-250 dark:bg-yellow-900 '
         }`}
@@ -83,7 +173,7 @@ export function QueryFieldFormatter({
             className={customSelectElementBackground}
             disabled={handleChange === undefined}
             id={id('list')}
-            value={formatter}
+            value={currentFormat}
             onValueChange={handleChange}
           >
             <option />
@@ -92,6 +182,14 @@ export function QueryFieldFormatter({
                 {`${title} ${isDefault ? resourcesText.defaultInline() : ''}`}
               </option>
             ))}
+            {currentFormat !== undefined &&
+            !availableFormatters
+              .map(({ name }) => name)
+              .includes(currentFormat) ? (
+              <option key="invalidCOT" value={currentFormat}>
+                {queryText.invalidPicklistValue({ value: currentFormat })}
+              </option>
+            ) : undefined}
           </Select>
         </div>
       )}

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

@@ -233,7 +233,6 @@ function getNewQueryLines(
     sortType: undefined,
     isDisplay: definedField.isDisplay,
     ...(fields[latitudeLineIndex] as Partial<QueryField>),
-    dataObjFormatter: undefined,
     filters: [
       {
         type: 'between',
@@ -253,7 +252,6 @@ function getNewQueryLines(
     sortType: undefined,
     isDisplay: definedField.isDisplay,
     ...(fields[longitudeLineIndex] as Partial<QueryField>),
-    dataObjFormatter: undefined,
     filters:
       operator === 'between'
         ? [