From f632fa820d8aa04afd335bc61e9b1794e64c688f Mon Sep 17 00:00:00 2001
From: Karolina Przerwa <karolina.m.przerwa@gmail.com>
Date: Mon, 29 Jan 2024 14:54:30 +0100
Subject: [PATCH] composeFields: improve user experience

* chore: code cleanup
---
 package-lock.json                             |  3 +-
 .../widgets/custom_fields/ComposeFields.js    | 78 ++++++++++++-------
 .../forms/widgets/custom_fields/Extensions.js | 77 ++++++++++++++----
 .../ListAndFilterCustomFields.js              | 67 +++++++++-------
 4 files changed, 150 insertions(+), 75 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index fc35fdbd..5280a655 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,7 +5,8 @@
   "requires": true,
   "packages": {
     "": {
-      "version": "2.8.2",
+      "name": "react-invenio-forms",
+      "version": "2.8.4",
       "license": "MIT",
       "devDependencies": {
         "@babel/cli": "^7.5.0",
diff --git a/src/lib/forms/widgets/custom_fields/ComposeFields.js b/src/lib/forms/widgets/custom_fields/ComposeFields.js
index 88e935cf..b789969d 100644
--- a/src/lib/forms/widgets/custom_fields/ComposeFields.js
+++ b/src/lib/forms/widgets/custom_fields/ComposeFields.js
@@ -1,3 +1,4 @@
+import _isEmpty from "lodash/isEmpty";
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Divider } from "semantic-ui-react";
@@ -8,9 +9,11 @@ import { Extensions } from "./Extensions";
 export class ComposeFields extends Component {
   constructor(props) {
     super(props);
-    const { composeSections } = this.props;
-
-    this.state = { sections: composeSections, tempFields: [] };
+    const { composeSections, record } = props;
+    const filled = Object.keys(record.custom_fields).map(
+      (key) => `custom_fields.${key}`
+    );
+    this.state = { sections: composeSections, tempFields: [], recordFields: filled };
     this.fieldsCfg = this.getFieldsConfig(composeSections);
     this.sectionsList = composeSections.map((section) => section.section);
   }
@@ -29,15 +32,13 @@ export class ComposeFields extends Component {
 
   getFieldsWithValues = (sectionFields) => {
     const { record } = this.props;
-    const { tempFields } = this.state;
+    const { tempFields, recordFields } = this.state;
     const filledFields = [];
+    if (!record.custom_fields) {
+      return [];
+    }
     for (const field of sectionFields) {
-      if (
-        Object.keys(record.custom_fields).includes(
-          field.key.replace("custom_fields.", "")
-        ) ||
-        tempFields.includes(field)
-      ) {
+      if (recordFields.includes(field.key) || tempFields.includes(field)) {
         filledFields.push(field);
       }
     }
@@ -53,37 +54,53 @@ export class ComposeFields extends Component {
     }
   };
 
-  addFieldCallback = (field) => {
+  addFieldCallback = (fields) => {
     const { sections: prevSections, tempFields: prevTempFields } = this.state;
+
     const sections = [...prevSections];
-    const sectionToUpdate = this.getSectionOfField(field);
-    for (const section of sections) {
-      if (section.section === sectionToUpdate) {
-        section["fields"] = [...section.fields, field].sort((a, b) =>
-          a.key.localeCompare(b.key)
-        );
+    for (const field of fields) {
+      const sectionToUpdate = this.getSectionOfField(field);
+      for (const section of sections) {
+        if (section.section === sectionToUpdate) {
+          section["fields"] = [...section.fields, field].sort((a, b) =>
+            a.key.localeCompare(b.key)
+          );
+        }
       }
     }
-    this.setState({ sections: [...sections], tempFields: [...prevTempFields, field] });
+    this.setState({
+      sections: [...sections],
+      tempFields: [...prevTempFields, ...fields],
+    });
   };
 
   render() {
     const { templateLoaders, record } = this.props;
-    const { sections } = this.state;
+    const { sections, tempFields, recordFields } = this.state;
+    const existingFields = [
+      ...Object.entries(tempFields).map(([key, value]) => value.key),
+      ...recordFields,
+    ];
 
     return (
       <AccordionField key="compose fields" label="Domain specific fields" active>
-        {sections.map(({ fields, paths, ...sectionConfig }) => (
-          <div key={sectionConfig.section} className="rel-mb-2">
-            <FieldLabel
-              htmlFor={sectionConfig.section}
-              icon={sectionConfig.icon}
-              label={sectionConfig.section}
-            />
-            <Divider fitted className="rel-mb-1" />
-            <div className="rel-ml-1">{this.getFieldsWithValues(fields)}</div>
-          </div>
-        ))}
+        {sections.map(({ fields, paths, ...sectionConfig }) => {
+          const recordCustomFields = this.getFieldsWithValues(fields);
+          if (_isEmpty(recordCustomFields)) {
+            return undefined;
+          }
+          return (
+            <div key={sectionConfig.section} className="rel-mb-2">
+              <FieldLabel
+                htmlFor={sectionConfig.section}
+                icon={sectionConfig.icon}
+                label={sectionConfig.section}
+              />
+              <Divider fitted className="rel-mb-1" />
+              <div className="rel-ml-1">{recordCustomFields}</div>
+            </div>
+          );
+        })}
         <Extensions
           fieldPath="custom_fields"
           {...this.fieldsCfg}
@@ -91,6 +108,7 @@ export class ComposeFields extends Component {
           addFieldCallback={this.addFieldCallback}
           sections={this.sectionsList}
           record={record}
+          existingFields={existingFields}
         />
       </AccordionField>
     );
diff --git a/src/lib/forms/widgets/custom_fields/Extensions.js b/src/lib/forms/widgets/custom_fields/Extensions.js
index 47c6a1eb..7e745095 100644
--- a/src/lib/forms/widgets/custom_fields/Extensions.js
+++ b/src/lib/forms/widgets/custom_fields/Extensions.js
@@ -16,13 +16,17 @@ import PropTypes from "prop-types";
 export class Extensions extends Component {
   constructor(props) {
     super(props);
+    const { existingFields } = props;
     this.state = {
       modalOpen: false,
       selectedField: undefined,
       selectedFieldTarget: undefined,
-      fields: [],
+      addFields: [],
+      existingFields: [...existingFields],
+      loading: false,
     };
   }
+
   handleModalOpen = () => {
     this.setState({ modalOpen: true });
   };
@@ -36,6 +40,7 @@ export class Extensions extends Component {
     if (previousSelected) {
       previousSelected.classList.toggle("selected-background");
     }
+    e.currentTarget.classList.toggle("selected-background");
     const newField = {
       field: fieldName,
       props: { ...field },
@@ -45,23 +50,50 @@ export class Extensions extends Component {
       selectedField: { ...newField },
       selectedFieldTarget: e.currentTarget,
     });
-    e.currentTarget.classList.toggle("selected-background");
   };
 
   handleAddField = async (withClose = false) => {
-    const { selectedField } = this.state;
+    const {
+      selectedField,
+      addFields: prevFields,
+      selectedFieldTarget,
+      existingFields: prevExisting,
+    } = this.state;
     const { fieldPath, templateLoaders, addFieldCallback } = this.props;
+    this.setState({ loading: true });
     const field = await importWidget(templateLoaders, {
       ...selectedField,
       fieldPath: `${fieldPath}.${selectedField.field}`,
     });
-    const { fields: prevFields } = this.state;
-    this.setState({ fields: [...prevFields, field] });
-    if (withClose) {
-      this.handleModalClosed();
-    }
-    this.setState({ selectedField: undefined, selectedFieldTarget: undefined });
-    addFieldCallback(field);
+
+    const performCallback = (selectedFieldTarget) => {
+      const { addFields } = this.state;
+
+      if (withClose) {
+        addFieldCallback(addFields);
+        this.setState({ addFields: [], existingFields: [] });
+        this.handleModalClosed();
+      }
+    };
+    selectedFieldTarget.classList.toggle("selected-background");
+    this.setState(
+      {
+        addFields: [...prevFields, field],
+        existingFields: [...prevExisting, field.key],
+        selectedField: undefined,
+        selectedFieldTarget: undefined,
+        loading: false,
+      },
+      () => performCallback(selectedFieldTarget)
+    );
+  };
+
+  handleCancel = () => {
+    const { addFields } = this.state;
+    const { addFieldCallback } = this.props;
+    addFieldCallback(addFields);
+    this.setState({ addFields: [] });
+    this.handleModalClosed();
   };
 
   render() {
@@ -73,10 +105,10 @@ export class Extensions extends Component {
       templateLoaders,
       addFieldCallback,
       sections,
+      existingFields: selected,
       ...fieldsList
     } = this.props;
-    const { modalOpen, fields } = this.state;
-
+    const { modalOpen, existingFields, loading } = this.state;
     return (
       <>
         <Divider />
@@ -89,23 +121,35 @@ export class Extensions extends Component {
           <ListAndFilterCustomFields
             fieldPath={fieldPath}
             handleSelectField={this.handleSelectField}
-            alreadyAddedFields={fields}
+            alreadyAddedFields={existingFields}
             fieldsList={fieldsList}
             sections={sections}
           />
           <Modal.Actions>
             <Button
-              onClick={this.handleModalClosed}
+              onClick={this.handleCancel}
               floated="left"
               icon="cancel"
               labelPosition="left"
               content="Cancel"
             />
-            <Button icon labelPosition="left" onClick={this.handleAddField}>
+            <Button
+              icon
+              labelPosition="left"
+              onClick={() => this.handleAddField(false)}
+              disabled={loading}
+              loading={loading}
+            >
               <Icon name="plus" />
               Add field and continue
             </Button>
-            <Button icon labelPosition="left" onClick={() => this.handleAddField(true)}>
+            <Button
+              icon
+              labelPosition="left"
+              onClick={() => this.handleAddField(true)}
+              disabled={loading}
+              loading={loading}
+            >
               <Icon name="plus" />
               Add field and close
             </Button>
@@ -124,6 +168,7 @@ Extensions.propTypes = {
   templateLoaders: PropTypes.array.isRequired,
   addFieldCallback: PropTypes.func.isRequired,
   sections: PropTypes.array,
+  existingFields: PropTypes.array.isRequired,
 };
 
 Extensions.defaultProps = {
diff --git a/src/lib/forms/widgets/custom_fields/ListAndFilterCustomFields.js b/src/lib/forms/widgets/custom_fields/ListAndFilterCustomFields.js
index 4647c6bc..2c03a3a9 100644
--- a/src/lib/forms/widgets/custom_fields/ListAndFilterCustomFields.js
+++ b/src/lib/forms/widgets/custom_fields/ListAndFilterCustomFields.js
@@ -7,7 +7,6 @@ import {
   Input,
   Item,
   Label,
-  List,
   Modal,
   Segment,
 } from "semantic-ui-react";
@@ -16,39 +15,47 @@ export class ListAndFilterCustomFields extends Component {
   constructor(props) {
     super(props);
     const { fieldsList } = props;
-    this.state = { filteredFieldsList: fieldsList };
+    this.state = {
+      filteredFieldsList: fieldsList,
+      searchPhrase: undefined,
+      filter: undefined,
+    };
   }
 
   resetFilter = () => {
     const { fieldsList } = this.props;
     this.setState({ filteredFieldsList: fieldsList });
   };
-  handleSearch = (e, { value }) => {
-    const { fieldsList } = this.props;
-    if (value) {
-      const filteredResults = Object.fromEntries(
-        Object.entries(fieldsList).filter(([key, val]) => {
-          return val.label.toLowerCase().includes(value.toLowerCase());
-        })
-      );
 
-      this.setState({ filteredFieldsList: filteredResults });
-    } else {
+  filter = () => {
+    const { fieldsList } = this.props;
+    const { searchPhrase, filter } = this.state;
+    if (!searchPhrase && !filter) {
       this.resetFilter();
     }
+    const filteredResults = Object.fromEntries(
+      Object.entries(fieldsList).filter(([key, val]) => {
+        if (filter && searchPhrase) {
+          return (
+            val.section.section === filter &&
+            val.label.toLowerCase().includes(searchPhrase.toLowerCase())
+          );
+        } else if (filter) {
+          return val.section.section === filter;
+        } else if (searchPhrase) {
+          return val.label.toLowerCase().includes(searchPhrase.toLowerCase());
+        }
+      })
+    );
+    this.setState({ filteredFieldsList: filteredResults });
   };
 
-  handleDomainFilter = (e, { value }) => {
-    const { fieldsList } = this.props;
-    if (value) {
-      const filteredResults = Object.fromEntries(
-        Object.entries(fieldsList).filter(([key, val]) => val.section.section === value)
-      );
+  handleSearch = (e, { value }) => {
+    this.setState({ searchPhrase: value }, () => this.filter());
+  };
 
-      this.setState({ filteredFieldsList: filteredResults });
-    } else {
-      this.resetFilter();
-    }
+  handleDomainFilter = (e, { value }) => {
+    this.setState({ filter: value }, () => this.filter());
   };
 
   render() {
@@ -59,7 +66,6 @@ export class ListAndFilterCustomFields extends Component {
       text: section,
       value: section,
     }));
-
     return (
       <>
         <Segment as={Modal.Content} attached="bottom ml-0">
@@ -68,7 +74,7 @@ export class ListAndFilterCustomFields extends Component {
               <Input
                 fluid
                 icon="search"
-                placeholder="Search..."
+                placeholder="Search field names..."
                 onChange={this.handleSearch}
               />
             </Grid.Column>
@@ -94,9 +100,7 @@ export class ListAndFilterCustomFields extends Component {
             {Object.entries(filteredFieldsList).map(([key, value]) => {
               const names = key.split(":");
 
-              const isDisabled = alreadyAddedFields
-                .map((field) => field.key)
-                .includes(`${fieldPath}.${key}`);
+              const isDisabled = alreadyAddedFields.includes(`${fieldPath}.${key}`);
 
               return (
                 <Item
@@ -110,7 +114,14 @@ export class ListAndFilterCustomFields extends Component {
                 >
                   <Item.Content>
                     <Item.Header className={isDisabled ? "text-muted mb-5" : "mb-5"}>
-                      {value.label}
+                      <>
+                        {value.label}{" "}
+                        {isDisabled && (
+                          <span className="right-floated">
+                            <Icon name="checkmark" color="green" /> <span> Added</span>
+                          </span>
+                        )}
+                      </>
                     </Item.Header>
                     <Item.Description>
                       <Grid>