|
|
|
|
@@ -1,8 +1,10 @@
|
|
|
|
|
import { useChantier } from "@/app/ContextChantier";
|
|
|
|
|
import { Chantier } from "@/class/class";
|
|
|
|
|
import { getChantiers } from "@/services/ressourcesService";
|
|
|
|
|
import { useRouter } from "expo-router";
|
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
|
import {
|
|
|
|
|
ActivityIndicator,
|
|
|
|
|
Dimensions,
|
|
|
|
|
Image,
|
|
|
|
|
Pressable,
|
|
|
|
|
@@ -13,11 +15,10 @@ import {
|
|
|
|
|
import Animated, {
|
|
|
|
|
LinearTransition
|
|
|
|
|
} from "react-native-reanimated";
|
|
|
|
|
import { ThemedButton } from "./theme/themed-button";
|
|
|
|
|
import { ThemedText } from "./theme/themed-text";
|
|
|
|
|
import { ThemedTextInput } from "./theme/themed-textinput";
|
|
|
|
|
import { ThemedView } from "./theme/themed-view";
|
|
|
|
|
import { router } from "expo-router";
|
|
|
|
|
import { ThemedButton } from "@/components/theme/themed-button";
|
|
|
|
|
import { ThemedText } from "@/components/theme/themed-text";
|
|
|
|
|
import { ThemedTextInput } from "@/components/theme/themed-textinput";
|
|
|
|
|
import { ThemedView } from "@/components/theme/themed-view";
|
|
|
|
|
|
|
|
|
|
const screenHeight = Dimensions.get("window").height;
|
|
|
|
|
const { width, height } = Dimensions.get("window");
|
|
|
|
|
@@ -30,18 +31,14 @@ const { width, height } = Dimensions.get("window");
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
export default function SelectChantier(props: {
|
|
|
|
|
data?: any[];
|
|
|
|
|
multiple?: boolean;
|
|
|
|
|
selected?: string[] | string | null;
|
|
|
|
|
onChange?: (val: any) => void;
|
|
|
|
|
placeholder?: string;
|
|
|
|
|
}) {
|
|
|
|
|
const { data: propData, multiple = false, selected, onChange, placeholder } = props || {};
|
|
|
|
|
export default function SelectChantier() {
|
|
|
|
|
const { chantier, setChantier } = useChantier();
|
|
|
|
|
const [search, setSearch] = useState("");
|
|
|
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
|
const [chantiers, setChantiers] = useState<any[]>([]);
|
|
|
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
|
|
|
const [chantiers, setChantiers] = useState<Chantier[]>([]);
|
|
|
|
|
const router = useRouter();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const AnimatedThemedView = Animated.createAnimatedComponent(ThemedView);
|
|
|
|
|
const AnimatedThemedText = Animated.createAnimatedComponent(ThemedText);
|
|
|
|
|
@@ -50,29 +47,21 @@ export default function SelectChantier(props: {
|
|
|
|
|
Animated.createAnimatedComponent(ThemedTextInput);
|
|
|
|
|
|
|
|
|
|
async function onPressOpen(){
|
|
|
|
|
setIsLoaded(false);
|
|
|
|
|
setIsOpen(!isOpen);
|
|
|
|
|
if(!isOpen){
|
|
|
|
|
if (propData && propData.length) {
|
|
|
|
|
setChantiers(propData as any[]);
|
|
|
|
|
} else {
|
|
|
|
|
const updatedChantiers = await getChantiers();
|
|
|
|
|
setChantiers(updatedChantiers);
|
|
|
|
|
}
|
|
|
|
|
setIsLoaded(true);
|
|
|
|
|
setChantiers(updatedChantiers)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function onPressAddChantier(){
|
|
|
|
|
router.push('/(tabs)/addChantier')
|
|
|
|
|
router.push("/(tabs)/addChantier")
|
|
|
|
|
setIsOpen(false)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// If parent provided data, use it. Otherwise fetch chantiers.
|
|
|
|
|
if (propData && propData.length) {
|
|
|
|
|
setChantiers(propData as any[]);
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function loadChantiers() {
|
|
|
|
|
const list = await getChantiers();
|
|
|
|
|
setChantiers(list);
|
|
|
|
|
@@ -81,56 +70,22 @@ export default function SelectChantier(props: {
|
|
|
|
|
loadChantiers();
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
function getId(item: any) {
|
|
|
|
|
return (item && (item.id ?? item._id ?? item.uid ?? item.key)) ?? String(item);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getLabel(item: any) {
|
|
|
|
|
if (!item) return String(item);
|
|
|
|
|
if (item.adresse) return item.adresse;
|
|
|
|
|
if (item.nom) return item.nom;
|
|
|
|
|
if (item.name && item.last_name) return `${item.last_name} ${item.name}`;
|
|
|
|
|
if (item.name) return item.name;
|
|
|
|
|
if (item.label) return item.label;
|
|
|
|
|
if (typeof item === 'string') return item;
|
|
|
|
|
return JSON.stringify(item);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function selectChantier(item: any): void {
|
|
|
|
|
const id = String(getId(item));
|
|
|
|
|
if (multiple) {
|
|
|
|
|
// for multiple selection toggle id in selected array
|
|
|
|
|
const current = Array.isArray(selected) ? [...selected] : [];
|
|
|
|
|
const idx = current.indexOf(id);
|
|
|
|
|
if (idx >= 0) current.splice(idx, 1);
|
|
|
|
|
else current.push(id);
|
|
|
|
|
onChange?.(current);
|
|
|
|
|
// keep menu open for multiple selection
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// single selection
|
|
|
|
|
if (onChange) {
|
|
|
|
|
onChange(id);
|
|
|
|
|
} else {
|
|
|
|
|
// fallback behavior for old usage: if selecting a Chantier, update context
|
|
|
|
|
setChantier(item as Chantier);
|
|
|
|
|
}
|
|
|
|
|
function selectChantier(chantier: Chantier): void {
|
|
|
|
|
setChantier(chantier);
|
|
|
|
|
setIsOpen(false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const renderChantier = (item: any, index: number) => {
|
|
|
|
|
const label = getLabel(item);
|
|
|
|
|
const id = String(getId(item));
|
|
|
|
|
const isSelected = Array.isArray(selected) ? selected.includes(id) : selected === id;
|
|
|
|
|
const renderChantier = (chantier: Chantier, index: number) => {
|
|
|
|
|
return (
|
|
|
|
|
<Pressable key={index} onPress={() => selectChantier(item)}>
|
|
|
|
|
<ThemedView lvl={4} style={[styles.chantier, isSelected ? { borderWidth: 1 } : {}]}>
|
|
|
|
|
<Pressable key={index} onPress={() => selectChantier(chantier)}>
|
|
|
|
|
<ThemedView lvl={4} style={styles.chantier}>
|
|
|
|
|
<View>
|
|
|
|
|
<Image source={{ uri: "https://cdn.discordapp.com/attachments/1425108443571945644/1427207643180826757/raw.png?ex=69392bb2&is=6937da32&hm=dcc09e76d3dca89d2418947b46efbd38673b9dc559027724b2e51d493b173bc9&" }} style={styles.image} />
|
|
|
|
|
<Image source={{ uri:"https://cdn.discordapp.com/attachments/1425108443571945644/1427207643180826757/raw.png?ex=69392bb2&is=6937da32&hm=dcc09e76d3dca89d2418947b46efbd38673b9dc559027724b2e51d493b173bc9&" /*chantier.urlImg*/ }} style={styles.image} />
|
|
|
|
|
</View>
|
|
|
|
|
<View>
|
|
|
|
|
<ThemedText>{label}</ThemedText>
|
|
|
|
|
<ThemedText>Adresse: {chantier.adresse}</ThemedText>
|
|
|
|
|
<ThemedText>Chef de chantier: {chantier.chef.last_name}{" "}{chantier.chef.name}</ThemedText>
|
|
|
|
|
<ThemedText>État: {chantier.etat}</ThemedText>
|
|
|
|
|
</View>
|
|
|
|
|
</ThemedView>
|
|
|
|
|
</Pressable>
|
|
|
|
|
@@ -143,19 +98,7 @@ export default function SelectChantier(props: {
|
|
|
|
|
<AnimatedThemedView layout={LinearTransition.duration(200)} lvl={2} shadow={true} style={styles.window}>
|
|
|
|
|
<AnimatedThemedButton style={isOpen ? styles.buttonOpen : styles.buttonClose} lvl={isOpen ? 1 : 1} onPress={() => onPressOpen()}>
|
|
|
|
|
<ThemedText style={styles.buttonText}>
|
|
|
|
|
{isOpen
|
|
|
|
|
? "Fermer"
|
|
|
|
|
: (multiple
|
|
|
|
|
? (Array.isArray(selected) && selected.length ? `${selected.length} sélectionnés` : (placeholder ?? "Sélectionner"))
|
|
|
|
|
: (selected ? (() => {
|
|
|
|
|
// show label of selected single item if provided in propData
|
|
|
|
|
if (selected && propData) {
|
|
|
|
|
const found = propData.find((it: any) => String(getId(it)) === String(selected));
|
|
|
|
|
return found ? getLabel(found) : (chantier ? (chantier.adresse ?? getLabel(chantier)) : (placeholder ?? "Chantier"));
|
|
|
|
|
}
|
|
|
|
|
return chantier ? (chantier.adresse ?? getLabel(chantier)) : (placeholder ?? "Chantier");
|
|
|
|
|
})() : (placeholder ?? "Chantier"))
|
|
|
|
|
)}
|
|
|
|
|
{isOpen ? "Fermer" : (chantier!=null ? chantier.adresse : "Chantier")}
|
|
|
|
|
</ThemedText>
|
|
|
|
|
</AnimatedThemedButton>
|
|
|
|
|
{isOpen && (
|
|
|
|
|
@@ -168,14 +111,16 @@ export default function SelectChantier(props: {
|
|
|
|
|
+
|
|
|
|
|
</ThemedText>
|
|
|
|
|
</ThemedButton>
|
|
|
|
|
|
|
|
|
|
<ThemedView lvl={2} style={styles.list}>
|
|
|
|
|
<View style={styles.list}>
|
|
|
|
|
{isLoaded?
|
|
|
|
|
<ScrollView contentContainerStyle={styles.chantiersList}>
|
|
|
|
|
{chantiers.map((chantier, index) =>
|
|
|
|
|
renderChantier(chantier, index)
|
|
|
|
|
)}
|
|
|
|
|
</ScrollView>
|
|
|
|
|
</ThemedView>
|
|
|
|
|
: <ActivityIndicator style={{height:"100%"}} color="#808080" size="large" />}
|
|
|
|
|
</View>
|
|
|
|
|
|
|
|
|
|
</View>
|
|
|
|
|
)}
|
|
|
|
|
</AnimatedThemedView>
|
|
|
|
|
@@ -278,5 +223,8 @@ const styles = StyleSheet.create({
|
|
|
|
|
buttonAdd:{
|
|
|
|
|
borderRadius: 10,
|
|
|
|
|
marginBottom: 10,
|
|
|
|
|
height: 30,
|
|
|
|
|
alignItems: 'center',
|
|
|
|
|
justifyContent: 'center',
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|