hide completed tasks in projects, and add individual deadline tasks to front page.

svelte-ui/src/pages/FrontPage.svelte

@@ -1,9 +1,13 @@
-<script>
+<script lang="ts">
   import EmptyList from "../components/EmptyList.svelte";
   import GoalEntry from "../components/GoalEntry.svelte";
   import ProjectEntry from "../components/ProjectEntry.svelte";
+  import type { ProjectResult } from "../models/project";
   import { fpGoalStore } from "../stores/goal";
   import { fpProjectStore } from "../stores/project";
+  import { fpTaskStore } from "../stores/tasks";
+
+  let fakeProject: ProjectResult
 
   $: {
     if ($fpGoalStore.stale && !$fpGoalStore.loading) {
@@ -14,6 +18,15 @@
     }
   }
 
+  $: {
+    if ($fpTaskStore.stale && !$fpTaskStore.loading) {
+      fpTaskStore.load({
+        active: true,
+        expiring: true,
+      })
+    }
+  }
+
   $: {
     if ($fpProjectStore.stale && !$fpProjectStore.loading) {
       fpProjectStore.load({
@@ -22,6 +35,21 @@
       });
     }
   }
+
+  $: {
+    fakeProject = {
+      id: "P_fakeProject",
+      active: true,
+      createdTime: new Date().toISOString(),
+      description: "",
+      icon: "list",
+      name: "Individual Tasks",
+      tasks: $fpTaskStore.tasks.filter(t => $fpProjectStore.projects.find(p => p.id === t.id) == null),
+      endTime: null,
+    }
+
+    console.log(fakeProject, $fpTaskStore);
+  }
 </script>
 
 <div class="page">
@@ -41,9 +69,12 @@
       <h1>Upcoming Deadlines</h1>
     {/if}
     {#each $fpProjectStore.projects as project (project.id)}
-      <ProjectEntry project={project} />
+      <ProjectEntry hideInactive project={project} />
     {/each}
-    {#if !$fpProjectStore.loading && $fpProjectStore.projects.length === 0}
+    {#if fakeProject.tasks.length > 0}
+      <ProjectEntry project={fakeProject} />
+    {/if}
+    {#if fakeProject.tasks.length === 0 && !$fpProjectStore.loading && $fpProjectStore.projects.length === 0}
       <EmptyList icon="check" text="All good!" />
     {/if}
   </div>

svelte-ui/src/pages/ProjectPage.svelte

@@ -28,10 +28,10 @@
 
 <div class="page">
   <div class="options">
-    <Checkbox centered bind:checked={showInactive} label="Show inactive projects." />
+    <Checkbox centered bind:checked={showInactive} label="Show completed tasks and projects." />
   </div>
   {#each $projectStore.projects as project (project.id)}
-    <ProjectEntry showAllOptions project={project} />
+    <ProjectEntry hideInactive={!showInactive} showAllOptions project={project} />
   {/each}
   <Boi open={mdProjectAdd}>Add Project</Boi>
 </div>