feat: Add Hours, Minutes, Seconds fields while taking input as idleTimeLimit

.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.

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<number>(0);
+	const [minutes, setMinutes] = useState<number>(5);
+	const [seconds, setSeconds] = useState<number>(0);
+	const [finalSecondCount, setFinalSecondCount] = useState<number | undefined>(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 (
+		<FieldRow>
+			<FieldLabel htmlFor={idleTimeLimitHrs}>{t('Hours')}</FieldLabel>
+			<NumberInput value={hours} onChange={handleHours} id={idleTimeLimitHrs} />
+			<FieldLabel htmlFor={idleTimeLimitMin}>{t('minutes')}</FieldLabel>
+			<NumberInput value={minutes} onChange={handleMinutes} id={idleTimeLimitMin} max={59} min={0} />
+			<FieldLabel htmlFor={idleTimeLimitSec}>{t('seconds')}</FieldLabel>
+			<NumberInput value={seconds} onChange={handleSeconds} id={idleTimeLimitSec} max={59} min={0} />
+		</FieldRow>
+	);
+};
+
+export default IdleTimeEditor;

apps/meteor/client/views/account/preferences/PreferencesUserPresenceSection.tsx

@@ -1,15 +1,16 @@
 import { AccordionItem, Field, FieldLabel, FieldRow, NumberInput, FieldGroup, ToggleSwitch } from '@rocket.chat/fuselage';
 import { useUniqueId } from '@rocket.chat/fuselage-hooks';
 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 (
 		<AccordionItem title={t('User_Presence')}>
@@ -27,10 +28,12 @@
 					</FieldRow>
 				</Field>
 				<Field>
-					<FieldLabel htmlFor={idleTimeLimit}>{t('Idle_Time_Limit')}</FieldLabel>
-					<FieldRow>
-						<NumberInput id={idleTimeLimit} {...register('idleTimeLimit')} />
-					</FieldRow>
+					<FieldLabel>{t('Idle_Time_Limit')}</FieldLabel>
+					<Controller
+						name='idleTimeLimit'
+						control={control}
+						render={({ field: { onChange } }) => <IdleTimeEditor onChangeTime={onChange} />}
+					/>
 				</Field>
 			</FieldGroup>
 		</AccordionItem>