ajout de la classe de la gestion des ressources.
This commit is contained in:
134
app/(tabs)/gestionnaire_ressource.tsx
Normal file
134
app/(tabs)/gestionnaire_ressource.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
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',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user