fix(FieldFormatter): resolve reported issues

Fixes #5075 (review)
specify · Dec 25, 2024 · 8feb53f · 8feb53f
1 parent d7da8bf
commit 8feb53f
Show file tree

Hide file tree

Showing 9 changed files with 53 additions and 40 deletions.
diff --git a/specifyweb/frontend/js_src/lib/components/Atoms/Form.tsx b/specifyweb/frontend/js_src/lib/components/Atoms/Form.tsx
@@ -257,6 +257,7 @@ export const Input = {
               props.onChange?.(event);
             },
             readOnly: isReadOnly,
+            ...withPreventWheel(props.onWheel),
           }
   ),
   Float: wrap<

diff --git a/specifyweb/frontend/js_src/lib/components/FieldFormatters/FieldFormatter.tsx b/specifyweb/frontend/js_src/lib/components/FieldFormatters/FieldFormatter.tsx
@@ -12,7 +12,8 @@ import { className } from '../Atoms/className';
 import { Input, Label } from '../Atoms/Form';
 import type { AnySchema } from '../DataModel/helperTypes';
 import type { SpecifyResource } from '../DataModel/legacyTypes';
-import type { LiteralField } from '../DataModel/specifyField';
+import type { LiteralField, Relationship } from '../DataModel/specifyField';
+import { genericTables } from '../DataModel/tables';
 import { softError } from '../Errors/assert';
 import { ResourceMapping } from '../Formatters/Components';
 import { ResourcePreview } from '../Formatters/Preview';
