152 lines
3.7 KiB
TypeScript
152 lines
3.7 KiB
TypeScript
import { useRouter, useLocalSearchParams } from "expo-router";
|
|
import { ThemedView } from "@/components/themed-view";
|
|
import { ThemedTextInput } from '@/components/themed-textinpute';
|
|
import { ThemedText } from "@/components/themed-text";
|
|
import { ThemedButton } from "@/components/themed-button";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
Button,
|
|
FlatList,
|
|
Image,
|
|
Text,
|
|
TextInput,
|
|
StyleSheet,
|
|
} from "react-native";
|
|
import { getRessources, Ressource } from "../../services/ressourcesService";
|
|
|
|
export default function GestionnaireRessource() {
|
|
const { nom, prenom } = useLocalSearchParams();
|
|
const [search, setSearch] = useState("");
|
|
const [ressource, setRessources] = useState<Ressource[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
async function loadData() {
|
|
try {
|
|
const data = await getRessources();
|
|
setRessources(data);
|
|
} catch (error) {
|
|
console.error("Erreur lors du chargement :", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
loadData();
|
|
}, []);
|
|
|
|
const filteredData = ressource.filter((r) =>
|
|
r.name.toLowerCase().includes(search.toLowerCase())
|
|
);
|
|
|
|
const renderRessource = ({ item }: { item: Ressource }) => {
|
|
if (!item) return null;
|
|
|
|
return (
|
|
<ThemedView lvl={1} shadow={true} style={styles.card}>
|
|
<Image source={{ uri: item.Image }} style={styles.image} />
|
|
<ThemedView lvl={1} style={styles.info}>
|
|
<Text>{item.id}</Text>
|
|
<Text>{item.name}</Text>
|
|
<Text>{item.type}</Text>
|
|
<Text>{item.quantity}</Text>
|
|
<Text>{item.available_quantity}</Text>
|
|
</ThemedView>
|
|
</ThemedView>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<ThemedView lvl={3} style={styles.container}>
|
|
<FlatList
|
|
data={filteredData}
|
|
renderItem={renderRessource}
|
|
keyExtractor={(_, index) => index.toString()}
|
|
contentContainerStyle={{ paddingBottom: 40 }}
|
|
ListHeaderComponent={
|
|
<ThemedView opacity="00" style={styles.header}>
|
|
<Text style={styles.text}>
|
|
Bonjour {prenom} {nom}
|
|
</Text>
|
|
|
|
{/* Input background */}
|
|
<ThemedView lvl={1} shadow={true} style={styles.inputBack}>
|
|
<ThemedTextInput
|
|
lvl={0}
|
|
style={styles.input}
|
|
placeholder="Rechercher une ressource..."
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
/>
|
|
</ThemedView>
|
|
</ThemedView>
|
|
}
|
|
ListEmptyComponent={
|
|
<ThemedText style={styles.empty}>Aucun résultat trouvé 😕</ThemedText>
|
|
}
|
|
/>
|
|
|
|
<ThemedView lvl={3} style={styles.footer}>
|
|
<Button
|
|
title="Retour"
|
|
onPress={() => router.push("/(tabs)/bonjourFL")}
|
|
/>
|
|
</ThemedView>
|
|
</ThemedView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
header: {
|
|
marginTop: 60,
|
|
marginBottom: 20,
|
|
alignItems: "center",
|
|
paddingHorizontal: 20,
|
|
},
|
|
text: {
|
|
fontSize: 22,
|
|
fontWeight: "bold",
|
|
marginBottom: 10,
|
|
},
|
|
inputBack: {
|
|
width: "100%",
|
|
borderRadius: 10,
|
|
},
|
|
input: {
|
|
width: "100%",
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
fontSize: 16,
|
|
},
|
|
card: {
|
|
flexDirection: "row",
|
|
marginHorizontal: 20,
|
|
marginBottom: 15,
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
},
|
|
image: {
|
|
width: 80,
|
|
height: 80,
|
|
borderRadius: 8,
|
|
marginRight: 10,
|
|
},
|
|
info: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
},
|
|
footer: {
|
|
padding: 20,
|
|
},
|
|
empty: {
|
|
textAlign: "center",
|
|
marginTop: 30,
|
|
color: "#888",
|
|
},
|
|
});
|