Autocomplete: Single select entry and pagination support (#1903)

Author: dsuren1

geonode_mapstore_client/client/js/components/Autocomplete/Autocomplete.jsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2024, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import isArray from 'lodash/isArray';
+import PropTypes from 'prop-types';
+
+import SelectInfiniteScroll from '@js/components/SelectInfiniteScroll/SelectInfiniteScroll';
+
+const Autocomplete = ({
+    className,
+    clearable = false,
+    id,
+    labelKey,
+    multi = false,
+    name,
+    title,
+    value,
+    valueKey,
+    placeholder,
+    onChange,
+    onLoadOptions,
+    ...props
+}) => {
+    const getValue = () => {
+        if (value && isArray(value) && valueKey && labelKey) {
+            return value.map((entry) => {
+                return {
+                    result: entry,
+                    value: entry[valueKey],
+                    label: entry[labelKey]
+                };
+            });
+        }
+        return value;
+    };
+    return (
+        <div className={`autocomplete${className ? " " + className : ""}`}>
+            <label className="control-label" htmlFor={id}>{title || name}</label>
+            <SelectInfiniteScroll
+                {...props}
+                id={id}
+                value={getValue()}
+                multi={multi}
+                clearable={clearable}
+                placeholder={placeholder}
+                loadOptions={onLoadOptions}
+                onChange={onChange}
+            />
+        </div>
+    );
+};
+
+Autocomplete.propTypes = {
+    className: PropTypes.string,
+    clearable: PropTypes.bool,
+    id: PropTypes.string.isRequired,
+    labelKey: PropTypes.string,
+    multi: PropTypes.bool,
+    name: PropTypes.string,
+    title: PropTypes.string,
+    value: PropTypes.any.isRequired,
+    valueKey: PropTypes.string,
+    placeholder: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    onLoadOptions: PropTypes.func.isRequired
+};
+
+export default Autocomplete;

geonode_mapstore_client/client/js/components/Autocomplete/index.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright 2024, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { default } from './Autocomplete';

geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/ArrayField.jsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright 2024, GeoSolutions Sas.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import axios from '@mapstore/framework/libs/ajax';
+import isString from 'lodash/isString';
+import isEmpty from 'lodash/isEmpty';
+import Autocomplete from '@js/components/Autocomplete/Autocomplete';
+import DefaultSchemaField from '@rjsf/core/lib/components/fields/SchemaField';
+
+/**
+ * `SchemaField` is an enhanced component that overrides `@rjsf`'s default `SchemaField`
+ * - Customizes the rendering of object and array fields with custom functionality, such as support for autocomplete fields.
+ * - Provides `onChange` handlers to update `formData` dynamically.
+ * - Fallback to the default `SchemaField` from `@rjsf` when no custom rendering is needed.
+ */
+const SchemaField = (props) => {
+    const {
+        onChange,
+        schema,
+        formData,
+        idSchema,
+        name,
+        uiSchema
+    } = props;
+    const autocomplete = uiSchema?.['ui:options']?.['geonode-ui:autocomplete'];
+    const isMultiSelect =  schema?.items?.type === 'object' && !isEmpty(schema?.items?.properties);
+    const isSingleSelect = schema?.type === 'object' && !isEmpty(schema?.properties);
+
+    if (autocomplete && (isMultiSelect || isSingleSelect)) {
+        const autocompleteOptions = isString(autocomplete)
+            ? { url: autocomplete }
+            : autocomplete;
+        const autocompleteUrl = autocompleteOptions?.url;
+        const queryKey = autocompleteOptions?.queryKey || 'q';
+        const resultsKey = autocompleteOptions?.resultsKey || 'results';
+        const valueKey = autocompleteOptions?.valueKey || 'id';
+        const labelKey = autocompleteOptions?.labelKey || 'label';
+        const placeholder = autocompleteOptions?.placeholder ?? '...';
+
+        let autoCompleteProps = {
+            id: idSchema.$id,
+            name,
+            title: schema.title,
+            value: formData,
+            valueKey,
+            labelKey,
+            placeholder,
+            multi: isMultiSelect,
+            clearable: !isMultiSelect,
+            onChange: (selected) => {
+                let _selected = selected?.result ?? null;
+                if (isMultiSelect) {
+                    _selected = selected.map(({ result, ...option }) => {
+                        if (result === undefined) {
+                            return option;
+                        }
+                        return Object.fromEntries(
+                            Object.keys(schema.items.properties)
+                                .map((key) => [key, result[key]])
+                        );
+                    });
+                }
+                onChange(_selected);
+            }
+        };
+
+        return (
+            <Autocomplete
+                {...autoCompleteProps}
+                className={"form-group gn-metadata-autocomplete"}
+                onLoadOptions={({ q, config, ...params }) => {
+                    return axios.get(autocompleteUrl, {
+                        ...config,
+                        params: {
+                            ...params,
+                            ...(q && { [queryKey]: q }),
+                            page: params.page
+                        }
+                    })
+                        .then(({ data }) => {
+                            return {
+                                isNextPageAvailable: !!data.pagination?.more,
+                                results: data?.[resultsKey].map((result) => {
+                                    return {
+                                        selectOption: {
+                                            result,
+                                            value: result[valueKey],
+                                            label: result[labelKey]
+                                        }
+                                    };
+                                })
+                            };
+                        });
+                }}
+            />
+        );
+    }
+    return <DefaultSchemaField {...props}/>;
+};
+
+export default SchemaField;

geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/SchemaField.jsx

@@ -6,8 +6,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ArrayField from './ArrayField';
+import SchemaField from './SchemaField';
 
 export default {
-    ArrayField: ArrayField
+    SchemaField
 };

geonode_mapstore_client/client/js/plugins/MetadataEditor/components/_fields/index.js

@@ -194,6 +194,15 @@
             grid-column-start: 2;
         }
     }
+    .gn-metadata-autocomplete {
+        padding: 0 0.75rem;
+        .Select--multi {
+            .Select-value {
+                margin-top: 3px;
+                margin-bottom: 3px;
+            }
+        }
+    }
 }
 
 .gn-metadata-page {