diff --git a/app/frontend/src/javascript/components/machines/machine-card.tsx b/app/frontend/src/javascript/components/machines/machine-card.tsx index c81b4f72f..e10b6d42d 100644 --- a/app/frontend/src/javascript/components/machines/machine-card.tsx +++ b/app/frontend/src/javascript/components/machines/machine-card.tsx @@ -16,6 +16,21 @@ interface MachineCardProps { const MachineCardComponent: React.FC = ({ machine, onShowMachine, onReserveMachine }) => { const { t } = useTranslation('public'); + /** + * Callback triggered when the user clicks on the 'reserve' button. + * We handle the training verification process here, before redirecting the user to the reservation calendar. + */ + const handleReserveMachine = (): void => { + onReserveMachine(machine); + } + + /** + * Callback triggered when the user clicks on the 'view' button + */ + const handleShowMachine = (): void => { + onShowMachine(machine); + } + const machinePicture = (): ReactNode => { if (!machine.machine_image) { return ( @@ -33,13 +48,6 @@ const MachineCardComponent: React.FC = ({ machine, onShowMachi ) } - const handleReserveMachine = (): void => { - onReserveMachine(machine); - } - - const handleShowMachine = (): void => { - onShowMachine(machine); - } return (
{machinePicture()} diff --git a/app/frontend/src/javascript/components/machines/machines-filters.tsx b/app/frontend/src/javascript/components/machines/machines-filters.tsx new file mode 100644 index 000000000..776d5a1a8 --- /dev/null +++ b/app/frontend/src/javascript/components/machines/machines-filters.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import Select from 'react-select'; +import { useTranslation } from 'react-i18next'; + +interface MachinesFiltersProps { + onStatusSelected: (enabled: boolean) => void, +} + +/** + * Option format, expected by react-select + * @see https://github.com/JedWatson/react-select + */ +type selectOption = { value: boolean, label: string }; + +export const MachinesFilters: React.FC = ({ onStatusSelected }) => { + const { t } = useTranslation('public'); + + const defaultValue = { value: true, label: t('app.public.machines_filters.status_enabled') }; + + /** + * Provides boolean options in the react-select format (yes/no/all) + */ + const buildBooleanOptions = (): Array => { + return [ + defaultValue, + { value: false, label: t('app.public.machines_filters.status_disabled') }, + { value: null, label: t('app.public.machines_filters.status_all') }, + ] + } + + /** + * Callback triggered when the user selects a machine status in the dropdown list + */ + const handleStatusSelected = (option: selectOption): void => { + onStatusSelected(option.value); + } + + return ( +
+
+ +