Možnost zadání obecné poznámky k volbě

client/src/App.tsx

@@ -12,15 +12,16 @@ import SelectSearch, { SelectedOptionValue } from 'react-select-search';
 import 'react-select-search/style.css';
 import './App.css';
 import { SelectSearchOption } from 'react-select-search';
-import { faCircleCheck, faTrashCan } from '@fortawesome/free-regular-svg-icons';
+import { faCircleCheck, faNoteSticky, faTrashCan } from '@fortawesome/free-regular-svg-icons';
 import { useSettings } from './context/settings';
 import { ClientData, Restaurants, Food, Order, Locations, PizzaOrder, PizzaDayState, FoodChoices, DayMenu, DepartureTime } from './types';
 import Footer from './components/Footer';
 import { faChainBroken, faChevronLeft, faChevronRight, faGear, faSatelliteDish, faSearch } from '@fortawesome/free-solid-svg-icons';
 import Loader from './components/Loader';
 import { getData, errorHandler, getQrUrl } from './api/Api';
-import { addChoice, removeChoices, removeChoice, changeDepartureTime, jdemeObed } from './api/FoodApi';
+import { addChoice, removeChoices, removeChoice, changeDepartureTime, jdemeObed, updateNote } from './api/FoodApi';
 import { getHumanDateTime } from './Utils';
+import NoteModal from './components/modals/NoteModal';
 
 const EVENT_CONNECT = "connect"
 
@@ -37,10 +38,11 @@ function App() {
   const choiceRef = useRef<HTMLSelectElement>(null);
   const foodChoiceRef = useRef<HTMLSelectElement>(null);
   const departureChoiceRef = useRef<HTMLSelectElement>(null);
-  const poznamkaRef = useRef<HTMLInputElement>(null);
+  const pizzaPoznamkaRef = useRef<HTMLInputElement>(null);
   const [failure, setFailure] = useState<boolean>(false);
   const [dayIndex, setDayIndex] = useState<number>();
   const [loadingPizzaDay, setLoadingPizzaDay] = useState<boolean>(false);
+  const [noteModalOpen, setNoteModalOpen] = useState<boolean>(false);
   // Prazvláštní workaround, aby socket.io listener viděl aktuální hodnotu
   // https://medium.com/@kishorkrishna/cant-access-latest-state-inside-socket-io-listener-heres-how-to-fix-it-1522a5abebdb
   const dayIndexRef = useRef<number | undefined>(dayIndex);
@@ -210,6 +212,17 @@ function App() {
     }
   }
 
