RadiantWaveTech/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CRUD - Affirmations

Browse Source
This commit is contained in:
NeilClack
2026-01-19 14:59:51 -06:00
parent 0991d1916b
commit 30e7f8e00a
13 changed files with 1456 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(protected)/+layout.svelte
+19 -2
View File
@@ -2,13 +2,30 @@
import Window from '$lib/components/containers/Window.svelte';
const { children } = $props();
let adminExpanded = $state(true);
</script>
<div class="flex min-h-0 flex-1">
<div class="mt-12 mr-12 flex flex-col">
<div class="mt-12 mr-12 flex flex-col gap-1">
<a href="/dashboard" class="text-blue-600">Dashboard</a>
<div class="flex flex-col">
<button
class="flex items-center gap-1 text-left text-gray-700 hover:text-gray-900"
onclick={() => adminExpanded = !adminExpanded}
>
<span class="w-4 text-xs">{adminExpanded ? '▼' : '▶'}</span>
Admin
</button>
{#if adminExpanded}
<div class="ml-5 flex flex-col">
<a href="/affirmations" class="text-blue-600">Affirmations</a>
</div>
{/if}
</div>
</div>
<Window>
{@render children()}
</Window>
</div>
</div>
src/routes/(protected)/affirmations/+page.server.ts
+75 -6
View File
@@ -1,7 +1,76 @@
import type { PageServerLoad } from "./$types";
import { prisma } from "$lib/db";
import type { PageServerLoad } from './$types';
import { prisma } from '$lib/db';
import { fail, type Actions, type RequestEvent } from '@sveltejs/kit';
export const load: PageServerLoad = async () => {
const affirmations = await prisma.affirmation.findMany();
return { affirmations }
}
export const load: PageServerLoad = async ({ locals }) => {
const user = await prisma.user.findUnique({
where: { id: locals.user.id },
select: { id: true, name: true, role: true }
});
const affirmations = await prisma.affirmation.findMany({
include: {
solfeggioFrequency: true,
category: true
}
});
const affirmationCategories = await prisma.affirmationCategory.findMany();
const solfeggioFrequencies = await prisma.solfeggioFrequency.findMany();
return { user, affirmationCategories, affirmations, solfeggioFrequencies };
};
export const actions: Actions = {
create: async ({ request }: RequestEvent) => {
const form = await request.formData();
const frequencyId = Number(form.get('solfeggioFrequencyId')?.toString()) || 0;
const price = Number(form.get('price')) || 0.0;
const categoryName = form.get('categoryName') as string;
if (frequencyId === 0) {
return fail(400, {
error: 'Solfeggio Frequency not selected!',
...Object.fromEntries(form)
});
}
if (!categoryName) {
return fail(400, {
error: 'Category is required!',
...Object.fromEntries(form)
});
}
let category = await prisma.affirmationCategory.findFirst({ where: { name: categoryName } });
if (!category) {
category = await prisma.affirmationCategory.create({
data: {
name: categoryName
}
});
}
try {
const newAffirmation = await prisma.affirmation.create({
data: {
name: form.get('name') as string,
content: form.get('content') as string,
solfeggioFrequencyId: frequencyId,
categoryId: category.id,
price: price
},
include: {
category: true,
solfeggioFrequency: true
}
});
return { success: true, newAffirmation };
} catch (err) {
console.log(err);
return fail(500, {
error: 'An unknown error has occurred. Please try again later.',
...Object.fromEntries(form)
});
}
}
};
src/routes/(protected)/affirmations/+page.svelte
+71 -6
View File
@@ -1,10 +1,75 @@
<script lang="ts">
let { data } = $props();
import AffirmationForm from '$lib/components/forms/affirmation/AffirmationForm.svelte';
import Center from '$lib/components/containers/Center.svelte';
import Window from '$lib/components/containers/Window.svelte';
import type { ActionData, PageData } from './$types';
import AffirmationList from '$lib/components/ui/AffirmationList/AffirmationList.svelte';
let { data, form } = $props<{ data: PageData; form: ActionData }>();
let showModal = $state(false);
$effect(() => {
if (form?.success) {
showModal = false;
}
});
</script>
<div>
{#each data.affirmations as affirmation}
<span>{affirmation.name}</span>
<span>{affirmation.price}</span>
{/each}
<div class="flex h-full flex-col gap-6 p-6">
<div class="flex items-center justify-between">
<h1 class="text-2xl font-semibold text-gray-900">Affirmations</h1>
<button
type="button"
class="rounded-lg bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700"
onclick={() => (showModal = true)}
>
Create +
</button>
</div>
{#if data.affirmations.length > 0}
<Window>
<AffirmationList affirmations={data.affirmations} />
</Window>
{:else}
<Center>
<div class="text-center">
<p class="text-lg text-gray-500">No affirmations yet</p>
<p class="mt-1 text-sm text-gray-400">Click "Create +" to add your first one</p>
</div>
</Center>
{/if}
</div>
{#if showModal}
<div class="fixed inset-0 z-50 overflow-y-auto bg-black/50">
<div class="flex min-h-full items-center justify-center p-4">
<div class="w-full max-w-2xl rounded-lg bg-white p-8 shadow-xl">
<div class="mb-6 flex items-center justify-between">
<h2 class="text-xl font-semibold text-gray-900">Create New Affirmation</h2>
<button
type="button"
class="rounded p-1 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
onclick={() => (showModal = false)}
>
✕
</button>
</div>
{#if form?.error}
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
{form.error}
</div>
{/if}
<AffirmationForm
categories={data.affirmationCategories}
frequencies={data.solfeggioFrequencies}
{form}
action="?/create"
submitLabel="Create Affirmation"
/>
</div>
</div>
</div>
{/if}
src/routes/(protected)/affirmations/[id]/+page.server.ts
+75
View File
@@ -0,0 +1,75 @@
import type { PageServerLoad } from './$types';
import { prisma } from '$lib/db';
import { error, fail, type Actions, type RequestEvent, type ServerLoadEvent } from '@sveltejs/kit';
export const load: PageServerLoad = async ({ params }: ServerLoadEvent) => {
const affirmation = await prisma.affirmation.findUnique({
where: { id: params.id },
include: { solfeggioFrequency: true, category: true }
});
const solfeggioFrequencies = await prisma.solfeggioFrequency.findMany();
const affirmationCategories = await prisma.affirmationCategory.findMany();
if (!affirmation) {
throw error(404, 'not found');
}
console.log(affirmation);
return { affirmation, solfeggioFrequencies, affirmationCategories };
};
export const actions: Actions = {
update: async ({ request }: RequestEvent) => {
const form = await request.formData();
const frequencyId = Number(form.get('solfeggioFrequencyId')?.toString()) || 0;
const price = Number(form.get('price')) || 0.0;
const categoryName = form.get('categoryName') as string;
let category = await prisma.affirmationCategory.findFirst({ where: { name: categoryName } });
if (!category) {
category = await prisma.affirmationCategory.create({
data: {
name: categoryName
}
});
}
if (frequencyId === 0) {
return fail(400, {
error: 'Solfeggio Frequency not selected!',
...Object.fromEntries(form)
});
}
try {
const updatedAffirmation = await prisma.affirmation.update({
where: {
id: form.get('id') as string
},
data: {
name: form.get('name') as string,
content: form.get('content') as string,
solfeggioFrequencyId: frequencyId,
categoryId: category.id,
price: price
},
include: {
category: true,
solfeggioFrequency: true
}
});
return { success: true, updatedAffirmation };
} catch (err) {
console.log(err);
return fail(500, {
error:
'An unknown error has occurred. Please try again later. Your changes have not been saved.',
...Object.fromEntries(form)
});
}
}
};
src/routes/(protected)/affirmations/[id]/+page.svelte
+49
View File
@@ -0,0 +1,49 @@
<script lang="ts">
import AffirmationForm from '$lib/components/forms/affirmation/AffirmationForm.svelte';
import type { ActionData, PageData } from './$types';
import { onMount } from 'svelte';
let { data, form } = $props<{ data: PageData; form: ActionData }>();
let seconds = $state(0);
let remainder = $derived(5 - seconds);
onMount(() => {
const interval = setInterval(() => {
if (form?.success) {
seconds += 1;
if (seconds === 6) {
window.location.href = '/affirmations';
}
}
}, 1000);
return () => clearInterval(interval);
});
</script>
<div class="mx-auto mb-auto mt-24 max-w-2xl px-4">
<a href="/affirmations" class="text-blue-600">Back to Affirmations</a>
{#if form?.error}
<div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-red-700">
{form.error}
</div>
{/if}
{#if form?.success}
<div class="mb-4 rounded-lg border border-green-200 bg-green-50 p-3 text-green-700">
Affirmation updated successfully! You will be redirected in {remainder} seconds.
</div>
{/if}
<div class="mt-6">
<AffirmationForm
affirmation={data.affirmation}
categories={data.affirmationCategories}
frequencies={data.solfeggioFrequencies}
{form}
action="?/update"
submitLabel="Save Affirmation"
/>
</div>
</div>