Merging

components/ressourceSummary.tsx

@@ -8,28 +8,28 @@ import { ThemedButton } from './theme/themed-button';
 type RessourcesQte = [Ressources, number];
 
 type Props = {
-    machine:Ressources;
+    ressource:Ressources;
     qte:number;
-    sendMachine: (machine: RessourcesQte) => void;
+    sendRessource: (ressource: RessourcesQte) => void;
     style?: StyleProp<ViewStyle>;
 };
 
-export default function MachineSummary({machine,qte,style,sendMachine, ...otherProps }: Props) {
+export default function RessourceSummary({ressource: ressource,qte,style,sendRessource: sendRessource, ...otherProps }: Props) {
 
 
     const [count,setCount] = useState(qte);
     
-    function onPressAdd(machine: Ressources): void {
-        if(count<machine.quantity){
+    function onPressAdd(ressource: Ressources): void {
+        if(count<ressource.quantity){
             setCount(count+1);
-            sendMachine([machine, count+1]);
+            sendRessource([ressource, count+1]);
         }
     }
 
-    function onPressSub(machine: Ressources): void {
+    function onPressSub(ressource: Ressources): void {
         if(count>0){
             setCount(count-1);
-            sendMachine([machine, count-1]);
+            sendRessource([ressource, count-1]);
         }
     }
 
@@ -37,17 +37,17 @@ export default function MachineSummary({machine,qte,style,sendMachine, ...otherP
         <View style={style}>
             <ThemedView lvl={2} border={3} style={{padding:10,width:"100%",borderRadius:10,flexDirection: 'row',justifyContent: 'space-between',}}>
                 <View>
-                    <ThemedText>{machine.id}</ThemedText>
-                    <ThemedText>{machine.name}</ThemedText>
-                    <ThemedText>{machine.quantity}</ThemedText>
-                    <ThemedText>{machine.type}</ThemedText>
+                    <ThemedText>{ressource.id}</ThemedText>
+                    <ThemedText>{ressource.name}</ThemedText>
+                    <ThemedText>{ressource.quantity}</ThemedText>
+                    <ThemedText>{ressource.type}</ThemedText>
                 </View>
                 <View style={{alignItems:"center"}}>
-                    <ThemedButton style={styles.button} lvl={3} onPress={() => onPressAdd(machine)}>
+                    <ThemedButton style={styles.button} lvl={3} onPress={() => onPressAdd(ressource)}>
                         <ThemedText>+</ThemedText>
                     </ThemedButton>
-                    <ThemedText>{count}/{machine.quantity}</ThemedText>
-                    <ThemedButton style={styles.button} lvl={3} onPress={() => onPressSub(machine)}>
+                    <ThemedText>{count}/{ressource.quantity}</ThemedText>
+                    <ThemedButton style={styles.button} lvl={3} onPress={() => onPressSub(ressource)}>
                         <ThemedText>-</ThemedText>
                     </ThemedButton>
                 </View>

components/selectMachine.tsx

@@ -8,7 +8,7 @@ import { ThemedText } from './theme/themed-text';
 import { ThemedView } from "./theme/themed-view";
 import { Ressources, User } from '@/class/class';
 import { getRessources } from "@/services/ressourcesService";
-import MachineSummary from './machineSummary';
+import RessourceSummary from './ressourceSummary';
 
 const { width, height } = Dimensions.get("window");
 
@@ -21,15 +21,10 @@ type Props = {
 
 export default function SelectMachine({style,sendMachines: sendMachines , ...otherProps }: Props) {
 
-    const { chantier, setChantier} = useChantier();
     const [machines, setMachines] = useState<RessourcesQte[]>([]);
-    const [tempStatus, setTempStatus] = useState("");
     const [isOpen,setIsOpen] = useState(false);
-    const [openConfirmation,setOpenConfirmation] = useState(false);
     const [listMachines,setListMachines] = useState<Ressources[]>([]);
 
-    const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
-
     useEffect(() => {
       async function loadData() {
         try {
@@ -86,7 +81,7 @@ export default function SelectMachine({style,sendMachines: sendMachines , ...oth
       const machineQte = machines.find(([r]) => r.name === item.name);
       const qte = machineQte? machineQte[1]:0;
       return(
-        <MachineSummary style={{padding:10,width:"100%"}} machine={item} qte={qte} sendMachine={addMachine}></MachineSummary>
+        <RessourceSummary style={{padding:10,width:"100%"}} ressource={item} qte={qte} sendRessource={addMachine}></RessourceSummary>
       )
     }
 
@@ -126,37 +121,6 @@ export default function SelectMachine({style,sendMachines: sendMachines , ...oth
 
 const styles = StyleSheet.create({
 
-  windowBox:{
-    zIndex: 2,
-    //backgroundColor: '#00FFFF40',
-    width:"100%",
-    padding: 10,
-    paddingLeft: 0,
-    //overflow: 'hidden',
-  },
-  window:{
-    borderRadius:15,
-    //backgroundColor: '#00FF00',
-    overflow: 'hidden',
-    position: 'relative',
-  },
-  autoClose: {
-    
-    position: 'absolute',
-    top: -height,
-    left: -width,
-    width:width*2,
-    height:height*2,
-    //backgroundColor: 'rgba(255, 0, 0, 0.5)',
-  },
-  button:{
-    width:'100%',
-    margin: 0,
-    borderRadius: 15,
-    padding: 10,
-    height:40,
-    justifyContent: 'center',
-  },
   centeredText:{
     textAlign: 'center',
   },

components/selectRessource.tsx

@@ -0,0 +1,154 @@
+import { useChantier } from '@/app/ContextChantier';
+import { changeChantierStatus } from "@/services/ressourcesService";
+import { useEffect, useState } from 'react';
+import { Dimensions, FlatList, LayoutAnimation, Modal, Pressable, ScrollView, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import Animated, { LinearTransition } from 'react-native-reanimated';
+import { ThemedButton } from './theme/themed-button';
+import { ThemedText } from './theme/themed-text';
+import { ThemedView } from "./theme/themed-view";
+import { Ressources, User } from '@/class/class';
+import { getRessources } from "@/services/ressourcesService";
+import RessourceSummary from './ressourceSummary';
+
+const { width, height } = Dimensions.get("window");
+
+type RessourcesQte = [Ressources, number];
+
+type Props = {
+  ressourceType: string;
+  sendRessources: (ressource: RessourcesQte[]) => void;
+  style?: StyleProp<ViewStyle>;
+};
+
+export default function SelectRessource({style,ressourceType,sendRessources: sendRessources , ...otherProps }: Props) {
+
+    const [ressources, setRessources] = useState<RessourcesQte[]>([]);
+    const [isOpen,setIsOpen] = useState(false);
+    const [listRessource,setListRessource] = useState<Ressources[]>([]);
+
+    useEffect(() => {
+      async function loadData() {
+        try {
+          const data = await getRessources();
+          const ressources = data.filter(user => user.type === ressourceType);
+          setListRessource(ressources);
+        } catch (error) {
+          console.error("Erreur lors du chargement :", error);
+        }
+      }
+      loadData();
+    }, []);
+
+
+    useEffect(() => {
+      sendRessources(ressources);
+    }, [ressources])
+  
+
+    function onPressOpen(): void {
+       setIsOpen(!isOpen);
+    }
+
+    function getTotalRessource(): number{
+      var total = 0;
+      ressources.forEach(element => {
+        total += element[1]
+      });
+      return total;
+    }
+
+    function addRessource(ressource: RessourcesQte): void{
+      if(ressource[1]>0){
+        setRessources(prev =>
+          prev.some(i => i[0].name === ressource[0].name)
+            ? prev.map(i =>
+                i[0].name === ressource[0].name
+                  ? [i[0], ressource[1]]
+                  : i
+              )
+            : [...prev, ressource]
+        );
+      }
+      else{
+        setRessources(prev => prev.filter(item => item[0].name !== ressource[0].name));
+      }
+    }
+
+
+
+
+    const RessourceSummaryItem = ({ item }: { item: Ressources }) => {
+      if (!item) return null;
+      const ressourceQte = ressources.find(([r]) => r.name === item.name);
+      const qte = ressourceQte? ressourceQte[1]:0;
+      return(
+        <RessourceSummary style={{padding:10,width:"100%"}} ressource={item} qte={qte} sendRessource={addRessource}></RessourceSummary>
+      )
+    }
+
+
+    const RessourceSearch = () => {
+      return(
+        <Modal transparent={true}>
+          <View style={styles.overlay}>
+            <ThemedView style={styles.overlayView}>
+                <ThemedText style={{fontSize: 20}}>{"Rechercher des "+ressourceType+"s :"}</ThemedText>
+                <FlatList
+                  style={{width:"100%"}}
+                  data={listRessource}
+                  renderItem={RessourceSummaryItem}
+                  keyExtractor={(_, index) => index.toString()}
+                />
+
+
+                <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => setIsOpen(false)}>
+                  <ThemedText style={{fontSize: 25}}>Valider</ThemedText>
+                </ThemedButton>
+            </ThemedView>
+          </View>
+        </Modal>
+      )
+    }
+
+    return(
+            <ThemedButton style={style} lvl={1} onPress={() => onPressOpen()}>
+                <ThemedText style={styles.centeredText}>{ressources?getTotalRessource()+" "+ressourceType+(getTotalRessource()>1?"s":"")+", "+ ressources.length+" type"+(ressources.length>1?"s":""):"Selectionner des "+ressourceType+"s"}</ThemedText>
+                {isOpen && RessourceSearch()}
+            </ThemedButton>
+            
+      
+    )
+}
+
+const styles = StyleSheet.create({
+
+  centeredText:{
+    textAlign: 'center',
+  },
+  overlay:{
+    backgroundColor:'#00000080',
+    padding:"5%",
+    paddingVertical:"20%",
+    width:"100%",
+    height:"100%",
+  },
+  overlayView:{
+    borderRadius: 20,
+    padding: 20,
+    alignItems: "center",
+    width: "100%",
+    height: "100%",
+    //backgroundColor:'#ff0000',
+  },
+  buttonValid:{
+    //borderWidth: 2,
+    width:'100%',
+    margin: 0,
+    borderRadius: 15,
+    padding: 10,
+    height:60,
+    alignItems: "center",
+    justifyContent: 'center',
+  },
+  
+});