Nyanlabs/SFood
Nyanlabs/SFood
4
0
Fork 0
mirror of https://github.com/BZmHackTeam/BezpiecznaZywnosc synced 2024-12-22 14:46:58 +01:00
Code Issues Projects Releases Packages Wiki Activity

MVP pre-(?)release

Browse source
This commit is contained in:
Jakub Cywka 2023-10-22 09:44:58 +02:00
parent 76188d31f2
commit 436fe37dd2
9 changed files with 121 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/Nyanlabs.SFood.UI/sfood/src/App.tsx
View file

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

3
src/Nyanlabs.SFood.UI/sfood/src/components/Search/Search.module.css
View file

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

2
src/Nyanlabs.SFood.UI/sfood/src/components/Search/Search.tsx
View file

@ -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>
)
}

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

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

15
src/Nyanlabs.SFood.UI/sfood/src/components/Search/SearchFilter/SearchFilter.tsx
View file

@ -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;

4
src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.module.css
View file

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

181
src/Nyanlabs.SFood.UI/sfood/src/components/WarningsList/WarningsList.tsx
View file

@ -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,76 +93,117 @@ 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 (
<>
<>
<IonList lines="full">
{warningsContent.map((warningContent, key) => (
<IonItem detail onClick={() => openModal(warningContent)} button key={key}>
<IonLabel>
{warningContent.col7.val}
</IonLabel>
</IonItem>
))}
</IonList>
<IonModal isOpen={isModalOpen}>
<IonHeader>
<IonToolbar>
<IonTitle>
Szczegóły
</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">
Szczegóły
</IonTitle>
</IonToolbar>
</IonHeader>
{currentlySelectedWarning !== undefined && currentlySelectedWarning !== null && (
<IonList lines="full">
<IonItem>
<IonLabel>
{(currentlySelectedWarning as any).col3.val}
<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 className="ion-text-wrap">
{warningContent.col7.val}
</IonLabel>
</IonItem>
<IonItem>
<IonLabel>
{(currentlySelectedWarning as any).col2.val}
</IonLabel>
</IonItem>
<IonItem>
<IonLabel>
{(currentlySelectedWarning as any).col5.val}
</IonLabel>
</IonItem>
<IonItem>
<IonLabel>
{(currentlySelectedWarning as any).col6.val}
</IonLabel>
</IonItem>
<IonItem>
<IonLabel>
{(currentlySelectedWarning as any).col7.val}
</IonLabel>
</IonItem>
<IonItem>
<IonLabel>
{(currentlySelectedWarning as any).col9.val}
</IonLabel>
</IonItem>
</IonList>
)}
</IonContent>
</IonModal>
<IonInfiniteScroll onIonInfinite={onIonScroll}>
<IonInfiniteScrollContent />
</IonInfiniteScroll>
</>
))}
</IonList>
<IonModal isOpen={isModalOpen}>
<IonHeader>
<IonToolbar>
<IonTitle>
Szczegóły
</IonTitle>
<IonButtons slot="start">
<IonButton onClick={closeModal}>
<IonIcon icon={chevronBack} />
Powrót
</IonButton>
</IonButtons>
</IonToolbar>
</IonHeader>
<IonContent>
{currentlySelectedWarning !== undefined && currentlySelectedWarning !== null && (
<IonList lines="full">
<IonItem>
<IonLabel className={`${styles.label} ion-text-wrap`}>
<h1>
{(currentlySelectedWarning as any).col3.val}
</h1>
<p>
województwo
</p>
</IonLabel>
</IonItem>
<IonItem>
<IonLabel className={`${styles.label} ion-text-wrap`}>
<h1>
{(currentlySelectedWarning as any).col2.val}
</h1>
<p>
nazwa kodowa
</p>
</IonLabel>
</IonItem>
<IonItem>
<IonLabel className={`${styles.label} ion-text-wrap`}>
<h1>
{(currentlySelectedWarning as any).col5.val}
</h1>
<p>
firma
</p>
</IonLabel>
</IonItem>
<IonItem>
<IonLabel className={`${styles.label} ion-text-wrap`}>
<h1>
{(currentlySelectedWarning as any).col6.val}
</h1>
<p>
kategoria
</p>
</IonLabel>
</IonItem>
<IonItem>
<IonLabel className={`${styles.label} ion-text-wrap`}>
<h1>
{(currentlySelectedWarning as any).col7.val}
</h1>
<p>
nazwa produktu
</p>
</IonLabel>
</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>
)}
</IonContent>
</IonModal>
<IonInfiniteScroll onIonInfinite={onIonScroll}>
<IonInfiniteScrollContent />
</IonInfiniteScroll>
</>
)}
</>
) : <></>;
);
};
export default WarningsList;

1
src/Nyanlabs.SFood.UI/sfood/src/pages/Home.tsx
View file

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

4
src/Nyanlabs.SFood.UI/sfood/src/pages/Report.tsx
View file

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