Feat: ajout de la page d'ajout d'un nouvel artisant
This commit is contained in:
Amaël Kesteman
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
247
app/(tabs)/addArtisant.tsx
Normal file
247
app/(tabs)/addArtisant.tsx
Normal file
@@ -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,
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user