74 notes feature for photoinput and photo components

src/components/photo.tsx

@@ -11,16 +11,15 @@ interface PhotoProps {
     label: string
     photos: { id: string; photo: Blob; metadata: PhotoMetadata }[] // Array of photo objects with metadata
     required: boolean
+    noteValue: string | undefined
 }
-
 /**
  * A component that displays a photo, timestamp, geolocation, label, and description
  * Displays multiple photos (2 per row) with metadata in a grid layout
  *
  * @param description Content (most commonly markdown text) used to describe the photo
  * @param label Label for the component
  * @param metadata Photo metadata including timestamp and geolocation
- * @param notes User notes associated with the photo
  * @param photos Array of photo objects with photo Blob and metadata for each photo
  *         {
  *         id attachment id for the photo and metadata
@@ -30,8 +29,16 @@ interface PhotoProps {
  * @param required When unset, the Photo component will only show if there is a
  * photo attachment in the data store with the given id. When set, the Photo component
  * will always show and the Photo component will indicate when the photo is missing.
+ * @param noteValue The value to be displayed as the note for the photos
  */
-const Photo: FC<PhotoProps> = ({ description, label, photos, required }) => {
+const Photo: FC<PhotoProps> = ({
+    description,
+    label,
+    photos,
+    required,
+    noteValue,
+}) => {
+    const noteValueArray = noteValue?.split(`\n`)
     return (photos && photos.length > 0) || required ? (
         <Card className="photo-card">
             <Card.Body>
@@ -98,6 +105,20 @@ const Photo: FC<PhotoProps> = ({ description, label, photos, required }) => {
                           </Row>
                       )
                     : required && <em>Missing Photo</em>}
+                {noteValue && (
+                    <div className="photo-notes">
+                        <h3>Notes: </h3>
+                        <div>
+                            {noteValueArray
+                                ? noteValueArray.map(string => (
+                                      <p className="photo-note-string">
+                                          {string}
+                                      </p>
+                                  ))
+                                : null}
+                        </div>
+                    </div>
+                )}
             </Card.Body>
         </Card>
     ) : null

src/components/photo_input.tsx

@@ -9,6 +9,7 @@ import GpsCoordStr from './gps_coord_str'
 import type PhotoMetaData from '../types/photo_metadata.type'
 import { PHOTO_MIME_TYPES } from '../utilities/photo_utils'
 import { TfiTrash } from 'react-icons/tfi'
+import TextInputWrapper from './text_input_wrapper'
 
 interface PhotoInputProps {
     children: React.ReactNode
@@ -21,6 +22,8 @@ interface PhotoInputProps {
     loading: boolean
     error: string
     count: number
+    id: string
+    notes?: boolean
 }
 // TODO: Determine whether or not the useEffect() method is needed.
 // We don't seem to need a separate camera button on an Android phone.
@@ -39,18 +42,21 @@ interface PhotoInputProps {
  * @param uploadable When set, the PhotoInput component will open the gallery to upload the photo.
  *                   When unset, the PhotoInput component will use device camera for taking new photo (default).
  * @param loader  When set, a loading image will be displayed during the upload process.
+ * @param id Attachment id
+ * @param notes If notes is false, then the note input will not show up
  */
 const PhotoInput: FC<PhotoInputProps> = ({
     children,
     label,
-    metadata,
     photos,
     upsertPhoto,
     deletePhoto,
     uploadable,
     loading,
     error,
     count,
+    id,
+    notes = true,
 }) => {
     // Create references to the hidden file inputs
     const hiddenPhotoCaptureInputRef = useRef<HTMLInputElement>(null)
@@ -231,7 +237,7 @@ const PhotoInput: FC<PhotoInputProps> = ({
                     )}
                     {error && <div className="error">{error}</div>}
                     {photos?.length < count && (
-                        <div>
+                        <div className="pb-2">
                             <Button
                                 onClick={handlePhotoGalleryButtonClick}
                                 variant="outline-primary"
@@ -240,6 +246,16 @@ const PhotoInput: FC<PhotoInputProps> = ({
                             </Button>
                         </div>
                     )}
+                    {notes && (
+                        <TextInputWrapper
+                            path={`${id}_note`}
+                            label="Optional note about photo(s):"
+                            min={0}
+                            max={300}
+                            regexp={/.*/} //any string
+                        />
+                    )}
+
                     <Modal
                         show={showDeleteConfirmation}
                         onHide={cancelDeletePhoto}

src/components/photo_input_wrapper.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from 'react'
+import React, { FC, useState } from 'react'
 
 import imageCompression from 'browser-image-compression'
 
@@ -14,6 +14,7 @@ interface PhotoInputWrapperProps {
     label: string
     uploadable: boolean
     count?: number
+    notes?: boolean
 }
 
 /**
@@ -26,13 +27,15 @@ interface PhotoInputWrapperProps {
  * @param label The label of the PhotoInput component
  * @param uploadable When set, the PhotoInput component will open the gallery to upload the photo.
  *                   When unset, the PhotoInput component will use device camera for taking new photo.
+ * @param notes Boolean from the mdx component that indicates whether the notes field will be available
  */
 const PhotoInputWrapper: FC<PhotoInputWrapperProps> = ({
     children,
     id,
     label,
     uploadable,
     count = 10,
+    notes,
 }) => {
     const [loading, setLoading] = useState(false) // Loading state
     const [error, setError] = useState('') // Loading state
@@ -209,6 +212,8 @@ const PhotoInputWrapper: FC<PhotoInputWrapperProps> = ({
                             loading={loading}
                             error={error}
                             count={count}
+                            id={id}
+                            notes={notes}
                         >
                             {children}
                         </PhotoInput>

src/components/photo_wrapper.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useEffect, useState } from 'react'
-
+import { get } from 'lodash'
 import { StoreContext } from './store'
 import Photo from './photo'
 import { useDB } from '../utilities/database_utils'
@@ -35,7 +35,6 @@ const PhotoWrapper: FC<PhotoWrapperProps> = ({
     parent,
 }) => {
     const [matchingAttachments, setMatchingAttachments] = useState<any>({})
-    const [projectDoc, setProjectDoc] = useState<any>(parent)
     const db = useDB()
 
     useEffect(() => {
@@ -88,7 +87,6 @@ const PhotoWrapper: FC<PhotoWrapperProps> = ({
 
                 setMatchingAttachments(matchingAttachments)
                 // Set the filtered attachments in state
-                setProjectDoc(doc) // Set the full document if needed
             })
             .catch((err: any) => {
                 console.error('Failed to get matching attachments:', err)
@@ -123,18 +121,24 @@ const PhotoWrapper: FC<PhotoWrapperProps> = ({
     return (
         <StoreContext.Consumer>
             {({ attachments, data }) => {
-                return (
-                    <Photo
-                        description={children}
-                        label={label}
-                        photos={
-                            parent
-                                ? matchingAttachments
-                                : getMatchingAttachments(attachments, id)
-                        }
-                        required={required}
-                    />
-                )
+                if (data)
+                    return (
+                        <Photo
+                            description={children}
+                            label={label}
+                            photos={
+                                parent
+                                    ? matchingAttachments
+                                    : getMatchingAttachments(attachments, id)
+                            }
+                            required={required}
+                            noteValue={
+                                get(data, `${id}_note`)
+                                    ? get(data, `${id}_note`)
+                                    : ''
+                            }
+                        />
+                    )
             }}
         </StoreContext.Consumer>
     )

src/components/text_input.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useEffect, useState } from 'react'
 import FloatingLabel from 'react-bootstrap/FloatingLabel'
 import Form from 'react-bootstrap/Form'
 
@@ -20,8 +20,8 @@ interface TextInputProps {
  * @param updateValue A function called whenever the user changes the
  * input value. The function has the new input value as the sole arguement.
  * @param value The input value
- * @param min The minimum allowed value for the input field.
- * @param max The maximum allowed value for the input field.
+ * @param min The minimum allowed number of characters for the input field.
+ * @param max The maximum allowed number of characters for the input field.
  * @param regexp The regular expression pattern to validate the input string.
  */
 const TextInput: FC<TextInputProps> = ({
@@ -33,6 +33,11 @@ const TextInput: FC<TextInputProps> = ({
     max,
     regexp,
 }) => {
+    const [floatingLabelClasses, setFloatingLabelClasses] =
+        useState<any>('mb-3')
+
+    const [textAreaFocused, setTextAreaFocused] = useState<boolean>(false)
+
     const [error, setError] = useState<string>('')
 
     const handleChange = (inputValue: string) => {
@@ -50,15 +55,30 @@ const TextInput: FC<TextInputProps> = ({
         }
     }
 
+    useEffect(() => {
+        let floatingLabelClasses = 'mb-3'
+        if (value || textAreaFocused) {
+            floatingLabelClasses += ' label-hidden'
+        }
+
+        if (textAreaFocused) {
+            floatingLabelClasses += ' text-area-expanded'
+        }
+
+        setFloatingLabelClasses(floatingLabelClasses)
+    }, [value, textAreaFocused])
+
     return (
         <>
-            <FloatingLabel className="mb-3" controlId={id} label={label}>
+            <FloatingLabel className={floatingLabelClasses} label={label}>
                 <Form.Control
                     as="textarea"
                     onChange={event => handleChange(event.target.value)}
                     placeholder="A placeholder"
                     value={value || ''}
                     isInvalid={Boolean(error)}
+                    onFocus={() => setTextAreaFocused(true)}
+                    onBlur={() => setTextAreaFocused(false)}
                 />
                 {error && (
                     <Form.Control.Feedback type="invalid">

src/templates/reusable/project_info_inputs.mdx

@@ -1,27 +1,27 @@
-
 #### New Project Information
-<DocNameInput label="Project Name" path="doc_name" required/>
-
-##### Installer Information 
-*The Installer information is optional, but we recomment filling in at least one 
-field for reference in the the final report.*
+
+<DocNameInput label="Project Name" path="doc_name" required />
+##### Installer Information *The Installer information is optional, but we
+recommend filling in at least one field for reference in the the final report.*
 <StringInput label="Technician Name" path="installer.name" />
 <StringInput label="Installation Company" path="installer.company_name" />
 <StringInput label="Company Address" path="installer.mailing_address" />
 <StringInput label="Company Phone" path="installer.phone" />
 <StringInput label="Company Email" path="installer.email" />
 
 ##### Project Address
+
 <StringInput label="Street Address" path="location.street_address" />
 <StringInput label="City" path="location.city" />
 <USStateSelect label="State" path="location.state" />
 <StringInput label="Zip Code" path="location.zip_code" />
 
-<PhotoInput id="building_number_photo" label="Building Number – Photo">
-  Provide a photo of the building that shows the building number.
+<PhotoInput
+    id="building_number_photo"
+    label="Building Number – Photo"
+    notes={false}
+>
+    Provide a photo of the building that shows the building number.
 </PhotoInput>
 
 <SaveCancelButton path="status" />
-
-
-