feat: edit item (#30)

Co-authored-by: Dennis Trümper <[email protected]>

src/components/buttons/actionBarBackButton.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { afterNavigate, goto } from '$app/navigation';
 	import { base } from '$app/paths';
-
 	import ActionBarButton from './actionBarButton.svelte';
+
 	let previousPage: string = base;
 
 	afterNavigate((input) => {

src/components/listItem.svelte

@@ -1,13 +1,28 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Routes } from '../routes/routes';
 	import { appStore } from '../stores/appStore';
-	import { background, textFadedHoverColor, textHoverColor, textSecondaryColor } from '../theme';
+	import {
+		background,
+		itemHoveredBackground,
+		textFadedHoverColor,
+		textHoverColor,
+		textHoveredColr,
+		textSecondaryColor
+	} from '../theme';
 
 	export let itemId: string;
 	$: item = $appStore.current.items.filter((i) => i.id === itemId)[0];
 	$: completed = item.completed !== undefined;
 </script>
 
 <div class="relative flex items-start min-w-full">
+	<button
+		class="p-2 mr-3 rounded-lg {itemHoveredBackground + textHoveredColr}"
+		on:click={() => {
+			goto(Routes.editItem({ itemId: item.id }));
+		}}>Edit</button
+	>
 	<div class="min-w-0 flex-1 text-sm leading-6 {completed ? 'line-through' : ''}">
 		<label for="done{item.name}" class="font-medium {textHoverColor}">{item.name}</label>
 		{#if item.description !== undefined}

src/routes/items/edit/[itemId]/+page.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+	import { afterNavigate, goto } from '$app/navigation';
+	import { base } from '$app/paths';
+	import toast from 'svelte-french-toast';
+	import ActionBar from '../../../../components/actionBar.svelte';
+	import FadeIn from '../../../../components/animation/fadeIn.svelte';
+	import ActionBarBackButton from '../../../../components/buttons/actionBarBackButton.svelte';
+	import ActionBarButton from '../../../../components/buttons/actionBarButton.svelte';
+	import MultilineTextInput from '../../../../components/form/multilineTextInput.svelte';
+	import TextInput from '../../../../components/form/textInput.svelte';
+	import { appStore } from '../../../../stores/appStore';
+	import { titleStore } from '../../../../stores/titleStore';
+	import { textColor } from '../../../../theme';
+	import { Routes } from '../../../routes';
+
+	let previousPage: string = base;
+
+	afterNavigate((input) => {
+		previousPage = input.from?.url.pathname ?? base;
+	});
+	export let data;
+
+	const isInvalidItem =
+		data.itemId === undefined ||
+		!$appStore.current.items.map((item) => item.id).includes(data.itemId ?? '');
+
+	if (isInvalidItem) {
+		toast.error(`Item not found`, {
+			position: 'bottom-center'
+		});
+		goto(Routes.items);
+	}
+
+	titleStore.set({ title: 'Edit Item', listChooseMode: false });
+
+	let itemRaw = $appStore.current.items.find((item) => item.id === data.itemId);
+	let itemName = itemRaw?.name;
+	let description = itemRaw?.description;
+
+	function validateForm(name: string | undefined): boolean {
+		if (name !== undefined && name?.length > 0) {
+			return true;
+		}
+		return false;
+	}
+</script>
+
+<FadeIn>
+	<form>
+		<div class="space-y-4 sm:space-y-8 {textColor}">
+			<TextInput
+				placeholder="Name of your new item"
+				caption="Name"
+				name="name"
+				bind:value={itemName}
+			/>
+			<MultilineTextInput
+				bind:value={description}
+				name="description"
+				rows={3}
+				caption="Description"
+			/>
+		</div>
+	</form>
+</FadeIn>
+
+<ActionBar>
+	<div class="w-full h-full flex items-center justify-between px-16">
+		<ActionBarBackButton />
+		<ActionBarButton
+			onClick={() => {
+				if (validateForm(itemName)) {
+					appStore.dispatch({
+						type: 'edit_item',
+						itemId: data.itemId ?? '',
+						name: itemName ?? '',
+						description: description
+					});
+					toast.success(`Item updated: ${itemName}`, {
+						position: 'bottom-center'
+					});
+					itemName = undefined;
+					description = undefined;
+					goto(previousPage);
+				} else {
+					toast.error(`Please enter a name`, {
+						position: 'bottom-center'
+					});
+				}
+			}}
+		>
+			Save
+		</ActionBarButton>
+	</div>
+</ActionBar>

src/routes/items/edit/[itemId]/+page.ts

@@ -0,0 +1,6 @@
+import type { LoadEvent } from '@sveltejs/kit';
+export const load = (input: LoadEvent) => {
+	return {
+		itemId: input.params.itemId
+	};
+};

src/routes/lists/edit/[listId]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import toast from 'svelte-french-toast';
 	import ActionBar from '../../../../components/actionBar.svelte';
 	import FadeIn from '../../../../components/animation/fadeIn.svelte';
@@ -8,9 +9,21 @@
 	import { appStore } from '../../../../stores/appStore';
 	import { titleStore } from '../../../../stores/titleStore';
 	import { textColor } from '../../../../theme';
+	import { Routes } from '../../../routes';
 
 	export let data;
 
+	const isInvalidList =
+		data.listId === undefined ||
+		!$appStore.current.lists.map((item) => item.id).includes(data.listId ?? '');
+
+	if (isInvalidList) {
+		toast.error(`List not found`, {
+			position: 'bottom-center'
+		});
+		goto(Routes.listChooser);
+	}
+
 	titleStore.set({ title: 'Edit List', listChooseMode: false });
 
 	let listRaw = $appStore.current.lists.find((list) => list.id === data.listId);
@@ -44,7 +57,7 @@
 				if (validateForm(listName)) {
 					appStore.dispatch({
 						type: 'edit_list',
-						listId: data.listId,
+						listId: data.listId ?? '',
 						name: listName
 					});
 					toast.success(`List updated: ${listName}`, {

src/routes/lists/edit/[listId]/+page.ts

@@ -1,5 +1,6 @@
-export const load = ({ params }) => {
+import type { LoadEvent } from '@sveltejs/kit';
+export const load = (input: LoadEvent) => {
 	return {
-		listId: params.listId
+		listId: input.params.listId
 	};
 };

src/routes/routes.ts

@@ -2,6 +2,9 @@ export class Routes {
 	static home = '/';
 	static createItem = '/createItem';
 	static createList = '/lists/create';
+	static editItem(input: { itemId: string }) {
+		return `/items/edit/${input.itemId}`;
+	}
 	static editList(input: { listId: string }) {
 		return `/lists/edit/${input.listId}`;
 	}