From 957a009e849b1fb4d71b960387f4945c890d05f0 Mon Sep 17 00:00:00 2001 From: eecavanna Date: Sun, 14 Jul 2024 23:57:55 -0700 Subject: [PATCH 1/5] Display autofill buttons next to "Name" and "ORCID iD" fields --- src/components/StudyForm/StudyForm.tsx | 53 +++++++++++++++++++++++++- 1 file changed, 51 insertions(+), 2 deletions(-) diff --git a/src/components/StudyForm/StudyForm.tsx b/src/components/StudyForm/StudyForm.tsx index e763850..4fe5b12 100644 --- a/src/components/StudyForm/StudyForm.tsx +++ b/src/components/StudyForm/StudyForm.tsx @@ -1,6 +1,7 @@ import React from "react"; import { IonButton, + IonIcon, IonInput, IonSelect, IonSelectOption, @@ -11,6 +12,8 @@ import RequiredMark from "../RequiredMark/RequiredMark"; import SectionHeader from "../SectionHeader/SectionHeader"; import { SubmissionMetadataCreate, TEMPLATES } from "../../api"; import { Controller, useForm } from "react-hook-form"; +import { useStore } from "../../Store"; +import { colorWand as autoFill } from "ionicons/icons"; import styles from "./StudyForm.module.css"; @@ -34,6 +37,8 @@ const EMAIL_REGEX = /^(?!\.)(?!.*\.\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i; const StudyForm: React.FC = ({ submission, onSave }) => { + const { loggedInUser } = useStore(); + const { handleSubmit, control, formState, setValue } = useForm({ defaultValues: submission, @@ -120,7 +125,29 @@ const StudyForm: React.FC = ({ submission, onSave }) => { onIonBlur={field.onBlur} onIonInput={field.onChange} {...field} - /> + > + {/* If the user is logged in, show a button they can press to use their name. */} + {loggedInUser !== null ? ( + { + // TODO: Populate the field with the logged-in user's name. + const { name } = loggedInUser; + alert(`TODO: Populate field with ${name}`); + }} + > + + + ) : null} + )} /> @@ -166,7 +193,29 @@ const StudyForm: React.FC = ({ submission, onSave }) => { onIonBlur={field.onBlur} onIonInput={field.onChange} {...field} - /> + > + {/* If the user is logged in, show a button they can press to use their ORCID iD. */} + {loggedInUser !== null ? ( + { + // TODO: Populate the field with the logged-in user's ORCID iD. + const { orcid } = loggedInUser; + alert(`TODO: Populate field with ${orcid}`); + }} + > + + + ) : null} + )} /> From 6b57922cf8f63b9730ff92c3329736bcfe67a0e0 Mon Sep 17 00:00:00 2001 From: eecavanna Date: Mon, 15 Jul 2024 00:03:21 -0700 Subject: [PATCH 2/5] Make it so clicking the buttons fills the fields --- src/components/StudyForm/StudyForm.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/src/components/StudyForm/StudyForm.tsx b/src/components/StudyForm/StudyForm.tsx index 4fe5b12..1c8b761 100644 --- a/src/components/StudyForm/StudyForm.tsx +++ b/src/components/StudyForm/StudyForm.tsx @@ -133,11 +133,7 @@ const StudyForm: React.FC = ({ submission, onSave }) => { slot={"end"} title={"Use my name"} aria-label={"Use my name"} - onClick={() => { - // TODO: Populate the field with the logged-in user's name. - const { name } = loggedInUser; - alert(`TODO: Populate field with ${name}`); - }} + onClick={() => field.onChange(loggedInUser.name)} > = ({ submission, onSave }) => { slot={"end"} title={"Use my ORCID iD"} aria-label={"Use my ORCID iD"} - onClick={() => { - // TODO: Populate the field with the logged-in user's ORCID iD. - const { orcid } = loggedInUser; - alert(`TODO: Populate field with ${orcid}`); - }} + onClick={() => field.onChange(loggedInUser.orcid)} > Date: Mon, 15 Jul 2024 00:07:58 -0700 Subject: [PATCH 3/5] Disable autofill button when it would have no impact --- src/components/StudyForm/StudyForm.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/StudyForm/StudyForm.tsx b/src/components/StudyForm/StudyForm.tsx index 1c8b761..65efcc8 100644 --- a/src/components/StudyForm/StudyForm.tsx +++ b/src/components/StudyForm/StudyForm.tsx @@ -134,6 +134,7 @@ const StudyForm: React.FC = ({ submission, onSave }) => { title={"Use my name"} aria-label={"Use my name"} onClick={() => field.onChange(loggedInUser.name)} + disabled={field.value === loggedInUser.name} > = ({ submission, onSave }) => { title={"Use my ORCID iD"} aria-label={"Use my ORCID iD"} onClick={() => field.onChange(loggedInUser.orcid)} + disabled={field.value === loggedInUser.orcid} > Date: Mon, 15 Jul 2024 11:39:17 -0700 Subject: [PATCH 4/5] Use `setValue` (from `useForm`) instead of using `field.onChange Co-authored-by: Patrick Kalita --- src/components/StudyForm/StudyForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/StudyForm/StudyForm.tsx b/src/components/StudyForm/StudyForm.tsx index 65efcc8..210c88c 100644 --- a/src/components/StudyForm/StudyForm.tsx +++ b/src/components/StudyForm/StudyForm.tsx @@ -133,7 +133,7 @@ const StudyForm: React.FC = ({ submission, onSave }) => { slot={"end"} title={"Use my name"} aria-label={"Use my name"} - onClick={() => field.onChange(loggedInUser.name)} + onClick={() => setValue(field.name, loggedInUser.name)} disabled={field.value === loggedInUser.name} > Date: Mon, 15 Jul 2024 11:39:32 -0700 Subject: [PATCH 5/5] Use `setValue` (from `useForm`) instead of using `field.onChange` Co-authored-by: Patrick Kalita --- src/components/StudyForm/StudyForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/StudyForm/StudyForm.tsx b/src/components/StudyForm/StudyForm.tsx index 210c88c..dc33424 100644 --- a/src/components/StudyForm/StudyForm.tsx +++ b/src/components/StudyForm/StudyForm.tsx @@ -198,7 +198,7 @@ const StudyForm: React.FC = ({ submission, onSave }) => { slot={"end"} title={"Use my ORCID iD"} aria-label={"Use my ORCID iD"} - onClick={() => field.onChange(loggedInUser.orcid)} + onClick={() => setValue(field.name, loggedInUser.orcid)} disabled={field.value === loggedInUser.orcid} >