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 { gql } from 'apollo-boost'
|
||||
import React, { memo } from 'react'
|
||||
import * as Yup from 'yup'
|
||||
import * as R from 'ramda'
|
||||
import React from 'react'
|
||||
|
||||
import Subtitle from 'src/components/Subtitle'
|
||||
import Title from 'src/components/Title'
|
||||
import { Table as EditableTable } from 'src/components/editableTable'
|
||||
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({
|
||||
country: Yup.object().required('Required'),
|
||||
fiatCurrency: Yup.object().required('Required'),
|
||||
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`
|
||||
{
|
||||
const GET_DATA = gql`
|
||||
query getData {
|
||||
config
|
||||
currencies {
|
||||
code
|
||||
display
|
||||
|
|
@ -41,12 +36,10 @@ const GET_AUX_DATA = gql`
|
|||
code
|
||||
display
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
const GET_CONFIG = gql`
|
||||
{
|
||||
config
|
||||
machines {
|
||||
name
|
||||
deviceId
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
|
|
@ -56,29 +49,55 @@ const SAVE_CONFIG = gql`
|
|||
}
|
||||
`
|
||||
|
||||
const Locales = memo(() => {
|
||||
const { data } = useQuery(GET_AUX_DATA)
|
||||
const Locales = ({ name: SCREEN_KEY }) => {
|
||||
const { data } = useQuery(GET_DATA)
|
||||
const [saveConfig] = useMutation(SAVE_CONFIG, {
|
||||
refetchQueries: () => ['getData']
|
||||
})
|
||||
|
||||
const [saveConfig] = useMutation(SAVE_CONFIG)
|
||||
const { data: configResponse } = useQuery(GET_CONFIG)
|
||||
const config = data?.config && fromServer(SCREEN_KEY)(data.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 (
|
||||
<>
|
||||
<Title>Locales</Title>
|
||||
<Subtitle>Default settings</Subtitle>
|
||||
<MainForm
|
||||
validationSchema={LocaleSchema}
|
||||
value={locale}
|
||||
save={save}
|
||||
auxData={data}
|
||||
/>
|
||||
<Subtitle extraMarginTop>Overrides</Subtitle>
|
||||
<TitleSection title="Locales" />
|
||||
<Section title="Default settings">
|
||||
<EditableTable
|
||||
name="locale"
|
||||
enableEdit
|
||||
initialValues={locale}
|
||||
save={save}
|
||||
validationSchema={LocaleSchema}
|
||||
data={R.of(locale)}
|
||||
elements={mainFields(data)}
|
||||
/>
|
||||
</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
|
||||
|
|
|
|||
|
|
@ -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