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

- Fixed issue with grocery edit not closing, reverted to the category resolving solution(fuzzy search categories), added check button for saving the grocery after editing, made code improvemnets around the groceries page

Browse Source
This commit is contained in:
Dejan
2024-10-27 18:23:29 +01:00
parent 3187844b50
commit e863b0c38e
2 changed files with 128 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
components/pages/grocery/EditGroceryItem.tsx
View File

@ -6,6 +6,7 @@ import { Dropdown } from "react-native-element-dropdown";
import CloseXIcon from "@/assets/svgs/CloseXIcon"; import CloseXIcon from "@/assets/svgs/CloseXIcon";
import { StyleSheet } from "react-native"; import { StyleSheet } from "react-native";
import DropdownIcon from "@/assets/svgs/DropdownIcon"; import DropdownIcon from "@/assets/svgs/DropdownIcon";
import {AntDesign} from "@expo/vector-icons";
interface IEditGrocery { interface IEditGrocery {
id?: string; id?: string;
@ -14,7 +15,7 @@ interface IEditGrocery {
setTitle: (value: string) => void; setTitle: (value: string) => void;
setCategory?: (category: GroceryCategory) => void; setCategory?: (category: GroceryCategory) => void;
setSubmit?: (value: boolean) => void; setSubmit?: (value: boolean) => void;
closeEdit?: (value: boolean) => void; closeEdit?: () => void;
handleEditSubmit?: Function; handleEditSubmit?: Function;
} }
@ -56,72 +57,85 @@ const EditGroceryItem = ({ editGrocery }: { editGrocery: IEditGrocery }) => {
value={editGrocery.title} value={editGrocery.title}
onChangeText={(value) => { onChangeText={(value) => {
editGrocery.setTitle(value); editGrocery.setTitle(value);
}} let groceryCategory = fuzzyMatchGroceryCategory(value);
onSubmitEditing={() => { if (editGrocery.setCategory) {
if (editGrocery.setSubmit) { editGrocery.setCategory(groceryCategory);
editGrocery.setSubmit(true);
}
if (editGrocery.handleEditSubmit) {
editGrocery.handleEditSubmit({
id: editGrocery.id,
title: editGrocery.title,
category: editGrocery.category,
});
}
if (editGrocery.closeEdit) {
editGrocery.closeEdit(false);
} }
}} }}
maxLength={25} maxLength={25}
/> />
<CloseXIcon <View row centerV>
onPress={() => { <AntDesign
if (editGrocery.closeEdit) editGrocery.closeEdit(false); name="check"
}} size={24}
/> style={{
color: "green",
marginRight: 15,
}}
onPress={() => {
if (editGrocery.setSubmit) {
editGrocery.setSubmit(true);
}
if (editGrocery.handleEditSubmit) {
editGrocery.handleEditSubmit({
id: editGrocery.id,
title: editGrocery.title,
category: editGrocery.category,
});
}
if (editGrocery.closeEdit) {
editGrocery.closeEdit();
}
}}
/>
<CloseXIcon
onPress={() => {
if (editGrocery.closeEdit) {
editGrocery.closeEdit();
}
}}
/>
</View>
</View> </View>
<Dropdown <Dropdown
style={{marginTop: 15}} style={{marginTop: 15}}
data={groceryCategoryOptions} data={groceryCategoryOptions}
placeholder="Select grocery category" placeholder="Select grocery category"
placeholderStyle={{ color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2 }} placeholderStyle={{ color: "#a2a2a2", fontFamily: "Manrope_500Medium", fontSize: 13.2 }}
labelField="label" labelField="label"
valueField="value" valueField="value"
value={ value={
editGrocery.category == GroceryCategory.None editGrocery.category
? null
: editGrocery.category
}
iconColor="white"
activeColor={"#fd1775"}
containerStyle={styles.dropdownStyle}
itemTextStyle={styles.itemText}
itemContainerStyle={styles.itemStyle}
selectedTextStyle={styles.selectedText}
renderLeftIcon={() => (
<DropdownIcon style={{ marginRight: 8 }} color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"} />
)}
renderItem={(item) => {
return (
<View height={36.02} centerV>
<Text style={styles.itemText}>{item.label}</Text>
</View>
);
}}
onChange={(item) => {
if (editGrocery.handleEditSubmit) {
editGrocery.handleEditSubmit({
id: editGrocery.id,
category: item.value,
});
console.log("kategorija vo diropdown: " + item.value);
if (editGrocery.closeEdit) editGrocery.closeEdit(false);
} else {
if (editGrocery.setCategory) {
editGrocery.setCategory(item.value);
}
} }
}} iconColor="white"
activeColor={"#fd1775"}
containerStyle={styles.dropdownStyle}
itemTextStyle={styles.itemText}
itemContainerStyle={styles.itemStyle}
selectedTextStyle={styles.selectedText}
renderLeftIcon={() => (
<DropdownIcon style={{ marginRight: 8 }} color={editGrocery.category == GroceryCategory.None ? "#7b7b7b" : "#fd1775"} />
)}
renderItem={(item) => {
return (
<View height={36.02} centerV>
<Text style={styles.itemText}>{item.label}</Text>
</View>
);
}}
onChange={(item) => {
if (editGrocery.handleEditSubmit) {
editGrocery.handleEditSubmit({
id: editGrocery.id,
category: item.value,
});
if (editGrocery.closeEdit) editGrocery.closeEdit();
} else {
if (editGrocery.setCategory) {
editGrocery.setCategory(item.value);
}
}
}}
/> />
</View> </View>
); );

