Feat: ajout de la page d'ajout d'un nouvel artisant

app/(tabs)/_layout.tsx

@@ -11,6 +11,7 @@ import Home from './home';
 import MapScreen from './mapScreen';
 import AddChantier from './addChantier';
 import AddRessource from './addRessource';
+import AddArtisant from './addArtisant';
 import AntDesign from '@expo/vector-icons/AntDesign';
 import { UserProvider } from '../ContextUser';
 import { ChantierProvider } from '../ContextChantier';
@@ -81,7 +82,18 @@ export default function TabLayout() {
         name="addRessource"
         component={AddRessource}
         options={{
-          title: 'Ajouter',
+          title: 'Ressources',
+          tabBarIcon: ({ color }) => (
+            <AntDesign name="plus" size={24} color={color} />
+          ),
+        }}
+      />
+
+        <Tabs.Screen
+        name="addArtisant"
+        component={AddArtisant}
+        options={{
+          title: 'Artisants',
           tabBarIcon: ({ color }) => (
             <AntDesign name="plus" size={24} color={color} />
           ),
@@ -89,7 +101,6 @@ export default function TabLayout() {
       />
 
 
-
     </Tabs.Navigator>
   );
 }

app/(tabs)/addArtisant.tsx

@@ -0,0 +1,247 @@
+import ChantierSummary from '@/components/chantierSummary';
+import SelectChantier from '@/components/selectChantier';
+import SetStatus from '@/components/setStatus';
+
+
+import { ThemedView } from '@/components/theme/themed-view';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, ScrollView, Button, TextInput, Text, View, Modal } from 'react-native';
+import { useChantier } from '../ContextChantier';
+import { useRessources } from '../ContextRessource';
+import { useUser } from '../ContextUser';
+import { getRessources, getUsers, addChantier } from '@/services/ressourcesService';
+import { Chantier, Ressources, User } from '@/class/class';
+import { ThemedText } from '@/components/theme/themed-text';
+import { ThemedButton } from '@/components/theme/themed-button';
+import { ThemedTextInput } from '@/components/theme/themed-textinput';
+import DateTimePicker, { DateTimePickerEvent } from '@react-native-community/datetimepicker';
+
+import Constants from 'expo-constants'; //pour connaître la taille de la barre menu de l'OS en haut
+import SelectChafChantier from '@/components/selectChefChantier';
+import SelectMachine from '@/components/selectMachine';
+
+//Uniquement accessible par le RESPONSSABLE du chantier
+//Pour créer ou modifier un chantier
+export default function AddArtisant() {
+  const { chantier, setChantier } = useChantier();
+  const { user, setUser } = useUser();
+  const { ressources, setRessources } = useRessources();
+  
+  const [editMode,setEditMode] = useState(false);
+
+  const [loading, setLoading] = useState(false);
+  const [nom, setNom] = useState('');
+  const [qualifications, setQualifications] = useState('');
+  const [date, setDate] = useState(new Date());
+  const [contact, setContact] = useState('');
+
+  const [showDateSelect,setSowDateSelect] = useState(false);
+  const [openConfirmation,setOpenConfirmation] = useState(false);
+
+  const [userSelect, setUserSelect] = useState<string[]>([]);
+  const [ressourcesSelect, setRessourcesSelect] = useState<string[]>([]);
+
+  async function handleAddArtisant() {
+    setLoading(true);
+    setOpenConfirmation(true);
+  }
+
+
+  const onSelectDate = (event: DateTimePickerEvent, selectedDate?: Date) => {
+    setSowDateSelect(false);
+    if (selectedDate) {
+      setDate(selectedDate);
+    }
+  };
+
+      async function onConfirm(): Promise<void> {
+        //TODO
+        //await changeChantierStatus(chantier.id,tempStatus)
+        //Il faut changer le UX 
+        //setChantier({...chantier,etat: tempStatus})
+        if(isValidChantier()){
+          setOpenConfirmation(false);
+        }
+      }
+
+      function onCancel(): void {
+        setOpenConfirmation(false);
+      }
+
+      function isValidChantier(): boolean {
+        return nom=="" && qualifications!=='' && contact!=='' 
+      }
+
+  const renderValidationScreen = () => {
+    return(
+      <Modal transparent={true} >
+        <View style={styles.overlay}>
+          <ThemedView style={styles.overlayView}>
+            <ThemedText style={{fontSize: 25}}>Créer le nouveau chantier suivant ? :</ThemedText>
+            <ThemedView lvl={2} style={styles.summaryNewChantier}>
+              <ThemedText style={{fontSize: 20}}>Nom: {nom===''?"NONE":nom}</ThemedText>
+              <ThemedText style={{fontSize: 20}}>Qualifications : {qualifications===''?"NONE":qualifications}</ThemedText>
+
+              <ThemedText style={{fontSize: 20}}>Date: {date.toLocaleDateString()}</ThemedText>
+              <ThemedText style={{fontSize: 20}}>Contact  {contact===''?"NONE":contact}</ThemedText>
+
+            </ThemedView>
+            <View style={styles.overlayView}>
+              <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onConfirm()}>
+                <ThemedText style={{fontSize: 25}}>Confirmer</ThemedText>
+              </ThemedButton>
+            </View>
+            <View style={styles.overlayView}>
+              <ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => onCancel()}>
+                <ThemedText style={{fontSize: 25}}>Annuler</ThemedText>
+              </ThemedButton>
+            </View>
+          </ThemedView>
+        </View>
+      </Modal>
+    )
+  }
+
+  const renderInutDate = (name : string) => {
+    return (
+        <View style = {styles.inputLine}>
+          <ThemedText style = {styles.inputName}>{name}:</ThemedText>
+          <View style={{flexDirection: 'row', gap: "4%",}}>
+            <ThemedView style = {[styles.input,{width:"100%"}]}>
+              <ThemedButton>
+                <ThemedText  onPress={() => setSowDateSelect(true)} style = {{borderRadius:10}}>{date.toLocaleDateString()}</ThemedText>
+              </ThemedButton>
+            </ThemedView>
+
+            {showDateSelect && (
+            <DateTimePicker
+              value={date}
+              mode="date"      // "time" ou "datetime" selon les besoins
+              display="default"
+              onChange={onSelectDate}
+            />
+            )}
+          </View>
+        </View>
+    );
+  };
+
+  const renderInut = (name : string, preFill : string, value : string, setValue : ((text:string) => void),numeric:boolean) => {
+    return (
+        <View style = {styles.inputLine}>
+          <ThemedText style = {styles.inputName}>{name}:</ThemedText>
+          <ThemedTextInput lvl = {1} style = {styles.input} placeholder={preFill} value = {value} keyboardType={numeric ? "numeric" : "default"} onChangeText={setValue} />
+        </View>
+    );
+  };
+
+
+  return (
+    <ThemedView lvl={3} style={styles.back}>
+      <View style={styles.container}>
+        {editMode &&
+        <View style={{width:"100%", position: 'absolute'}}>
+          <SelectChantier></SelectChantier>
+        </View>
+        }
+        <ScrollView>
+          <View style = {styles.header}>
+            
+            <ThemedText style = {styles.text}>
+              {editMode? "Edition d'un chantier"
+              :"Ajouter un nouvel artisant"}
+            </ThemedText>
+            {renderInut("Nom","Jean Dupont",nom,setNom,false)}
+            {//renderInut("Date de départ","TOTO : JOUR + Demi journé",date,setDate)
+            }
+            {renderInut("Qualifications","Plombier",qualifications,setQualifications,false)}
+            {renderInutDate("Date d'arrivée")}
+            {renderInut("Contact artisant","07 01 02 03 04 05",contact,setContact,true)}
+            <ThemedButton
+              lvl={1}
+              shadow={true}
+              style={{ padding: 15, borderRadius: 8, marginTop: 10 }}
+              onPress={() => handleAddArtisant()}
+              >
+                <ThemedText>Valider</ThemedText>
+            </ThemedButton>
+
+            {openConfirmation && renderValidationScreen()}
+          </View>
+          
+        </ScrollView>
+      </View>
+    </ThemedView>
+  );
+}
+
+const styles = StyleSheet.create({
+  back:{
+    height:"100%",
+    width:"100%",
+  },
+  container: {
+    flex: 1,
+    marginTop: Constants.statusBarHeight, //pour la barre menu du haut
+  },
+  header: {
+    marginTop:60,
+    alignItems: "center",
+    paddingHorizontal: 20,
+  },
+  text: {
+    fontSize: 22,
+    fontWeight: "bold",
+    marginBottom: 10,
+  },
+  inputBack: {
+    width: "100%",
+    borderRadius: 10,
+    backgroundColor: "transparent",
+  },
+  inputLine:{
+    width: "100%",
+    //flexDirection: 'row',
+    paddingVertical: 5,
+    //alignItems: "center",
+  },
+  inputName: {
+    fontSize: 16,
+  },
+  input: {
+    width: "100%",
+    borderRadius: 10,
+    padding: 10,
+    fontSize: 16,
+  },
+  overlay:{
+    backgroundColor:'#00000080',
+    padding:"5%",
+    paddingVertical:"20%",
+    width:"100%",
+    height:"100%",
+  },
+  overlayView:{
+    borderRadius: 20,
+    padding: 20,
+    alignItems: "center",
+    width: "100%",
+    gap:5,
+    //backgroundColor:'#ff0000',
+  },
+    buttonValid:{
+    //borderWidth: 2,
+    width:'100%',
+    margin: 0,
+    borderRadius: 15,
+    padding: 10,
+    height:60,
+    alignItems: "center",
+    justifyContent: 'center',
+  },
+  summaryNewChantier:{
+    width:'100%',
+    borderRadius: 15,
+    padding:10,
+  }
+});