forms: improve diversity of fields

* display empty value if field is None * add possibility to prefill fields with default value * add possibility to specify the width of table column (search view) * add render of checkbox, dropdown and textarea fields * closes inveniosoftware/invenio-banners#10
inveniosoftware · Feb 8, 2023 · 8a9289f · 8a9289f
1 parent e3a8cbf
commit 8a9289f
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 10 deletions.
diff --git a/...ministration/assets/semantic-ui/js/invenio_administration/src/components/DateFormatter.js b/...ministration/assets/semantic-ui/js/invenio_administration/src/components/DateFormatter.js
@@ -14,6 +14,10 @@ class DateFormatter extends React.Component {
   render() {
     const { value } = this.props;
 
+    if (!value) {
+      return null;
+    }
+
     const date = DateTime.fromISO(value);
     return (
       <p data-testid="date-formatter">{date.toLocaleString(DateTime.DATETIME_MED)}</p>

diff --git a/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/AdminForm.js b/invenio_administration/assets/semantic-ui/js/invenio_administration/src/formik/AdminForm.js
@@ -15,13 +15,17 @@ import mapValues from "lodash/mapValues";
 export class AdminForm extends Component {
   constructor(props) {
     super(props);
-    const { resource, formFields } = props;
+    const { resource, resourceSchema: resourceSchema } = props;
 
     this.state = {
       error: undefined,
       formData: resource
         ? resource
-        : mapValues(formFields, function (value) {
+        : mapValues(resourceSchema, function (value) {
+            const defaultValue = value.metadata.default;
+            if (defaultValue) {
+              return defaultValue;
+            }
             return "";
           }),
     };

diff --git a/...io_administration/assets/semantic-ui/js/invenio_administration/src/formik/GenerateForm.js b/...io_administration/assets/semantic-ui/js/invenio_administration/src/formik/GenerateForm.js
@@ -1,5 +1,11 @@
 import React from "react";
-import { Input, AutocompleteDropdown } from "react-invenio-forms";
+import {
+  Input,
+  AutocompleteDropdown,
+  BooleanField,
+  Dropdown,
+  TextArea,
+} from "react-invenio-forms";
 import _capitalize from "lodash/capitalize";
 import PropTypes from "prop-types";
 import { Form, Segment, Header } from "semantic-ui-react";
@@ -12,6 +18,7 @@ const fieldsMap = {
   integer: Input,
   uuid: Input,
   datetime: Input,
+  bool: BooleanField,
 };
 
 const generateFieldProps = (
@@ -34,11 +41,14 @@ const generateFieldProps = (
   }
 
   const htmlDescription = (
-    <div
-      dangerouslySetInnerHTML={{
-        __html: formFieldConfig?.description || fieldSchema?.metadata?.description,
-      }}
-    />
+    <>
+      <p />
+      <div
+        dangerouslySetInnerHTML={{
+          __html: formFieldConfig?.description || fieldSchema?.metadata?.description,
+        }}
+      />
+    </>
   );
 
   return {
@@ -49,6 +59,9 @@ const generateFieldProps = (
     required: fieldSchema.required,
     disabled: fieldSchema.readOnly || (fieldSchema.createOnly && !isCreate),
     placeholder,
+    defaultValue: formFieldConfig?.defaultValue || fieldSchema?.metadata?.defaultValue,
+    options: formFieldConfig?.options || fieldSchema?.metadata?.options,
+    rows: formFieldConfig?.rows || fieldSchema?.metadata?.rows,
   };
 };
 
@@ -93,6 +106,20 @@ const mapFormFields = (obj, parentField, isCreate, formFieldsConfig, dropDumpOnl
       );
     }
 
+    if (fieldSchema.type === "bool") {
+      const description = fieldProps.description;
+      return (
+        <>
+          <BooleanField
+            key={fieldProps.fieldPath}
+            required={fieldSchema.required}
+            {...fieldProps}
+          />
+          {description && <label className="helptext">{description}</label>}
+        </>
+      );
+    }
+
     if (fieldSchema.type === "vocabulary") {
       return (
         <AutocompleteDropdown
@@ -125,6 +152,31 @@ const mapFormFields = (obj, parentField, isCreate, formFieldsConfig, dropDumpOnl
       );
     }
 
+    const dropdownOptions =
+      formFieldsConfig[fieldName]?.options || fieldSchema?.metadata?.options;
+    if (fieldSchema.type === "string" && dropdownOptions) {
+      return (
+        <Dropdown
+          key={fieldProps.fieldPath}
+          required={fieldSchema.required}
+          options={dropdownOptions}
+          {...fieldProps}
+        />
+      );
+    }
+
+    const rows = formFieldsConfig[fieldName]?.rows || fieldSchema?.metadata?.rows;
+    if (fieldSchema.type === "string" && rows) {
+      return (
+        <TextArea
+          key={fieldProps.fieldPath}
+          fieldPath={fieldProps.fieldPath}
+          rows={rows}
+          {...fieldProps}
+        />
+      );
+    }
+
     const Element = fieldsMap[fieldSchema.type];
     return <Element {...fieldProps} key={fieldProps.fieldPath} />;
   });

diff --git a/...tration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultsContainer.js b/...tration/assets/semantic-ui/js/invenio_administration/src/search/SearchResultsContainer.js
@@ -25,8 +25,11 @@ export const SearchResultsContainer = ({
     <Table>
       <Table.Header>
         <Table.Row>
-          {columns.map(([property, { text, order }], index) => {
-            const width = index === 0 ? undefined : index === 1 ? 4 : 3;
+          {columns.map(([property, { text, order, width }], index) => {
+            if (!width) {
+              width = index === 0 ? undefined : index === 1 ? 4 : 3;
+            }
+
             return (
               <Table.HeaderCell key={property + order} width={width}>
                 {text}