Create a pick list editor componenent

specifyweb/frontend/js_src/lib/components/FormCells/PickListEditor.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { IntegratedRecordSelector } from '../FormSliders/IntegratedRecordSelector';
+import { getModel } from '../DataModel/schema';
+import { SpecifyResource } from '../DataModel/legacyTypes';
+import { AnySchema } from '../DataModel/helperTypes';
+import { Collection } from '../DataModel/specifyModel';
+import { Relationship } from '../DataModel/specifyField';
+import { relationshipIsToMany } from '../WbPlanView/mappingHelpers';
+import { PickList } from '../DataModel/types';
+import { f } from '../../utils/functools';
+import { resourceOn } from '../DataModel/resource';
+
+export function PickListEditor({
+  resource,
+  relationship,
+}: {
+  readonly resource: SpecifyResource<PickList>;
+  readonly relationship: Relationship;
+}): JSX.Element | null {
+  const [tableName, setTableName] = React.useState<string | null>(null);
+  React.useEffect(
+    () =>
+      resourceOn(
+        resource,
+        'change:tableName',
+        () => setTableName(resource.get('tableName')),
+        true
+      ),
+    [resource]
+  );
+
+  const table = tableName === null ? undefined : getModel(tableName);
+
+  const collection = React.useMemo(
+    () =>
+      (table === undefined
+        ? undefined
+        : new table.LazyCollection({
+            filters: { domainfilter: true },
+          })) as Collection<AnySchema>,
+    [table]
+  );
+
+  return collection === undefined ? null : (
+    <IntegratedRecordSelector
+      collection={collection}
+      dialog={false}
+      formType={'form'}
+      mode={'edit'}
+      relationship={relationship}
+      sortField={undefined}
+      onAdd={
+        relationshipIsToMany(relationship) &&
+        relationship.type !== 'zero-to-one'
+          ? undefined
+          : ([resource]): void =>
+              void resource.set(relationship.name, resource as never)
+      }
+      onClose={f.never}
+    />
+  );
+}

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

@@ -20,6 +20,10 @@ import { SubView } from '../Forms/SubView';
 import { TableIcon } from '../Molecules/TableIcon';
 import { relationshipIsToMany } from '../WbPlanView/mappingHelpers';
 import { FormTableInteraction } from './FormTableInteraction';
+import { PickListEditor } from './PickListEditor';
+import { toTable } from '../DataModel/helpers';
+import { resourceOn } from '../DataModel/resource';
+import { PickListTypes } from '../PickLists/definitions';
 
 const cellRenderers: {
   readonly [KEY in keyof CellTypes]: (props: {
@@ -155,15 +159,45 @@ const cellRenderers: {
       ),
       false
     );
+    const currentResource = data?.resource;
+
+    const [showPickListForm, setShowPickListForm] =
+      React.useState<boolean>(false);
+    React.useEffect(
+      () =>
+        currentResource === undefined
+          ? undefined
+          : resourceOn(
+              currentResource,
+              'change:type',
+              () =>
+                setShowPickListForm(
+                  currentResource.get('type') !== PickListTypes.ITEMS
+                ),
+              true
+            ),
+      [currentResource]
+    );
 
     const mode = rawResource === data?.resource ? rawMode : 'view';
     if (
       relationship === undefined ||
-      data?.resource === undefined ||
+      currentResource === undefined ||
       interactionCollection === undefined ||
       actualFormType === undefined
     )
       return null;
+    else if (
+      typeof toTable(currentResource, 'PickList') === 'object' &&
+      showPickListForm
+    )
+      return (
+        <PickListEditor
+          //look at the error
+          resource={currentResource}
+          relationship={relationship}
+        />
+      );
     else if (interactionCollection === false || actualFormType === 'form')
       return (
         <SubView
@@ -172,7 +206,7 @@ const cellRenderers: {
           isButton={isButton}
           mode={mode}
           parentFormType={parentFormType}
-          parentResource={data.resource}
+          parentResource={currentResource}
           relationship={relationship}
           sortField={sortField}
           viewName={viewName}