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

Merge branch 'dev' of https://github.com/urosran/cally into dev

Browse Source
This commit is contained in:
ivic00
2024-10-22 19:35:06 +02:00
parent fd6f080e7c 91d0b050de
commit 55f9d326d5
11 changed files with 143 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/pages/calendar/EventCalendar.tsx
View File

@ -48,7 +48,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
}, [events, mode]);
const handlePressEvent = useCallback((event: CalendarEvent) => {
if (mode === "day") {
if (mode === "day" || mode === "week") {
setEditVisible(true);
console.log({event})
setEventForEdit(event);
@ -60,7 +60,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
const handlePressCell = useCallback(
(date: Date) => {
if (mode === "day") {
if (mode === "day" || mode === "week") {
setSelectedNewEndDate(date);
} else {
setMode("day")

20
components/pages/settings/SettingsPage.tsx
View File

@ -9,6 +9,7 @@ import ProfileIcon from "@/assets/svgs/ProfileIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon";
import ArrowRightIcon from "@/assets/svgs/ArrowRightIcon";
import {ProfileType, useAuthContext} from "@/contexts/AuthContext";
const pageIndex = {
main: 0,
@ -19,18 +20,22 @@ const pageIndex = {
};
const SettingsPage = () => {
const {profileData} = useAuthContext()
const isntParent = profileData?.userType !== ProfileType.PARENT
const [selectedPage, setSelectedPage] = useState<number>(0);
return (
<View flexG>
{selectedPage == 0 && (
<View flexG centerH marginH-30 marginT-30>
<Button
disabled={isntParent}
backgroundColor="white"
style={styles.mainBtn}
children={
<View row centerV width={"100%"}>
<ProfileIcon style={{marginRight: 10}} color="#07b9c8"/>
<Text style={styles.label} color="#07b8c7">
<Text style={[styles.label, isntParent && styles.disabledText]}>
Manage My Profile
</Text>
<ArrowRightIcon style={{marginLeft: "auto"}}/>
@ -39,12 +44,13 @@ const SettingsPage = () => {
onPress={() => setSelectedPage(pageIndex.user)}
/>
<Button
disabled={isntParent}
backgroundColor="white"
style={styles.mainBtn}
children={
<View row centerV width={"100%"}>
<CalendarIcon style={{marginRight: 10}}/>
<Text style={styles.label} color="#fd1775">
<Text style={[styles.label, isntParent && styles.disabledText]}>
Calendar Settings
</Text>
<ArrowRightIcon style={{marginLeft: "auto"}}/>
@ -55,6 +61,7 @@ const SettingsPage = () => {
}}
/>
<Button
disabled={isntParent}
backgroundColor="white"
style={styles.mainBtn}
children={
@ -65,7 +72,7 @@ const SettingsPage = () => {
color="#ff9900"
style={{marginRight: 10}}
/>
<Text style={styles.label} color="#ff9900">
<Text style={[styles.label, isntParent && styles.disabledText]}>
To-Do Reward Settings
</Text>
<ArrowRightIcon style={{marginLeft: "auto"}}/>
@ -79,7 +86,7 @@ const SettingsPage = () => {
children={
<View row centerV width={"100%"}>
<PrivacyPolicyIcon style={{marginRight: 10}}/>
<Text style={styles.label} color="#6c645b">
<Text style={styles.label}>
Cally Privacy Policy
</Text>
<ArrowRightIcon style={{marginLeft: "auto"}}/>
@ -115,4 +122,7 @@ const styles = StyleSheet.create({
fontSize: 14.71,
textAlignVertical: "center",
},
});
disabledText: {
color: '#A9A9A9', // Example of a gray color for disabled text
},
});

14
components/pages/settings/user_settings_views/MyGroup.tsx
View File

@ -43,7 +43,7 @@ const MyGroup = () => {
const lNameRef = useRef<TextFieldRef>(null);
const emailRef = useRef<TextFieldRef>(null);
const [showQRCodeDialog, setShowQRCodeDialog] = useState("");
const [showQRCodeDialog, setShowQRCodeDialog] = useState<string | boolean>(false);
const {mutateAsync: createSubUser, isLoading, isError} = useCreateSubUser();
const {data: familyMembers} = useGetFamilyMembers(true);
@ -149,7 +149,7 @@ const MyGroup = () => {
<View flex-1/>
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog("")}
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
userId={member?.uid!}
/>
@ -187,8 +187,10 @@ const MyGroup = () => {
</Text>
</View>
<View flex-1/>
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog("")}
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
userId={member?.uid!}
/>
@ -224,8 +226,10 @@ const MyGroup = () => {
</Text>
</View>
<View flex-1/>
<UserMenu
setShowQRCodeDialog={(val) => setShowQRCodeDialog("")}
setShowQRCodeDialog={(val) => setShowQRCodeDialog(val)}
showQRCodeDialog={showQRCodeDialog === member?.uid}
userId={member?.uid!}
/>
@ -242,7 +246,7 @@ const MyGroup = () => {
visible
button={{
label: "+ Add a user device",
onPress: () => setShowAddUserDialog(true),
onPress: () => setShowNewUserInfoDialog(true),
style: styles.bottomButton,
}}
/>

39
components/pages/settings/user_settings_views/UserMenu.tsx
View File

@ -1,7 +1,8 @@
import React, {useState} from 'react';
import {Button, Card, Colors, Dialog, Hint, ListItem, Text, View} from 'react-native-ui-lib';
import React from 'react';
import {Button, Card, Dialog, Text, TouchableOpacity} from 'react-native-ui-lib';
import QRCode from 'react-native-qrcode-svg';
import {PanningDirectionsEnum} from "react-native-ui-lib/src/components/panningViews/panningProvider";
import Ionicons from "@expo/vector-icons/Ionicons";
const UserMenu = ({
userId,
@ -10,40 +11,20 @@ const UserMenu = ({
}: {
userId: string,
showQRCodeDialog: boolean,
setShowQRCodeDialog: (value: boolean) => void
setShowQRCodeDialog: (value: string | boolean) => void
}) => {
const [showHint, setShowHint] = useState(false);
const handleShowQRCode = () => {
setShowHint(false);
setTimeout(() => {
setShowQRCodeDialog(true);
}, 500);
setShowQRCodeDialog(userId);
};
return (
<>
<Hint
onBackgroundPress={() => setShowHint(false)}
onPress={() => setShowHint(true)}
color={Colors.white}
customContent={
<View height={18}>
<ListItem onPress={handleShowQRCode}>
<Text style={{fontFamily: "Manrope_500Medium"}}>Show Login QR Code</Text>
</ListItem>
</View>
}
enableShadow
visible={showHint}
backdropColor="transparent"
<TouchableOpacity
onPress={handleShowQRCode}
>
<View>
<Button link onPress={() => setShowHint(!showHint)}>
<Text>...</Text>
</Button>
</View>
</Hint>
<Ionicons name="qr-code-outline" size={24} color="black"/>
</TouchableOpacity>
<Dialog
visible={showQRCodeDialog}

69
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";
@ -14,9 +14,11 @@ import PointsSlider from "@/components/shared/PointsSlider";
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";
const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
const { updateToDo } = useToDosContext();
const {data: members} = useGetFamilyMembers();
const [visible, setVisible] = useState<boolean>(false);
const [points, setPoints] = useState(props.item.points);
const [pointsModalVisible, setPointsModalVisible] = useState<boolean>(false);
@ -30,6 +32,12 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
setPoints(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!));
return (
<View
centerV
@ -96,15 +104,44 @@ const ToDoItem = (props: { item: IToDo; isSettings?: boolean }) => {
) : (
<View />
)}
<ImageBackground
source={require("../../../assets/images/child-picture.png")}
style={{
height: 24.64,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
}}
/>
<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>
<Dialog
visible={pointsModalVisible}

68
components/shared/HeaderTemplate.tsx
View File

@ -1,41 +1,43 @@
import { View, Text } from "react-native-ui-lib";
import {Image, Text, View} from "react-native-ui-lib";
import React from "react";
import { useAuthContext } from "@/contexts/AuthContext";
import { ImageBackground } from "react-native";
import {useAuthContext} from "@/contexts/AuthContext";
const HeaderTemplate = (props: {
message: string;
isWelcome: boolean;
children?: React.ReactNode;
link?: React.ReactNode;
message: string;
isWelcome: boolean;
children?: React.ReactNode;
link?: React.ReactNode;
}) => {
const { user, profileData } = useAuthContext();
const {user, profileData} = useAuthContext();
const headerHeight:number = 72;
return (
<View row centerV marginV-15>
<ImageBackground
source={require("../../assets/images/profile-picture.png")}
style={{
height: headerHeight,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
marginRight: 20,
}}
/>
<View gap-3>
{props.isWelcome && (
<Text text70L style={{fontSize: 19, fontFamily: "Manrope_400Regular"}}>Welcome, {profileData?.firstName}!</Text>
)}
<Text text70B style={{ fontSize: 18 , fontFamily: "Manrope_600SemiBold" }}>
{props.message}
</Text>
{props.children && <View>{props.children}</View>}
{props.link && <View marginT-8>{props.link}</View>}
</View>
</View>
);
const headerHeight: number = 72;
return (
<View row centerV marginV-15>
<Image
source={{uri: profileData?.pfp}}
style={{
height: headerHeight,
aspectRatio: 1,
borderRadius: 22,
overflow: "hidden",
marginRight: 20,
}}
/>
<View gap-3>
{props.isWelcome && (
<Text text70L style={{
fontSize: 19,
fontFamily: "Manrope_400Regular"
}}>Welcome, {profileData?.firstName}!</Text>
)}
<Text text70B style={{fontSize: 18, fontFamily: "Manrope_600SemiBold"}}>
{props.message}
</Text>
{props.children && <View>{props.children}</View>}
{props.link && <View marginT-8>{props.link}</View>}
</View>
</View>
);
};
export default HeaderTemplate;