overlay confirm en cours

components/chantierSummary.tsx

@@ -1,11 +1,8 @@
-import SelectChantier from '@/components/selectChantier';
-import SetStatus from '@/components/setStatus';
-import { ThemedView, } from '@/components/themed-view';
-import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut
-import React from 'react';
-import { StyleSheet, View, Image, ViewStyle, StyleProp } from 'react-native';
-import { ThemedText } from './themed-text';
 import { Chantier } from '@/class/class';
+import { ThemedView, } from '@/components/themed-view';
+import React from 'react';
+import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { ThemedText } from './themed-text';
 
 
 type Props = {
@@ -26,7 +23,6 @@ export default function ChantierSummary({data,style , ...otherProps }: Props) {
                     <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>{data.chantier.chef != null ? "true" : "false"}</ThemedText>
                     <ThemedText>Adresse: {data.chantier.adresse}</ThemedText>
                     <ThemedText>Chef de chantier: {data.chantier.chef.last_name}{" "}{data.chantier.chef.name}</ThemedText>
                     <ThemedText>État: {data.chantier.etat}</ThemedText>

components/selectChantier.tsx

@@ -113,6 +113,7 @@ const styles = StyleSheet.create({
     width: "50%",
     height: 60,
     overflow: "hidden",
+    zIndex:1000,
   },
   windowOpean: {
     //backgroundColor: '#00FF0040',

components/setStatus.tsx

@@ -1,5 +1,6 @@
 import { useChantier } from '@/app/ContextChantier';
-import { useCallback, useState } from 'react';
+import { changeChantierStatus } from "@/services/ressourcesService";
+import { useState } from 'react';
 import { Dimensions, LayoutAnimation, Modal, Pressable, StyleSheet, View } from 'react-native';
 import Animated, { LinearTransition } from 'react-native-reanimated';
 import { ThemedButton } from './themed-button';
@@ -12,11 +13,11 @@ const { width, height } = Dimensions.get("window");
 export default function SetStatus() {
 
     const { chantier, setChantier} = useChantier();
-    const [currentSatus, setCurrentSearch] = useState("En cours");
+    const [currentStatus, setCurrentStatus] = useState("En cours");
+    const [tempStatus, setTempStatus] = useState("");
     const [isOpen,setIsOpen] = useState(false);
     const [openConfirmation,setOpenConfirmation] = useState(false);
 
-
     const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
 
     const choices = ["En cours","Interrompu","Terminé","Non réalisé"]
@@ -28,10 +29,24 @@ export default function SetStatus() {
         setIsOpen(!isOpen);
     }
 
+    function onConfirm(): void {
+        setOpenConfirmation(false);
+        setCurrentStatus(tempStatus);
+        setIsOpen(false);
+        if(chantier != null){
+          //TODO MAJ la BDD 
+          changeChantierStatus(String(chantier.id),currentStatus)
+        }
+    }
+
+    function onCancel(): void {
+        setOpenConfirmation(false);
+        setIsOpen(false);
+    }
+
     function selectSatus(status: string): void {
       setOpenConfirmation(true);
-        setCurrentSearch(status);
-        setIsOpen(false);
+      setTempStatus(status);
     }
 
 
@@ -46,6 +61,17 @@ export default function SetStatus() {
       );
     };
 
+    const confirmation = () => {
+      return(
+        <Modal style={styles.overlay}>
+          <ThemedView>
+            <ThemedButton onPress={() => onConfirm()}><ThemedText>Confirmer</ThemedText></ThemedButton>
+            <ThemedButton onPress={() => onCancel()}><ThemedText>Annuler</ThemedText></ThemedButton>
+          </ThemedView>
+        </Modal>
+      )
+    }
+
 
     return(
 
@@ -55,17 +81,18 @@ export default function SetStatus() {
 
             <AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
               <ThemedButton style={styles.button} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
-                <ThemedText style={styles.centeredText}>{currentSatus}</ThemedText>
+                <ThemedText style={styles.centeredText}>{currentStatus}</ThemedText>
               </ThemedButton>
                 {isOpen && (
                   <>
+                  {openConfirmation && confirmation()}
                   {//TODO : Modal pour confirmer la changement
                   }
                   <View style={styles.menu}>
                     <View style={styles.list}>
                             
                         {choices.map((str, index) => (
-                                str!==currentSatus && choice(str, index)
+                                str!==currentStatus && choice(str, index)
                         ))}
                     </View>
                   </View>
@@ -126,5 +153,9 @@ const styles = StyleSheet.create({
   },
   centeredText:{
     textAlign: 'center',
-  }
+  },
+  overlay:{
+    backgroundColor:'transparent',
+    padding:20,
+  },
 });

services/ressourcesService.ts

@@ -84,7 +84,7 @@ function convertReservation(res: any): Reservation {
 export async function changeChantierStatus(chantierId: string, newStatus: string): Promise<void> {
   try {
     const chantierRef = doc(db, "chantier", chantierId);
-    await updateDoc(chantierRef, { status: newStatus });
+    await updateDoc(chantierRef, { etat: newStatus });
     console.log(`Chantier ${chantierId} status updated to ${newStatus}`);
   } catch (err) {
     console.error("Error", err);