134 lines
3.4 KiB
TypeScript
134 lines
3.4 KiB
TypeScript
import { useRouter , useLocalSearchParams} from "expo-router";
|
|
import React, {useState} from 'react';
|
|
import { Button,FlatList,Image, Text, TextInput,View, StyleSheet } from 'react-native';
|
|
|
|
export default function GestionnaireRessource() {
|
|
const { nom, prenom } = useLocalSearchParams(); // Recup data ecran precedent
|
|
const [search, setSearch] = useState('');
|
|
const router = useRouter();
|
|
|
|
type Ressource ={
|
|
id: number;
|
|
name: string;
|
|
type: string;
|
|
Image: string;
|
|
}
|
|
|
|
const data: Ressource[] = [
|
|
{ id: 1, name: 'Marteau', type: 'Outil', Image: '' },
|
|
{ id: 2, name: 'Scie', type: 'Outil' , Image: ''},
|
|
{ id: 3, name: 'Pelle', type: 'Outil' , Image: '' },
|
|
{ id: 4, name: 'Grue', type: 'Machine',Image: 'https://media.discordapp.net/attachments/1425108443571945644/1427207643180826757/raw.png?ex=68ee0632&is=68ecb4b2&hm=1efc51065c6abfb1af75b8382f9924c2eb177c7d7672f7ed9837e96ef3076d16&=&format=webp&quality=lossless&width=421&height=632'},
|
|
{ id: 5, name: 'Bulldozer', type: 'Machine', Image: ''},
|
|
];
|
|
|
|
|
|
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>
|
|
</View>
|
|
</View>);
|
|
};
|
|
|
|
return(
|
|
<View style={styles.container}>
|
|
<FlatList
|
|
data={data}
|
|
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.back()} />
|
|
</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',
|
|
},
|
|
}); |