Show custom access choices as needed

TODO: these aren't showing up as choices in Session yet
onset · Mar 29, 2024 · af40df3 · af40df3
1 parent 0785cd0
commit af40df3
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 45 deletions.
diff --git a/src/components/TextFieldEdit.tsx b/src/components/TextFieldEdit.tsx
@@ -9,6 +9,7 @@ export interface IProps {
   field: Field;
   autoFocus?: boolean;
   hideLabel?: boolean;
+  visibleInstructions?: string;
   attemptFileChanges?: () => boolean;
   onBlurWithValue?: (currentValue: string) => void;
   // this one will prevent the user from moving on
@@ -48,23 +49,25 @@ export const TextFieldEdit: React.FunctionComponent<
           omitInfoAffordances={props.showAffordancesAfter}
         />
       )}
-
-      <div
-        css={css`
-          background-color: white;
-          border: 1px solid black;
-          height: -webkit-fill-available;
-        `}
-      >
-        {props.field.definition.multilingual ? (
-          testAxes.map((axis) => (
-            <>
-              <SingleLanguageTextFieldEdit {...props} axis={axis} />
-            </>
-          ))
-        ) : (
-          <SingleLanguageTextFieldEdit {...props} axis={undefined} />
-        )}
+      <div>
+        {props.visibleInstructions && <div>{props.visibleInstructions}</div>}
+        <div
+          css={css`
+            background-color: white;
+            border: 1px solid black;
+            height: -webkit-fill-available;
+          `}
+        >
+          {props.field.definition.multilingual ? (
+            testAxes.map((axis) => (
+              <>
+                <SingleLanguageTextFieldEdit {...props} axis={axis} />
+              </>
+            ))
+          ) : (
+            <SingleLanguageTextFieldEdit {...props} axis={undefined} />
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/src/components/project/ArchiveConfigurationForm.tsx b/src/components/project/ArchiveConfigurationForm.tsx
@@ -8,11 +8,13 @@ import ReactSelect from "react-select";
 import { css } from "@emotion/react";
 import Alert from "@mui/material/Alert";
 import { ArchiveConfigurationSummary } from "../../ArchiveConfigurationSummary";
-import { Button } from "@mui/material";
+import { Button, Collapse } from "@mui/material";
+import { Trans } from "@lingui/macro";
+import { TextFieldEdit } from "../TextFieldEdit";
 
 interface IProps {
   archiveConfigurationField: Field;
-  // customChoicesField: Field;
+  customChoicesField: Field;
   authorityLists: AuthorityLists;
   onChange: () => void;
 }
@@ -28,24 +30,26 @@ const ArchiveConfigurationForm: React.FunctionComponent<
         padding-left: 20px;
       `}
     >
-      <Alert
-        severity="info"
-        variant="outlined"
-        css={css`
-          color: black !important;
-          border-color: transparent !important;
-          background-color: #f6dbcb !important;
-          margin-bottom: 10px;
-
-          .MuiAlert-icon {
+      <Collapse in={archiveConfigurationName == "OTHER"}>
+        <Alert
+          severity="info"
+          variant="outlined"
+          css={css`
             color: black !important;
-          }
-        `}
-      >
-        Lameta projects are normally set up to work with the requirements of a
-        single archiving institution. Choose the name of your archive or "Other"
-        if you don't see it listed.
-      </Alert>
+            border-color: transparent !important;
+            background-color: #f6dbcb !important;
+            margin-bottom: 10px;
+
+            .MuiAlert-icon {
+              color: black !important;
+            }
+          `}
+        >
+          Lameta projects are normally set up to work with the requirements of a
+          single archiving institution. Choose the name of your archive or
+          "Other" if you don't see it listed.
+        </Alert>
+      </Collapse>
       <h1
         css={css`
           margin-bottom: 5px;
@@ -72,9 +76,11 @@ const ArchiveConfigurationForm: React.FunctionComponent<
           onChange={(event) => {
             setArchiveConfigurationName(event.value);
           }}
-          options={props.authorityLists.archiveConfigurationChoices.map((s) => {
-            return { value: s.id, label: s.label };
-          })}
+          options={props.authorityLists.archiveConfigurationChoices
+            .map((s) => {
+              return { value: s.id, label: s.label };
+            })
+            .concat({ value: "OTHER", label: "Other" })}
         />
         <Button
           variant="contained"
@@ -111,12 +117,35 @@ const ArchiveConfigurationForm: React.FunctionComponent<
           }
         `}
       >
-        <ArchiveConfigurationSummary
-          configurationName={archiveConfigurationName}
-        />
+        {archiveConfigurationName === "OTHER" ? (
+          <CustomArchiveConfiguration
+            customChoicesField={props.customChoicesField}
+          />
+        ) : (
+          <ArchiveConfigurationSummary
+            configurationName={archiveConfigurationName}
+          />
+        )}
       </div>
     </div>
   );
 };
 const x = observer(ArchiveConfigurationForm);
 export { x as ArchiveConfigurationForm };
+
+const CustomArchiveConfiguration: React.FunctionComponent<{
+  customChoicesField: Field;
+}> = (props) => {
+  return (
+    <div
+      css={css`
+        margin-top: 1em;
+      `}
+    >
+      <TextFieldEdit
+        field={props.customChoicesField}
+        visibleInstructions={"Enter each choice, separated by commas"}
+      />
+    </div>
+  );
+};
diff --git a/src/components/project/ProjectTab.tsx b/src/components/project/ProjectTab.tsx
@@ -77,9 +77,9 @@ export const ProjectTab: React.FunctionComponent<IProps> = observer((props) => {
             archiveConfigurationField={props.project.properties.getTextField(
               "archiveConfigurationName"
             )}
-            // customChoicesField={props.project.properties.getTextField(
-            //   "customAccessChoices"
-            // )}
+            customChoicesField={props.project.properties.getTextField(
+              "customAccessChoices"
+            )}
             authorityLists={props.authorityLists}
             onChange={() => {
               props.project.saveFolderMetaData();