From 20a3c40c48ba1188b12d4055346b1d35c2ec978c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9rgio=20Salgado?= Date: Wed, 27 Oct 2021 15:32:19 +0100 Subject: [PATCH] feat: added multicassette to notifications override --- .../src/components/editableTable/Row.js | 2 +- .../src/pages/Notifications/Notifications.js | 73 ++++++------ .../sections/FiatBalanceAlerts.js | 109 +++++++++-------- .../sections/FiatBalanceAlerts.styles.js | 5 +- .../sections/FiatBalanceOverrides.js | 112 +++++++++++------- 5 files changed, 171 insertions(+), 130 deletions(-) diff --git a/new-lamassu-admin/src/components/editableTable/Row.js b/new-lamassu-admin/src/components/editableTable/Row.js index 1889e26b..0269babd 100644 --- a/new-lamassu-admin/src/components/editableTable/Row.js +++ b/new-lamassu-admin/src/components/editableTable/Row.js @@ -132,7 +132,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => { SuffixComponent = TL2, textStyle = it => {}, isHidden = it => false, - view = it => it?.toString(), + view = it => it?.toString() ?? '—', inputProps = {} } = config diff --git a/new-lamassu-admin/src/pages/Notifications/Notifications.js b/new-lamassu-admin/src/pages/Notifications/Notifications.js index 21e1b1a3..e8dc7479 100644 --- a/new-lamassu-admin/src/pages/Notifications/Notifications.js +++ b/new-lamassu-admin/src/pages/Notifications/Notifications.js @@ -22,6 +22,7 @@ const GET_INFO = gql` machines { name deviceId + numberOfCassettes } cryptoCurrencies { code @@ -52,7 +53,7 @@ const Notifications = ({ const [error, setError] = useState(null) const [editingKey, setEditingKey] = useState(null) - const { data } = useQuery(GET_INFO) + const { data, loading } = useQuery(GET_INFO) const [saveConfig] = useMutation(SAVE_CONFIG, { refetchQueries: ['getData'], @@ -100,40 +101,42 @@ const Notifications = ({ } return ( - - {displayTitle && } - {displaySetup && ( -
- -
- )} - {displayTransactionAlerts && ( -
- -
- )} - {displayFiatAlerts && ( -
- - {displayOverrides && } -
- )} - {displayCryptoAlerts && ( -
- - {displayOverrides && ( - - )} -
- )} - + !loading && ( + + {displayTitle && } + {displaySetup && ( +
+ +
+ )} + {displayTransactionAlerts && ( +
+ +
+ )} + {displayFiatAlerts && ( +
+ + {displayOverrides && } +
+ )} + {displayCryptoAlerts && ( +
+ + {displayOverrides && ( + + )} +
+ )} + + ) ) } diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js index 23d5e1e6..0bd96589 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js +++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js @@ -1,5 +1,6 @@ import { makeStyles } from '@material-ui/core' import { Form, Formik } from 'formik' +import * as R from 'ramda' import React, { useContext } from 'react' import * as Yup from 'yup' @@ -17,6 +18,7 @@ import styles from './FiatBalanceAlerts.styles.js' const useStyles = makeStyles(styles) const NAME = 'fiatBalanceAlerts' +const DEFAULT_NUMBER_OF_CASSETTES = 2 const FiatBalance = ({ section, @@ -24,11 +26,20 @@ const FiatBalance = ({ max = Number.MAX_SAFE_INTEGER, fieldWidth = 80 }) => { - const { isEditing, isDisabled, setEditing, data, save } = useContext( - NotificationsCtx - ) + const { + isEditing, + isDisabled, + setEditing, + data, + save, + machines + } = useContext(NotificationsCtx) const classes = useStyles() + const maxNumberOfCassettes = + Math.max(...R.map(it => it.numberOfCassettes, machines)) ?? + DEFAULT_NUMBER_OF_CASSETTES + const editing = isEditing(NAME) const schema = Yup.object().shape({ @@ -39,6 +50,18 @@ const FiatBalance = ({ .max(max) .nullable(), fiatBalanceCassette2: Yup.number() + .transform(transformNumber) + .integer() + .min(min) + .max(max) + .nullable(), + fiatBalanceCassette3: Yup.number() + .transform(transformNumber) + .integer() + .min(min) + .max(max) + .nullable(), + fiatBalanceCassette4: Yup.number() .transform(transformNumber) .integer() .min(min) @@ -46,10 +69,12 @@ const FiatBalance = ({ .nullable() }) - const fiatBalanceCassette1Percent = - (100 * (data?.fiatBalanceCassette1 ?? 0)) / max - const fiatBalanceCassette2Percent = - (100 * (data?.fiatBalanceCassette2 ?? 0)) / max + const percentages = { + cassette1: (100 * (data?.fiatBalanceCassette1 ?? 0)) / max, + cassette2: (100 * (data?.fiatBalanceCassette2 ?? 0)) / max, + cassette3: (100 * (data?.fiatBalanceCassette3 ?? 0)) / max, + cassette4: (100 * (data?.fiatBalanceCassette4 ?? 0)) / max + } return ( save(section, schema.cast(it))} @@ -74,46 +101,32 @@ const FiatBalance = ({ setEditing={it => setEditing(NAME, it)} />
-
-
- -
- Cassette 1 (Top) - (x === '' ? '-' : x)} - decoration="notes" - width={fieldWidth} - /> -
-
-
-
- -
- Cassette 2 (Bottom) - (x === '' ? '-' : x)} - decoration="notes" - width={fieldWidth} - /> -
-
+ {R.map( + it => ( + <> +
+ +
+ Cassette {it + 1} + (x === '' ? '-' : x)} + decoration="notes" + width={fieldWidth} + /> +
+
+ + ), + R.times(R.identity, maxNumberOfCassettes) + )}
diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js index 792c54c3..ab4a4450 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js +++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js @@ -7,14 +7,11 @@ export default { form: { marginBottom: 36 }, - first: { - width: 236 - }, title: { marginTop: 0 }, row: { - width: 183, + width: 236, display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gridTemplateRows: '1fr', diff --git a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js index a8887597..ff3a1e45 100644 --- a/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js +++ b/new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceOverrides.js @@ -11,9 +11,18 @@ import NotificationsCtx from '../NotificationsContext' const CASSETTE_1_KEY = 'fiatBalanceCassette1' const CASSETTE_2_KEY = 'fiatBalanceCassette2' +const CASSETTE_3_KEY = 'fiatBalanceCassette3' +const CASSETTE_4_KEY = 'fiatBalanceCassette4' const MACHINE_KEY = 'machine' const NAME = 'fiatBalanceOverrides' +const CASSETTE_LIST = [ + CASSETTE_1_KEY, + CASSETTE_2_KEY, + CASSETTE_3_KEY, + CASSETTE_4_KEY +] + const FiatBalanceOverrides = ({ section }) => { const { machines = [], @@ -41,42 +50,62 @@ const FiatBalanceOverrides = ({ section }) => { const initialValues = { [MACHINE_KEY]: null, [CASSETTE_1_KEY]: '', - [CASSETTE_2_KEY]: '' + [CASSETTE_2_KEY]: '', + [CASSETTE_3_KEY]: '', + [CASSETTE_4_KEY]: '' } + const maxNumberOfCassettes = Math.max( + ...R.map(it => it.numberOfCassettes, machines) + ) + const notesMin = 0 const notesMax = 9999999 - const validationSchema = Yup.object().shape( - { + const validationSchema = Yup.object() + .shape({ [MACHINE_KEY]: Yup.string() .label('Machine') .nullable() .required(), [CASSETTE_1_KEY]: Yup.number() - .label('Cassette 1 (top)') - .when(CASSETTE_2_KEY, { - is: CASSETTE_2_KEY => !CASSETTE_2_KEY, - then: Yup.number().required() - }) + .label('Cassette 1') .transform(transformNumber) .integer() .min(notesMin) .max(notesMax) .nullable(), [CASSETTE_2_KEY]: Yup.number() - .label('Cassette 2 (bottom)') - .when(CASSETTE_1_KEY, { - is: CASSETTE_1_KEY => !CASSETTE_1_KEY, - then: Yup.number().required() - }) + .label('Cassette 2') + .transform(transformNumber) + .integer() + .min(notesMin) + .max(notesMax) + .nullable(), + [CASSETTE_3_KEY]: Yup.number() + .label('Cassette 3') + .transform(transformNumber) + .integer() + .min(notesMin) + .max(notesMax) + .nullable(), + [CASSETTE_4_KEY]: Yup.number() + .label('Cassette 4') .transform(transformNumber) .integer() .min(notesMin) .max(notesMax) .nullable() - }, - [CASSETTE_1_KEY, CASSETTE_2_KEY] - ) + }) + .test((values, context) => { + const picked = R.pick(CASSETTE_LIST, values) + + if (CASSETTE_LIST.some(it => !R.isNil(picked[it]))) return + + return context.createError({ + path: CASSETTE_1_KEY, + message: 'At least one of the cassettes must have a value' + }) + }) const viewMachine = it => R.compose(R.path(['name']), R.find(R.propEq('deviceId', it)))(machines) @@ -93,35 +122,34 @@ const FiatBalanceOverrides = ({ section }) => { valueProp: 'deviceId', labelProp: 'name' } - }, - { - name: CASSETTE_1_KEY, - display: 'Cash-out 1', - width: 155, - textAlign: 'right', - doubleHeader: 'Cash-out (Cassette Empty)', - bold: true, - input: NumberInput, - suffix: 'notes', - inputProps: { - decimalPlaces: 0 - } - }, - { - name: CASSETTE_2_KEY, - display: 'Cash-out 2', - width: 155, - textAlign: 'right', - doubleHeader: 'Cash-out (Cassette Empty)', - bold: true, - input: NumberInput, - suffix: 'notes', - inputProps: { - decimalPlaces: 0 - } } ] + R.until( + R.gt(R.__, maxNumberOfCassettes), + it => { + elements.push({ + name: `fiatBalanceCassette${it}`, + display: `Cash-out ${it}`, + width: 155, + textAlign: 'right', + doubleHeader: 'Cash-out (Cassette Empty)', + bold: true, + input: NumberInput, + suffix: 'notes', + inputProps: { + decimalPlaces: 0 + }, + isHidden: value => + it > + machines.find(({ deviceId }) => deviceId === value.machine) + ?.numberOfCassettes + }) + return R.add(1, it) + }, + 1 + ) + return (