work on copy functionality

TaskRatchet · Nov 17, 2024 · 91370b3 · 91370b3
1 parent 9979b8b
commit 91370b3
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 73 deletions.
diff --git a/src/components/TaskAdd.svelte b/src/components/TaskAdd.svelte
@@ -6,9 +6,16 @@ const dispatch = createEventDispatcher();
 	import { formatDue } from '../lib/formatDue';
 
 	export let isOpen = false;
-
-	let task = '';
-	let cents = 500;
+	export let task = '';
+	export let cents = 500;
+
+	$: if (isOpen) {
+	    // Only reset values if not copying a task
+	    if (!task) {
+	        task = '';
+	        cents = 500;
+	    }
+	}
 	let due = getDefaultDue();
 	let error = '';
 	let success = '';

diff --git a/src/components/list.svelte b/src/components/list.svelte
@@ -1,100 +1,107 @@
 <script lang="ts">
-import { getTasks, getSession } from '@taskratchet/sdk';
-import { onMount } from 'svelte';
-import Task from './task.svelte';
-import TaskAdd from './TaskAdd.svelte';
+	import { getTasks, getSession } from '@taskratchet/sdk';
+	import { onMount } from 'svelte';
+	import Task from './task.svelte';
+	import TaskAdd from './TaskAdd.svelte';
 
-export let page: 'next' | 'archive';
+	export let page: 'next' | 'archive';
 
-let tasks: TaskType[] = [];
-let isAddOpen = false;
-let loading = true;
+	let tasks: TaskType[] = [];
+	let isAddOpen = false;
+	let taskToCopy: TaskType | undefined;
+	let loading = true;
 
-onMount(async () => {
-    const session = getSession();
-    if (!session) {
-        window.location.href = `/login?prev=${encodeURIComponent(window.location.pathname)}`;
-        return;
-    }
+	onMount(async () => {
+		const session = getSession();
+		if (!session) {
+			window.location.href = `/login?prev=${encodeURIComponent(window.location.pathname)}`;
+			return;
+		}
 
-    const allTasks = (await getTasks()) as TaskType[];
-    const now = new Date();
-    const cutoff = new Date(now.getTime() - 24 * 60 * 60 * 1000);
-    tasks = allTasks
-        .filter((task) => 
-            page === 'next' 
-                ? new Date(task.due) > cutoff 
-                : new Date(task.due) <= cutoff
-        )		.sort((a, b) => page === 'next' 
-			? new Date(a.due).getTime() - new Date(b.due).getTime()
-			: new Date(b.due).getTime() - new Date(a.due).getTime());
-	loading = false;
-});
+		const allTasks = (await getTasks()) as TaskType[];
+		const now = new Date();
+		const cutoff = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+		tasks = allTasks
+			.filter((task) =>
+				page === 'next'
+					? new Date(task.due) > cutoff
+					: new Date(task.due) <= cutoff,
+			)
+			.sort((a, b) =>
+				page === 'next'
+					? new Date(a.due).getTime() - new Date(b.due).getTime()
+					: new Date(b.due).getTime() - new Date(a.due).getTime(),
+			);
+		loading = false;
+	});
 </script>
 
 <div class="container">
-    <h1>{page === 'next' ? 'Next' : 'Archived'} Tasks</h1>
+	<h1>{page === 'next' ? 'Next' : 'Archived'} Tasks</h1>
 	{#if loading}
 		<div class="loading">Loading tasks...</div>
 	{/if}
-    <ul>
-        {#each tasks as task}
-            <Task {task} />
-        {/each}
-    </ul>
+	<ul>
+		{#each tasks as task}
+			<Task
+				{task}
+				onCopy={(sourceTask) => {
+					taskToCopy = sourceTask;
+					isAddOpen = true;
+				}}
+			/>
+		{/each}
+	</ul>
 </div>
 
-<button 
-    class="add-button"
-    on:click={() => isAddOpen = true}
->
-    +
-</button>
+<button class="add-button" on:click={() => (isAddOpen = true)}> + </button>
 
-<TaskAdd 
-	bind:isOpen={isAddOpen} 
+<TaskAdd
+	bind:isOpen={isAddOpen}
+	task={taskToCopy?.task}
+	cents={taskToCopy?.cents}
 	on:tasksAdded={async () => {
 		const allTasks = (await getTasks()) as TaskType[];
 		const now = new Date();
 		const cutoff = new Date(now.getTime() - 24 * 60 * 60 * 1000);
 		tasks = allTasks
-			.filter((task) => 
-				page === 'next' 
-					? new Date(task.due) > cutoff 
-					: new Date(task.due) <= cutoff
+			.filter((task) =>
+				page === 'next'
+					? new Date(task.due) > cutoff
+					: new Date(task.due) <= cutoff,
 			)
 			.sort((a, b) => new Date(a.due).getTime() - new Date(b.due).getTime());
 	}}
 />
 
 <style>
-    .container {
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 1rem;
-    }
+	.container {
+		max-width: 800px;
+		margin: 0 auto;
+		padding: 1rem;
+	}
 
-    ul {
-        list-style: none;
-        padding: 0;
-    }
+	ul {
+		list-style: none;
+		padding: 0;
+	}
 
-    .add-button {
-        position: fixed;
-        bottom: 2rem;
-        right: 2rem;
-        width: 4rem;
-        height: 4rem;
-        border-radius: 50%;
-        background: var(--primary);
-        color: white;
-        border: none;
-        font-size: 2rem;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
+	.add-button {
+		position: fixed;
+		bottom: 2rem;
+		right: 2rem;
+		width: 4rem;
+		height: 4rem;
+		border-radius: 50%;
+		background: var(--primary);
+		color: white;
+		border: none;
+		font-size: 2rem;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
 	.loading {
 		text-align: center;
 		padding: 2rem;

diff --git a/src/components/task.svelte b/src/components/task.svelte
@@ -2,6 +2,7 @@
 	import { updateTask } from '@taskratchet/sdk';
 
 	export let task: TaskType;
+	export let onCopy: (task: TaskType) => void;
 
 	function formatDue(date: Date): string {
 		return date.toLocaleString();
@@ -17,6 +18,9 @@
 
 <li>
 	<div class="task-container">
+		<div class="menu">
+			<button on:click={() => onCopy(task)}>Copy</button>
+		</div>
 		<input
 			type="checkbox"
 			checked={task.complete}
@@ -52,4 +56,26 @@
 		font-size: 0.9em;
 		margin-top: 0.25rem;
 	}
+	.menu {
+		position: absolute;
+		right: 1rem;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+
+	.menu button {
+		background: none;
+		border: none;
+		color: var(--color);
+		opacity: 0.7;
+		cursor: pointer;
+	}
+
+	.menu button:hover {
+		opacity: 1;
+	}
+
+	.task-container {
+		position: relative;
+	}
 </style>