107
components/pages/grocery/GroceryItem.tsx
View File

@ -23,12 +23,14 @@ const GroceryItem = ({
const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false); const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false); const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
const [newTitle, setNewTitle] = useState<string>(""); const [newTitle, setNewTitle] = useState<string>(item.title ?? "");
const [category, setCategory] = useState<GroceryCategory>( const [category, setCategory] = useState<GroceryCategory>(item.category ?? GroceryCategory.None);
GroceryCategory.None
);
const [itemCreator, setItemCreator] = useState<UserProfile>(null); const [itemCreator, setItemCreator] = useState<UserProfile>(null);
const closeEdit = () => {
setIsEditingTitle(false);
}
const handleTitleChange = (newTitle: string) => { const handleTitleChange = (newTitle: string) => {
updateGroceryItem({ id: item?.id, title: newTitle }); updateGroceryItem({ id: item?.id, title: newTitle });
}; };
@ -38,7 +40,6 @@ const GroceryItem = ({
}; };
useEffect(() => { useEffect(() => {
setNewTitle(item.title);
console.log(item); console.log(item);
getItemCreator(item?.creatorId); getItemCreator(item?.creatorId);
}, []); }, []);
@ -81,52 +82,51 @@ const GroceryItem = ({
setOpenFreqEdit(false); setOpenFreqEdit(false);
}} }}
/> />
{!isEditingTitle ? ( {isEditingTitle ?
<View> <EditGroceryItem
{ isParent ? <TouchableOpacity onPress={() => setIsEditingTitle(true)}> editGrocery={{
<Text text70T black style={styles.title}> id: item.id,
{item.title} title: newTitle,
</Text> category: category,
</TouchableOpacity> : setTitle: setNewTitle,
setCategory: setCategory,
closeEdit: closeEdit,
handleEditSubmit: updateGroceryItem,
}}
/> :
<View>
{isParent ?
<TouchableOpacity onPress={() => setIsEditingTitle(true)}>
<Text text70T black style={styles.title}>
{item.title}
</Text>
</TouchableOpacity> :
<Text text70T black style={styles.title}> <Text text70T black style={styles.title}>
{item.title} {item.title}
</Text> </Text>
} }
</View> </View>
) : ( }
<EditGroceryItem
editGrocery={{
id: item.id,
title: newTitle,
category: item.category,
setTitle: setNewTitle,
setCategory: setCategory,
closeEdit: setIsEditingTitle,
handleEditSubmit: updateGroceryItem,
}}
/>
)}
{!item.approved ? ( {!item.approved ? (
<View row centerV marginB-10> <View row centerV marginB-10>
{isParent && <><AntDesign {isParent &&
name="check" <>
size={24} <AntDesign
style={{ name="check"
color: "green", size={24}
marginRight: 15, style={{
}} color: "green",
onPress={() => { marginRight: 15,
isParent ? handleItemApproved(item.id, { approved: true }) : null }}
}} onPress={isParent ? () => handleItemApproved(item.id, { approved: true }) : null}
/> />
<AntDesign <AntDesign
name="close" name="close"
size={24} size={24}
style={{ color: "red" }} style={{ color: "red" }}
onPress={() => { onPress={isParent ? () => handleItemApproved(item.id, { approved: false }) : null}
isParent ? handleItemApproved(item.id, { approved: false }) : null />
}} </>}
/> </>}
</View> </View>
) : ( ) : (
!isEditingTitle && ( !isEditingTitle && (
@ -158,14 +158,15 @@ const GroceryItem = ({
borderRadius: 22, borderRadius: 22,
overflow: "hidden", overflow: "hidden",
}} }}
/> : <View /> :
<View
style={{ style={{
position: "relative", position: "relative",
width: 24.64, width: 24.64,
aspectRatio: 1, aspectRatio: 1,
marginRight: 4 marginRight: 4
}} }}
> >
<View <View
style={{ style={{
backgroundColor: "#ccc", backgroundColor: "#ccc",
@ -177,11 +178,11 @@ const GroceryItem = ({
}} }}
> >
<Text <Text
style={{ style={{
color: "#fff", color: "#fff",
fontSize: 12, fontSize: 12,
fontWeight: "bold", fontWeight: "bold",
}} }}
> >
{itemCreator ? getInitials(itemCreator.firstName, itemCreator.lastName) : ""} {itemCreator ? getInitials(itemCreator.firstName, itemCreator.lastName) : ""}
</Text> </Text>