[Update/bugfix] Config Page: Transcription: Change the input design entry to dropdowns. It will fix the bug that cant put e.g. the user wanna put "10" actually, then, type "1" at first, but validation says "1" is not allowed.

src-ui/app/config_page/setting_section/setting_box/transcription/Transcription.jsx

@@ -1,7 +1,6 @@
-import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styles from "./Transcription.module.scss";
-import { updateLabelsById } from "@utils";
+import { updateLabelsById, genNumObjArray } from "@utils";
 
 import {
     useMicRecordTimeout,
@@ -21,7 +20,6 @@ import {
 } from "@logics_configs";
 
 import {
-    EntryContainer,
     WordFilterContainer,
     DownloadModelsContainer,
     RadioButtonContainer,
@@ -59,82 +57,61 @@ const Mic_Container = () => {
 
 const MicRecordTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentMicRecordTimeout, setMicRecordTimeout } = useMicRecordTimeout();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setMicRecordTimeout(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setMicRecordTimeout(value);
-        }
     };
 
-    useEffect(()=> {
-        setUiVariable(currentMicRecordTimeout.data);
-    }, [currentMicRecordTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="mic_record_timeout"
             label={t("config_page.transcription.mic_record_timeout.label")}
             desc={t("config_page.transcription.mic_record_timeout.desc")}
-            ui_variable={ui_variable}
+            selected_id={currentMicRecordTimeout.data}
-            onChange={onChangeFunction}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentMicRecordTimeout.state}
         />
     );
 };
 const MicPhraseTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentMicPhraseTimeout, setMicPhraseTimeout } = useMicPhraseTimeout();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setMicPhraseTimeout(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setMicPhraseTimeout(value);
-        }
     };
 
-    useEffect(()=> {
-        setUiVariable(currentMicPhraseTimeout.data);
-    }, [currentMicPhraseTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="mic_phrase_timeout"
             label={t("config_page.transcription.mic_phrase_timeout.label")}
             desc={t("config_page.transcription.mic_phrase_timeout.desc")}
-            ui_variable={ui_variable}
+            selected_id={currentMicPhraseTimeout.data}
-            onChange={onChangeFunction}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentMicPhraseTimeout.state}
         />
     );
 };
 const MicMaxWords_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentMicMaxWords, setMicMaxWords } = useMicMaxWords();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setMicMaxWords(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setMicMaxWords(value);
-        }
     };
 
-    useEffect(()=> {
-        setUiVariable(currentMicMaxWords.data);
-    }, [currentMicMaxWords]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="mic_max_phrase"
             label={t("config_page.transcription.mic_max_phrase.label")}
             desc={t("config_page.transcription.mic_max_phrase.desc")}
-            ui_variable={ui_variable}
+            selected_id={currentMicMaxWords.data}
-            onChange={onChangeFunction}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentMicMaxWords.state}
         />
     );
 };
@@ -167,82 +144,60 @@ const Speaker_Container = () => {
 
 const SpeakerRecordTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentSpeakerRecordTimeout, setSpeakerRecordTimeout } = useSpeakerRecordTimeout();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setSpeakerRecordTimeout(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setSpeakerRecordTimeout(value);
-        }
     };
 
-    useEffect(()=> {
-        setUiVariable(currentSpeakerRecordTimeout.data);
-    }, [currentSpeakerRecordTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
-            label={t("config_page.transcription.speaker_record_timeout.label")}
+            dropdown_id="speaker_record_timeout"
             desc={t("config_page.transcription.speaker_record_timeout.desc")}
-            ui_variable={ui_variable}
+            label={t("config_page.transcription.speaker_record_timeout.label")}
-            onChange={onChangeFunction}
+            selected_id={currentSpeakerRecordTimeout.data}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentSpeakerRecordTimeout.state}
         />
     );
 };
 const SpeakerPhraseTimeout_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentSpeakerPhraseTimeout, setSpeakerPhraseTimeout } = useSpeakerPhraseTimeout();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setSpeakerPhraseTimeout(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setSpeakerPhraseTimeout(value);
-        }
     };
-
-    useEffect(()=> {
-        setUiVariable(currentSpeakerPhraseTimeout.data);
-    }, [currentSpeakerPhraseTimeout]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="speaker_phrase_timeout"
             label={t("config_page.transcription.speaker_phrase_timeout.label")}
             desc={t("config_page.transcription.speaker_phrase_timeout.desc")}
-            ui_variable={ui_variable}
+            selected_id={currentSpeakerPhraseTimeout.data}
-            onChange={onChangeFunction}
+            list={genNumObjArray(31)}
+            selectFunction={selectFunction}
+            state={currentSpeakerPhraseTimeout.state}
         />
     );
 };
 const SpeakerMaxWords_Box = () => {
     const { t } = useTranslation();
-    const [ui_variable, setUiVariable] = useState("");
     const { currentSpeakerMaxWords, setSpeakerMaxWords } = useSpeakerMaxWords();
-    const onChangeFunction = (e) => {
+
-        const value = e.currentTarget.value;
+    const selectFunction = (selected_data) => {
-        if (value === "") {
+        setSpeakerMaxWords(selected_data.selected_id);
-            setUiVariable("");
-        } else {
-            setUiVariable(value);
-            setSpeakerMaxWords(value);
-        }
     };
 
-    useEffect(()=> {
-        setUiVariable(currentSpeakerMaxWords.data);
-    }, [currentSpeakerMaxWords]);
-
     return (
-        <EntryContainer
+        <DropdownMenuContainer
+            dropdown_id="speaker_max_phrase"
             label={t("config_page.transcription.speaker_max_phrase.label")}
             desc={t("config_page.transcription.speaker_max_phrase.desc")}
-            ui_variable={ui_variable}
+            selected_id={currentSpeakerMaxWords.data}
-            onChange={onChangeFunction}
+            list={genNumObjArray(61)}
+            selectFunction={selectFunction}
+            state={currentSpeakerMaxWords.state}
         />
     );
 };

src-ui/utils.js

@@ -49,4 +49,12 @@ export const updateLabelsById = (data_array, updates) => {
         const update = updates.find(update_item => update_item.id === item.id);
         return update ? { ...item, label: update.label } : item;
     });
+};
+
+export const genNumArray = (count, start_from = 0) => {
+    return [...Array(count).keys()].map(i => i + start_from);
+};
+
+export const genNumObjArray = (count, start_from = 0) => {
+    return arrayToObject(genNumArray(count, start_from));
 };