+  const saveNote = async (note?: string) => {
+    if (auth?.login) {
+      if (note != null && note.length > 70) {
+        alert("Poznámka může mít maximálně 70 znaků");
+        return;
+      }
+      await errorHandler(() => updateNote(note, dayIndex));
+      setNoteModalOpen(false);
+    }
+  }
+
   const pizzaSuggestions = useMemo(() => {
     if (!data?.pizzaList) {
       return [];
@@ -243,12 +256,12 @@ function App() {
     await removePizza(pizzaOrder);
   }
 
-  const handlePoznamkaChange = async () => {
-    if (poznamkaRef.current?.value && poznamkaRef.current.value.length > 100) {
-      alert("Poznámka může mít maximálně 100 znaků");
+  const handlePizzaPoznamkaChange = async () => {
+    if (pizzaPoznamkaRef.current?.value && pizzaPoznamkaRef.current.value.length > 70) {
+      alert("Poznámka může mít maximálně 70 znaků");
       return;
     }
-    updatePizzaDayNote(poznamkaRef.current?.value);
+    updatePizzaDayNote(pizzaPoznamkaRef.current?.value);
   }
 
   // const addToCart = async () => {
@@ -360,10 +373,7 @@ function App() {
           <Alert variant={'primary'}>
             Poslední změny:
             <ul>
-              <li>Možnost skrytí polévek</li>
-              <li>Možnost "Rozhoduji se"</li>
-              <li>Neuskakování data vlevo při přechodu na pondělí</li>
-              <li>Mělo tu toho být už mnohem víc, ale zasekl jsem se snahou nahradit pizza search box</li>
+              <li>Anděloviny</li>
             </ul>
           </Alert>
           {dayIndex != null &&
@@ -436,6 +446,10 @@ function App() {
                                       </span>}
                                       {login}
                                       {userPayload.departureTime && <small> ({userPayload.departureTime})</small>}
+                                      {userPayload.note && <small> ({userPayload.note})</small>}
+                                      {login === auth.login && canChangeChoice && <FontAwesomeIcon onClick={() => {
+                                        setNoteModalOpen(true);
+                                      }} title='Upravit poznámku' className='action-icon' icon={faNoteSticky} />}
                                       {login === auth.login && canChangeChoice && <FontAwesomeIcon onClick={() => {
                                         doRemoveChoices(locationKey);
                                       }} title={`Odstranit volbu ${locationName}, včetně případných zvolených jídel`} className='action-icon' icon={faTrashCan} />}
@@ -564,15 +578,15 @@ function App() {
                           placeholder='Vyhledat pizzu...'
                           onChange={handlePizzaChange}
                         />
-                        Poznámka: <input ref={poznamkaRef} className='mt-3' type="text" onKeyDown={event => {
+                        Poznámka: <input ref={pizzaPoznamkaRef} className='mt-3' type="text" onKeyDown={event => {
                           if (event.key === 'Enter') {
-                            handlePoznamkaChange();
+                            handlePizzaPoznamkaChange();
                           }
                         }} />
                         <Button
                           style={{ marginLeft: '20px' }}
                           disabled={!myOrder?.pizzaList?.length}
-                          onClick={handlePoznamkaChange}>
+                          onClick={handlePizzaPoznamkaChange}>
                           Uložit
                         </Button>
                       </div>
@@ -593,6 +607,7 @@ function App() {
         </>}
       </div>
       <Footer />
+      <NoteModal isOpen={noteModalOpen} onClose={() => setNoteModalOpen(false)} onSave={saveNote} />
     </>
   );
 }

client/src/api/FoodApi.ts

@@ -14,6 +14,10 @@ export const removeChoice = async (locationIndex: number, foodIndex: number, day
     return await api.post<any, any>(`${FOOD_API_PREFIX}/removeChoice`, JSON.stringify({ locationIndex, foodIndex, dayIndex }));
 }
 
+export const updateNote = async (note?: string, dayIndex?: number) => {
+    return await api.post<any, any>(`${FOOD_API_PREFIX}/updateNote`, JSON.stringify({ note, dayIndex }));
+}
+
 export const changeDepartureTime = async (time: string, dayIndex?: number) => {
     return await api.post<any, any>(`${FOOD_API_PREFIX}/changeDepartureTime`, JSON.stringify({ time, dayIndex }));
 }

client/src/components/modals/NoteModal.tsx

@@ -0,0 +1,35 @@
+import { useRef } from "react";
+import { Modal, Button, Form } from "react-bootstrap"
+
+type Props = {
+    isOpen: boolean,
+    onClose: () => void,
+    onSave: (note?: string) => void,
+}
+
+/** Modální dialog pro úpravu obecné poznámky. */
+export default function NoteModal({ isOpen, onClose, onSave }: Props) {
+    const note = useRef<HTMLInputElement>(null);
+
+    const save = () => {
+        onSave(note?.current?.value);
+    }
+
+    return <Modal show={isOpen} onHide={onClose}>
+        <Modal.Header closeButton>
+            <Modal.Title>Úprava poznámky</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+            <Form.Control ref={note} autoFocus={true} type="text" id="note" onKeyDown={event => {
+                if (event.key === 'Enter') {
+                    save();
+                }
+            }} />
+        </Modal.Body>
+        <Modal.Footer>
+            <Button variant="primary" onClick={save}>
+                Uložit
+            </Button>
+        </Modal.Footer>
+    </Modal>
+}