Merge pull request #74 from wildjames/dev

Add ability to dismiss tasks

Author: wildjames

todoqueue_backend/tasks/urls.py

@@ -12,6 +12,7 @@
 urlpatterns = [
     path("", include(router.urls)),
     path("toggle_frozen/<uuid:taskId>/", views.toggle_frozen, name="toggle_frozen"),
+    path('dismiss_task/<uuid:taskId>/', views.dismiss_task, name='dismiss_task'),
     path(
         "calculate_brownie_points/",
         views.calculate_brownie_points_view,

todoqueue_backend/tasks/views.py

@@ -164,6 +164,23 @@ def toggle_frozen(request, taskId):
     return Response({"frozen": task.frozen}, status=status.HTTP_200_OK)
 
 
+@api_view(["POST"])
+@authentication_classes([JWTAuthentication])
+@permission_classes([IsAuthenticated])
+def dismiss_task(request, taskId):
+    # Use the get_task_by_id function to retrieve the task
+    task, task_type = get_task_by_id(taskId)
+
+    if not task:
+        return Response({"detail": "Task not found."}, status=status.HTTP_404_NOT_FOUND)
+
+    # Set the last_completed field to the current time
+    task.last_completed = timezone.now()
+    task.save(update_fields=["last_completed"])
+
+    return Response({"last_completed": task.last_completed}, status=status.HTTP_200_OK)
+
+
 class WorkLogViewSet(viewsets.ModelViewSet):
     permission_classes = (IsAuthenticated,)
     queryset = WorkLog.objects.all().order_by("-timestamp")

todoqueue_frontend/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "ToDoQu",
+  "name": "ToDoQu",
   "icons": [
     {
       "src": "favicon.ico",

todoqueue_frontend/src/api/households.js

@@ -110,7 +110,10 @@ export const inviteUserToHousehold = async (householdId, userEmail) => {
     if (response.status === 200) {
       return { success: "Invitation sent successfully." };
     }
-    return { error: response };
+    if (response.data.detail) {
+      return { error: response.data.detail };
+    }
+    return { error: `Failed to invite user, server responded with ${response.status}` }
   } catch (error) {
     console.error("Failed to send invitation:", error);
     return { error: `Failed to send invitation. ${error.response?.data?.detail || error.message}` };

todoqueue_frontend/src/api/tasks.js

@@ -460,7 +460,7 @@ export const freezeTask = async (taskId) => {
         console.log("Failed to freeze task.");
         return false;
     }
-    console.log("Freezed task with ID: ", taskId);
+    console.log("Froze task with ID: ", taskId);
     return true;
 };
 
@@ -488,3 +488,28 @@ export const deleteTask = async (taskId, selectedHousehold) => {
     console.log("Deleted task with ID: ", taskId);
     return true;
 };
+
+export const dismissTask = async (taskId, selectedHousehold) => {
+
+    const dismissTaskUrl = `${backend_url}/api/dismiss_task/${taskId}/`;
+
+    console.log("Dismissing task");
+    console.log("dismissTaskUrl: ", dismissTaskUrl);
+    console.log("taskId: ", taskId);
+
+    const res = await axios.post(
+        dismissTaskUrl,
+        {},
+        {
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+
+    if (res.status !== 200) {
+        console.log("Failed to dismiss task.");
+        return false;
+    }
+    console.log("Freezed task with ID: ", taskId);
+    return true;
+}

todoqueue_frontend/src/components/flipper/flipper.css

@@ -16,14 +16,14 @@
 }
 
 .flip-clock__slot {
-    font-size: 3em;
+    font-size: 2em;
 }
 
 .card {
     display: block;
     position: relative;
     padding-bottom: 0.72em;
-    font-size: 2em;
+    font-size: 1.5em;
     line-height: 0.95;
 }
 
@@ -36,7 +36,7 @@
     color: #ccc;
     background: #222;
     padding: 0.25em 0.25em;
-    border-radius: 0.15em 0.15em 0 0;
+    border-radius: 0.2em 0.2em 0 0;
     backface-visiblity: hidden;
     transform-style: preserve-3d;
     width: 4em;
@@ -50,7 +50,7 @@
     left: 0;
     border-top: solid 1px #000;
     background: #393939;
-    border-radius: 0 0 0.15em 0.15em;
+    border-radius: 0 0 0.2em 0.2em;
     pointer-events: none;
     overflow: hidden;
 }

todoqueue_frontend/src/components/navbar/navigation.css

@@ -16,15 +16,15 @@
 }
 
 /* Adjustments for smaller screens (less than 800px) */
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
     .navbar-center-panel {
-        margin-top: 10px;
-        /* Add some space above the household selector */
+        margin-top: 15px;
+        margin-bottom: 15px;
     }
 }
 
 /* Adjustments for larger screens (more than 800px) */
-@media (min-width: 800px) {
+@media (min-width: 1000px) {
     .navbar-center-panel {
         position: absolute;
         top: 50%;
@@ -87,13 +87,13 @@
     }
 }
 
-@media (min-width: 800px) {
+@media (min-width: 1000px) {
     .navbar-links-container {
         justify-content: space-between;
     }
 }
 
-@media (max-width: 800px) {
+@media (max-width: 1000px) {
     .logout-link {
         margin-top: 25px;
     }
@@ -103,7 +103,7 @@
     margin-right: 0.75rem;
 }
 
-@media (min-width: 800px) {
+@media (min-width: 1000px) {
     .navbar-links-right {
         margin-right: 1em;
     }

todoqueue_frontend/src/components/popups/HouseholdDetailsPopup.js

@@ -33,6 +33,8 @@ const HouseholdDetailsPopup = React.forwardRef((props, ref) => {
 
         const data = await inviteUserToHousehold(props.selectedHousehold.id, userEmail);
 
+        console.log("Tried to invite user. Got back: ", data);
+
         if (data.error) {
             setErrorMessage(data.error);
         } else if (data.success) {

todoqueue_frontend/src/components/popups/TaskDetailsPopup.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import BasePopup from './BasePopup';
 import { formatDuration, getTimeSince } from '../../utils';
-import { deleteTask, freezeTask, fetchSelectedTask } from '../../api/tasks';
+import { deleteTask, freezeTask, dismissTask, fetchSelectedTask } from '../../api/tasks';
 import './popups.css';
 
 const TaskDetailsPopup = React.forwardRef((props, ref) => {
@@ -53,6 +53,16 @@ const TaskDetailsPopup = React.forwardRef((props, ref) => {
         }
     }
 
+    const handleDismissTask = async (taskId) => {
+        console.log("Dismissing task - setting as done by no user.");
+        const succeeded = dismissTask(taskId);
+        if (succeeded) {
+            fetchSelectedTask();
+        } else {
+            console.log("Failed to dismiss task", succeeded);
+        }
+    }
+
     function toHumanFriendlyDate(datetimeStr) {
         // Parse the datetime string into a Date object
         const dateObj = new Date(datetimeStr);
@@ -84,7 +94,7 @@ const TaskDetailsPopup = React.forwardRef((props, ref) => {
             case "scheduledtask":
                 selectedType = props.PopupType.EDIT_SCHEDULED_TASK;
                 break;
-         
+
             default:
                 selectedType = props.PopupType.NONE;
                 break;
@@ -161,6 +171,9 @@ const TaskDetailsPopup = React.forwardRef((props, ref) => {
                 </div>
                 <div className="task-popup-actions">
                     <button className="button complete-button" onClick={() => props.handleOpenCompleteTaskPopup(props.selectedTask)}>Complete Task</button>
+                    <button className="button dismiss-button" onClick={() => handleDismissTask(props.selectedTask.id)}>Dismiss Task</button>
+                </div>
+                <div className="task-popup-actions">
                     <button className="button freeze-button" onClick={() => handleFreezeTask(props.selectedTask.id)}>{props.selectedTask.frozen ? "Unfreeze Task" : "Freeze Task"}</button>
                     <button className="button delete-button" onClick={() => handleDeleteTask(props.selectedTask.id)}>Delete Task</button>
                     <button className="button edit-button" onClick={() => handleOpenEditTaskPopup()}>Edit Task</button>

todoqueue_frontend/src/components/tasks/Tasks.css

@@ -16,7 +16,7 @@
     transform: translateX(-50%);
     top: 100px;
     transition: top 0.5s ease;
-    width: 95vw; 
+    width: 95vw;
     max-width: 95vw;
     white-space: initial;
 }
@@ -84,7 +84,7 @@
     /* Change from relative to absolute */
     top: 55px;
     /* Start from where it is initially placed */
-    bottom: 120px;
+    bottom: 95px;
     /* 100px from the bottom of the viewport */
     width: 100%;
     transition: left 0.5s ease;
@@ -421,4 +421,44 @@
     &:hover {
         transform: scale(1.5);
     }
+}
+
+.brownie-points-animation {
+    opacity: 0;
+    transition: opacity 0.5s ease-in-out;
+    font-size: 3em;
+    color: rgb(37, 37, 37);
+    z-index: -1000;
+}
+
+.brownie-points-animation.show {
+    opacity: 1;
+    z-index: 2000;
+}
+
+.brownie-points-popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 2rem;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    opacity: 0;
+    font-size: 1rem;
+    transition: opacity 0.5s ease-in-out;
+    z-index: -1000;
+}
+
+@media (max-width: 800px) {
+    .brownie-points-popup {
+        width: 90%;
+    }
+}
+
+.brownie-points-popup.show {
+    opacity: 1;
+    z-index: 2000;
 }