custom_fields: added subject dropdown

src/lib/forms/widgets/custom_fields/SubjectAutocompleteDropdown.js

@@ -0,0 +1,91 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { RemoteSelectField } from "../../RemoteSelectField";
+import { Field, getIn } from "formik";
+
+export class SubjectAutocompleteDropdown extends Component {
+  serializeSubjects = (subjects) =>
+    subjects.map((subject) => {
+      const scheme = subject.scheme ? `(${subject.scheme}) ` : "";
+      // eslint-disable-next-line no-debugger
+      debugger;
+      return {
+        text: scheme + subject.subject,
+        value: subject.subject,
+        key: subject.subject,
+        ...(subject.id ? { id: subject.id } : {}),
+        subject: subject.subject,
+      };
+    });
+
+  prepareSuggest = (searchQuery) => {
+    const { limitTo } = this.props;
+    // eslint-disable-next-line no-debugger
+    debugger;
+
+    const prefix = limitTo === "all" ? "" : `${limitTo}:`;
+    return `${prefix}${searchQuery}`;
+  };
+
+  render() {
+    const { fieldPath, required, multiple, placeholder, clearable, width } = this.props;
+
+    return (
+      <Field name={fieldPath}>
+        {({ form: { values } }) => {
+          return (
+            <RemoteSelectField
+              clearable={clearable}
+              fieldPath={fieldPath}
+              initialSuggestions={getIn(values, fieldPath, [])}
+              multiple={multiple}
+              noQueryMessage="Search or create subjects..."
+              placeholder={placeholder}
+              preSearchChange={this.prepareSuggest}
+              required={required}
+              serializeSuggestions={this.serializeSubjects}
+              serializeAddedValue={(value) => ({
+                text: value,
+                value: value,
+                key: value,
+                subject: value,
+              })}
+              suggestionAPIUrl="/api/subjects"
+              onValueChange={({ formikProps }, selectedSuggestions) => {
+                formikProps.form.setFieldValue(fieldPath, selectedSuggestions);
+              }}
+              value={getIn(values, fieldPath, []).map((val) => val.subject)}
+              label={
+                <>
+                  {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+                  <label className="mobile-hidden">&nbsp;</label>
+                </>
+              } /** For alignment purposes */
+              allowAdditions
+              width={width}
+            />
+          );
+        }}
+      </Field>
+    );
+  }
+}
+
+SubjectAutocompleteDropdown.propTypes = {
+  fieldPath: PropTypes.string.isRequired,
+  limitTo: PropTypes.string,
+  required: PropTypes.bool,
+  multiple: PropTypes.bool,
+  clearable: PropTypes.bool,
+  placeholder: PropTypes.string,
+  width: PropTypes.number,
+};
+
+SubjectAutocompleteDropdown.defaultProps = {
+  required: false,
+  limitTo: "",
+  multiple: true,
+  clearable: true,
+  placeholder: "Search for a subject by name",
+  width: undefined,
+};

src/lib/forms/widgets/custom_fields/index.js

@@ -1 +1,2 @@
 export { CustomFields } from "./CustomFields";
+export { SubjectAutocompleteDropdown } from "./SubjectAutocompleteDropdown";