Add multilingual property to field definitions

configurations/ELAR/fields.json5

@@ -14,5 +14,11 @@
       visibility: "always",
       description: "This is usually the same person as the Collection Steward."
     }
+  ],
+  session: [
+    {
+      key: "description",
+      multilingual: false
+    }
   ]
 }

src/components/TextFieldEdit.tsx

@@ -15,7 +15,7 @@ export interface IProps {
   validate?: (value: string) => boolean;
   tooltip?: string;
   showAffordancesAfter?: boolean;
-  LanguageAxes?: LanguageAxis[];
+  //LanguageAxes?: LanguageAxis[];
 }
 
 export const TextFieldEdit: React.FunctionComponent<
@@ -53,9 +53,10 @@ export const TextFieldEdit: React.FunctionComponent<
         css={css`
           background-color: white;
           border: 1px solid black;
+          height: -webkit-fill-available;
         `}
       >
-        {["title", "description"].includes(props.field.key) ? (
+        {props.field.definition.multilingual ? (
           testAxes.map((axis) => (
             <>
               <SingleLanguageTextFieldEdit {...props} axis={axis} />
@@ -74,10 +75,10 @@ const SingleLanguageTextFieldEdit: React.FunctionComponent<
 > = mobx.observer((props) => {
   const [invalid, setInvalid] = React.useState(false);
   const [previous, setPrevious] = useState(props.field.text);
-  const { current: fieldId } = useRef(
-    "textfield-" +
-      (Math.random().toString(36) + "00000000000000000").slice(2, 7)
-  );
+  // const { current: fieldId } = useRef(
+  //   "textfield-" +
+  //     (Math.random().toString(36) + "00000000000000000").slice(2, 7)
+  // );
 
   function onChange(event: React.FormEvent<HTMLTextAreaElement>, field: Field) {
     // NB: Don't trim value here. It is tempting, because at the end of the day we'd
@@ -109,6 +110,7 @@ const SingleLanguageTextFieldEdit: React.FunctionComponent<
       {props.axis && (
         <span
           css={css`
+            width: 2em; // it's important to nail down the width so that the following text blocks are aligned
             color: #81c21e; // todo use theme with colors to match the form
           `}
         >
@@ -120,7 +122,7 @@ const SingleLanguageTextFieldEdit: React.FunctionComponent<
           border: none;
           padding-top: 0;
         `}
-        id={fieldId}
+        id={props.field.key}
         tabIndex={props.tabIndex}
         autoFocus={props.autoFocus}
         className={invalid ? "invalid" : ""}

src/components/session/SessionForm.scss

@@ -96,7 +96,7 @@ $dateWidth: 148px; // enhance: why is it 148px?
     textarea {
       height: 100%;
       //  height: 8em;
-      overflow-y: scroll;
+      overflow-y: auto;
     }
   }
 }

src/model/field/ConfiguredFieldDefinitions.spec.ts

@@ -13,7 +13,8 @@ describe("computeMergedCatalog", () => {
         {
           key: "title",
           tabIndex: 99,
-          tooltip: "My special tooltip"
+          tooltip: "My special tooltip",
+          multilingual: true
         },
         { key: "region", show: "never" }
       ]
@@ -24,7 +25,8 @@ describe("computeMergedCatalog", () => {
       englishLabel: "Project ID", // changed to Project ID at ELAR request Dec 2019
       tagInSayMoreClassic: "Title",
       tabIndex: 99, // configuration changed
-      tooltip: "My special tooltip" // configuration added this
+      tooltip: "My special tooltip", // configuration added this
+      multilingual: true // configuration added this
     });
   });
 
@@ -63,4 +65,11 @@ describe("prepareFieldDefinitionCatalog", () => {
     expect(catalog.person.find((f) => f.key == "name")).toBeDefined();
     expect(catalog.person.find((f) => f.key == "howToContact")).toBeDefined();
   });
+
+  it("desfault session description is monolingual", () => {
+    const catalog = makeFieldDefinitionCatalog("default");
+    expect(
+      catalog.session.find((f) => f.key == "description")!.multilingual
+    ).toBe(false);
+  });
 });

src/model/field/ConfiguredFieldDefinitions.ts

@@ -2,11 +2,26 @@ import fs from "fs";
 import { IFolderType } from "../Folder/Folder";
 import { FieldDefinition } from "./FieldDefinition";
 import JSON5 from "json5";
-import raw from "../../../configurations/lameta/fields.json5?raw";
+import jsonOfDefaultFieldConfig from "../../../configurations/lameta/fields.json5?raw";
 import { locateDependencyForFilesystemCall } from "../../other/locateDependency";
 import { NotifyError, NotifyNoBigDeal } from "../../components/Notify";
-const catalogOfAllAvailableKnownFields = JSON5.parse(raw);
 
+type FieldDefinitionCatalog = {
+  project: FieldDefinition[];
+  session: FieldDefinition[];
+  person: FieldDefinition[];
+};
+const catalogOfAllAvailableKnownFields: FieldDefinitionCatalog = JSON5.parse(
+  jsonOfDefaultFieldConfig
+);
+// for each field definition, if does not explicity set multilingual, set it to false
+for (const area of ["project", "session", "person"]) {
+  for (const field of catalogOfAllAvailableKnownFields[area]) {
+    if (field.multilingual === undefined) {
+      field.multilingual = false;
+    }
+  }
+}
 export function getFieldDefinition(
   folderType: IFolderType,
   key: string
@@ -281,16 +296,11 @@ const countries = [
 
 catalogOfAllAvailableKnownFields.project.find(
   (d) => d.imdiRange === "http://www.mpi.nl/IMDI/Schema/Countries.xml"
-).choices = countries;
+)!.choices = countries;
 catalogOfAllAvailableKnownFields.session.find(
   (d) => d.imdiRange === "http://www.mpi.nl/IMDI/Schema/Countries.xml"
-).choices = countries;
+)!.choices = countries;
 
-type FieldDefinitionCatalog = {
-  project: FieldDefinition[];
-  session: FieldDefinition[];
-  person: FieldDefinition[];
-};
 // we can't use the full definition becuase we want every field to be optional
 type FieldDefinitionCustomization = {
   key: string;

src/model/field/FieldDefinition.ts

@@ -1,4 +1,3 @@
-import { CapitalCase } from "../../other/case";
 import { IChoice } from "./Field";
 
 export class FieldDefinition {
@@ -24,6 +23,7 @@ export class FieldDefinition {
   //reconstitute when we load the files again.
   public complexChoices?: IChoice[];
   public multipleLines?: boolean;
+  public multilingual: boolean = false;
   public tabIndex?: number = 99;
   public markAsNotImdi?: boolean;
   public imdiRange?: string;