mirror of
https://github.com/urosran/cally.git
synced 2025-11-26 16:34:54 +00:00
changes to calendar and UI
This commit is contained in:
ivic00
@ -3,7 +3,11 @@ import React, { useState } from "react";
|
||||
import { Button, View, Text, Checkbox } from "react-native-ui-lib";
|
||||
import { StyleSheet } from "react-native";
|
||||
import { colorMap } from "@/contexts/SettingsContext";
|
||||
import { TouchableOpacity } from "react-native-gesture-handler";
|
||||
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
|
||||
import GoogleIcon from "@/assets/svgs/GoogleIcon";
|
||||
import AppleIcon from "@/assets/svgs/AppleIcon";
|
||||
import OutlookIcon from "@/assets/svgs/OutlookIcon";
|
||||
import CloseXIcon from "@/assets/svgs/CloseXIcon";
|
||||
|
||||
const CalendarSettingsPage = (props: {
|
||||
setSelectedPage: (page: number) => void;
|
||||
@ -11,90 +15,160 @@ const CalendarSettingsPage = (props: {
|
||||
const [selectedColor, setSelectedColor] = useState<string>(colorMap.pink);
|
||||
const [startDate, setStartDate] = useState<boolean>(true);
|
||||
return (
|
||||
<View marginH-30>
|
||||
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
|
||||
<View row marginT-20 marginB-35 centerV>
|
||||
<Ionicons name="chevron-back" size={22} color="#979797" />
|
||||
<Text text70 color="#979797">Return to main settings</Text>
|
||||
<ScrollView>
|
||||
<View marginH-30>
|
||||
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
|
||||
<View row marginT-20 marginB-35 centerV>
|
||||
<Ionicons name="chevron-back" size={22} color="#979797" />
|
||||
<Text text70 color="#979797">
|
||||
Return to main settings
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<Text text60R>Calendar settings</Text>
|
||||
<View style={styles.card}>
|
||||
<Text text70 marginB-14>
|
||||
Event Color Preference
|
||||
</Text>
|
||||
<View row spread>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.pink)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
|
||||
{selectedColor == colorMap.pink && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.orange)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.orange}>
|
||||
{selectedColor == colorMap.orange && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.green)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.green}>
|
||||
{selectedColor == colorMap.green && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.teal)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.teal}>
|
||||
{selectedColor == colorMap.teal && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.purple)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
|
||||
{selectedColor == colorMap.purple && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<Text text60R>Calendar settings</Text>
|
||||
<View style={styles.card}>
|
||||
<Text text70 marginB-14>
|
||||
Event Color Preference
|
||||
</Text>
|
||||
<View row spread>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.pink)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.pink}>
|
||||
{selectedColor == colorMap.pink && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
<View style={styles.card}>
|
||||
<Text text70>Weekly Start Date</Text>
|
||||
<View row marginV-5 marginT-20>
|
||||
<Checkbox
|
||||
value={startDate}
|
||||
style={styles.checkbox}
|
||||
color="#ea156d"
|
||||
onValueChange={() => setStartDate(true)}
|
||||
/>
|
||||
<View row marginL-8>
|
||||
<Text text70>Sundays</Text>
|
||||
<Text text70 color="gray">
|
||||
{" "}
|
||||
(default)
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.orange)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.orange}>
|
||||
{selectedColor == colorMap.orange && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.green)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.green}>
|
||||
{selectedColor == colorMap.green && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.teal)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.teal}>
|
||||
{selectedColor == colorMap.teal && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={() => setSelectedColor(colorMap.purple)}>
|
||||
<View style={styles.colorBox} backgroundColor={colorMap.purple}>
|
||||
{selectedColor == colorMap.purple && (
|
||||
<AntDesign name="check" size={30} color="white" />
|
||||
)}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.card}>
|
||||
<Text text70>Weekly Start Date</Text>
|
||||
<View row marginV-5 marginT-20>
|
||||
<Checkbox
|
||||
value={startDate}
|
||||
style={styles.checkbox}
|
||||
color="#ea156d"
|
||||
onValueChange={() => setStartDate(true)}
|
||||
/>
|
||||
<View row marginL-8>
|
||||
<Text text70>Sundays</Text>
|
||||
<Text text70 color="gray">
|
||||
{" "}
|
||||
(default)
|
||||
</View>
|
||||
<View row marginV-5>
|
||||
<Checkbox
|
||||
value={!startDate}
|
||||
style={styles.checkbox}
|
||||
color="#ea156d"
|
||||
onValueChange={() => setStartDate(false)}
|
||||
/>
|
||||
<Text text70 marginL-8>
|
||||
Mondays
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View row marginV-5>
|
||||
<Checkbox
|
||||
value={!startDate}
|
||||
style={styles.checkbox}
|
||||
color="#ea156d"
|
||||
onValueChange={() => setStartDate(false)}
|
||||
/>
|
||||
<Text text70 marginL-8>
|
||||
Mondays
|
||||
</Text>
|
||||
|
||||
<Text text60R marginT-30 marginB-25>
|
||||
Add Calendar
|
||||
</Text>
|
||||
|
||||
<Button
|
||||
label="Connect Google"
|
||||
iconSource={() => (
|
||||
<View marginR-15>
|
||||
<GoogleIcon />
|
||||
</View>
|
||||
)}
|
||||
style={styles.addCalBtn}
|
||||
color="black"
|
||||
text70BL
|
||||
/>
|
||||
<Button
|
||||
label="Connect Apple"
|
||||
iconSource={() => (
|
||||
<View marginR-15>
|
||||
<AppleIcon />
|
||||
</View>
|
||||
)}
|
||||
style={styles.addCalBtn}
|
||||
color="black"
|
||||
text70BL
|
||||
/>
|
||||
<Button
|
||||
label="Connect Outlook"
|
||||
iconSource={() => (
|
||||
<View marginR-15>
|
||||
<OutlookIcon />
|
||||
</View>
|
||||
)}
|
||||
style={styles.addCalBtn}
|
||||
color="black"
|
||||
text70BL
|
||||
/>
|
||||
|
||||
<Text text60R marginT-30 marginB-20>
|
||||
Connected Calendars
|
||||
</Text>
|
||||
|
||||
<View style={styles.card} gap-15>
|
||||
<View row spread centerV>
|
||||
<View row centerV>
|
||||
<GoogleIcon width={30} height={30} style={{marginRight: 5}}/>
|
||||
<Text text70>Google Calendar name</Text>
|
||||
</View>
|
||||
<CloseXIcon />
|
||||
</View>
|
||||
|
||||
<View row spread centerV>
|
||||
<View row centerV>
|
||||
<AppleIcon />
|
||||
<Text text70>Google Calendar name</Text>
|
||||
</View>
|
||||
<CloseXIcon />
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
addCalBtn: {
|
||||
backgroundColor: "#ffffff",
|
||||
marginBottom: 15,
|
||||
justifyContent: "flex-start",
|
||||
paddingLeft: 25,
|
||||
},
|
||||
backBtn: {
|
||||
backgroundColor: "red",
|
||||
marginLeft: -2,
|
||||
|
||||
@ -1,83 +1,85 @@
|
||||
import {Text, TouchableOpacity, View} from "react-native-ui-lib";
|
||||
import React, {useState} from "react";
|
||||
import {Ionicons} from "@expo/vector-icons";
|
||||
import {ScrollView, StyleSheet,} from "react-native";
|
||||
import { Text, TouchableOpacity, View } from "react-native-ui-lib";
|
||||
import React, { useState } from "react";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { ScrollView, StyleSheet } from "react-native";
|
||||
import MyProfile from "./user_settings_views/MyProfile";
|
||||
import MyGroup from "./user_settings_views/MyGroup";
|
||||
|
||||
const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
|
||||
const [selectedView, setSelectedView] = useState<boolean>(true);
|
||||
return (
|
||||
<View flexG>
|
||||
<ScrollView style={{paddingBottom: 20, minHeight: "100%"}}>
|
||||
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
|
||||
<View row marginT-20 marginL-20 marginB-35 centerV>
|
||||
<Ionicons name="chevron-back" size={22} color="#979797"/>
|
||||
<Text text70 color="#979797">
|
||||
Return to main settings
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View marginH-20 flexG style={{minHeight: "90%"}}>
|
||||
<Text text60R marginB-25>
|
||||
User Management
|
||||
</Text>
|
||||
<View style={styles.buttonSwitch} spread row>
|
||||
<TouchableOpacity
|
||||
onPress={() => setSelectedView(true)}
|
||||
centerV
|
||||
centerH
|
||||
style={
|
||||
selectedView == true ? styles.btnSelected : styles.btnNot
|
||||
}
|
||||
>
|
||||
<View>
|
||||
<Text text70 color={selectedView ? "white" : "black"}>
|
||||
My Profile
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => setSelectedView(false)}
|
||||
centerV
|
||||
centerH
|
||||
style={
|
||||
selectedView == false ? styles.btnSelected : styles.btnNot
|
||||
}
|
||||
>
|
||||
<View>
|
||||
<Text text70 color={!selectedView ? "white" : "black"}>
|
||||
My Group
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{selectedView && <MyProfile/>}
|
||||
{!selectedView && <MyGroup/>}
|
||||
</View>
|
||||
</ScrollView>
|
||||
const [selectedView, setSelectedView] = useState<boolean>(true);
|
||||
return (
|
||||
<View flexG>
|
||||
<ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
|
||||
<TouchableOpacity onPress={() => props.setSelectedPage(0)}>
|
||||
<View row marginT-20 marginL-20 marginB-35 centerV>
|
||||
<Ionicons name="chevron-back" size={22} color="#979797" />
|
||||
<Text text70 color="#979797">
|
||||
Return to main settings
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View marginH-20 flexG style={{ minHeight: "90%" }}>
|
||||
<Text text60R marginB-25>
|
||||
User Management
|
||||
</Text>
|
||||
<View style={styles.buttonSwitch} spread row>
|
||||
<TouchableOpacity
|
||||
onPress={() => setSelectedView(true)}
|
||||
centerV
|
||||
centerH
|
||||
style={selectedView == true ? styles.btnSelected : styles.btnNot}
|
||||
>
|
||||
<View>
|
||||
<Text text70 color={selectedView ? "white" : "black"}>
|
||||
My Profile
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
onPress={() => setSelectedView(false)}
|
||||
centerV
|
||||
centerH
|
||||
style={selectedView == false ? styles.btnSelected : styles.btnNot}
|
||||
>
|
||||
<View>
|
||||
<Text text70 color={!selectedView ? "white" : "black"}>
|
||||
My Group
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
{selectedView && <MyProfile />}
|
||||
{!selectedView && <MyGroup />}
|
||||
</View>
|
||||
);
|
||||
</ScrollView>
|
||||
|
||||
{!selectedView && (
|
||||
<View>
|
||||
<Text>Nigga</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
buttonSwitch: {
|
||||
borderRadius: 50,
|
||||
width: "100%",
|
||||
backgroundColor: "#ebebeb",
|
||||
height: 45,
|
||||
},
|
||||
btnSelected: {
|
||||
backgroundColor: "#05a8b6",
|
||||
height: "100%",
|
||||
width: "50%",
|
||||
borderRadius: 50,
|
||||
},
|
||||
btnNot: {
|
||||
height: "100%",
|
||||
width: "50%",
|
||||
borderRadius: 50,
|
||||
},
|
||||
buttonSwitch: {
|
||||
borderRadius: 50,
|
||||
width: "100%",
|
||||
backgroundColor: "#ebebeb",
|
||||
height: 45,
|
||||
},
|
||||
btnSelected: {
|
||||
backgroundColor: "#05a8b6",
|
||||
height: "100%",
|
||||
width: "50%",
|
||||
borderRadius: 50,
|
||||
},
|
||||
btnNot: {
|
||||
height: "100%",
|
||||
width: "50%",
|
||||
borderRadius: 50,
|
||||
},
|
||||
});
|
||||
|
||||
export default UserSettings;
|
||||
|
||||
@ -1,280 +1,322 @@
|
||||
import {
|
||||
Avatar,
|
||||
Button,
|
||||
Card,
|
||||
Colors,
|
||||
Dialog,
|
||||
FloatingButton,
|
||||
PanningProvider,
|
||||
Picker,
|
||||
Text,
|
||||
TextField,
|
||||
TouchableOpacity,
|
||||
View
|
||||
Avatar,
|
||||
Button,
|
||||
Card,
|
||||
Colors,
|
||||
Dialog,
|
||||
FloatingButton,
|
||||
PanningProvider,
|
||||
Picker,
|
||||
Text,
|
||||
TextField,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native-ui-lib";
|
||||
import React, {useState} from "react";
|
||||
import {ScrollView, StyleSheet} from "react-native";
|
||||
import {PickerSingleValue} from "react-native-ui-lib/src/components/picker/types";
|
||||
import {useCreateSubUser} from "@/hooks/firebase/useCreateSubUser";
|
||||
import {ProfileType} from "@/contexts/AuthContext";
|
||||
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import React, { useState } from "react";
|
||||
import { ScrollView, StyleSheet } from "react-native";
|
||||
import { PickerSingleValue } from "react-native-ui-lib/src/components/picker/types";
|
||||
import { useCreateSubUser } from "@/hooks/firebase/useCreateSubUser";
|
||||
import { ProfileType } from "@/contexts/AuthContext";
|
||||
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
|
||||
import UserMenu from "@/components/pages/settings/user_settings_views/UserMenu";
|
||||
|
||||
const MyGroup = () => {
|
||||
const [showAddUserDialog, setShowAddUserDialog] = useState(false);
|
||||
const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false);
|
||||
const [selectedStatus, setSelectedStatus] = useState<string | PickerSingleValue>(ProfileType.CHILD);
|
||||
const [firstName, setFirstName] = useState('');
|
||||
const [lastName, setLastName] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [showAddUserDialog, setShowAddUserDialog] = useState(false);
|
||||
const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false);
|
||||
const [selectedStatus, setSelectedStatus] = useState<
|
||||
string | PickerSingleValue
|
||||
>(ProfileType.CHILD);
|
||||
const [firstName, setFirstName] = useState("");
|
||||
const [lastName, setLastName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
|
||||
const {mutateAsync: createSubUser, isLoading, isError} = useCreateSubUser();
|
||||
const {data: familyMembers} = useGetFamilyMembers(true);
|
||||
const { mutateAsync: createSubUser, isLoading, isError } = useCreateSubUser();
|
||||
const { data: familyMembers } = useGetFamilyMembers(true);
|
||||
|
||||
const parents = familyMembers?.filter(x => x.userType === ProfileType.PARENT) ?? [];
|
||||
const children = familyMembers?.filter(x => x.userType === ProfileType.CHILD) ?? [];
|
||||
const caregivers = familyMembers?.filter(x => x.userType === ProfileType.CAREGIVER) ?? [];
|
||||
const parents =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.PARENT) ?? [];
|
||||
const children =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.CHILD) ?? [];
|
||||
const caregivers =
|
||||
familyMembers?.filter((x) => x.userType === ProfileType.CAREGIVER) ?? [];
|
||||
|
||||
const handleCreateSubUser = async () => {
|
||||
if (!firstName || !lastName || !email) {
|
||||
console.error("All fields are required");
|
||||
return;
|
||||
}
|
||||
const handleCreateSubUser = async () => {
|
||||
if (!firstName || !lastName || !email) {
|
||||
console.error("All fields are required");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!email.includes("@")) {
|
||||
console.error("Invalid email address");
|
||||
return;
|
||||
}
|
||||
if (!email.includes("@")) {
|
||||
console.error("Invalid email address");
|
||||
return;
|
||||
}
|
||||
|
||||
await createSubUser({
|
||||
firstName,
|
||||
lastName,
|
||||
email,
|
||||
password: email,
|
||||
userType: selectedStatus as ProfileType
|
||||
});
|
||||
await createSubUser({
|
||||
firstName,
|
||||
lastName,
|
||||
email,
|
||||
password: email,
|
||||
userType: selectedStatus as ProfileType,
|
||||
});
|
||||
|
||||
if (!isError) {
|
||||
setShowNewUserInfoDialog(false);
|
||||
}
|
||||
};
|
||||
if (!isError) {
|
||||
setShowNewUserInfoDialog(false);
|
||||
}
|
||||
};
|
||||
|
||||
console.log(familyMembers)
|
||||
console.log(familyMembers);
|
||||
|
||||
return (
|
||||
<View style={{flex: 1, height: "100%"}}>
|
||||
<View>
|
||||
<ScrollView style={styles.card}>
|
||||
{(!parents.length && !children.length && !caregivers.length) && (
|
||||
<Text text70 marginV-10>
|
||||
{isLoading ? "Loading...." : "No user devices added"}
|
||||
</Text>
|
||||
)}
|
||||
return (
|
||||
<View style={{ flex: 1 }}>
|
||||
<View>
|
||||
<ScrollView style={styles.card}>
|
||||
{!parents.length && !children.length && !caregivers.length && (
|
||||
<Text text70 marginV-10>
|
||||
{isLoading ? "Loading...." : "No user devices added"}
|
||||
</Text>
|
||||
)}
|
||||
|
||||
{(!!parents.length || !!children.length) && (
|
||||
<>
|
||||
<Text text70 marginV-10>
|
||||
Family
|
||||
</Text>
|
||||
{[...parents, ...children]?.map(member => (
|
||||
<Card enableShadow={false} elevation={0} key={`${member.firstName}_${member.lastName}`}
|
||||
style={styles.familyCard} row centerV padding-10>
|
||||
<Avatar
|
||||
source={{uri: 'https://via.placeholder.com/60'}}
|
||||
size={40}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<View marginL-10>
|
||||
<Text text70M>{member.firstName} {member.lastName}</Text>
|
||||
<Text text90
|
||||
grey40>{member.userType === ProfileType.PARENT ? "Admin (You)" : "Child"}</Text>
|
||||
</View>
|
||||
|
||||
<View flex-1/>
|
||||
|
||||
<UserMenu userId={member?.uid!}/>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{!!caregivers.length && (
|
||||
<>
|
||||
<Text text70 marginB-10 marginT-15>
|
||||
Caregivers
|
||||
</Text>
|
||||
{caregivers?.map(member => (
|
||||
<Card enableShadow={false} elevation={0} key={`${member.firstName}_${member.lastName}`}
|
||||
style={styles.familyCard} row centerV padding-10>
|
||||
<Avatar
|
||||
source={{uri: 'https://via.placeholder.com/60'}}
|
||||
size={40}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<View marginL-10>
|
||||
<Text text70M>{member.firstName} {member.lastName}</Text>
|
||||
<Text text90 grey40>Caregiver</Text>
|
||||
</View>
|
||||
</Card>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<FloatingButton fullWidth hideBackgroundOverlay visible
|
||||
button={{label: '+ Add a user device', onPress: () => setShowAddUserDialog(true)}}/>
|
||||
|
||||
<Dialog
|
||||
visible={showAddUserDialog}
|
||||
onDismiss={() => setShowAddUserDialog(false)}
|
||||
panDirection={PanningProvider.Directions.DOWN}
|
||||
>
|
||||
<Card padding-25 gap-10>
|
||||
<Text>
|
||||
Add a new user device
|
||||
{(!!parents.length || !!children.length) && (
|
||||
<>
|
||||
<Text text70 marginV-10>
|
||||
Family
|
||||
</Text>
|
||||
{[...parents, ...children]?.map((member) => (
|
||||
<Card
|
||||
enableShadow={false}
|
||||
elevation={0}
|
||||
key={`${member.firstName}_${member.lastName}`}
|
||||
style={styles.familyCard}
|
||||
row
|
||||
centerV
|
||||
padding-10
|
||||
>
|
||||
<Avatar
|
||||
source={{ uri: "https://via.placeholder.com/60" }}
|
||||
size={40}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<View marginL-10>
|
||||
<Text text70M>
|
||||
{member.firstName} {member.lastName}
|
||||
</Text>
|
||||
<Text text90 grey40>
|
||||
{member.userType === ProfileType.PARENT
|
||||
? "Admin (You)"
|
||||
: "Child"}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<Button backgroundColor={"#FD1775"}><Text white>Show a QR Code</Text></Button>
|
||||
<Button backgroundColor={"#05A8B6"} onPress={() => {
|
||||
setShowAddUserDialog(false)
|
||||
setTimeout(() => {
|
||||
setShowNewUserInfoDialog(true)
|
||||
}, 500)
|
||||
}}><Text white>Enter email address</Text></Button>
|
||||
<View flex-1 />
|
||||
|
||||
|
||||
<TouchableOpacity onPress={() => setShowAddUserDialog(false)} center><Text>Return to user
|
||||
settings</Text></TouchableOpacity>
|
||||
<UserMenu userId={member?.uid!} />
|
||||
</Card>
|
||||
</Dialog>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
<Dialog
|
||||
panDirection={PanningProvider.Directions.DOWN}
|
||||
visible={showNewUserInfoDialog}
|
||||
onDismiss={() => setShowNewUserInfoDialog(false)}
|
||||
>
|
||||
<Card padding-25 style={styles.dialogCard}>
|
||||
<View row spread>
|
||||
<Text text60M>
|
||||
New User Information
|
||||
</Text>
|
||||
<TouchableOpacity onPress={() => setShowAddUserDialog(false)}>
|
||||
<Text>X</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View row centerV gap-20 marginV-20>
|
||||
<Avatar imageStyle={{borderRadius: 10}} containerStyle={{borderRadius: 10,}} size={60}
|
||||
backgroundColor={Colors.grey60}/>
|
||||
<TouchableOpacity onPress={() => {
|
||||
}}>
|
||||
<Text style={{color: Colors.green10}}>Upload User Profile Photo</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<Text style={styles.label}>Member Status</Text>
|
||||
<Picker
|
||||
editable={!isLoading}
|
||||
value={selectedStatus}
|
||||
//@ts-ignore
|
||||
onChange={item => setSelectedStatus(item)}
|
||||
style={styles.picker}
|
||||
showSearch
|
||||
floatingPlaceholder
|
||||
>
|
||||
<Picker.Item label="Child" value={ProfileType.CHILD}/>
|
||||
<Picker.Item label="Parent" value={ProfileType.PARENT}/>
|
||||
<Picker.Item label="Caregiver" value={ProfileType.CAREGIVER}/>
|
||||
</Picker>
|
||||
|
||||
|
||||
<Text style={styles.label}>First Name</Text>
|
||||
<TextField
|
||||
editable={!isLoading}
|
||||
placeholder="First name"
|
||||
value={firstName}
|
||||
onChangeText={setFirstName}
|
||||
style={styles.inputField}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Last Name</Text>
|
||||
<TextField
|
||||
editable={!isLoading}
|
||||
placeholder="Last name"
|
||||
value={lastName}
|
||||
onChangeText={setLastName}
|
||||
style={styles.inputField}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Email Address</Text>
|
||||
<TextField
|
||||
editable={!isLoading}
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
style={styles.inputField}
|
||||
/>
|
||||
|
||||
<Button
|
||||
disabled={!firstName || !lastName || !email || isLoading}
|
||||
label={isLoading ? "Adding..." : "Add group member"}
|
||||
backgroundColor="#FD1775"
|
||||
style={{marginTop: 20}}
|
||||
onPress={handleCreateSubUser}
|
||||
/>
|
||||
{!!caregivers.length && (
|
||||
<>
|
||||
<Text text70 marginB-10 marginT-15>
|
||||
Caregivers
|
||||
</Text>
|
||||
{caregivers?.map((member) => (
|
||||
<Card
|
||||
enableShadow={false}
|
||||
elevation={0}
|
||||
key={`${member.firstName}_${member.lastName}`}
|
||||
style={styles.familyCard}
|
||||
row
|
||||
centerV
|
||||
padding-10
|
||||
>
|
||||
<Avatar
|
||||
source={{ uri: "https://via.placeholder.com/60" }}
|
||||
size={40}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<View marginL-10>
|
||||
<Text text70M>
|
||||
{member.firstName} {member.lastName}
|
||||
</Text>
|
||||
<Text text90 grey40>
|
||||
Caregiver
|
||||
</Text>
|
||||
</View>
|
||||
</Card>
|
||||
</Dialog>
|
||||
</View>
|
||||
);
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ScrollView>
|
||||
</View>
|
||||
|
||||
<FloatingButton
|
||||
fullWidth
|
||||
hideBackgroundOverlay
|
||||
visible
|
||||
button={{
|
||||
label: "+ Add a user device",
|
||||
onPress: () => setShowAddUserDialog(true),
|
||||
}}
|
||||
/>
|
||||
|
||||
<Dialog
|
||||
visible={showAddUserDialog}
|
||||
onDismiss={() => setShowAddUserDialog(false)}
|
||||
panDirection={PanningProvider.Directions.DOWN}
|
||||
>
|
||||
<Card padding-25 gap-10>
|
||||
<Text>Add a new user device</Text>
|
||||
|
||||
<Button backgroundColor={"#FD1775"}>
|
||||
<Text white>Show a QR Code</Text>
|
||||
</Button>
|
||||
<Button
|
||||
backgroundColor={"#05A8B6"}
|
||||
onPress={() => {
|
||||
setShowAddUserDialog(false);
|
||||
setTimeout(() => {
|
||||
setShowNewUserInfoDialog(true);
|
||||
}, 500);
|
||||
}}
|
||||
>
|
||||
<Text white>Enter email address</Text>
|
||||
</Button>
|
||||
|
||||
<TouchableOpacity onPress={() => setShowAddUserDialog(false)} center>
|
||||
<Text>Return to user settings</Text>
|
||||
</TouchableOpacity>
|
||||
</Card>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
panDirection={PanningProvider.Directions.DOWN}
|
||||
visible={showNewUserInfoDialog}
|
||||
onDismiss={() => setShowNewUserInfoDialog(false)}
|
||||
>
|
||||
<Card padding-25 style={styles.dialogCard}>
|
||||
<View row spread>
|
||||
<Text text60M>New User Information</Text>
|
||||
<TouchableOpacity onPress={() => setShowAddUserDialog(false)}>
|
||||
<Text>X</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<View row centerV gap-20 marginV-20>
|
||||
<Avatar
|
||||
imageStyle={{ borderRadius: 10 }}
|
||||
containerStyle={{ borderRadius: 10 }}
|
||||
size={60}
|
||||
backgroundColor={Colors.grey60}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => {}}>
|
||||
<Text style={{ color: Colors.green10 }}>
|
||||
Upload User Profile Photo
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
|
||||
<Text style={styles.label}>Member Status</Text>
|
||||
<Picker
|
||||
editable={!isLoading}
|
||||
value={selectedStatus}
|
||||
//@ts-ignore
|
||||
onChange={(item) => setSelectedStatus(item)}
|
||||
style={styles.picker}
|
||||
showSearch
|
||||
floatingPlaceholder
|
||||
>
|
||||
<Picker.Item label="Child" value={ProfileType.CHILD} />
|
||||
<Picker.Item label="Parent" value={ProfileType.PARENT} />
|
||||
<Picker.Item label="Caregiver" value={ProfileType.CAREGIVER} />
|
||||
</Picker>
|
||||
|
||||
<Text style={styles.label}>First Name</Text>
|
||||
<TextField
|
||||
editable={!isLoading}
|
||||
placeholder="First name"
|
||||
value={firstName}
|
||||
onChangeText={setFirstName}
|
||||
style={styles.inputField}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Last Name</Text>
|
||||
<TextField
|
||||
editable={!isLoading}
|
||||
placeholder="Last name"
|
||||
value={lastName}
|
||||
onChangeText={setLastName}
|
||||
style={styles.inputField}
|
||||
/>
|
||||
|
||||
<Text style={styles.label}>Email Address</Text>
|
||||
<TextField
|
||||
editable={!isLoading}
|
||||
placeholder="Email address"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
style={styles.inputField}
|
||||
/>
|
||||
|
||||
<Button
|
||||
disabled={!firstName || !lastName || !email || isLoading}
|
||||
label={isLoading ? "Adding..." : "Add group member"}
|
||||
backgroundColor="#FD1775"
|
||||
style={{ marginTop: 20 }}
|
||||
onPress={handleCreateSubUser}
|
||||
/>
|
||||
</Card>
|
||||
</Dialog>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
card: {
|
||||
marginVertical: 15,
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 15,
|
||||
padding: 20,
|
||||
},
|
||||
familyCard: {
|
||||
marginBottom: 10,
|
||||
borderRadius: 10,
|
||||
backgroundColor: Colors.white,
|
||||
width: "100%"
|
||||
},
|
||||
inputField: {
|
||||
borderRadius: 50,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Colors.grey80,
|
||||
marginBottom: 16,
|
||||
borderColor: Colors.grey50,
|
||||
borderWidth: 1,
|
||||
height: 40,
|
||||
},
|
||||
picker: {
|
||||
borderRadius: 50,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Colors.grey80,
|
||||
marginBottom: 16,
|
||||
borderColor: Colors.grey50,
|
||||
borderWidth: 1,
|
||||
marginTop: -20,
|
||||
height: 40,
|
||||
},
|
||||
label: {
|
||||
marginBottom: 5,
|
||||
fontSize: 12,
|
||||
color: Colors.grey40,
|
||||
},
|
||||
dialogCard: {
|
||||
borderRadius: 10,
|
||||
gap: 10,
|
||||
},
|
||||
card: {
|
||||
marginVertical: 15,
|
||||
backgroundColor: "white",
|
||||
width: "100%",
|
||||
borderRadius: 15,
|
||||
padding: 20,
|
||||
},
|
||||
familyCard: {
|
||||
marginBottom: 10,
|
||||
borderRadius: 10,
|
||||
backgroundColor: Colors.white,
|
||||
width: "100%",
|
||||
},
|
||||
inputField: {
|
||||
borderRadius: 50,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Colors.grey80,
|
||||
marginBottom: 16,
|
||||
borderColor: Colors.grey50,
|
||||
borderWidth: 1,
|
||||
height: 40,
|
||||
},
|
||||
picker: {
|
||||
borderRadius: 50,
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
backgroundColor: Colors.grey80,
|
||||
marginBottom: 16,
|
||||
borderColor: Colors.grey50,
|
||||
borderWidth: 1,
|
||||
marginTop: -20,
|
||||
height: 40,
|
||||
},
|
||||
label: {
|
||||
marginBottom: 5,
|
||||
fontSize: 12,
|
||||
color: Colors.grey40,
|
||||
},
|
||||
dialogCard: {
|
||||
borderRadius: 10,
|
||||
gap: 10,
|
||||
},
|
||||
});
|
||||
|
||||
export default MyGroup;
|
||||
|
||||
Reference in New Issue
Block a user