Prototype pre-release

src/Nyanlabs.SFood.UI/sfood/src/components/AddWarningButton/AddWarningButton.tsx

@@ -1,9 +1,7 @@
-import { IonButton, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonModal, IonPage, IonTitle, IonToolbar, useIonRouter } from "@ionic/react";
+import { IonButton, useIonRouter } from "@ionic/react";
 
 import styles from "./AddWarningButton.module.css";
 
-import { FormEventHandler, useState } from "react";
-
 const AddWarningButton: React.FC = () => {
     const { push } = useIonRouter();
 
@@ -12,11 +10,9 @@ const AddWarningButton: React.FC = () => {
     };
 
     return (
-        <>
         <IonButton onClick={sendReport} className={styles.addWarningButton} color="success">
             Wyślij własne zgłoszenie
         </IonButton>
-        </>
     );
 };
 

src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.tsx

@@ -2,6 +2,8 @@ import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonInfinit
 
 import { useEffect, useRef, useState } from "react";
 
+import styles from "./WarningsList.module.css";
+
 const WarningsList: React.FC = () => {
     const [dataset, setDataset] = useState<any[]>([]);
     const [warningsContent, setWarningsContent] = useState<any[]>([]);
@@ -92,7 +94,7 @@ const WarningsList: React.FC = () => {
             <>
                 <IonList lines="full">
                     {warningsContent.map((warningContent, key) => (
-                        <IonItem onClick={() => openModal(warningContent)} button key={key}>
+                        <IonItem detail onClick={() => openModal(warningContent)} button key={key}>
                             <IonLabel>
                                 {warningContent.col7.val}
                             </IonLabel>

src/Nyanlabs.SFood.UI/sfood/src/pages/Report.module.css

@@ -0,0 +1,3 @@
+.datetime {
+    margin-left: 20px;
+}

src/Nyanlabs.SFood.UI/sfood/src/pages/Report.tsx

@@ -1,6 +1,8 @@
-import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonPage, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react';
+import { IonAccordion, IonAccordionGroup, IonBackButton, IonButton, IonButtons, IonContent, IonDatetime, IonDatetimeButton, IonHeader, IonInput, IonItem, IonLabel, IonList, IonNote, IonPage, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react';
 import { FormEventHandler, useState } from 'react';
 
+import styles from "./Report.module.css";
+
 const IncidentForm: React.FC = () => {
   const [formData, setFormData] = useState({
     name: '',
@@ -8,7 +10,8 @@ const IncidentForm: React.FC = () => {
     producer: '',
     submitterAddress: '',
     description: '',
-    location: ''
+    location: '',
+    date: ''
   });
     
 const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
@@ -33,7 +36,6 @@ const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
     }
   };
 
-
 const handleInputChange = (fieldName: any, value: any) => {
     setFormData({
       ...formData,
@@ -41,12 +43,19 @@ const handleInputChange = (fieldName: any, value: any) => {
     });
   };
 
+  function handleDateChange(event: any) {
+    setFormData(previousFormData => ({
+      ...previousFormData,
+      date: event.detail.value.substring(0, 10)
+    }));
+  };
+
   return (
     <IonPage>
       <IonHeader>
         <IonToolbar>
           <IonButtons slot="start">
-            <IonBackButton></IonBackButton>
+            <IonBackButton text="Powrót" />
           </IonButtons>
           <IonTitle>
             Zgłoszenie
@@ -54,16 +63,18 @@ const handleInputChange = (fieldName: any, value: any) => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonProgressBar value={0}></IonProgressBar>
-        <form onSubmit={handleSubmit}>
-          <IonItem>
-            <IonLabel position="floating">Imię</IonLabel>
-            <IonInput
-              type="text"
-              value={formData.name}
-              onIonChange={(e) => handleInputChange('name', e.detail.value)}
-            />
+        <IonList lines="full">
+          <IonAccordionGroup>
+            <IonAccordion>
+              <IonItem slot="header">
+                <IonLabel>Data</IonLabel>
+                <IonNote slot="end">
+                  {formData.date.replaceAll("-", ".")}
+                </IonNote>
               </IonItem>
+              <IonDatetime locale="pl-PL" onIonChange={handleDateChange} className={styles.datetime} slot="content" presentation="date" min="2023-10-15" max="2023-10-22" />
+            </IonAccordion>
+          </IonAccordionGroup>
 
           <IonItem>
             <IonLabel position="floating">Nazwa produktu</IonLabel>
@@ -110,10 +121,10 @@ const handleInputChange = (fieldName: any, value: any) => {
             />
           </IonItem>
 
-          <IonButton expand="full" type="submit">
+          <IonButton onClick={(e) => handleSubmit(e as any)} type="submit">
             Wyślij
           </IonButton>
-        </form>
+        </IonList>
       </IonContent>
     </IonPage>
   );