Merge pull request #165 from concord-consortium/187937643-update-note…

…s-ui fix: Update add note UI [PT-187937643]
concord-consortium · Jul 11, 2024 · c49a2f6 · c49a2f6
2 parents e8d863d + 1506349
commit c49a2f6
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 19 deletions.
diff --git a/src/shared/components/photo-or-note-field.module.scss b/src/shared/components/photo-or-note-field.module.scss
@@ -18,13 +18,23 @@
 }
 
 .noteSubTab {
-  .addNote {
-    border: 0;
-    background-color: #f9ffc0;
-    width: 100%;
-    height: 200px;
-    padding: 10px;
-    font-size: 18px;
+  .addNoteContainer {
+    position: relative;
+
+    .addNote {
+      border: 0;
+      background-color: #f9ffc0;
+      width: 100%;
+      height: 200px;
+      padding: 10px;
+      font-size: 18px;
+    }
+
+    .addNoteButton {
+      position: absolute;
+      top: 10px;
+      right: 12.5px;
+    }
   }
 
   .note {

diff --git a/src/shared/components/photo-or-note-field.tsx b/src/shared/components/photo-or-note-field.tsx
@@ -223,22 +223,33 @@ export const PhotoOrNoteField: React.FC<FieldProps> = props => {
 
   const handleSelectNoteSubTab = () => setSubTab("note");
   const handleSelectPhotoSubTab = () => setSubTab("photo");
-  const handleAddNoteKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+  const getAddNoteContent = () => {
     if (!inputDisabled && addNoteRef.current) {
-      const note = addNoteRef.current.value.trim();
-      if ((note.length > 0) && (e.keyCode === 13)) {
-        e.preventDefault();
-        updateFormData([{
-          isPhoto: false,
-          localPhotoUrl: "",
-          remotePhotoUrl: "",
-          note,
-          timestamp: timestamp()
-        }, ...formData]);
+      return addNoteRef.current.value.trim();
+    }
+    return "";
+  };
+  const handleAddNote = () => {
+    const note = getAddNoteContent();
+    if (note.length > 0) {
+      updateFormData([{
+        isPhoto: false,
+        localPhotoUrl: "",
+        remotePhotoUrl: "",
+        note,
+        timestamp: timestamp()
+      }, ...formData]);
+      if (addNoteRef.current) {
         addNoteRef.current.value = "";
       }
     }
   };
+  const handleAddNoteKeyUp = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if ((getAddNoteContent().length > 0) && (e.keyCode === 13)) {
+      e.preventDefault();
+      handleAddNote();
+    }
+  };
   const handleDeletePhotoOrNote = (item: IPhotoOrNote) => {
     if (inputDisabled) {
       return;
@@ -274,7 +285,10 @@ export const PhotoOrNoteField: React.FC<FieldProps> = props => {
   const renderNoteSubTab = () => {
     return (
       <div className={css.noteSubTab}>
-        {!inputDisabled && <textarea className={css.addNote} ref={addNoteRef} placeholder="Add a note" onKeyUp={handleAddNoteKeyUp} />}
+        <div className={css.addNoteContainer}>
+          {!inputDisabled && <textarea className={css.addNote} ref={addNoteRef} placeholder="Add a note and press enter to save" onKeyUp={handleAddNoteKeyUp} />}
+          {!inputDisabled && <div className={css.addNoteButton} onClick={handleAddNote}><Icon name={"add_circle"}/></div>}
+        </div>
         {notes().map((note, index) => <Note key={index} note={note} deleteNote={handleDeletePhotoOrNote} inputDisabled={inputDisabled} />)}
       </div>
     );