SYNC

aquzif · Feb 6, 2024 · 5c9d51a · 5c9d51a
1 parent 7f3f2a0
commit 5c9d51a
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 11 deletions.
diff --git a/src/Components/CalendarMealEntry/CalendarMealRecipe.jsx b/src/Components/CalendarMealEntry/CalendarMealRecipe.jsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import NetworkUtils from "@/Utils/NetworkUtils";
 import {Checkbox, IconButton} from "@mui/material";
-import {Edit} from "@mui/icons-material";
+import {DeleteForever, Edit} from "@mui/icons-material";
 import placeholderImage from "@/Assets/placeholder.png";
 
 const Container = styled.div`
@@ -45,14 +45,22 @@ const RecipeName = styled.p`
 
 const RecipeEditButton = styled.div`
 position: absolute;
+  top: -6px;
+  right: 24px;
+  padding: 5px;
+  
+`;
+
+const RecipeDeleteButton = styled.div`
+  position: absolute;
   top: -6px;
   right: -6px;
   padding: 5px;
   
 `;
 
 
-const CalendarMealRecipe = ({meal,mealName,onClick, onEdit,selectMode, onCheck}) => {
+const CalendarMealRecipe = ({meal,mealName,onClick, onEdit,selectMode, onCheck, onDelete}) => {
 
     const handleClick = (e) => {
         if(e.target.tagName !== 'BUTTON'
@@ -76,18 +84,29 @@ const CalendarMealRecipe = ({meal,mealName,onClick, onEdit,selectMode, onCheck})
         </RecipeName>
         <RecipeEditButton >
             {
-                selectMode ?
-                    <Checkbox
-                        sx={{color: 'white'}}
-                        checked={meal.selected}
-                        onChange={(e) => onCheck(meal.id)}
+                !selectMode &&
+                     <IconButton onClick={onEdit} >
+                            <Edit sx={{color: '#FACC2C', backgroundColor: 'white',borderRadius: '22px',padding: '2px'}} />
+                        </IconButton>
 
-                    /> : <IconButton onClick={onEdit} >
-                    <Edit sx={{color: 'white'}} />
-                </IconButton>
             }
 
         </RecipeEditButton>
+        <RecipeDeleteButton>
+        {
+            selectMode ? <Checkbox
+                sx={{color: '#FACC2C'}}
+                checked={meal.selected}
+                onChange={(e) => onCheck(meal.id)}
+
+            /> :
+                <IconButton onClick={() => {
+                    onDelete(meal.id);
+                }} >
+                    <DeleteForever  sx={{color: 'red', backgroundColor: 'white',borderRadius: '22px',padding: '2px'}} />
+                </IconButton>
+        }
+        </RecipeDeleteButton>
     </Container>
 }
 

diff --git a/src/Views/Dashboard/CalendarView.jsx b/src/Views/Dashboard/CalendarView.jsx
@@ -23,6 +23,7 @@ import {useNavigate} from "react-router-dom";
 import {CheckCircle, Description, Edit, InsertDriveFile, Save} from "@mui/icons-material";
 import ShoppingListSelectDialog from "@/Dialogs/ShoppingListSelectDialog";
 import ShoppingListsAPI from "@/API/ShoppingListsAPI";
+import ConfirmDialog from "@/Dialogs/ConfirmDialog";
 
 const DateContainer = styled.div`
   
@@ -72,7 +73,7 @@ const CustDatePicker = (props) => {
     />
 }
 
-const GetMealFromData = ({date,mealNo,meals,title, onClick, onEdit,selectMode, onCheck}) => {
+const GetMealFromData = ({date,mealNo,meals,title, onClick, onEdit,selectMode, onCheck, onDelete}) => {
 
     const navigate = useNavigate();
 
@@ -82,6 +83,7 @@ const GetMealFromData = ({date,mealNo,meals,title, onClick, onEdit,selectMode, o
                 case "from_recipe":
                     return <CalendarMealRecipe
                         meal={meal}
+                        onDelete={onDelete}
                         selectMode={selectMode}
                         mealName={title}
                         onClick={() => navigate(`/przepisy/${meal.recipe.id}`)}
@@ -137,6 +139,8 @@ const CalendarView = () => {
     const [selsectedListIdOpen,setSelectedListIdOpen] = useState(false);
     const [selectMode,setSelectMode] = useState(false);
 
+    const [deleteConfirmId,setDeleteConfirmId] = useState(0);
+
 
     const handleSelectEntry = (id) => {
         let newEntries = entries;
@@ -213,6 +217,7 @@ const CalendarView = () => {
                 mealTitles(user?.meals_per_day|| 1).map((title,index) =>
                     <GetMealFromData
                         selectMode={selectMode}
+                        onDelete={(id) => setDeleteConfirmId(id)}
                         date={date}
                         onCheck={(id) => handleSelectEntry(id)}
                         mealNo={index}
@@ -236,6 +241,24 @@ const CalendarView = () => {
     });
 
     return <Container>
+        <ConfirmDialog
+            title="Usuwanie wpisu"
+            subtitle={`Czy na pewno chcesz usunąć wpis "${entries.find((entry) => entry.id === deleteConfirmId)?.recipe?.name}"?`}
+            open={deleteConfirmId > 0}
+            onClose={(res) => {
+                if(res){
+                    toast.promise(
+                        CalendarEntriesAPI.delete(deleteConfirmId),
+                        {
+                            loading: 'Usuwanie wpisu...',
+                            success: 'Pomyślnie usunięto wpis',
+                            error: 'Nie udało się usunąć wpisu'
+                        }
+                    ).then(load)
+                }
+                setDeleteConfirmId(0);
+            }}
+        />
         <ShoppingListSelectDialog
         open={selsectedListIdOpen}
         onClose={(res) => {