fix: added missing lodash dependency to accounts lib

fix: show full languages name on the dropdown

fix: search crypto per name as well

fix: limit selected languages to 4 (the same as the old admin)

fix: removed duplicated import

lib/new-admin/config/accounts.js

@@ -1,6 +1,5 @@
 const _ = require('lodash/fp')
 const { COINS, ALL_CRYPTOS } = require('./coins')
-const _ = require('lodash/fp')
 
 const { BTC, BCH, DASH, ETH, LTC, ZEC } = COINS
 

new-lamassu-admin/src/components/inputs/formik/Autocomplete.js

@@ -1,10 +1,12 @@
 import { useFormikContext } from 'formik'
 import * as R from 'ramda'
-import React from 'react'
+import React, { useState } from 'react'
 
 import { Autocomplete } from '../base'
 
 const AutocompleteFormik = ({ options, ...props }) => {
+  const [open, setOpen] = useState(false)
+
   const { name, onBlur, value } = props.field
   const { touched, errors, setFieldValue } = props.form
   const error = !!(touched[name] && errors[name])
@@ -20,7 +22,10 @@ const AutocompleteFormik = ({ options, ...props }) => {
       onBlur={onBlur}
       value={value}
       error={error}
+      open={open}
       options={innerOptions}
+      onOpen={() => setOpen(value.length !== props.limit)}
+      onClose={() => setOpen(false)}
       {...props}
     />
   )

new-lamassu-admin/src/pages/Locales/helper.js

@@ -1,8 +1,11 @@
+import { createFilterOptions } from '@material-ui/lab/Autocomplete'
 import * as R from 'ramda'
 import * as Yup from 'yup'
 
 import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
 
+const LANGUAGE_SELECTION_LIMIT = 4
+
 const getFields = (getData, names) => {
   return R.filter(it => R.includes(it.name, names), allFields(getData))
 }
@@ -28,7 +31,6 @@ const allFields = getData => {
   const currencyData = getData(['currencies'])
   const languageData = getData(['languages'])
   const cryptoData = getData(['cryptoCurrencies'])
-
   return [
     {
       name: 'machine',
@@ -76,8 +78,9 @@ const allFields = getData => {
       inputProps: {
         options: languageData,
         valueProp: 'code',
-        getLabel: R.path(['code']),
+        getLabel: R.path(['display']),
-        multiple: true
+        multiple: true,
+        limit: LANGUAGE_SELECTION_LIMIT
       }
     },
     {
@@ -90,7 +93,10 @@ const allFields = getData => {
         options: cryptoData,
         valueProp: 'code',
         getLabel: R.path(['code']),
-        multiple: true
+        multiple: true,
+        filterOptions: createFilterOptions({
+          stringify: option => `${option.code} ${option.display}`
+        })
       }
     }
   ]