@@ -84,9 +85,17 @@ function FieldPicker({
 const excludeNonLiteral = (mappingData: MappingLineData): MappingLineData => ({
   ...mappingData,
   fieldsData: Object.fromEntries(
-    Object.entries(mappingData.fieldsData).filter(
-      ([_name, fieldData]) => fieldData.tableName === undefined
-    )
+    Object.entries(mappingData.fieldsData).filter(([name, fieldData]) => {
+      if (fieldData.tableName !== undefined) return false;
+      const field: LiteralField | Relationship | undefined =
+        mappingData.tableName === undefined
+          ? undefined
+          : genericTables[mappingData.tableName].field[name];
+      if (field === undefined) return false;
+      return (
+        !field.isReadOnly && !field.isVirtual && !field.overrides.isReadOnly
+      );
+    })
   ),
 });
 

diff --git a/specifyweb/frontend/js_src/lib/components/FieldFormatters/Parts.tsx b/specifyweb/frontend/js_src/lib/components/FieldFormatters/Parts.tsx
@@ -49,7 +49,7 @@ export function FieldFormatterParts({
             <tr>
               <th>{resourcesText.type()}</th>
               <th>{commonText.size()}</th>
-              <th>{resourcesText.hint()}</th>
+              <th>{resourcesText.value()}</th>
               <th />
               <th />
             </tr>
@@ -150,7 +150,7 @@ function Part({
       </td>
       <td>
         <Input.Text
-          aria-label={resourcesText.hint()}
+          aria-label={resourcesText.value()}
           disabled={part.type === 'year' || part.type === 'numeric'}
           isReadOnly={isReadOnly}
           required
@@ -227,7 +227,7 @@ function Part({
   );
 }
 
-const maxSize = 9999;
+const maxSize = 99;
 
 function RegexField({
   value,

diff --git a/specifyweb/frontend/js_src/lib/components/SchemaConfig/Format.tsx b/specifyweb/frontend/js_src/lib/components/SchemaConfig/Format.tsx
@@ -205,8 +205,11 @@ function FormatterLine({
           onChange={(): void =>
             handleFormatted(
               name,
+              // Select first option if there is such
               typeof values === 'object'
-                ? (Object.values(values)[0][0][0]! ?? null)
+                ? (Object.values(values).at(0)?.at(0)?.at(0) ??
+                    Object.values(values).at(1)?.at(0)?.at(0) ??
+                    null)
                 : null
             )
           }
@@ -312,6 +315,9 @@ function PickListEditing({
   );
 }
 
+const overlayPrefix = '/specify/overlay/resources/app-resource/';
+const fullScreenPrefix = '/specify/resources/app-resource/';
+
 function WebLinkEditing({
   value,
   schemaData,
@@ -322,32 +328,29 @@ function WebLinkEditing({
   const index = schemaData.webLinks.find(({ name }) => name === value)?.index;
   const resourceId = appResourceIds.WebLinks;
   const navigate = useNavigate();
+
   return typeof resourceId === 'number' ? (
     <>
       {typeof index === 'number' && (
         <Link.Icon
           className={className.dataEntryEdit}
-          href={`/specify/resources/app-resource/${resourceId}/web-link/${index}/`}
+          href={`${fullScreenPrefix}${resourceId}/web-link/${index}`}
           icon="pencil"
           title={commonText.edit()}
           onClick={(event): void => {
             event.preventDefault();
-            navigate(
-              `/specify/overlay/resources/app-resource/${resourceId}/web-link/${index}/`
-            );
+            navigate(`${overlayPrefix}${resourceId}/web-link/${index}`);
           }}
         />
       )}
       <Link.Icon
         className={className.dataEntryAdd}
-        href={`/specify/resources/app-resource/${resourceId}/web-link/`}
+        href={`${fullScreenPrefix}${resourceId}/web-link`}
         icon="plus"
         title={commonText.add()}
         onClick={(event): void => {
           event.preventDefault();
-          navigate(
-            `/specify/overlay/resources/app-resource/${resourceId}/web-link/`
-          );
+          navigate(`${overlayPrefix}${resourceId}/web-link`);
         }}
       />
     </>
@@ -370,29 +373,29 @@ function FieldFormatterEditing({
   const navigate = useNavigate();
   if (resourceId === undefined) return null;
 
-  const baseUrl = `/specify/resources/app-resource/${resourceId}/field-formatters/${table.name}/`;
+  const commonUrl = `${resourceId}/field-formatters/${table.name}`;
   return (
     <>
       {typeof index === 'number' && (
         <Link.Icon
           className={className.dataEntryEdit}
-          href={`${baseUrl}${index}/`}
+          href={`${fullScreenPrefix}${commonUrl}/${index}`}
           icon="pencil"
           title={commonText.edit()}
           onClick={(event): void => {
             event.preventDefault();
-            navigate(`${baseUrl}${index}/`);
+            navigate(`${overlayPrefix}${commonUrl}/${index}`);
           }}
         />
       )}
       <Link.Icon
         className={className.dataEntryAdd}
-        href={baseUrl}
+        href={`${fullScreenPrefix}${commonUrl}`}
         icon="plus"
         title={commonText.add()}
         onClick={(event): void => {
           event.preventDefault();
-          navigate(baseUrl);
+          navigate(`${overlayPrefix}${commonUrl}`);
         }}
       />
     </>

diff --git a/specifyweb/frontend/js_src/lib/components/SchemaConfig/UniquenessRuleScope.tsx b/specifyweb/frontend/js_src/lib/components/SchemaConfig/UniquenessRuleScope.tsx
@@ -13,7 +13,7 @@ import type { SpecifyTable } from '../DataModel/specifyTable';
 import { strictGetTable } from '../DataModel/tables';
 import type { Tables } from '../DataModel/types';
 import type { UniquenessRule } from '../DataModel/uniquenessRules';
-import type { HtmlGeneratorFieldData } from '../WbPlanView/LineComponents';
+import type { MapperComponentData } from '../WbPlanView/LineComponents';
 import { getMappingLineProps } from '../WbPlanView/LineComponents';
 import { MappingView } from '../WbPlanView/MapperComponents';
 import type { MappingLineData } from '../WbPlanView/navigator';
@@ -35,7 +35,7 @@ export function UniquenessRuleScope({
       : rule.scopes[0].split(djangoLookupSeparator)
   );
 
-  const databaseScopeData: Readonly<Record<string, HtmlGeneratorFieldData>> = {
+  const databaseScopeData: Readonly<Record<string, MapperComponentData>> = {
     database: {
       isDefault: true,
       isEnabled: true,
@@ -46,7 +46,7 @@ export function UniquenessRuleScope({
 
   const getValidScopeRelationships = (
     table: SpecifyTable
-  ): Readonly<Record<string, HtmlGeneratorFieldData>> =>
+  ): Readonly<Record<string, MapperComponentData>> =>
     Object.fromEntries(
       table.relationships
         .filter(

diff --git a/specifyweb/frontend/js_src/lib/components/WbPlanView/LineComponents.tsx b/specifyweb/frontend/js_src/lib/components/WbPlanView/LineComponents.tsx
@@ -28,7 +28,7 @@ import {
 import type { AutoMapperSuggestion } from './Mapper';
 import type { MappingLineData } from './navigator';
 
-export type HtmlGeneratorFieldData = {
+export type MapperComponentData = {
   readonly optionLabel: JSX.Element | string;
   readonly title?: LocalizedString;
   readonly isEnabled?: boolean;
@@ -49,7 +49,7 @@ type MappingLineBaseProps = {
 };
 
 export type MappingElementProps = {
-  readonly fieldsData: IR<HtmlGeneratorFieldData>;
+  readonly fieldsData: IR<MapperComponentData>;
 } & (
   | Omit<CustomSelectElementPropsClosed, 'fieldNames'>
   | (Omit<CustomSelectElementPropsOpenBase, 'autoMapperSuggestions'> & {

diff --git a/specifyweb/frontend/js_src/lib/components/WbPlanView/MapperComponents.tsx b/specifyweb/frontend/js_src/lib/components/WbPlanView/MapperComponents.tsx
@@ -19,7 +19,7 @@ import { TableIcon } from '../Molecules/TableIcon';
 import { userPreferences } from '../Preferences/userPreferences';
 import { ButtonWithConfirmation } from './Components';
 import type {
-  HtmlGeneratorFieldData,
+  MapperComponentData,
   MappingElementProps,
 } from './LineComponents';
 import { MappingPathComponent } from './LineComponents';
@@ -230,7 +230,7 @@ export function mappingOptionsMenu({
   readonly onChangeMatchBehaviour: (matchBehavior: MatchBehaviors) => void;
   readonly onToggleAllowNulls: (allowNull: boolean) => void;
   readonly onChangeDefaultValue: (defaultValue: string | null) => void;
-}): IR<HtmlGeneratorFieldData> {
+}): IR<MapperComponentData> {
   return {
     matchBehavior: {
       optionLabel: (

diff --git a/specifyweb/frontend/js_src/lib/components/WbPlanView/navigator.ts b/specifyweb/frontend/js_src/lib/components/WbPlanView/navigator.ts
@@ -19,7 +19,7 @@ import { getTreeDefinitions, isTreeTable } from '../InitialContext/treeRanks';
 import { hasTablePermission, hasTreeAccess } from '../Permissions/helpers';
 import type { CustomSelectSubtype } from './CustomSelectElement';
 import type {
-  HtmlGeneratorFieldData,
+  MapperComponentData,
   MappingElementProps,
 } from './LineComponents';
 import type { MappingPath } from './Mapper';
@@ -281,7 +281,7 @@ export function getMappingLineData({
   const commitInstanceData = (
     customSelectSubtype: CustomSelectSubtype,
     table: SpecifyTable,
-    fieldsData: RA<readonly [string, HtmlGeneratorFieldData] | undefined>
+    fieldsData: RA<readonly [string, MapperComponentData] | undefined>
   ): void =>
     void internalState.mappingLineData.push({
       customSelectSubtype,

diff --git a/specifyweb/frontend/js_src/lib/localization/resources.ts b/specifyweb/frontend/js_src/lib/localization/resources.ts
@@ -155,9 +155,9 @@ export const resourcesText = createDictionary({
   },
   fieldFormattersDescription: {
     'en-us': `
-      Field formatter controls how data for a specific table field is
-      shown in query results, exports, and on the form. It determines
-      autonumbering and individual parts that make up the field.
+      The “Field Format” controls how data for a specific table field is
+      displayed in query results, exports, and forms. It manages autonumbering
+      and the composition of various parts that define the field.
     `,
   },
   dataObjectFormatters: {
@@ -855,13 +855,13 @@ export const resourcesText = createDictionary({
   nonConformingInline: {
     'en-us': '(non-conforming)',
   },
-  hint: {
-    'en-us': 'Hint',
-    'de-ch': 'Hinweis',
-    'es-es': 'Sugerencia',
-    'fr-fr': 'Indice',
-    'ru-ru': 'Подсказка',
-    'uk-ua': 'Підказка',
+  value: {
+    'en-us': 'Value',
+    'de-ch': 'Wert',
+    'es-es': 'Valor',
+    'fr-fr': 'Valeur',
+    'ru-ru': 'Значение',
+    'uk-ua': 'Значення',
   },
   constant: {
     'en-us': 'Constant',