add en un seul écran, composant lié aux add dans un dossier /composants/add
This commit is contained in:
Rochas
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