ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-26 16:34:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

family chart, other fixes

Browse Source
This commit is contained in:
ivic00
2024-12-04 19:48:04 +01:00
parent c86a355b97
commit 1b288d095f
5 changed files with 208 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
components/pages/calendar/ManuallyAddEventModal.tsx
View File

@ -22,7 +22,7 @@ import { PickerMultiValue } from "react-native-ui-lib/src/components/picker/type
import { useCreateEvent } from "@/hooks/firebase/useCreateEvent"; import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
import { EventData } from "@/hooks/firebase/types/eventData"; import { EventData } from "@/hooks/firebase/types/eventData";
import DropModalIcon from "@/assets/svgs/DropModalIcon"; import DropModalIcon from "@/assets/svgs/DropModalIcon";
import {Alert, StyleSheet} from "react-native"; import { Alert, StyleSheet } from "react-native";
import ClockIcon from "@/assets/svgs/ClockIcon"; import ClockIcon from "@/assets/svgs/ClockIcon";
import LockIcon from "@/assets/svgs/LockIcon"; import LockIcon from "@/assets/svgs/LockIcon";
import MenuIcon from "@/assets/svgs/MenuIcon"; import MenuIcon from "@/assets/svgs/MenuIcon";
@ -39,7 +39,7 @@ import BinIcon from "@/assets/svgs/BinIcon";
import DeleteEventDialog from "./DeleteEventDialog"; import DeleteEventDialog from "./DeleteEventDialog";
import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent"; import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
import AddPersonIcon from "@/assets/svgs/AddPersonIcon"; import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
import {addHours, startOfHour, startOfMinute} from "date-fns"; import { addHours, startOfHour, startOfMinute } from "date-fns";
const daysOfWeek = [ const daysOfWeek = [
{ label: "Monday", value: "monday" }, { label: "Monday", value: "monday" },
@ -68,7 +68,7 @@ export const ManuallyAddEventModal = () => {
setDeleteModalVisible(false); setDeleteModalVisible(false);
setSelectedNewEndDate(undefined); setSelectedNewEndDate(undefined);
setEditEvent(undefined); setEditEvent(undefined);
setCreator(null) setCreator(null);
}, },
initialDate: selectedNewEventDate || editEvent?.start, initialDate: selectedNewEventDate || editEvent?.start,
}; };
@ -84,8 +84,8 @@ export const ManuallyAddEventModal = () => {
const [location, setLocation] = useState(editEvent?.location ?? ""); const [location, setLocation] = useState(editEvent?.location ?? "");
useEffect(() => { useEffect(() => {
if(allDayAtom === true) setIsAllDay(true); if (allDayAtom === true) setIsAllDay(true);
}, [allDayAtom]) }, [allDayAtom]);
const [startTime, setStartTime] = useState(() => { const [startTime, setStartTime] = useState(() => {
const date = initialDate ?? new Date(); const date = initialDate ?? new Date();
@ -127,14 +127,16 @@ export const ManuallyAddEventModal = () => {
const { data: members } = useGetFamilyMembers(true); const { data: members } = useGetFamilyMembers(true);
const titleRef = useRef<TextFieldRef>(null); const titleRef = useRef<TextFieldRef>(null);
const [creator, setCreator] = useState(''); const [creator, setCreator] = useState("");
useEffect(() => { useEffect(() => {
if (editEvent) { if (editEvent) {
let creatorMember = members?.find((member) => member?.uid === editEvent.creatorId); let creatorMember = members?.find(
(member) => member?.uid === editEvent.creatorId
);
const fullName = `${creatorMember?.firstName ?? ""}`; const fullName = `${creatorMember?.firstName ?? ""}`;
setCreator(fullName); setCreator(fullName);
} }
}, [members]) }, [members]);
const isLoading = isDeleting || isAdding; const isLoading = isDeleting || isAdding;
@ -223,9 +225,9 @@ export const ManuallyAddEventModal = () => {
startDate: finalStartDate, startDate: finalStartDate,
endDate: finalEndDate, endDate: finalEndDate,
allDay: isAllDay, allDay: isAllDay,
attendees: selectedAttendees, attendees: selectedAttendees,
notes: details, notes: details,
location: location location: location,
}; };
if (editEvent?.id) eventData.id = editEvent?.id; if (editEvent?.id) eventData.id = editEvent?.id;
@ -242,7 +244,7 @@ export const ManuallyAddEventModal = () => {
const validateEvent = () => { const validateEvent = () => {
if (!title) { if (!title) {
Alert.alert('Alert', 'Title field cannot be empty'); Alert.alert("Alert", "Title field cannot be empty");
return false; return false;
} }
// if (!selectedAttendees || selectedAttendees?.length === 0) { // if (!selectedAttendees || selectedAttendees?.length === 0) {
@ -251,7 +253,7 @@ export const ManuallyAddEventModal = () => {
// } // }
return true; return true;
} };
const getRepeatLabel = () => { const getRepeatLabel = () => {
const selectedDays = repeatInterval; const selectedDays = repeatInterval;
@ -496,11 +498,16 @@ export const ManuallyAddEventModal = () => {
<DateTimePicker <DateTimePicker
value={endTime} value={endTime}
onChange={(time) => { onChange={(time) => {
if (time >= endTime) { setEndTime(time);
setEndTime(time); if (
endDate.getDate() === startDate.getDate() &&
time.getHours() < startTime.getHours()
) {
const newEndDate = new Date(endDate);
newEndDate.setDate(newEndDate.getDate() + 1);
setEndDate(newEndDate);
} }
}} }}
minimumDate={startTime}
minuteInterval={5} minuteInterval={5}
dateTimeFormatter={(date, mode) => dateTimeFormatter={(date, mode) =>
date.toLocaleTimeString("en-us", { date.toLocaleTimeString("en-us", {
@ -638,37 +645,48 @@ export const ManuallyAddEventModal = () => {
</View> </View>
<View style={styles.divider} /> <View style={styles.divider} />
<View marginH-28 marginB-0 centerV flex-1> <View marginH-28 marginB-0 centerV flex-1>
<View row centerV style={{ flexGrow: 1}}> <View row centerV style={{ flexGrow: 1 }}>
<Ionicons name="location-outline" size={25} color={"#919191"}/> <Ionicons name="location-outline" size={25} color={"#919191"} />
<TextField <TextField
placeholder="Location" placeholder="Location"
value={location} value={location}
onChangeText={(text) => { onChangeText={(text) => {
setLocation(text); setLocation(text);
}} }}
placeholderTextColor="#2d2d30" placeholderTextColor="#2d2d30"
style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%"}} style={{
marginL-12 fontFamily: "Manrope_500Medium",
paddingR-12 fontSize: 16,
minWidth: "100%",
}}
marginL-12
paddingR-12
/> />
</View> </View>
</View> </View>
{editEvent && <> {editEvent && (
<View style={styles.divider} /> <>
<View marginH-32 marginB-0 centerV flex-1> <View style={styles.divider} />
<View row centerV style={{ flexGrow: 1}}> <View marginH-32 marginB-0 centerV flex-1>
<AddPersonIcon /> <View row centerV style={{ flexGrow: 1 }}>
<TextField <AddPersonIcon />
<TextField
editable={false} editable={false}
value={creator} value={creator}
placeholderTextColor="#2d2d30" placeholderTextColor="#2d2d30"
style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%", color: "black"}} style={{
fontFamily: "Manrope_500Medium",
fontSize: 16,
minWidth: "100%",
color: "black",
}}
marginL-12 marginL-12
paddingR-12 paddingR-12
/> />
</View>
</View> </View>
</View> </>
</>} )}
<View style={styles.divider} /> <View style={styles.divider} />
<View marginH-30 marginB-0 spread centerV flex-1> <View marginH-30 marginB-0 spread centerV flex-1>
<TouchableOpacity onPress={() => detailsRef?.current?.focus()}> <TouchableOpacity onPress={() => detailsRef?.current?.focus()}>

21
components/pages/grocery/GroceryList.tsx
View File

@ -38,15 +38,22 @@ const GroceryList = ({onInputFocus}: {onInputFocus: (y: number) => void}) => {
// Group approved groceries by category // Group approved groceries by category
const approvedGroceriesByCategory = approvedGroceries?.reduce( const approvedGroceriesByCategory = approvedGroceries?.reduce(
(groups: any, item: IGrocery) => { (groups: any, item: IGrocery) => {
const category = item.category || "Uncategorized"; const category = item.category || "Uncategorized";
if (!groups[category]) { if (!groups[category]) {
groups[category] = []; groups[category] = [];
} }
groups[category].push(item); groups[category].push(item);
return groups;
// Sort items within each category - bought items at bottom
groups[category].sort((a: IGrocery, b: IGrocery) => {
if (a.bought === b.bought) return 0;
return a.bought ? 1 : -1;
});
return groups;
}, },
{} {}
); );
useEffect(() => { useEffect(() => {
if (submit) { if (submit) {

10
components/pages/todos/ToDoItem.tsx
View File

@ -177,9 +177,13 @@ const ToDoItem = (props: {
</View> </View>
)} )}
</View> </View>
<View row centerV marginL-3> <View row centerV marginL-5 marginT-2>
<Text <Text
style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }} style={{
fontSize: 12,
fontFamily: "Manrope_500Medium",
color: "#858585",
}}
> >
Created by: {creator} Created by: {creator}
</Text> </Text>
@ -207,7 +211,7 @@ const ToDoItem = (props: {
aspectRatio: 1, aspectRatio: 1,
borderWidth: 2, borderWidth: 2,
borderRadius: 100, borderRadius: 100,
borderColor: member.eventColor || 'transparent' borderColor: member.eventColor || '#ccc',
}} }}
> >
<View <View

14
components/pages/todos/family-chores/FamilyChart.tsx
View File

@ -74,10 +74,22 @@ const FamilyChart = () => {
yAxisThickness={0} // Hide the Y-axis line yAxisThickness={0} // Hide the Y-axis line
yAxisLabelTexts={["0", "200", "400", "600", "800", "1000"]} // Custom Y-axis labels yAxisLabelTexts={["0", "200", "400", "600", "800", "1000"]} // Custom Y-axis labels
hideRules={false} // Show the horizontal lines hideRules={false} // Show the horizontal lines
rulesColor="#dadada" // Color for the horizontal lines rulesType="solid"
rulesThickness={1.2}
rulesColor="#DADADA" // Color for the horizontal lines
stackBorderTopLeftRadius={5} // Round the bars stackBorderTopLeftRadius={5} // Round the bars
stackBorderTopRightRadius={5} // Round the bars stackBorderTopRightRadius={5} // Round the bars
spacing={16} spacing={16}
xAxisLabelTextStyle={{
fontSize: 10.41,
fontFamily: "Manrope_600SemiBold",
color: "#7f7f7f",
}}
yAxisTextStyle={{
fontSize: 9.61,
fontFamily: "Manrope_400Regular",
color: "#7f7f7f",
}}
disableScroll disableScroll
/> />
); );

244
components/pages/todos/family-chores/FamilyChoresProgress.tsx
View File

@ -4,143 +4,135 @@ import { ImageBackground, StyleSheet } from "react-native";
import FamilyChart from "./FamilyChart"; import FamilyChart from "./FamilyChart";
import { TouchableOpacity } from "react-native-ui-lib/src/incubator"; import { TouchableOpacity } from "react-native-ui-lib/src/incubator";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import { ProfileType } from "@/contexts/AuthContext";
import { ScrollView } from "react-native-gesture-handler";
const FamilyChoresProgress = ({ const FamilyChoresProgress = ({
setPageIndex, setPageIndex,
}: { }: {
setPageIndex: (value: number) => void; setPageIndex: (value: number) => void;
}) => { }) => {
const { data: familyMembers } = useGetFamilyMembers();
const children = familyMembers?.filter(
(member) => member.userType === ProfileType.CHILD
);
return ( return (
<View marginT-20 marginH-5> <View marginT-20 marginH-5 marginB-100>
<TouchableOpacity onPress={() => setPageIndex(0)}> <ScrollView>
<View row marginT-4 marginB-10 centerV> <TouchableOpacity onPress={() => setPageIndex(0)}>
<Ionicons <View row marginT-4 marginB-10 centerV>
name="chevron-back" <Ionicons
size={14} name="chevron-back"
color="#979797" size={14}
style={{ paddingBottom: 3 }} color="#979797"
/> style={{ paddingBottom: 3 }}
<Text />
style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }} <Text
color="#979797" style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
color="#979797"
>
Return to To Do's
</Text>
</View>
</TouchableOpacity>
<View centerH>
<Text style={{ fontFamily: "Manrope_700Bold", fontSize: 23 }}>
Family Chores Progress Report
</Text>
</View>
<View row spread marginT-35 marginB-20>
<Text style={{ fontFamily: "Manrope_700Bold", fontSize: 15 }}>
Points earned this week
</Text>
<View row>
{children?.map((child, index) => (
<View
key={child.uid}
style={styles.pfpSmall}
backgroundColor={child.eventColor || "#05a8b6"}
center
>
{child.pfp ? (
<ImageBackground
source={{ uri: child.pfp }}
style={{
height: 25,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
) : (
<Text color="white" style={{fontSize: 15}}>
{child.firstName.at(0)}
{child.lastName.at(0)}
</Text>
)}
</View>
))}
</View>
</View>
<View style={styles.card} paddingL-10>
<FamilyChart />
</View>
<Text
text70
style={{ fontFamily: "Manrope_700Bold", fontSize: 15 }}
marginV-20
>
Chore Tracker
</Text>
{children?.map((child) => (
<View
key={child.uid}
style={styles.card}
marginB-20
row
spread
centerV
> >
Return to To Do's <View
</Text> style={styles.pfpBig}
</View> backgroundColor={child.eventColor || "#05a8b6"}
</TouchableOpacity> center
<View centerH> >
<Text style={{ fontFamily: "Manrope_700Bold", fontSize: 19 }}> {child.pfp ? (
Family Chores Progress Report <ImageBackground
</Text> source={{ uri: child.pfp }}
</View> style={{
<View row spread marginT-35 marginB-20> height: 45,
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }}> aspectRatio: 1,
Points earned this week borderRadius: 22,
</Text> overflow: "hidden",
<View row> }}
<View />
style={styles.pfpSmall} ) : (
backgroundColor="#05a8b6" <Text color="white" style={{ fontSize: 20 }}>
center {child.firstName.at(0)}
children={ {child.lastName.at(0)}
<ImageBackground </Text>
source={require("../../../../assets/images/child1-picture.png")} )}
style={{ </View>
height: 25, <Text
aspectRatio: 1, color="#858585"
borderRadius: 22, style={{ fontFamily: "Manrope_600SemiBold", fontSize: 15 }}
overflow: "hidden", >
}} {child.firstName}
/> </Text>
} <View centerV>
/> <Text style={{ fontSize: 15, fontFamily: "Manrope_700Bold" }}>
<View x/y chores completed
style={styles.pfpSmall} </Text>
backgroundColor="#ebd825" </View>
center </View>
children={ ))}
<ImageBackground </ScrollView>
source={require("../../../../assets/images/child-picture.png")}
style={{
height: 25,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
}
/>
</View>
</View>
<View style={styles.card} paddingL-10>
<FamilyChart />
</View>
<Text text70 style={{ fontFamily: "Manrope_600SemiBold" }} marginV-20>
Chore Tracker
</Text>
<View style={styles.card} marginB-20 row spread centerV>
<View
style={styles.pfpBig}
backgroundColor="#05a8b6"
center
children={
<ImageBackground
source={require("../../../../assets/images/child1-picture.png")}
style={{
height: 45,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
}
/>
<Text
color="#858585"
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 17 }}
>
Emily
</Text>
<View centerV>
<Text style={{ fontSize: 16, fontFamily: "Manrope_700Bold" }}>
{" "}
x/y chores completed
</Text>
</View>
</View>
<View style={styles.card} row spread centerV>
<View
style={styles.pfpBig}
backgroundColor="#ebd825"
center
children={
<ImageBackground
source={require("../../../../assets/images/child-picture.png")}
style={{
height: 45,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
}
/>
<Text
color="#858585"
style={{ fontFamily: "Manrope_600SemiBold", fontSize: 17 }}
>
Austin
</Text>
<View row centerV centerH>
<Text style={{ fontSize: 16, fontFamily: "Manrope_700Bold" }}>
{" "}
x/y chores completed
</Text>
</View>
</View>
</View> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
pfpSmall: { pfpSmall: {
width: 30, width: 30,