162 lines
3.6 KiB
TypeScript
162 lines
3.6 KiB
TypeScript
import { useRouter, useLocalSearchParams } from "expo-router";
|
|
import { navigate } from "expo-router/build/global-state/routing";
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
Button,
|
|
FlatList,
|
|
Image,
|
|
Text,
|
|
TextInput,
|
|
View,
|
|
StyleSheet,
|
|
} from "react-native";
|
|
import { getRessources, Ressource } from "../../services/ressourcesService";
|
|
|
|
export default function GestionnaireRessource() {
|
|
const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
|
|
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 des ressources :", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
loadData();
|
|
}, []);
|
|
|
|
const filteredData = ressource.filter((r) =>
|
|
r.name.toLowerCase().includes(search.toLowerCase())
|
|
);
|
|
|
|
const renderRessource = ({
|
|
item,
|
|
index,
|
|
}: {
|
|
item?: Ressource;
|
|
index: number;
|
|
}) => {
|
|
if (!item) {
|
|
// optionnel : afficher un placeholder pour debug
|
|
// return <View style={styles.card}><Text>Item manquant</Text></View>;
|
|
return null;
|
|
}
|
|
return (
|
|
<View style={styles.card}>
|
|
<View style={styles.info}>
|
|
<Image source={{ uri: item.Image }} style={styles.image} />
|
|
<Text>{item.id}</Text>
|
|
<Text>{item.name}</Text>
|
|
<Text>{item.type}</Text>
|
|
<Text>{item.quantity}</Text>
|
|
<Text>{item.available_quantity}</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={filteredData}
|
|
renderItem={renderRessource}
|
|
keyExtractor={(_, index) => index.toString()}
|
|
contentContainerStyle={{ paddingBottom: 40 }}
|
|
ListHeaderComponent={
|
|
<View style={styles.header}>
|
|
<Text style={styles.text}>
|
|
Bonjour {prenom} {nom}
|
|
</Text>
|
|
|
|
{/* 🔍 Champ de recherche */}
|
|
<TextInput
|
|
style={styles.input}
|
|
placeholder="Rechercher une ressource..."
|
|
value={search}
|
|
onChangeText={setSearch}
|
|
/>
|
|
</View>
|
|
}
|
|
ListEmptyComponent={
|
|
<Text style={styles.empty}>Aucun résultat trouvé 😕</Text>
|
|
}
|
|
/>
|
|
|
|
<View style={styles.footer}>
|
|
<Button
|
|
title="Retour"
|
|
onPress={() => router.push("/(tabs)/bonjourFL")}
|
|
/>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: "#fff",
|
|
},
|
|
header: {
|
|
marginTop: 60,
|
|
marginBottom: 20,
|
|
alignItems: "center",
|
|
paddingHorizontal: 20,
|
|
},
|
|
text: {
|
|
fontSize: 22,
|
|
fontWeight: "bold",
|
|
marginBottom: 10,
|
|
},
|
|
input: {
|
|
width: "100%",
|
|
borderWidth: 1,
|
|
borderColor: "#ccc",
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
fontSize: 16,
|
|
},
|
|
card: {
|
|
flexDirection: "row",
|
|
marginHorizontal: 20,
|
|
marginBottom: 15,
|
|
borderWidth: 1,
|
|
borderColor: "#ddd",
|
|
borderRadius: 10,
|
|
padding: 10,
|
|
backgroundColor: "#fafafa",
|
|
},
|
|
image: {
|
|
width: 80,
|
|
height: 80,
|
|
borderRadius: 8,
|
|
marginRight: 10,
|
|
},
|
|
info: {
|
|
flex: 1,
|
|
justifyContent: "center",
|
|
},
|
|
group: {
|
|
fontWeight: "bold",
|
|
fontSize: 16,
|
|
marginBottom: 5,
|
|
},
|
|
footer: {
|
|
padding: 20,
|
|
},
|
|
empty: {
|
|
textAlign: "center",
|
|
marginTop: 30,
|
|
color: "#888",
|
|
},
|
|
});
|