feat: updating locales page
This commit is contained in:
Taranto
Josh Harvey
parent
ffa8713ee4
commit
20674c4b12
4 changed files with 198 additions and 234 deletions
|
|
@ -1,30 +1,25 @@
|
||||||
import { useQuery, useMutation } from '@apollo/react-hooks'
|
import { useQuery, useMutation } from '@apollo/react-hooks'
|
||||||
import { gql } from 'apollo-boost'
|
import { gql } from 'apollo-boost'
|
||||||
import React, { memo } from 'react'
|
import * as R from 'ramda'
|
||||||
import * as Yup from 'yup'
|
import React from 'react'
|
||||||
|
|
||||||
import Subtitle from 'src/components/Subtitle'
|
import { Table as EditableTable } from 'src/components/editableTable'
|
||||||
import Title from 'src/components/Title'
|
import Section from 'src/components/layout/Section'
|
||||||
|
import TitleSection from 'src/components/layout/TitleSection'
|
||||||
|
import { fromServer, toServer } from 'src/utils/config'
|
||||||
|
|
||||||
import MainForm from './MainForm'
|
import {
|
||||||
|
mainFields,
|
||||||
|
overrides,
|
||||||
|
LocaleSchema,
|
||||||
|
OverridesSchema,
|
||||||
|
localeDefaults,
|
||||||
|
overridesDefaults
|
||||||
|
} from './helper'
|
||||||
|
|
||||||
const LocaleSchema = Yup.object().shape({
|
const GET_DATA = gql`
|
||||||
country: Yup.object().required('Required'),
|
query getData {
|
||||||
fiatCurrency: Yup.object().required('Required'),
|
config
|
||||||
languages: Yup.array().required('Required'),
|
|
||||||
cryptoCurrencies: Yup.array().required('Required')
|
|
||||||
})
|
|
||||||
|
|
||||||
const initialValues = {
|
|
||||||
country: null,
|
|
||||||
fiatCurrency: null,
|
|
||||||
languages: [],
|
|
||||||
cryptoCurrencies: [],
|
|
||||||
showRates: false
|
|
||||||
}
|
|
||||||
|
|
||||||
const GET_AUX_DATA = gql`
|
|
||||||
{
|
|
||||||
currencies {
|
currencies {
|
||||||
code
|
code
|
||||||
display
|
display
|
||||||
|
|
@ -41,12 +36,10 @@ const GET_AUX_DATA = gql`
|
||||||
code
|
code
|
||||||
display
|
display
|
||||||
}
|
}
|
||||||
|
machines {
|
||||||
|
name
|
||||||
|
deviceId
|
||||||
}
|
}
|
||||||
`
|
|
||||||
|
|
||||||
const GET_CONFIG = gql`
|
|
||||||
{
|
|
||||||
config
|
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
|
|
@ -56,29 +49,55 @@ const SAVE_CONFIG = gql`
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
const Locales = memo(() => {
|
const Locales = ({ name: SCREEN_KEY }) => {
|
||||||
const { data } = useQuery(GET_AUX_DATA)
|
const { data } = useQuery(GET_DATA)
|
||||||
|
const [saveConfig] = useMutation(SAVE_CONFIG, {
|
||||||
|
refetchQueries: () => ['getData']
|
||||||
|
})
|
||||||
|
|
||||||
const [saveConfig] = useMutation(SAVE_CONFIG)
|
const config = data?.config && fromServer(SCREEN_KEY)(data.config)
|
||||||
const { data: configResponse } = useQuery(GET_CONFIG)
|
|
||||||
|
|
||||||
const locale = configResponse?.config ?? initialValues
|
const locale = config && !R.isEmpty(config) ? config : localeDefaults
|
||||||
|
|
||||||
const save = it => saveConfig({ variables: { config: it } })
|
const save = it => {
|
||||||
|
const config = toServer(SCREEN_KEY)(it.locale[0])
|
||||||
|
return saveConfig({ variables: { config } })
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveOverrides = it => {
|
||||||
|
const config = toServer(SCREEN_KEY)(it)
|
||||||
|
return saveConfig({ variables: { config } })
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Title>Locales</Title>
|
<TitleSection title="Locales" />
|
||||||
<Subtitle>Default settings</Subtitle>
|
<Section title="Default settings">
|
||||||
<MainForm
|
<EditableTable
|
||||||
validationSchema={LocaleSchema}
|
name="locale"
|
||||||
value={locale}
|
enableEdit
|
||||||
|
initialValues={locale}
|
||||||
save={save}
|
save={save}
|
||||||
auxData={data}
|
validationSchema={LocaleSchema}
|
||||||
|
data={R.of(locale)}
|
||||||
|
elements={mainFields(data)}
|
||||||
/>
|
/>
|
||||||
<Subtitle extraMarginTop>Overrides</Subtitle>
|
</Section>
|
||||||
|
<Section title="Overrides">
|
||||||
|
<EditableTable
|
||||||
|
name="overrides"
|
||||||
|
enableDelete
|
||||||
|
enableEdit
|
||||||
|
enableCreate
|
||||||
|
initialValues={overridesDefaults}
|
||||||
|
save={saveOverrides}
|
||||||
|
validationSchema={OverridesSchema}
|
||||||
|
data={locale.overrides ?? []}
|
||||||
|
elements={overrides(data)}
|
||||||
|
/>
|
||||||
|
</Section>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
})
|
}
|
||||||
|
|
||||||
export default Locales
|
export default Locales
|
||||||
|
|
|
||||||
|
|
@ -1,74 +0,0 @@
|
||||||
import * as R from 'ramda'
|
|
||||||
import React, { memo } from 'react'
|
|
||||||
|
|
||||||
import { Table as EditableTable } from 'src/components/editableTable'
|
|
||||||
import { Autocomplete, AutocompleteMultiple } from 'src/components/inputs'
|
|
||||||
import { Checkbox } from 'src/components/inputs/formik'
|
|
||||||
|
|
||||||
const sizes = {
|
|
||||||
country: 200,
|
|
||||||
fiatCurrency: 150,
|
|
||||||
languages: 240,
|
|
||||||
cryptoCurrencies: 270,
|
|
||||||
showRates: 125,
|
|
||||||
action: 175
|
|
||||||
}
|
|
||||||
|
|
||||||
const MainForm = memo(({ value, save, auxData, validationSchema }) => {
|
|
||||||
const getData = R.path(R.__, auxData)
|
|
||||||
const displayCodeArray = R.compose(R.join(', '), R.map(R.path(['code'])))
|
|
||||||
|
|
||||||
return (
|
|
||||||
<EditableTable
|
|
||||||
name="locale"
|
|
||||||
title="Default Settings"
|
|
||||||
altTitleColor
|
|
||||||
initialValues={{ country: null }}
|
|
||||||
enableEdit
|
|
||||||
onDelete={() => {}}
|
|
||||||
setEditing={() => {}}
|
|
||||||
save={save}
|
|
||||||
validationSchema={validationSchema}
|
|
||||||
data={R.of(value)}
|
|
||||||
elements={[
|
|
||||||
{
|
|
||||||
name: 'country',
|
|
||||||
width: sizes.country,
|
|
||||||
view: R.path(['display']),
|
|
||||||
input: Autocomplete,
|
|
||||||
inputProps: { suggestions: getData(['countries']) }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'fiatCurrency',
|
|
||||||
width: sizes.fiatCurrency,
|
|
||||||
view: R.path(['code']),
|
|
||||||
input: Autocomplete,
|
|
||||||
inputProps: { suggestions: getData(['currencies']) }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'languages',
|
|
||||||
width: sizes.languages,
|
|
||||||
view: displayCodeArray,
|
|
||||||
input: AutocompleteMultiple,
|
|
||||||
inputProps: { suggestions: getData(['languages']) }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'cryptoCurrencies',
|
|
||||||
width: sizes.cryptoCurrencies,
|
|
||||||
view: displayCodeArray,
|
|
||||||
input: AutocompleteMultiple,
|
|
||||||
inputProps: { suggestions: getData(['cryptoCurrencies']) }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'showRates',
|
|
||||||
width: sizes.showRates,
|
|
||||||
textAlign: 'center',
|
|
||||||
view: it => (it ? 'true' : 'false'),
|
|
||||||
input: Checkbox
|
|
||||||
}
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
export default MainForm
|
|
||||||
|
|
@ -1,116 +0,0 @@
|
||||||
// import React, { useState, memo } from 'react'
|
|
||||||
// import { Form, FastField } from 'formik'
|
|
||||||
|
|
||||||
// import { Link } from '../../components/buttons'
|
|
||||||
// import {
|
|
||||||
// Autocomplete,
|
|
||||||
// AutocompleteMultiple,
|
|
||||||
// Checkbox
|
|
||||||
// } from '../../components/inputs'
|
|
||||||
// import {
|
|
||||||
// EditCell,
|
|
||||||
// Table,
|
|
||||||
// TableHead,
|
|
||||||
// TableRow,
|
|
||||||
// TableHeader,
|
|
||||||
// TableBody,
|
|
||||||
// TableCell as TD
|
|
||||||
// } from '../../components/table'
|
|
||||||
|
|
||||||
// import styles from './MainForm.module.scss'
|
|
||||||
|
|
||||||
// const Override = memo(
|
|
||||||
// ({ values, resetForm, submitForm, errors, editing, setEditing, data }) => {
|
|
||||||
// const [submitted, setSubmitted] = useState(false)
|
|
||||||
|
|
||||||
// const save = () => {
|
|
||||||
// setSubmitted(true)
|
|
||||||
// submitForm()
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const cancel = () => {
|
|
||||||
// resetForm()
|
|
||||||
// setSubmitted(false)
|
|
||||||
// setEditing(false)
|
|
||||||
// }
|
|
||||||
|
|
||||||
// const ViewFields = (
|
|
||||||
// <>
|
|
||||||
// <TD>{values.machine && values.machine.display}</TD>
|
|
||||||
// <TD>
|
|
||||||
// {values.languages && values.languages.map(it => it.code).join(', ')}
|
|
||||||
// </TD>
|
|
||||||
// <TD>
|
|
||||||
// {values.cryptoCurrencies &&
|
|
||||||
// values.cryptoCurrencies.map(it => it.code).join(', ')}
|
|
||||||
// </TD>
|
|
||||||
// <TD>{values.showRates ? 'true' : 'false'}</TD>
|
|
||||||
// <TD rightAlign>
|
|
||||||
// <Link color='primary' onClick={() => setEditing(true)}>
|
|
||||||
// Edit
|
|
||||||
// </Link>
|
|
||||||
// </TD>
|
|
||||||
// </>
|
|
||||||
// )
|
|
||||||
|
|
||||||
// const EditFields = (
|
|
||||||
// <>
|
|
||||||
// <TD>
|
|
||||||
// <FastField
|
|
||||||
// name='machine'
|
|
||||||
// component={Autocomplete}
|
|
||||||
// suggestions={data && data.machines}
|
|
||||||
// />
|
|
||||||
// </TD>
|
|
||||||
// <TD>
|
|
||||||
// <FastField
|
|
||||||
// name='languages'
|
|
||||||
// component={AutocompleteMultiple}
|
|
||||||
// suggestions={data && data.languages}
|
|
||||||
// />
|
|
||||||
// </TD>
|
|
||||||
// <TD>
|
|
||||||
// <FastField
|
|
||||||
// name='cryptoCurrencies'
|
|
||||||
// component={AutocompleteMultiple}
|
|
||||||
// suggestions={data && data.cryptoCurrencies}
|
|
||||||
// />
|
|
||||||
// </TD>
|
|
||||||
// <TD>
|
|
||||||
// <FastField name='showRates' component={Checkbox} />
|
|
||||||
// </TD>
|
|
||||||
// <EditCell save={save} cancel={cancel} />
|
|
||||||
// </>
|
|
||||||
// )
|
|
||||||
|
|
||||||
// return (
|
|
||||||
// <Form>
|
|
||||||
// <Table>
|
|
||||||
// <colgroup>
|
|
||||||
// <col className={styles.bigColumn} />
|
|
||||||
// <col className={styles.mediumColumn} />
|
|
||||||
// <col className={styles.bigColumn} />
|
|
||||||
// <col className={styles.showRates} />
|
|
||||||
// <col className={styles.actionColumn} />
|
|
||||||
// </colgroup>
|
|
||||||
// <TableHead>
|
|
||||||
// <TableRow header>
|
|
||||||
// <TableHeader>Machine</TableHeader>
|
|
||||||
// <TableHeader>Languages</TableHeader>
|
|
||||||
// <TableHeader>Crypto Currencies</TableHeader>
|
|
||||||
// <TableHeader>Show Rates</TableHeader>
|
|
||||||
// <TableHeader />
|
|
||||||
// </TableRow>
|
|
||||||
// </TableHead>
|
|
||||||
// <TableBody>
|
|
||||||
// <TableRow error={submitted && errors && errors.length}>
|
|
||||||
// {editing ? EditFields : ViewFields}
|
|
||||||
// </TableRow>
|
|
||||||
// </TableBody>
|
|
||||||
// </Table>
|
|
||||||
// </Form>
|
|
||||||
// )
|
|
||||||
// }
|
|
||||||
// )
|
|
||||||
|
|
||||||
// export default Override
|
|
||||||
135
new-lamassu-admin/src/pages/Locales/helper.js
Normal file
135
new-lamassu-admin/src/pages/Locales/helper.js
Normal file
|
|
@ -0,0 +1,135 @@
|
||||||
|
import * as R from 'ramda'
|
||||||
|
import * as Yup from 'yup'
|
||||||
|
|
||||||
|
import Autocomplete from 'src/components/inputs/formik/Autocomplete.js'
|
||||||
|
|
||||||
|
const displayCodeArray = it => {
|
||||||
|
return it ? R.compose(R.join(', '), R.map(R.path(['code'])))(it) : it
|
||||||
|
}
|
||||||
|
|
||||||
|
const getFields = (getData, names) => {
|
||||||
|
return R.filter(it => R.includes(it.name, names), allFields(getData))
|
||||||
|
}
|
||||||
|
|
||||||
|
const allFields = getData => [
|
||||||
|
{
|
||||||
|
name: 'machine',
|
||||||
|
width: 200,
|
||||||
|
size: 'sm',
|
||||||
|
view: R.path(['name']),
|
||||||
|
input: Autocomplete,
|
||||||
|
inputProps: {
|
||||||
|
options: getData(['machines']),
|
||||||
|
limit: null,
|
||||||
|
forceShowValue: true,
|
||||||
|
getOptionSelected: R.eqProps('machineId')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'country',
|
||||||
|
width: 200,
|
||||||
|
size: 'sm',
|
||||||
|
view: R.path(['display']),
|
||||||
|
input: Autocomplete,
|
||||||
|
inputProps: {
|
||||||
|
options: getData(['countries']),
|
||||||
|
getOptionSelected: R.eqProps('display')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'fiatCurrency',
|
||||||
|
width: 150,
|
||||||
|
size: 'sm',
|
||||||
|
view: R.path(['code']),
|
||||||
|
input: Autocomplete,
|
||||||
|
inputProps: {
|
||||||
|
options: getData(['currencies']),
|
||||||
|
getOptionSelected: R.eqProps('display')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'languages',
|
||||||
|
width: 240,
|
||||||
|
size: 'sm',
|
||||||
|
view: displayCodeArray,
|
||||||
|
input: Autocomplete,
|
||||||
|
inputProps: {
|
||||||
|
options: getData(['languages']),
|
||||||
|
getLabel: R.path(['code']),
|
||||||
|
getOptionSelected: R.eqProps('code'),
|
||||||
|
multiple: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'cryptoCurrencies',
|
||||||
|
width: 270,
|
||||||
|
size: 'sm',
|
||||||
|
view: displayCodeArray,
|
||||||
|
input: Autocomplete,
|
||||||
|
inputProps: {
|
||||||
|
options: getData(['cryptoCurrencies']),
|
||||||
|
getLabel: it => R.path(['code'])(it) ?? it,
|
||||||
|
getOptionSelected: R.eqProps('code'),
|
||||||
|
multiple: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const mainFields = auxData => {
|
||||||
|
const getData = R.path(R.__, auxData)
|
||||||
|
|
||||||
|
return getFields(getData, [
|
||||||
|
'country',
|
||||||
|
'fiatCurrency',
|
||||||
|
'languages',
|
||||||
|
'cryptoCurrencies'
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
const overrides = auxData => {
|
||||||
|
const getData = R.path(R.__, auxData)
|
||||||
|
|
||||||
|
return getFields(getData, [
|
||||||
|
'machine',
|
||||||
|
'country',
|
||||||
|
'languages',
|
||||||
|
'cryptoCurrencies'
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
const LocaleSchema = Yup.object().shape({
|
||||||
|
country: Yup.object().required('Required'),
|
||||||
|
fiatCurrency: Yup.object().required('Required'),
|
||||||
|
languages: Yup.array().required('Required'),
|
||||||
|
cryptoCurrencies: Yup.array().required('Required')
|
||||||
|
})
|
||||||
|
|
||||||
|
const OverridesSchema = Yup.object().shape({
|
||||||
|
machine: Yup.object().required('Required'),
|
||||||
|
country: Yup.object().required('Required'),
|
||||||
|
languages: Yup.array().required('Required'),
|
||||||
|
cryptoCurrencies: Yup.array().required('Required')
|
||||||
|
})
|
||||||
|
|
||||||
|
const localeDefaults = {
|
||||||
|
country: null,
|
||||||
|
fiatCurrency: null,
|
||||||
|
languages: [],
|
||||||
|
cryptoCurrencies: []
|
||||||
|
}
|
||||||
|
|
||||||
|
const overridesDefaults = {
|
||||||
|
machine: null,
|
||||||
|
country: null,
|
||||||
|
languages: [],
|
||||||
|
cryptoCurrencies: []
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
mainFields,
|
||||||
|
overrides,
|
||||||
|
LocaleSchema,
|
||||||
|
OverridesSchema,
|
||||||
|
localeDefaults,
|
||||||
|
overridesDefaults
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue