MVP pre-(?)release

src/Nyanlabs.SFood.UI/sfood/src/App.tsx

@@ -21,6 +21,7 @@ import '@ionic/react/css/display.css';
 
 /* Theme variables */
 import './theme/variables.css';
+
 import Submit from './pages/Report';
 
 setupIonicReact();

src/Nyanlabs.SFood.UI/sfood/src/components/Search/Search.module.css

@@ -2,7 +2,6 @@
     width: 100%;
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
-    padding-right: 12px;
 }

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

@@ -1,4 +1,3 @@
-import SearchFilter from "./SearchFilter/SearchFilter";
 import Searchbar from "./Searchbar/Searchbar";
 
 import styles from "./Search.module.css";
@@ -7,7 +6,6 @@ const Search: React.FC = () => {
     return (
         <div className={`${styles.search}`}>
             <Searchbar />
-            <SearchFilter />
         </div>
     )
 }

src/Nyanlabs.SFood.UI/sfood/src/components/Search/SearchFilter/SearchFilter.module.css

@@ -1,9 +0,0 @@
-.searchfilter {
-    width: 64px;
-    height: 36px;
-}
-
-ion-button.searchfilter {
-    --padding-start: 0px !important;
-    --padding-end: 0px !important;
-}

src/Nyanlabs.SFood.UI/sfood/src/components/Search/SearchFilter/SearchFilter.tsx

@@ -1,15 +0,0 @@
-import { IonButton, IonIcon } from "@ionic/react";
-
-import { ellipsisVerticalOutline } from "ionicons/icons";
-
-import styles from "./SearchFilter.module.css";
-
-const SearchFilter: React.FC = () => {
-    return (
-        <IonButton className={styles.searchfilter} size="small" shape="round">
-            <IonIcon icon={ellipsisVerticalOutline} />
-        </IonButton>
-    );
-};
-
-export default SearchFilter;

src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.module.css

@@ -0,0 +1,4 @@
+.label {
+    width: 100%;
+    --width: 100%;
+}

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

@@ -1,8 +1,10 @@
-import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar, useIonRouter } from "@ionic/react";
+import { IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonIcon, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList, IonModal, IonRouterContext, IonSearchbar, IonTitle, IonToolbar, useIonRouter } from "@ionic/react";
 
-import { useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 
 import styles from "./WarningsList.module.css";
+import { Redirect, Route, Router, __RouterContext, useLocation } from "react-router";
+import { chevronBack, closeOutline } from "ionicons/icons";
 
 const WarningsList: React.FC = () => {
     const [dataset, setDataset] = useState<any[]>([]);
@@ -12,7 +14,9 @@ const WarningsList: React.FC = () => {
     const [pageIndex, setPageIndex] = useState(1);
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [currentlySelectedWarning, setCurrentlySelectedWarning] = useState<object>();
+    const { push } = useIonRouter();
     const eventRef = useRef();
+    const [searchValue, setSearchValue] = useState("");
 
     useEffect(() => {
         async function getDataset() {
@@ -89,13 +93,24 @@ const WarningsList: React.FC = () => {
         setIsModalOpen(true);
     };
 
-    return warningsContent.length > 0 ? (
+    function closeModal() {
+        setCurrentlySelectedWarning(undefined);
+        setIsModalOpen(false);
+    }
+
+    function handleInputValueChange(event: any) {
+        setSearchValue(event.detail.value);
+    };
+
+    return (
         <>
+            <IonSearchbar placeholder="Wpisz słowo kluczowe" value={searchValue} onIonChange={handleInputValueChange} />
+                {warningsContent.length > 0 && (
                     <>
                         <IonList lines="full">
                             {warningsContent.map((warningContent, key) => (
                                 <IonItem detail onClick={() => openModal(warningContent)} button key={key}>
-                            <IonLabel>
+                                    <IonLabel className="ion-text-wrap">
                                         {warningContent.col7.val}
                                     </IonLabel>
                                 </IonItem>
@@ -107,46 +122,75 @@ const WarningsList: React.FC = () => {
                                     <IonTitle>
                                         Szczegóły
                                     </IonTitle>
+                                    <IonButtons slot="start">
+                                        <IonButton onClick={closeModal}>
+                                            <IonIcon icon={chevronBack} />
+                                            Powrót
+                                        </IonButton>
+                                    </IonButtons>
                                 </IonToolbar>
                             </IonHeader>
                             <IonContent>
-                        <IonHeader collapse="condense">
-                            <IonToolbar>
-                                <IonTitle size="large">
-                                    Szczegóły
-                                </IonTitle>
-                            </IonToolbar>
-                        </IonHeader>
                                 {currentlySelectedWarning !== undefined && currentlySelectedWarning !== null && (
                                     <IonList lines="full">
                                         <IonItem>
-                                    <IonLabel>
+                                            <IonLabel className={`${styles.label} ion-text-wrap`}>
+                                                <h1>
                                                     {(currentlySelectedWarning as any).col3.val}
+                                                </h1>
+                                                <p>
+                                                    województwo
+                                                </p>
                                             </IonLabel>
                                         </IonItem>
                                         <IonItem>
-                                    <IonLabel>
+                                            <IonLabel className={`${styles.label} ion-text-wrap`}>
+                                                <h1>
                                                     {(currentlySelectedWarning as any).col2.val}
+                                                </h1>
+                                                <p>
+                                                    nazwa kodowa
+                                                </p>
                                             </IonLabel>
                                         </IonItem>
                                         <IonItem>
-                                    <IonLabel>
+                                            <IonLabel className={`${styles.label} ion-text-wrap`}>
+                                                <h1>
                                                     {(currentlySelectedWarning as any).col5.val}
+                                                </h1>
+                                                <p>
+                                                    firma
+                                                </p>
                                             </IonLabel>
                                         </IonItem>
                                         <IonItem>
-                                    <IonLabel>
+                                            <IonLabel className={`${styles.label} ion-text-wrap`}>
+                                                <h1>
                                                     {(currentlySelectedWarning as any).col6.val}
+                                                </h1>
+                                                <p>
+                                                    kategoria
+                                                </p>
                                             </IonLabel>
                                         </IonItem>
                                         <IonItem>
-                                    <IonLabel>
+                                            <IonLabel className={`${styles.label} ion-text-wrap`}>
+                                                <h1>
                                                     {(currentlySelectedWarning as any).col7.val}
+                                                </h1>
+                                                <p>
+                                                    nazwa produktu
+                                                </p>
                                             </IonLabel>
                                         </IonItem>
-                                <IonItem>
+                                        <IonItem className={`${styles.label} ion-text-wrap`}>
                                             <IonLabel>
+                                                <h1 className="ion-text-wrap">
                                                     {(currentlySelectedWarning as any).col9.val}
+                                                </h1>
+                                                <p>
+                                                    powód zgłoszenia
+                                                </p>
                                             </IonLabel>
                                         </IonItem>
                                     </IonList>
@@ -157,8 +201,9 @@ const WarningsList: React.FC = () => {
                             <IonInfiniteScrollContent />
                         </IonInfiniteScroll>
                     </>
+                )}
         </>
-    ) : <></>;
+    );
 };
 
 export default WarningsList;

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

@@ -23,7 +23,6 @@ const Home: React.FC = () => {
         <div className={`${styles.addWarningButtonDiv} ion-padding-horizontal`}>
           <AddWarningButton />
         </div>
-        <Search />
         <WarningsList />
       </IonContent>
     </IonPage>

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

@@ -121,8 +121,8 @@ const handleInputChange = (fieldName: any, value: any) => {
             />
           </IonItem>
 
-          <div style={{width: "100%", display: "flex", justifyContent: "center"}} className="ion-margin-top">
+          <div style={{width: "100%", display: "flex", justifyContent: "center"}} className="ion-padding-horizontal">
-            <IonButton style={{"--width": "100%"}} size="large" onClick={(e) => handleSubmit(e as any)} type="submit">
+            <IonButton style={{"--width": "100%", "width": "100%", "margin-top": "320px"}} size="large" onClick={(e) => handleSubmit(e as any)} type="submit">
               Wyślij
             </IonButton>
           </div>