17 & 18 Overhauls the photo and photoInput component

public/print.css

@@ -175,4 +175,39 @@ h3 {
 /* stylizes tab component here to avoid putting styles in editor*/
 .tab-content {
   margin-top: 1rem;
+}
+
+.photo-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.photo-input-delete-button {
+  cursor: 'pointer';
+  border-width: '1px';
+  border-radius: '6px';
+}
+
+.delete-modal-delete {
+  cursor: 'pointer';
+  color: 'red';
+  border-width: '1px';
+  border-radius: '6px';
+}
+
+.photo-input-photos-container {
+  display: 'flex';
+  flex-wrap: 'wrap';
+}
+
+.delete-modal-container {
+  display: 'flex';
+  align-items: 'center';
+  justify-content: 'space-between';
+}
+
+.report-print-photo-notes {
+  display: flex;
+  flex-direction: column;
 }

src/App.css

@@ -175,4 +175,49 @@ h3 {
 /* stylizes tab component here to avoid putting styles in editor*/
 .tab-content {
   margin-top: 1rem;
+}
+
+.photo-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.photo-input-delete-button {
+  cursor: 'pointer';
+  border-width: '1px';
+  border-radius: '6px';
+}
+
+.delete-modal-delete {
+  cursor: 'pointer';
+  color: 'red';
+  border-width: '1px';
+  border-radius: '6px';
+}
+
+.photo-input-photos-container {
+  display: 'flex';
+  flex-wrap: 'wrap';
+}
+
+.delete-modal-container {
+  display: 'flex';
+  align-items: 'center';
+  justify-content: 'space-between';
+}
+
+.report-print-photo-notes {
+  display: flex;
+  flex-direction: column;
+}
+
+.photo-wrapper {
+  display: 'flex';
+  flex-wrap: 'wrap';
+}
+
+.photo-display-container {
+  display: flex;
+  width: fit-content;
 }

src/components/notes.tsx

@@ -0,0 +1,41 @@
+import { FC, useState } from "react";
+import TextInput from "./text_input"
+import { pathToId } from "../utilities/paths_utils";
+
+interface NotesInputProps {
+    value?: string | null,
+    updateValue: ((id: string, notes: string) => void) | undefined;
+    id: string,
+}
+const NotesInput: FC<NotesInputProps> =({
+    value,
+    updateValue,
+    id
+}) => {
+    const [notes, updateNotes] = useState(value)
+    const notesId = `${id}.notes`
+    const handleNotesChange = (inputValue: string) => {
+        updateNotes(inputValue)
+        updateValue && updateValue(notesId, inputValue)
+    }
+    return (
+        <TextInput
+            id={notesId}
+            label="Notes"
+            value={
+                notes || ''
+            }
+            updateValue={value => {
+                handleNotesChange(value)
+            }}
+            min={0}
+            max={280}
+            regexp={/.*/}
+            disabled={
+                !updateValue
+            }
+        />
+    )
+}
+
+export default NotesInput

src/components/photo.tsx

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import type { FC } from 'react'
-import { Card, Image } from 'react-bootstrap'
+import { Button, Card, Image, Modal, ModalBody, Popover } from 'react-bootstrap'
 
 import DateTimeStr from './date_time_str'
 import GpsCoordStr from './gps_coord_str'
 import type PhotoMetadata from '../types/photo_metadata.type'
+import TextInput from './text_input'
+import { pathToId } from '../utilities/paths_utils'
 
 interface PhotoProps {
     description: React.ReactNode
@@ -13,6 +15,11 @@ interface PhotoProps {
     metadata: PhotoMetadata
     photo: Blob | undefined
     required: boolean
+    deletePhoto?: (id: string) => void
+    updateNotes?: (id: string, notes: string) => void
+    count?: string
+    disallowNotes?: boolean
+    notes?: any
 }
 
 /**
@@ -33,36 +40,49 @@ const Photo: FC<PhotoProps> = ({
     metadata,
     photo,
     required,
+    count,
+    disallowNotes,
+    notes
 }) => {
     return photo || required ? (
         <>
             <Card className="photo-card">
                 <Card.Body>
-                    <Card.Title>{label}</Card.Title>
+                    <div className="photo-card-header">
+                        <Card.Title>{label}</Card.Title> <small>{count}</small>
+                    </div>
                     {/* Card.Text renders a <p> by defult. The description comes from markdown
             and may be a <p>. Nested <p>s are not allowed, so we use a <div>*/}
                     <Card.Text as="div">{description}</Card.Text>
                     {photo ? (
                         <>
                             <Image src={URL.createObjectURL(photo)} thumbnail />
                             <br />
-                            <small>
-                                Timestamp:{' '}
-                                {metadata?.timestamp ? (
-                                    <DateTimeStr date={metadata.timestamp} />
-                                ) : (
-                                    <span>Missing</span>
+                            <div className='photo-metadata-container'>
+                                <small>
+                                    Timestamp:{' '}
+                                    {metadata?.timestamp ? (
+                                        <DateTimeStr date={metadata.timestamp} />
+                                    ) : (
+                                        <span>Missing</span>
+                                    )}
+                                    <br />
+                                    Geolocation:{' '}
+                                    {
+                                        <span>
+                                            <GpsCoordStr
+                                                {...metadata.geolocation}
+                                            />{' '}
+                                        </span>
+                                    }
+                                </small>
+                                {(notes && !disallowNotes) && (
+                                    <div className='report-print-photo-notes'>
+                                        <span>Notes:</span>
+                                        <span className='photo-notes'>{notes}</span>
+                                    </div>
                                 )}
-                                <br />
-                                Geolocation:{' '}
-                                {
-                                    <span>
-                                        <GpsCoordStr
-                                            {...metadata.geolocation}
-                                        />{' '}
-                                    </span>
-                                }
-                            </small>
+                            </div>
                         </>
                     ) : (
                         required && <em>Missing Photo</em>