OpenConceptLab/ocl_issues#845 | Source/Collection form | async locale…

…s on typing
OpenConceptLab · Jul 17, 2021 · e6f14f6 · e6f14f6
1 parent f6ab3d7
commit e6f14f6
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 43 deletions.
diff --git a/src/components/common/ConceptContainerForm.jsx b/src/components/common/ConceptContainerForm.jsx
@@ -11,9 +11,10 @@ import {
   find, intersectionBy
 } from 'lodash';
 import APIService from '../../services/APIService';
-import { arrayToObject, getCurrentURL, fetchLocales } from '../../common/utils';
+import { arrayToObject, getCurrentURL } from '../../common/utils';
 import ExtrasForm from './ExtrasForm';
 import RTEditor from './RTEditor';
+import LocaleAutoComplete from './LocaleAutoComplete';
 const JSON_MODEL = {key: '', value: ''}
 
 
@@ -70,7 +71,7 @@ class ConceptContainerForm extends React.Component {
   }
 
   componentDidMount() {
-    fetchLocales(locales => this.setState({locales: locales}))
+    //fetchLocales(locales => this.setState({locales: locales}))
     const { edit, resource, newCollectionProps } = this.props
 
     this.setState({typeAttr: this.isSource() ? 'source_type' : 'collection_type'}, () => {
@@ -296,7 +297,7 @@ class ConceptContainerForm extends React.Component {
     } = this.props;
     const isSource = this.isSource()
     const selected_type = isSource ? selected_source_type : selected_collection_type;
-    const isLoading = isEmpty(locales);
+    const isLoading = false && isEmpty(locales);
     const resourceTypeLabel = startCase(resourceType)
     const header = edit ? `Edit ${resourceTypeLabel}: ${fields.id}` : `New ${resourceTypeLabel}`
     return (
@@ -420,53 +421,25 @@ class ConceptContainerForm extends React.Component {
                 </FormControl>
               </div>
               <div className='col-md-12 no-side-padding' style={{marginTop: '15px'}}>
-                <Autocomplete
-                  openOnFocus
-                  getOptionSelected={(option, value) => option.id === get(value, 'id')}
-                  value={selected_default_locale}
+                <LocaleAutoComplete
                   id="fields.default_locale"
-                  options={locales}
-                  getOptionLabel={(option) => option.name}
-                  fullWidth
+                  label="Default Locale"
+                  onChange={this.onAutoCompleteChange}
                   required
-                  renderInput={
-                    params => <TextField
-                                {...params}
-                                error={Boolean(fieldErrors.default_locale)}
-                                      required
-                                      label="Default Locale"
-                                      variant="outlined"
-                                      fullWidth
-                    />
-                  }
-                  onChange={(event, item) => this.onAutoCompleteChange('fields.default_locale', item)}
+                  selected={selected_default_locale}
+                  error={Boolean(fieldErrors.default_locale)}
                 />
               </div>
               <div className='col-md-12 no-side-padding' style={{marginTop: '15px'}}>
-                <Autocomplete
-                  className='multi-auto-select'
-                  multiple
-                  openOnFocus
-                  filterSelectedOptions
-                  getOptionSelected={(option, value) => option.id === get(value, 'id')}
-                  value={selected_supported_locales}
+                <LocaleAutoComplete
                   id="fields.supported_locales"
-                  options={locales}
-                  getOptionLabel={(option) => option.name}
-                  fullWidth
-                  required
-                  renderInput={
-                    params => <TextField
-                                {...params}
-                                error={Boolean(fieldErrors.supported_locales)}
-                                      label="Supported Locales"
-                                      variant="outlined"
-                                      id='supported-locale-input'
-                                      required
-                                      fullWidth
-                    />
-                  }
+                  label="Supported Locales"
                   onChange={this.onMultiAutoCompleteChange}
+                  required
+                  multiple
+                  selected={selected_supported_locales}
+                  error={Boolean(fieldErrors.supported_locales)}
+                  filterSelectedOptions
                 />
               </div>
               <div className='col-md-12 no-side-padding' style={{marginTop: '15px'}}>

diff --git a/src/components/common/LocaleAutoComplete.jsx b/src/components/common/LocaleAutoComplete.jsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { TextField, CircularProgress } from '@material-ui/core';
+import Autocomplete from '@material-ui/lab/Autocomplete';
+import { get, debounce, map, orderBy, isEmpty } from 'lodash'
+import APIService from '../../services/APIService';
+
+const LocaleAutoComplete = ({ id, selected, multiple, minCharactersForSearch, required, onChange, label, error, ...rest }) => {
+  const minLength = minCharactersForSearch || 2;
+  const [input, setInput] = React.useState('')
+  const [open, setOpen] = React.useState(false)
+  const [fetched, setFetched] = React.useState(false)
+  const [locales, setLocales] = React.useState([])
+
+  const isSearchable = val => val && val.length >= minLength
+  const loading = Boolean(open && !fetched && isSearchable(input) && isEmpty(locales))
+  const handleInputChange = (event, value) => {
+    const val = value || ''
+    setInput(val)
+    setFetched(false)
+    if(isSearchable(val))
+      fetchLocales(val)
+  }
+
+  const searchLocales = searchStr => {
+    APIService
+      .sources('Locales')
+      .concepts()
+      .get(null, null, {limit: 25, q: searchStr, is_latest: true})
+      .then(response => {
+        const _locales = orderBy(map(response.data, l => ({id: l.locale || l.display_locale, name: `${l.display_name} [${l.locale || l.display_locale}]`, uuid: l.uuid})), 'name');
+        setLocales(_locales)
+        setFetched(true)
+      })
+  }
+
+  const fetchLocales = React.useCallback(debounce(searchLocales, 700), [])
+
+  return (
+    <Autocomplete
+      openOnFocus
+      fullWidth
+      blurOnSelect={!multiple}
+      disableCloseOnSelect={Boolean(multiple)}
+      multiple={Boolean(multiple)}
+      required={required}
+      open={open}
+      onOpen={() => {
+          setOpen(true);
+      }}
+      onClose={() => {
+          setOpen(false);
+      }}
+      getOptionSelected={(option, value) => option.uuid === get(value, 'uuid')}
+      value={selected || ''}
+      id={id || 'localesAutoComplete'}
+      options={locales}
+      loading={loading}
+      loadingText={loading ? 'Loading...' : `Type atleast ${minLength} characters to search`}
+      noOptionsText={(isSearchable(input) && !loading) ? "No results" : 'Start typing...'}
+      getOptionLabel={option => {return option.name || ''}}
+      onInputChange={handleInputChange}
+      onChange={(event, item) => onChange(id || 'localesAutoComplete', item)}
+      renderInput={
+        params => (
+          <TextField
+            {...params}
+            value={input}
+                  required={required}
+                  label={label}
+                  error={error}
+                  variant="outlined"
+                  fullWidth
+                  InputProps={{
+                    ...params.InputProps,
+                    endAdornment: (
+                      <React.Fragment>
+                        {loading ? <CircularProgress color="inherit" size={20} /> : null}
+                        {params.InputProps.endAdornment}
+                      </React.Fragment>
+                    ),
+                  }}
+          />
+        )
+      }
+      {...rest}
+    />
+  )
+}
+
+export default LocaleAutoComplete;