add en un seul écran, composant lié aux add dans un dossier /composants/add
This commit is contained in:
Rochas
246
components/add/addArtisant.tsx
Normal file
246
components/add/addArtisant.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
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 '../../app/ContextChantier';
|
||||
import { useRessources } from '../../app/ContextRessource';
|
||||
import { useUser } from '../../app/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/add/select/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,
|
||||
},
|
||||
header: {
|
||||
marginTop:30,
|
||||
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,
|
||||
}
|
||||
});
|
||||
303
components/add/addChantier.tsx
Normal file
303
components/add/addChantier.tsx
Normal file
@@ -0,0 +1,303 @@
|
||||
import ChantierSummary from '@/components/chantierSummary';
|
||||
import SelectChantier from '@/components/selectChantier';
|
||||
|
||||
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 '../../app/ContextChantier';
|
||||
import { useRessources } from '../../app/ContextRessource';
|
||||
import { useUser } from '../../app/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/add/select/selectChefChantier';
|
||||
import SelectRessource from '@/components/add/select/selectRessource';
|
||||
import { db } from '@/firebase_config';
|
||||
import { doc } from 'firebase/firestore';
|
||||
|
||||
type RessourcesQte = [Ressources, number];
|
||||
|
||||
//Uniquement accessible par le RESPONSSABLE du chantier
|
||||
//Pour créer ou modifier un chantier
|
||||
export default function AddChantier() {
|
||||
const { chantier, setChantier } = useChantier();
|
||||
const { user, setUser } = useUser();
|
||||
const { ressources, setRessources } = useRessources();
|
||||
|
||||
const [editMode,setEditMode] = useState(false);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [objet, setObjet] = useState('');
|
||||
const [date, setDate] = useState(new Date());
|
||||
const [morning, setMorning] = useState(true);
|
||||
const [chefChantier, setChefChantier] = useState<User>();
|
||||
const [adresse, setAdresse] = useState('');
|
||||
const [duree, setDuree] = useState('');
|
||||
const [contact, setContact] = useState('');
|
||||
const [machines, setMachines] = useState<RessourcesQte[]>();
|
||||
const [ouvriers, setOuviers] = useState<RessourcesQte[]>();
|
||||
|
||||
const [showDateSelect,setSowDateSelect] = useState(false);
|
||||
const [openConfirmation,setOpenConfirmation] = useState(false);
|
||||
|
||||
const [userSelect, setUserSelect] = useState<string[]>([]);
|
||||
const [ressourcesSelect, setRessourcesSelect] = useState<string[]>([]);
|
||||
|
||||
async function handleAddChantier() {
|
||||
setLoading(true);
|
||||
setOpenConfirmation(true);
|
||||
}
|
||||
|
||||
|
||||
const onSelectDate = (event: DateTimePickerEvent, selectedDate?: Date) => {
|
||||
setSowDateSelect(false);
|
||||
if (selectedDate) {
|
||||
setDate(selectedDate);
|
||||
}
|
||||
};
|
||||
async function onConfirm(): Promise<void> {
|
||||
if (!isValidChantier() || !chefChantier) return;
|
||||
const chantierDate = new Date(date);
|
||||
chantierDate.setHours(morning ? 0 : 12, 0, 0, 0);
|
||||
//CREATE NEW TYPE CHANTIER FOR FIRESTORE
|
||||
const chantierFirestore = {
|
||||
adresse,
|
||||
etat: "En cours",
|
||||
contact,
|
||||
chef: doc(db, "user", chefChantier.id),
|
||||
equipe: [],
|
||||
/*materiel: materiels
|
||||
? [doc(db, "ressources", String(materiels.id))]
|
||||
: [],*/
|
||||
vehicules: machines?.map(e =>
|
||||
doc(db, "ressources", String(e[0].id))
|
||||
) || [],
|
||||
anomalies: [],
|
||||
dateDep: chantierDate,
|
||||
tempsEst: parseInt(duree) || 1,
|
||||
latitude: 0, //TODO
|
||||
longitude: 0, //TODO
|
||||
};
|
||||
const id = await addChantier(chantierFirestore as any);
|
||||
if (id) {
|
||||
//console.log("Chantier created with ID:", id);
|
||||
setChantier({ ...chantierFirestore,
|
||||
id,
|
||||
chef: chefChantier,
|
||||
equipe: [],
|
||||
materiel: [],//materiels ? [materiels] : [],
|
||||
vehicules: [], //data.map(([ressource]) => ressource)|| []
|
||||
} as Chantier);
|
||||
setOpenConfirmation(false);
|
||||
}
|
||||
}
|
||||
|
||||
function onCancel(): void {
|
||||
setOpenConfirmation(false);
|
||||
}
|
||||
|
||||
function isValidChantier(): boolean {
|
||||
return objet!=="" && duree!=='' && adresse!=='' && contact!=='' && chefChantier!==undefined; //TODO
|
||||
}
|
||||
|
||||
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}}>Objet: {objet===''?"NONE":objet}</ThemedText>
|
||||
<ThemedText style={{fontSize: 20}}>Date: {date.toLocaleDateString()} {morning ? "matin" : "après-midi"}</ThemedText>
|
||||
<ThemedText style={{fontSize: 20}}>Durée: {duree===''?"0":duree} demi-journées</ThemedText>
|
||||
<ThemedText style={{fontSize: 20}}>Adresse: {adresse===''?"NONE":adresse}</ThemedText>
|
||||
<ThemedText style={{fontSize: 20}}>Contact client: {contact===''?"NONE":contact}</ThemedText>
|
||||
<ThemedText style={{fontSize: 20}}>Chef de chantier: {chefChantier===undefined?"NONE":chefChantier.name}</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:"48%"}]}>
|
||||
<ThemedButton>
|
||||
<ThemedText onPress={() => setSowDateSelect(true)} style = {{borderRadius:10}}>{date.toLocaleDateString()}</ThemedText>
|
||||
</ThemedButton>
|
||||
</ThemedView>
|
||||
<ThemedView style = {[styles.input,{width:"48%"}]}>
|
||||
<ThemedButton>
|
||||
<ThemedText onPress={() => setMorning(!morning)} style = {{borderRadius:10}}>{morning ? "matin" : "après-midi"}</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 nouveau chantier"}
|
||||
</ThemedText>
|
||||
{renderInut("Objet","Renovation",objet,setObjet,false)}
|
||||
{//renderInut("Date de départ","TOTO : JOUR + Demi journé",date,setDate)
|
||||
}
|
||||
{renderInutDate("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)}
|
||||
<View style = {styles.inputLine}>
|
||||
<ThemedText style = {styles.inputName}>Chef de chantier:</ThemedText>
|
||||
<SelectChafChantier style = {styles.input} sendChefChantier={setChefChantier}/>
|
||||
</View>
|
||||
<View style = {styles.inputLine}>
|
||||
<ThemedText style = {styles.inputName}>Vehicules et machines:</ThemedText>
|
||||
<SelectRessource style={styles.input} sendRessources={setMachines} ressourceType="Machine"/>
|
||||
</View>
|
||||
<View style = {styles.inputLine}>
|
||||
<ThemedText style = {styles.inputName}>Ouvriers:</ThemedText>
|
||||
<SelectRessource style={styles.input} sendRessources={setOuviers} ressourceType="Ouvrier"/>
|
||||
</View>
|
||||
<View style = {styles.inputLine}>
|
||||
<ThemedText style = {styles.inputName}>Outils:</ThemedText>
|
||||
<SelectRessource style={styles.input} sendRessources={setOuviers} ressourceType="Outil"/>
|
||||
</View>
|
||||
|
||||
|
||||
<ThemedButton
|
||||
lvl={1}
|
||||
shadow={true}
|
||||
style={{ padding: 15, borderRadius: 8, marginTop: 10 }}
|
||||
onPress={() => handleAddChantier()}
|
||||
>
|
||||
<ThemedText>Valider</ThemedText>
|
||||
</ThemedButton>
|
||||
|
||||
{openConfirmation && renderValidationScreen()}
|
||||
</View>
|
||||
|
||||
</ScrollView>
|
||||
</View>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
back:{
|
||||
height:"100%",
|
||||
width:"100%",
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
marginTop:30,
|
||||
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,
|
||||
}
|
||||
});
|
||||
216
components/add/addRessource.tsx
Normal file
216
components/add/addRessource.tsx
Normal file
@@ -0,0 +1,216 @@
|
||||
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 '@/app/ContextChantier';
|
||||
import { useRessources } from '@/app/ContextRessource';
|
||||
import { useUser } from '@/app/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/add/select/selectChefChantier';
|
||||
import SelectMachine from '@/components/selectMachine';
|
||||
|
||||
|
||||
type Dictionary = {
|
||||
[key: string]: string;
|
||||
};
|
||||
|
||||
const exempleNom: Dictionary = {
|
||||
'Outil': "Boîte à outils",
|
||||
'Machine': "Bulldozer",
|
||||
'Ouvrier': "Charpentier"
|
||||
};
|
||||
|
||||
const exempleQte: Dictionary = {
|
||||
'Outil': "12",
|
||||
'Machine': "1",
|
||||
'Ouvrier': "12"
|
||||
};
|
||||
|
||||
type Props = {
|
||||
ressourceType: 'Outil' | 'Machine' | 'Ouvrier';
|
||||
};
|
||||
|
||||
export default function AddRessource({ressourceType, ...otherProps }: Props) {
|
||||
const { ressources, setRessources } = useRessources();
|
||||
|
||||
const [editMode,setEditMode] = useState(false);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [nom, setNom] = useState('');
|
||||
const [quantite, setQuantite] = useState('');
|
||||
const [quantiteDisponible,setQuantiteDisponible] = useState('');
|
||||
const [openConfirmation,setOpenConfirmation] = useState(false);
|
||||
|
||||
async function handleAddRessource() {
|
||||
setLoading(true);
|
||||
setOpenConfirmation(true);
|
||||
}
|
||||
|
||||
async function onConfirm(): Promise<void> {
|
||||
//TODO
|
||||
//await changeChantierStatus(chantier.id,tempStatus)
|
||||
//Il faut changer le UX
|
||||
//setChantier({...chantier,etat: tempStatus})
|
||||
if(isValidRessource()){
|
||||
setOpenConfirmation(false);
|
||||
}
|
||||
}
|
||||
|
||||
function onCancel(): void {
|
||||
setOpenConfirmation(false);
|
||||
}
|
||||
function isValidRessource():Boolean{
|
||||
return nom!= "" && quantite != "" && quantiteDisponible != ""
|
||||
}
|
||||
|
||||
const renderValidationScreen = () => {
|
||||
return(
|
||||
<Modal transparent={true} >
|
||||
<View style={styles.overlay}>
|
||||
<ThemedView style={styles.overlayView}>
|
||||
<ThemedText style={{fontSize: 25}}>Créer la nouvelle {ressourceType} suivante ? :</ThemedText>
|
||||
<ThemedView lvl={2} style={styles.summaryNewChantier}>
|
||||
<ThemedText style={{fontSize: 20}}>Nom: {nom===''?"NONE":nom}</ThemedText>
|
||||
<ThemedText style={{fontSize: 20}}>Quantité Total: {quantite===''?"0":quantite} </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 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 une ressource " + ressourceType}
|
||||
</ThemedText>
|
||||
{renderInut("Nom",exempleNom[ressourceType],nom,setNom,false)}
|
||||
{renderInut("Quantité Total",exempleQte[ressourceType],quantite,setQuantite,true)}
|
||||
<ThemedButton
|
||||
lvl={1}
|
||||
shadow={true}
|
||||
style={{ padding: 15, borderRadius: 8, marginTop: 10 }}
|
||||
onPress={() => handleAddRessource()}
|
||||
>
|
||||
<ThemedText>Valider</ThemedText>
|
||||
</ThemedButton>
|
||||
|
||||
{openConfirmation && renderValidationScreen()}
|
||||
</View>
|
||||
|
||||
</ScrollView>
|
||||
</View>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
back:{
|
||||
height:"100%",
|
||||
width:"100%",
|
||||
},
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
header: {
|
||||
marginTop:30,
|
||||
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,
|
||||
}
|
||||
});
|
||||
68
components/add/select/ressourceSummary.tsx
Normal file
68
components/add/select/ressourceSummary.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
import { Chantier, Ressources } from '@/class/class';
|
||||
import { ThemedView, } from '@/components/theme/themed-view';
|
||||
import React, { useState } from 'react';
|
||||
import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
|
||||
import { ThemedText } from '@/components/theme/themed-text';
|
||||
import { ThemedButton } from '@/components/theme/themed-button';
|
||||
|
||||
type RessourcesQte = [Ressources, number];
|
||||
|
||||
type Props = {
|
||||
ressource:Ressources;
|
||||
qte:number;
|
||||
sendRessource: (ressource: RessourcesQte) => void;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
};
|
||||
|
||||
export default function RessourceSummary({ressource: ressource,qte,style,sendRessource: sendRessource, ...otherProps }: Props) {
|
||||
|
||||
|
||||
const [count,setCount] = useState(qte);
|
||||
|
||||
function onPressAdd(ressource: Ressources): void {
|
||||
if(count<ressource.quantity){
|
||||
setCount(count+1);
|
||||
sendRessource([ressource, count+1]);
|
||||
}
|
||||
}
|
||||
|
||||
function onPressSub(ressource: Ressources): void {
|
||||
if(count>0){
|
||||
setCount(count-1);
|
||||
sendRessource([ressource, count-1]);
|
||||
}
|
||||
}
|
||||
|
||||
return(
|
||||
<View style={style}>
|
||||
<ThemedView lvl={2} border={3} style={{padding:10,width:"100%",borderRadius:10,flexDirection: 'row',justifyContent: 'space-between',}}>
|
||||
<View>
|
||||
<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(ressource)}>
|
||||
<ThemedText>+</ThemedText>
|
||||
</ThemedButton>
|
||||
<ThemedText>{count}/{ressource.quantity}</ThemedText>
|
||||
<ThemedButton style={styles.button} lvl={3} onPress={() => onPressSub(ressource)}>
|
||||
<ThemedText>-</ThemedText>
|
||||
</ThemedButton>
|
||||
</View>
|
||||
</ThemedView>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
button:{
|
||||
padding:5,
|
||||
marginHorizontal:10,
|
||||
alignItems:"center",
|
||||
borderRadius: 20,
|
||||
width: 40,
|
||||
height: 40,
|
||||
},
|
||||
});
|
||||
155
components/add/select/selectChefChantier.tsx
Normal file
155
components/add/select/selectChefChantier.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
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 { User } from '@/class/class';
|
||||
import { getUsers } from "@/services/ressourcesService";
|
||||
|
||||
const { width, height } = Dimensions.get("window");
|
||||
|
||||
type Props = {
|
||||
sendChefChantier: (user: User) => void;
|
||||
style?: StyleProp<ViewStyle>;
|
||||
};
|
||||
|
||||
export default function SelectChafChantier({style,sendChefChantier , ...otherProps }: Props) {
|
||||
|
||||
const [chefDeChantier, setChefDeChantier] = useState<User>();
|
||||
const [isOpen,setIsOpen] = useState(false);
|
||||
const [users,setUsers] = useState<User[]>([]);
|
||||
|
||||
const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
|
||||
|
||||
useEffect(() => {
|
||||
async function loadData() {
|
||||
try {
|
||||
const data = await getUsers();//TODO chef de chantier uniquement
|
||||
const chefs = data.filter(user => user.role === "chef");
|
||||
setUsers(chefs);
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du chargement :", error);
|
||||
}
|
||||
}
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
|
||||
function onPressOpen(): void {
|
||||
setIsOpen(!isOpen);
|
||||
}
|
||||
|
||||
function onPressUser(user: User): void{
|
||||
sendChefChantier(user);
|
||||
setChefDeChantier(user);
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
const chefChantierSummary = ({ item }: { item: User }) => {
|
||||
if (!item) return null;
|
||||
return(
|
||||
<View style={{padding:10,width:"100%"}}>
|
||||
<ThemedButton lvl={2} style={{padding:10,width:"100%",borderRadius:10}} onPress={() => {onPressUser(item)}}>
|
||||
<ThemedText>{item.name}</ThemedText>
|
||||
<ThemedText>{item.last_name}</ThemedText>
|
||||
<ThemedText>{item.role}</ThemedText>
|
||||
</ThemedButton>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
const chefChantierSearch = () => {
|
||||
return(
|
||||
<Modal transparent={true}>
|
||||
<View style={styles.overlay}>
|
||||
<ThemedView style={styles.overlayView}>
|
||||
<ThemedText style={{fontSize: 25}}>Rechercher un chef de chantier :</ThemedText>
|
||||
<FlatList
|
||||
style={{width:"100%"}}
|
||||
data={users}
|
||||
renderItem={chefChantierSummary}
|
||||
keyExtractor={(_, index) => index.toString()}
|
||||
/>
|
||||
<ThemedButton lvl={2} border={5} style={styles.buttonValid} onPress={() => setIsOpen(false)}>
|
||||
<ThemedText style={{fontSize: 25}}>Annuler</ThemedText>
|
||||
</ThemedButton>
|
||||
</ThemedView>
|
||||
</View>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
return(
|
||||
<ThemedButton style={style} lvl={1} onPress={() => onPressOpen()}>
|
||||
<ThemedText style={styles.centeredText}>{chefDeChantier?chefDeChantier.name+" "+chefDeChantier.last_name:"selectionner un chef de chantier"}</ThemedText>
|
||||
{isOpen && chefChantierSearch()}
|
||||
</ThemedButton>
|
||||
)
|
||||
}
|
||||
|
||||
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',
|
||||
},
|
||||
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',
|
||||
},
|
||||
});
|
||||
154
components/add/select/selectRessource.tsx
Normal file
154
components/add/select/selectRessource.tsx
Normal file
@@ -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 '@/components/theme/themed-button';
|
||||
import { ThemedText } from '@/components/theme/themed-text';
|
||||
import { ThemedView } from "@/components/theme/themed-view";
|
||||
import { Ressources, User } from '@/class/class';
|
||||
import { getRessources } from "@/services/ressourcesService";
|
||||
import RessourceSummary from '@/components/add/select/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',
|
||||
},
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user