ammar/cally
1
0
Fork 0
mirror of https://github.com/urosran/cally.git synced 2025-11-27 17:04:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix calendar overflow, todo repeat

Browse Source
This commit is contained in:
ivic00
2024-10-23 21:32:36 +02:00
parent 55f9d326d5
commit ae01b9daaf
6 changed files with 500 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,11 @@
import {
View,
Text,
Checkbox,
TouchableOpacity,
Dialog,
Button,
ButtonSize
View,
Text,
Checkbox,
TouchableOpacity,
Dialog,
Button,
ButtonSize,
} from "react-native-ui-lib";
import React, { useState } from "react";
import { useToDosContext } from "@/contexts/ToDosContext";
@ -15,10 +15,11 @@ import { IToDo } from "@/hooks/firebase/types/todoData";
import { ImageBackground } from "react-native";
import AddChoreDialog from "@/components/pages/todos/AddChoreDialog";
import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
import RepeatIcon from "@/assets/svgs/RepeatIcon";
const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
const { updateToDo } = useToDosContext();
const {data: members} = useGetFamilyMembers();
const { data: members } = useGetFamilyMembers();
const [visible, setVisible] = useState<boolean>(false);
const [points, setPoints] = useState(props.item.points);
const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
@ -33,11 +34,13 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
}
};
const getInitials = (firstName: string, lastName: string) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`;
};
const getInitials = (firstName: string, lastName: string) => {
return `${firstName.charAt(0)}${lastName.charAt(0)}`;
};
const selectedMembers = members?.filter((x) => props?.item?.assignees?.includes(x?.uid!));
const selectedMembers = members?.filter((x) =>
props?.item?.assignees?.includes(x?.uid!)
);
return (
<View
centerV
@ -50,24 +53,36 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
opacity: props.item.done ? 0.3 : 1,
}}
>
{visible && <AddChoreDialog isVisible={visible} setIsVisible={setVisible} selectedTodo={props.item}/>}
{visible && (
<AddChoreDialog
isVisible={visible}
setIsVisible={setVisible}
selectedTodo={props.item}
/>
)}
<View paddingB-8 row spread>
<Text
<Text
text70
style={{
textDecorationLine: props.item.done ? "line-through" : "none",
fontFamily: "Manrope_500Medium",
fontSize: 15,
textDecorationLine: props.item.done ? "line-through" : "none",
fontFamily: "Manrope_500Medium",
fontSize: 15,
}}
onPress={() => {
setVisible(true);
setVisible(true);
}}
>
>
{props.item.title}
</Text>
</Text>
<Checkbox
value={props.item.done}
containerStyle={{borderWidth: 0.7, borderRadius: 50, borderColor: 'gray', height: 24.64, width: 24.64}}
containerStyle={{
borderWidth: 0.7,
borderRadius: 50,
borderColor: "gray",
height: 24.64,
width: 24.64,
}}
color="#fd1575"
onValueChange={(value) => {
updateToDo({ id: props.item.id, done: !props.item.done });
@ -86,62 +101,99 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
/>
</View>
<View centerV centerH marginT-8 row spread>
{props.item.points && props.item.points > 0 ? (
<TouchableOpacity
onPress={() => {
if (props.isSettings) {
setPointsModalVisible(true);
}
}}
>
<View centerV row gap-3>
<Ionicons name="gift-outline" size={20} color="#46a80a" />
<Text color="#46a80a" style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}>
{props.item.points} points
<View row>
{props.item.points && props.item.points > 0 ? (
<TouchableOpacity
onPress={() => {
if (props.isSettings) {
setPointsModalVisible(true);
}
}}
>
<View centerV row gap-3>
<Ionicons name="gift-outline" size={20} color="#46a80a" />
<Text
color="#46a80a"
style={{ fontSize: 12, fontFamily: "Manrope_500Medium" }}
>
{props.item.points} points
</Text>
</View>
</TouchableOpacity>
) : (
<View />
)}
{!(props.item.repeatType == "None") && (
<View row centerV marginL-8>
<RepeatIcon style={{ marginRight: 4 }} />
<Text
style={{
fontSize: 12,
fontFamily: "Manrope_500Medium",
color: "#858585",
}}
>
{(() => {
switch (props.item.repeatType) {
case "Once a month":
return "Monthly";
case "Every week":
return "Weekly";
case "Once a year":
return "Yearly";
default:
return props.item.repeatType;
}
})()}
</Text>
</View>
</TouchableOpacity>
) : (
<View />
)}
<View row style={{ gap: 3 }}>
{selectedMembers?.map((member) => {
return member?.pfp ? (
<ImageBackground
source={require("../../../assets/images/child-picture.png")}
style={{
height: 24.64,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
) : (
<View style={{
position: 'relative',
width: 24.64,
aspectRatio: 1
}}>
<View style={{
backgroundColor: '#ccc',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 100, // Circular shape
width: '100%',
height: '100%'
}}>
<Text style={{
color: '#fff',
fontSize: 12,
fontWeight: 'bold'
}}>
{getInitials(member.firstName, member.lastName ?? "")}
</Text>
</View>
</View>
)}
)}
</View>
)}
</View>
<View row style={{ gap: 3 }}>
{selectedMembers?.map((member) => {
return member?.pfp ? (
<ImageBackground
source={{ uri: member.pfp }}
style={{
height: 24.64,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
) : (
<View
style={{
position: "relative",
width: 24.64,
aspectRatio: 1,
}}
>
<View
style={{
backgroundColor: "#ccc",
justifyContent: "center",
alignItems: "center",
borderRadius: 100, // Circular shape
width: "100%",
height: "100%",
}}
>
<Text
style={{
color: "#fff",
fontSize: 12,
fontWeight: "bold",
}}
>
{getInitials(member.firstName, member.lastName ?? "")}
</Text>
</View>
</View>
);
})}
</View>
</View>
<Dialog
visible={pointsModalVisible}