recherche dans selectChantier

class/class.tsx

@@ -26,7 +26,7 @@ export type User = {
 export type Ressources = {
   id: number;
   name: string;
-  type: string; //"machine","ouvrier"
+  type: string; //"machine","outil","ouvrier"
   Image: string;
   quantity: number;
   available_quantity: number;

components/add/addChantier.tsx

@@ -155,7 +155,7 @@ export default function AddChantier() {
     )
   }
 
-  const renderInutDate = (name : string) => {
+  const renderInputDate = (name : string) => {
     return (
         <View style = {styles.inputLine}>
           <ThemedText style = {styles.inputName}>{name}:</ThemedText>
@@ -211,7 +211,7 @@ export default function AddChantier() {
             {renderInut("Objet","Renovation",objet,setObjet,false)}
             {//renderInut("Date de départ","TOTO : JOUR + Demi journé",date,setDate)
             }
-            {renderInutDate("Date de départ")}
+            {renderInputDate("Date de départ")}
             {renderInut("Estimation de la durée (en demi-journées)","14",duree,setDuree,true)}
             {renderInut("Adresse","1 Rue de la Coutellerie, Paris",adresse,setAdresse,false)}
             {renderInut("Contact client","07 01 02 03 04 05",contact,setContact,true)}

components/selectChantier.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import {
   ActivityIndicator,
   Dimensions,
+  FlatList,
   Image,
   Pressable,
   ScrollView,
@@ -13,7 +14,11 @@ import {
   View
 } from "react-native";
 import Animated, {
-  LinearTransition
+  interpolate,
+  LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming
 } from "react-native-reanimated";
 import { ThemedButton } from "@/components/theme/themed-button";
 import { ThemedText } from "@/components/theme/themed-text";
@@ -56,10 +61,9 @@ export default function SelectChantier() {
     }
   }
 
-  function onPressAddChantier(){
-    router.push("/(tabs)/addScreen")
-    setIsOpen(false)
-  }
+    useEffect(() => {
+    open.value = withTiming(isOpen ? 1 : 0);
+  }, [isOpen]);
 
   useEffect(() => {
     async function loadChantiers() {
@@ -70,22 +74,57 @@ export default function SelectChantier() {
     loadChantiers();
   }, []);
 
+  const filteredChantiers = chantiers.filter((chantier) => {
+    var keyWords:string[] = search.toLowerCase().split(" ") ;
+    var containsAllKeyWord:boolean = true;
+    keyWords.forEach(keyWord => {
+      containsAllKeyWord = containsAllKeyWord && (chantier.adresse.toLowerCase().includes(keyWord))
+    });
+    return containsAllKeyWord
+  });
+
   function selectChantier(chantier: Chantier): void {
     setChantier(chantier);
     setIsOpen(false);
   }
 
-  const renderChantier = (chantier: Chantier, index: number) => {
+
+  const open = useSharedValue(0);
+
+  const animatedWindowStyle = useAnimatedStyle(() => {
+    return {
+      width: `${interpolate(open.value, [0, 1], [50, 100])}%`,
+      height: interpolate(
+        open.value,
+        [0, 1],
+        [60, screenHeight * 0.75]
+      ),
+      padding: 10,
+      overflow: "hidden",
+      zIndex: 1000,
+    };
+  });
+
+  const animatedButtonStyle = useAnimatedStyle(() => ({
+    width: `${interpolate(open.value, [0, 1], [100, 50])}%`,
+    margin: interpolate(open.value, [0, 1], [0, 5]),
+    borderRadius: interpolate(open.value, [0, 1], [15, 10]),
+    padding: 10,
+    height: 40,
+  }));
+
+
+  const renderChantier = ({ item }: { item:Chantier }) => {
     return (
-        <Pressable key={index} onPress={() => selectChantier(chantier)}>
+        <Pressable onPress={() => selectChantier(item)}>
           <ThemedView lvl={4} style={styles.chantier}>
             <View>
               <Image source={{ uri:"https://cdn.discordapp.com/attachments/1425108443571945644/1427207643180826757/raw.png?ex=69392bb2&is=6937da32&hm=dcc09e76d3dca89d2418947b46efbd38673b9dc559027724b2e51d493b173bc9&" /*chantier.urlImg*/ }} style={styles.image} />
             </View>
             <View>
-            <ThemedText>Adresse: {chantier.adresse}</ThemedText>
-            <ThemedText>Chef de chantier: {chantier.chef.last_name}{" "}{chantier.chef.name}</ThemedText>
-            <ThemedText>État: {chantier.etat}</ThemedText>
+            <ThemedText>Adresse: {item.adresse}</ThemedText>
+            <ThemedText>Chef de chantier: {item.chef.last_name}{" "}{item.chef.name}</ThemedText>
+            <ThemedText>État: {item.etat}</ThemedText>
             </View>
           </ThemedView>
         </Pressable>
@@ -93,10 +132,10 @@ export default function SelectChantier() {
   };
 
   return (
-    <Animated.View layout={LinearTransition.duration(200)} style={isOpen ? styles.windowOpean : styles.windowClose}>
+    <Animated.View style={animatedWindowStyle}>
       {isOpen && (<Pressable style={styles.autoClose} onPress={() => setIsOpen(false)}/>)}
-      <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
-        <AnimatedThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
+      <ThemedView lvl={2} shadow={true} style={styles.window}>
+        <AnimatedThemedButton style={animatedButtonStyle} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
           <ThemedText style={styles.buttonText}>
             {isOpen ? "Fermer" : (chantier!=null ? chantier.adresse : "Chantier")}
           </ThemedText>
@@ -105,29 +144,28 @@ export default function SelectChantier() {
           <View style={styles.menu}>
 
             <ThemedTextInput lvl={1} border={4} style={styles.input} placeholder="Rechercher un chantier" value={search} onChangeText={setSearch}/>
-
-            <ThemedButton style={styles.buttonAdd} onPress={() => onPressAddChantier()}>
-              <ThemedText style={styles.buttonText}>
-                +
-              </ThemedText>
-            </ThemedButton>
             <View style={styles.list}>
               {isLoaded?
-              <ScrollView contentContainerStyle={styles.chantiersList}>
-                {chantiers.map((chantier, index) =>
-                  renderChantier(chantier, index)
-                )}
-              </ScrollView>
+                <FlatList
+                data={filteredChantiers}
+                renderItem={renderChantier}
+                keyExtractor={(_, index) => index.toString()}
+                contentContainerStyle={{ gap: 8 }}
+                />
+
+
+
               : <ActivityIndicator style={{height:"100%"}} color="#808080" size="large" />}
             </View>
 
         </View>
         )}
-      </AnimatedThemedView>
+      </ThemedView>
     </Animated.View>
   );
 }
 
+
 const styles = StyleSheet.create({
   windowClose: {
     //backgroundColor: '#00FF0040',
@@ -220,11 +258,4 @@ const styles = StyleSheet.create({
   buttonText: {
     textAlign: "center",
   },
-  buttonAdd:{
-    borderRadius: 10,
-    marginBottom: 10,
-    height: 30,
-    alignItems: 'center',
-    justifyContent: 'center',
-  }
 });