diff --git a/.changeset/wild-sheep-hug.md b/.changeset/wild-sheep-hug.md new file mode 100644 index 000000000000..5a2b8b339344 --- /dev/null +++ b/.changeset/wild-sheep-hug.md @@ -0,0 +1,5 @@ +--- +'@rocket.chat/meteor': patch +--- + +Added input fields so the user can specify exactly the time of the enableAutoAway preference in hours, minutes and seconds. \ No newline at end of file diff --git a/apps/meteor/client/views/account/preferences/IdleTimeEditor.tsx b/apps/meteor/client/views/account/preferences/IdleTimeEditor.tsx new file mode 100644 index 000000000000..cbb9070d499a --- /dev/null +++ b/apps/meteor/client/views/account/preferences/IdleTimeEditor.tsx @@ -0,0 +1,54 @@ +import { NumberInput, FieldRow, FieldLabel } from '@rocket.chat/fuselage'; +import { useUniqueId } from '@rocket.chat/fuselage-hooks'; +import React, { useState, useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; + +type IdleTimeEditorProps = { + onChangeTime: (time: number | undefined) => void; +}; + +const IdleTimeEditor = ({ onChangeTime }: IdleTimeEditorProps) => { + const { t } = useTranslation(); + const [hours, setHours] = useState(0); + const [minutes, setMinutes] = useState(5); + const [seconds, setSeconds] = useState(0); + const [finalSecondCount, setFinalSecondCount] = useState(hours * 3600 + minutes * 60 + seconds); + + const idleTimeLimitHrs = useUniqueId(); + const idleTimeLimitMin = useUniqueId(); + const idleTimeLimitSec = useUniqueId(); + + function handleHours(e: any) { + setHours(Number(e.target.value)); + } + + function handleMinutes(e: any) { + setMinutes(Number(e.target.value)); + } + + function handleSeconds(e: any) { + setSeconds(Number(e.target.value)); + } + + useEffect(() => { + handleFinalSecondCount(); + }, [hours, minutes, seconds]); + + function handleFinalSecondCount() { + setFinalSecondCount(hours * 3600 + minutes * 60 + seconds); + onChangeTime(finalSecondCount); + } + + return ( + + {t('Hours')} + + {t('minutes')} + + {t('seconds')} + + + ); +}; + +export default IdleTimeEditor; diff --git a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx index 39ee0dbc747a..3f0cd08dc0a8 100644 --- a/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx +++ b/apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx @@ -4,12 +4,13 @@ import React from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; +import IdleTimeEditor from './IdleTimeEditor'; + const PreferencesUserPresenceSection = () => { const { t } = useTranslation(); - const { register, control } = useFormContext(); + const { control } = useFormContext(); const enableAutoAwayId = useUniqueId(); - const idleTimeLimit = useUniqueId(); return ( @@ -27,10 +28,12 @@ const PreferencesUserPresenceSection = () => { - {t('Idle_Time_Limit')} - - - + {t('Idle_Time_Limit')} + } + />