From 74e25eef6e464cd58c98466d1f90657776a0af3f Mon Sep 17 00:00:00 2001
From: Gisle Aune <dev@gisle.me>
Date: Sat, 3 Apr 2021 14:01:50 +0200
Subject: [PATCH] added buttons to move projects to completed/failed when
 you're out of stuff to do.

---
 svelte-ui/src/components/Option.svelte       | 36 +++++++++++++++++--
 svelte-ui/src/components/ProjectEntry.svelte | 37 ++++++++++----------
 svelte-ui/src/components/TaskEntry.svelte    | 15 +++++---
 3 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/svelte-ui/src/components/Option.svelte b/svelte-ui/src/components/Option.svelte
index 2df1992..de978f4 100644
--- a/svelte-ui/src/components/Option.svelte
+++ b/svelte-ui/src/components/Option.svelte
@@ -4,7 +4,7 @@
   import modalStore from "../stores/modal";
   
   export let open: ModalData = {name: "none"};
-  export let green: boolean = false;
+  export let color: "red" | "green" | "blue" | "yellow" | "purple" | undefined = undefined;
   export let disabled: boolean = false;
 
   const dispatch = createEventDispatcher();
@@ -18,7 +18,7 @@
   }
 </script>
 
-<div on:click={handleClick} class="option" class:green class:disabled><slot></slot></div>
+<div on:click={handleClick} class={`option ${color}`} class:disabled><slot></slot></div>
 
 <style>
   div.option {
@@ -44,4 +44,36 @@
   div.option.green:hover {
     color: #78ff78;
   }
+
+  div.option.red {
+    color: #852a24;
+  }
+  div.option.red:hover {
+    color: #ff4545;
+  }
+
+  div.option.blue {
+    color: #446d88;
+  }
+  div.option.blue:hover {
+    color: #78c9ff;
+  }
+
+  div.option.yellow {
+    color: #7a7429;
+  }
+  div.option.yellow:hover {
+    color: #e7e55e;
+  }
+
+  div.option.purple {
+    color: #7a2973;
+  }
+  div.option.purple:hover {
+    color: #e75ed0;
+  }
+
+  div.option.disabled {
+    opacity: 0.5;
+  }
 </style>
\ No newline at end of file
diff --git a/svelte-ui/src/components/ProjectEntry.svelte b/svelte-ui/src/components/ProjectEntry.svelte
index d52beab..7b5112b 100644
--- a/svelte-ui/src/components/ProjectEntry.svelte
+++ b/svelte-ui/src/components/ProjectEntry.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import stuffLogClient from "../clients/stufflog";
 
-  import type { ProjectResult } from "../models/project";
+  import type { ProjectResult, ProjectUpdate } from "../models/project";
   import type { TaskResult } from "../models/task";
   import markStale from "../stores/markStale";
   import type { ModalData } from "../stores/modal";
@@ -37,15 +37,13 @@ import stuffLogClient from "../clients/stufflog";
   let toggling = false;
   let canComplete = false;
 
-  function toggleFavorite() {
+  function updateProject(update: ProjectUpdate) {
     if (toggling) {
       return
     }
     toggling = true
 
-    stuffLogClient.updateProject(project.id, {
-      favorite: !project.favorite,
-    }).then(() => {
+    stuffLogClient.updateProject(project.id, {...update}).then(() => {
       markStale("project");
     }).catch(err => {
       console.warn("Failed to toggle favorite:", err);
@@ -54,21 +52,23 @@ import stuffLogClient from "../clients/stufflog";
     })
   }
 
-  function markCompleted() {
-    if (toggling) {
-      return
-    }
-    toggling = true
+  function toggleFavorite() {
+    updateProject({
+      favorite: !project.favorite,
+    });
+  }
 
-    stuffLogClient.updateProject(project.id, {
+  function markCompleted() {
+    updateProject({
       statusTag: "completed",
       active: false,
-    }).then(() => {
-      markStale("project");
-    }).catch(err => {
-      console.warn("Failed to mark completed:", err);
-    }).finally(() => {
-      toggling = false;
+    })
+  }
+
+  function markFailed() {
+    updateProject({
+      statusTag: "failed",
+      active: false,
     })
   }
 
@@ -117,7 +117,8 @@ import stuffLogClient from "../clients/stufflog";
         <Option open={mdProjectEdit}>Edit</Option>
         <Option open={mdProjectDelete}>Delete</Option>
         {#if canComplete}
-          <Option disabled={!toggling} green on:click={markCompleted}>Complete Project</Option>
+          <Option disabled={!toggling} color="green" on:click={markCompleted}>Complete Project</Option>
+          <Option disabled={!toggling} color="red" on:click={markFailed}>Fail Project</Option>
         {/if}
       </OptionRow>
     {/if}
diff --git a/svelte-ui/src/components/TaskEntry.svelte b/svelte-ui/src/components/TaskEntry.svelte
index 9d94768..6f37d28 100644
--- a/svelte-ui/src/components/TaskEntry.svelte
+++ b/svelte-ui/src/components/TaskEntry.svelte
@@ -51,6 +51,10 @@ import { tick } from "svelte";
     updateTask({statusTag: "on hold", active: false});
   }
 
+  function moveToCompleted() {
+    updateTask({statusTag: "completed", active: false});
+  }
+
   function moveToFailed() {
     updateTask({statusTag: "failed", active: false});
   }
@@ -83,16 +87,19 @@ import { tick } from "svelte";
           <Option on:click={moveToActive}>Active</Option>
         {/if}
         {#if !isMoving && (task.statusTag !== "to do") }
-          <Option on:click={moveToToDo}>To Do</Option>
+        <Option color="yellow" on:click={moveToToDo}>To Do</Option>
         {/if}
         {#if !isMoving && (task.statusTag !== "on hold") }
-          <Option on:click={moveToOnHold}>On Hold</Option>
+        <Option color="blue" on:click={moveToOnHold}>On Hold</Option>
         {/if}
         {#if !isMoving && (task.statusTag !== "declined") }
-          <Option on:click={moveToDeclined}>Won't Do</Option>
+        <Option color="purple" on:click={moveToDeclined}>Won't Do</Option>
+        {/if}
+        {#if !isMoving && task.active }
+          <Option color="green" on:click={moveToCompleted}>Completed</Option>
         {/if}
         {#if !isMoving && (task.statusTag !== "failed") }
-          <Option on:click={moveToFailed}>Failed</Option>
+          <Option color="red" on:click={moveToFailed}>Failed</Option>
         {/if}
       {/if}
     </OptionRow>