Merge pull request #18 from MichaelHolley/feature/16-habit-props-edit

Edit Habits

Author: MichaelHolley

prisma/migrations/20250115195616_habittitle/migration.sql

@@ -0,0 +1 @@
+ALTER TABLE `Habit` CHANGE `name` `title` VARCHAR(191) NOT NULL;

prisma/schema.prisma

@@ -31,7 +31,7 @@ model Session {
 
 model Habit {
   id          String   @id @default(uuid())
-  name        String
+  title       String
   description String?  @db.VarChar(255)
   userId      String
   createdAt   DateTime @default(now())

src/lib/components/Habit/HabitOverviewItem.svelte

@@ -10,7 +10,7 @@
 <div class="flex flex-col gap-1">
 	<div class="flex flex-row justify-between">
 		<a href="/{habit.id}">
-			<span class="link-hover link text-lg decoration-secondary">{habit.name}</span></a
+			<span class="link-hover link text-lg decoration-secondary">{habit.title}</span></a
 		>
 		<form method="POST" action="{habit.id}?/addToday" use:enhance>
 			<button

src/lib/components/Habit/HabitSummaryComponent.svelte

@@ -2,7 +2,7 @@
 	import dayjs from 'dayjs';
 	import ActivityBubble from './ActivityBubble.svelte';
 
-	let { summary }: { summary: { id: string; name: string; dates: string[] }[] } = $props();
+	let { summary }: { summary: { id: string; title: string; dates: string[] }[] } = $props();
 
 	const thirtyDaysAgo = dayjs().subtract(30, 'days');
 </script>
@@ -13,7 +13,7 @@
 			{#each summary as summaryItem}
 				<a
 					class="link-hover link sticky left-0 mr-2 bg-base-200 pr-1 text-sm"
-					href="/{summaryItem.id}">{summaryItem.name}</a
+					href="/{summaryItem.id}">{summaryItem.title}</a
 				>
 				{#each { length: 30 } as _, i}
 					<ActivityBubble

src/lib/server/habit.ts

@@ -33,16 +33,30 @@ export const updateDates = async (id: string, userId: string, dates: string[]) =
 	});
 };
 
-export const createHabit = async (name: string, userId: string, description?: string) => {
+export const createHabit = async (title: string, userId: string, description?: string) => {
 	return await prisma.habit.create({
 		data: {
-			name: name,
+			title: title,
 			description: description,
 			userId: userId,
 			dates: []
 		}
 	});
 };
+export const updateHabit = async (
+	id: string,
+	userId: string,
+	title: string,
+	description?: string
+) => {
+	return await prisma.habit.update({
+		where: { userId: userId, id: id },
+		data: {
+			title: title,
+			description: description
+		}
+	});
+};
 
 export const deleteHabit = async (id: string, userId: string) => {
 	await prisma.habit.delete({

src/routes/(app)/+page.server.ts

@@ -25,7 +25,7 @@ export const load: PageServerLoad = async (event) => {
 
 		return {
 			id: habit.id,
-			name: habit.name,
+			title: habit.title,
 			dates: dates as string[]
 		};
 	});

src/routes/(app)/[id]/(habit-subpages)/+layout.svelte

@@ -0,0 +1,11 @@
+<script>
+	import { page } from '$app/state';
+	import NavigateBackButton from '$lib/components/NavigateBackButton.svelte';
+	let { children } = $props();
+</script>
+
+<div class="mb-3">
+	<NavigateBackButton backUrl="/{page.data.habit.id}" />
+</div>
+
+{@render children()}

src/routes/(app)/[id]/(habit-subpages)/edit/+page.server.ts

@@ -0,0 +1,38 @@
+import { getHabitForUser, updateHabit } from '$lib/server/habit';
+import { redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/');
+	}
+
+	const habit = await getHabitForUser(event.params.id, event.locals.user.id);
+
+	if (habit === null) {
+		return redirect(302, '/');
+	}
+
+	return { habit: habit };
+};
+
+export const actions: Actions = {
+	updateHabit: async (event) => {
+		const formData = await event.request.formData();
+		const title = formData.get('title');
+		const description = formData.get('description');
+
+		if (!event.locals.user) {
+			return redirect(302, '/');
+		}
+
+		const habit = await updateHabit(
+			event.params.id,
+			event.locals.user.id,
+			title as string,
+			description as string
+		);
+
+		return redirect(302, `/${habit.id}`);
+	}
+};

src/routes/(app)/[id]/(habit-subpages)/edit/+page.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { enhance } from '$app/forms';
+
+	const { data } = $props();
+</script>
+
+<div class="max-w-md">
+	<h3 class="pb-4 text-3xl">Update Habit</h3>
+	<form method="POST" action="?/updateHabit" use:enhance class="flex flex-col items-end gap-3">
+		<label class="form-control w-full text-sm">
+			<div class="label">
+				<span class="label-text">Title</span>
+			</div>
+			<input name="title" class="input input-bordered" required value={data.habit.title} />
+		</label>
+		<label class="form-control w-full text-sm">
+			<div class="label">
+				<span class="label-text">Description (optional)</span>
+			</div>
+			<input name="description" class="input input-bordered" value={data.habit.description} />
+		</label>
+		<button class="btn btn-primary w-fit">Update</button>
+	</form>
+</div>

src/routes/(app)/[id]/values/+page.server.ts renamed to src/routes/(app)/[id]/(habit-subpages)/values/+page.server.ts

@@ -1,7 +1,6 @@
 import { getHabitForUser, updateDates } from '$lib/server/habit';
 import { redirect } from '@sveltejs/kit';
-import type { PageServerLoad } from './$types';
-import type { Actions } from '../$types';
+import type { Actions, PageServerLoad } from './$types';
 import { Prisma } from '@prisma/client';
 
 export const load: PageServerLoad = async (event) => {

src/routes/(app)/[id]/values/+page.svelte renamed to src/routes/(app)/[id]/(habit-subpages)/values/+page.svelte

@@ -1,16 +1,11 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import NavigateBackButton from '$lib/components/NavigateBackButton.svelte';
 	import type { PageData } from './$types';
 
 	let { data }: { data: PageData } = $props();
 </script>
 
-<div class="mb-3">
-	<NavigateBackButton backUrl="/{data.habit.id}" />
-</div>
-
-<h2 class="mb-3 text-3xl">{data.habit?.name}</h2>
+<h2 class="mb-3 text-3xl">{data.habit?.title}</h2>
 <div class="max-w-lg overflow-x-auto">
 	<table class="table table-xs">
 		<thead>

src/routes/(app)/[id]/+page.svelte

@@ -15,7 +15,7 @@
 </div>
 
 <div class="mb-3">
-	<h2 class="text-3xl">{data.habit?.name}</h2>
+	<h2 class="text-3xl">{data.habit?.title}</h2>
 	<p class="text-xs text-neutral-400">{data.habit?.description}</p>
 </div>
 <div class="grid gap-x-3 text-xs text-neutral-400">
@@ -39,6 +39,7 @@
 		>
 	</form>
 	<a href="/{data.habit.id}/values" class="btn btn-outline btn-accent btn-xs">Show Values</a>
+	<a href="/{data.habit.id}/edit" class="btn btn-outline btn-error btn-xs">Edit</a>
 	<button class="btn btn-error btn-xs" onclick={() => deleteModal.showModal()}>Delete</button>
 </div>
 

src/routes/(app)/create/+page.server.ts

@@ -5,14 +5,14 @@ import { createHabit } from '$lib/server/habit';
 export const actions: Actions = {
 	createHabit: async (event) => {
 		const formData = await event.request.formData();
-		const name = formData.get('name');
+		const title = formData.get('title');
 		const description = formData.get('description');
 
 		if (!event.locals.user) {
 			return redirect(302, '/');
 		}
 
-		const habit = await createHabit(name as string, event.locals.user.id, description as string);
+		const habit = await createHabit(title as string, event.locals.user.id, description as string);
 
 		return redirect(302, `/${habit.id}`);
 	}

src/routes/(app)/create/+page.svelte

@@ -7,9 +7,9 @@
 	<form method="POST" action="?/createHabit" use:enhance class="flex flex-col items-end gap-3">
 		<label class="form-control w-full text-sm">
 			<div class="label">
-				<span class="label-text">Name</span>
+				<span class="label-text">Title</span>
 			</div>
-			<input name="name" class="input input-bordered" required />
+			<input name="title" class="input input-bordered" required />
 		</label>
 		<label class="form-control w-full text-sm">
 			<div class="label">