From 4427a37e3e5e93d4da6f6d81cd84da8fad9bd084 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 8 Feb 2025 11:49:51 -0500 Subject: [PATCH 1/8] create modal component --- .../Actions/Modal/Modal.stories.svelte | 33 +++++++++++++++++++ src/lib/components/Actions/Modal/Modal.svelte | 21 ++++++++++++ .../Actions/Modal/ModalActions.svelte | 13 ++++++++ .../components/Actions/Modal/ModalBody.svelte | 13 ++++++++ src/lib/components/Actions/Modal/index.ts | 3 ++ src/lib/components/Actions/index.ts | 1 + 6 files changed, 84 insertions(+) create mode 100644 src/lib/components/Actions/Modal/Modal.stories.svelte create mode 100644 src/lib/components/Actions/Modal/Modal.svelte create mode 100644 src/lib/components/Actions/Modal/ModalActions.svelte create mode 100644 src/lib/components/Actions/Modal/ModalBody.svelte create mode 100644 src/lib/components/Actions/Modal/index.ts diff --git a/src/lib/components/Actions/Modal/Modal.stories.svelte b/src/lib/components/Actions/Modal/Modal.stories.svelte new file mode 100644 index 0000000..0c2c5f7 --- /dev/null +++ b/src/lib/components/Actions/Modal/Modal.stories.svelte @@ -0,0 +1,33 @@ + + +{#snippet template({ children: _, ...props }: Partial>)} + + +

Hello!

+

Press ESC key or click the button below to close

+ + + + + +{/snippet} + + diff --git a/src/lib/components/Actions/Modal/Modal.svelte b/src/lib/components/Actions/Modal/Modal.svelte new file mode 100644 index 0000000..0e71dfb --- /dev/null +++ b/src/lib/components/Actions/Modal/Modal.svelte @@ -0,0 +1,21 @@ + + + + {@render children?.()} + {#if backdrop} +
+ +
+ {/if} + diff --git a/src/lib/components/Actions/Modal/ModalActions.svelte b/src/lib/components/Actions/Modal/ModalActions.svelte new file mode 100644 index 0000000..05a6fc7 --- /dev/null +++ b/src/lib/components/Actions/Modal/ModalActions.svelte @@ -0,0 +1,13 @@ + + +
+ {@render children?.()} +
diff --git a/src/lib/components/Actions/Modal/ModalBody.svelte b/src/lib/components/Actions/Modal/ModalBody.svelte new file mode 100644 index 0000000..cd2b785 --- /dev/null +++ b/src/lib/components/Actions/Modal/ModalBody.svelte @@ -0,0 +1,13 @@ + + +
+ {@render children?.()} +
diff --git a/src/lib/components/Actions/Modal/index.ts b/src/lib/components/Actions/Modal/index.ts new file mode 100644 index 0000000..b23d2e1 --- /dev/null +++ b/src/lib/components/Actions/Modal/index.ts @@ -0,0 +1,3 @@ +export { default as Modal } from './Modal.svelte'; +export { default as ModalActions } from './ModalActions.svelte'; +export { default as ModalBody } from './ModalBody.svelte'; diff --git a/src/lib/components/Actions/index.ts b/src/lib/components/Actions/index.ts index ae34e39..cc6d312 100644 --- a/src/lib/components/Actions/index.ts +++ b/src/lib/components/Actions/index.ts @@ -1 +1,2 @@ export { default as Button } from './Button.svelte'; +export * from './Modal/'; -- 2.45.3 From 312e524c54d2aa8fdd7c87fd7b931bf8f12e9984 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 8 Feb 2025 20:19:32 -0500 Subject: [PATCH 2/8] refactor app layout and add residents page --- .../Navigation/Navbar/Navbar.svelte | 2 +- src/routes/+layout.svelte | 14 +++--- src/routes/app/+layout.svelte | 48 +++++++++++-------- 3 files changed, 37 insertions(+), 27 deletions(-) diff --git a/src/lib/components/Navigation/Navbar/Navbar.svelte b/src/lib/components/Navigation/Navbar/Navbar.svelte index ad57fe6..841f780 100644 --- a/src/lib/components/Navigation/Navbar/Navbar.svelte +++ b/src/lib/components/Navigation/Navbar/Navbar.svelte @@ -4,7 +4,7 @@ let { start, center, end }: { start?: Snippet; center?: Snippet; end?: Snippet } = $props(); -
+
{@render start?.()}
{@render center?.()}
{@render end?.()}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index d2e1c32..6173499 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -8,16 +8,16 @@ let { children } = $props(); -
- - + + +
{@render children()} - - -
+
+ + diff --git a/src/routes/app/+layout.svelte b/src/routes/app/+layout.svelte index a28013b..2bcbc78 100644 --- a/src/routes/app/+layout.svelte +++ b/src/routes/app/+layout.svelte @@ -5,7 +5,7 @@ import { messages } from '$lib/i18n'; import 'clerk-sveltekit/client'; import SignOutButton from 'clerk-sveltekit/client/SignOutButton.svelte'; - import { Cog, LogOut, MessageCircleMore } from 'lucide-svelte'; + import { Cog, LogOut, MessageCircleMore, UsersRound } from 'lucide-svelte'; import type { Snippet } from 'svelte'; import { onMount } from 'svelte'; import type { PageData } from './$types'; @@ -65,7 +65,7 @@
    • +
  • + +
  • - {/snippet} - {#snippet center()} -

    Svelte

    - {/snippet} - {#snippet end()} -
    -

    {message}

    - {@render userMenu()} -
    - {/snippet} - -{@render children()} +
    + + {#snippet start()} + + {/snippet} + {#snippet center()} +

    Svelte

    + {/snippet} + {#snippet end()} +
    +

    {message}

    + {@render userMenu()} +
    + {/snippet} +     +
    + {@render children()} +
    +
    -- 2.45.3 From db030556cf5a7daf135685cad5253c4267c00d78 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 8 Feb 2025 20:19:44 -0500 Subject: [PATCH 3/8] add residents page --- messages/en.json | 7 ++ .../Residents/ResidentTable.stories.svelte | 21 ++++++ .../components/Residents/ResidentTable.svelte | 33 ++++++++++ src/lib/components/Residents/index.ts | 1 + src/routes/app/residents/+page.server.ts | 58 +++++++++++++++++ src/routes/app/residents/+page.svelte | 65 +++++++++++++++++++ 6 files changed, 185 insertions(+) create mode 100644 src/lib/components/Residents/ResidentTable.stories.svelte create mode 100644 src/lib/components/Residents/ResidentTable.svelte create mode 100644 src/lib/components/Residents/index.ts create mode 100644 src/routes/app/residents/+page.server.ts create mode 100644 src/routes/app/residents/+page.svelte diff --git a/messages/en.json b/messages/en.json index 26ac9c8..424533b 100644 --- a/messages/en.json +++ b/messages/en.json @@ -2,6 +2,7 @@ "$schema": "https://inlang.com/schema/inlang-message-format", "nav_greeting": "Hello {name}!", "nav_menu_sms": "SMS", + "nav_menu_residents": "Residents", "nav_menu_settings": "Settings", "nav_menu_logout": "Logout", "login_tab_login": "Login", @@ -21,6 +22,12 @@ "sms_label_phone": "Phone Number", "sms_label_message": "Message", "sms_button_submit": "Send Message", + "residents_title": "Residents", + "residents_button_new": "New Resident", + "residents_modal_title": "Create a Resident", + "residents_modal_submit": "Submit", + "residents_modal_label_name": "Name", + "residents_modal_label_phone": "Phone Number", "settings_title": "Settings", "settings_category_twilio": "Twilio Config", "settings_twilio_account_sid": "Account SID", diff --git a/src/lib/components/Residents/ResidentTable.stories.svelte b/src/lib/components/Residents/ResidentTable.stories.svelte new file mode 100644 index 0000000..b71c898 --- /dev/null +++ b/src/lib/components/Residents/ResidentTable.stories.svelte @@ -0,0 +1,21 @@ + + +{#snippet template(props: ComponentProps)} + +{/snippet} + + diff --git a/src/lib/components/Residents/ResidentTable.svelte b/src/lib/components/Residents/ResidentTable.svelte new file mode 100644 index 0000000..cf5cc3f --- /dev/null +++ b/src/lib/components/Residents/ResidentTable.svelte @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + {#each items as resident, index (resident.id)} + + + + + + {/each} + +
    NamePhone Number
    {index + 1}{resident.name}{resident.phoneNumber}
    diff --git a/src/lib/components/Residents/index.ts b/src/lib/components/Residents/index.ts new file mode 100644 index 0000000..08b406c --- /dev/null +++ b/src/lib/components/Residents/index.ts @@ -0,0 +1 @@ +export { default as ResidentTable } from './ResidentTable.svelte'; diff --git a/src/routes/app/residents/+page.server.ts b/src/routes/app/residents/+page.server.ts new file mode 100644 index 0000000..0f22441 --- /dev/null +++ b/src/routes/app/residents/+page.server.ts @@ -0,0 +1,58 @@ +import { PhoneRegex } from '$lib/regex/phone.js'; +import { logger } from '$lib/server/logger/index.js'; +import { prisma } from '$lib/server/prisma'; +import { fail } from '@sveltejs/kit'; +import zod from 'zod'; + +export const load = async ({ locals }) => { + const residents = await prisma.resident.findMany({ + where: { + tenantId: locals.tenant.id, + }, + select: { + id: true, + name: true, + phoneNumber: true, + }, + }); + + return { + residents: residents, + }; +}; + +export const actions = { + default: async (event) => { + const form = await event.request.formData(); + + if (!form.has('name')) { + return fail(400, { error: 'phone_missing' }); + } + if (!form.get('phoneNumber')) { + return fail(400, { error: 'message_missing' }); + } + + const name = form.get('name'); + if (typeof name !== 'string') { + return fail(400, { error: 'invalid_name' }); + } + + const { + success: phoneSuccess, + data: phone, + error: phoneError, + } = zod.string().regex(PhoneRegex).safeParse(form.get('phoneNumber')); + if (!phoneSuccess) { + logger.error(phoneError); + return fail(400, { error: 'invalid_phone' }); + } + + await prisma.resident.create({ + data: { + name: name, + phoneNumber: phone, + tenantId: event.locals.tenant.id, + }, + }); + }, +}; diff --git a/src/routes/app/residents/+page.svelte b/src/routes/app/residents/+page.svelte new file mode 100644 index 0000000..aa99bf6 --- /dev/null +++ b/src/routes/app/residents/+page.svelte @@ -0,0 +1,65 @@ + + + + +
    +

    {messages.residents_modal_title()}

    +
    + +
    +
    +
    + + {#snippet label()} + + {messages.residents_modal_label_name()} + {/snippet} + + + {#snippet label()} + + {messages.residents_modal_label_phone()} + {/snippet} + + + + +
    +     +     + +
    +
    +

    {messages.residents_title()}

    + +
    +
    + +
    -- 2.45.3 From 0f3fe04e7536a00ec1ae6960df75e0fe94e79146 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 8 Feb 2025 20:59:48 -0500 Subject: [PATCH 4/8] fix story --- src/lib/components/Actions/Modal/Modal.stories.svelte | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/lib/components/Actions/Modal/Modal.stories.svelte b/src/lib/components/Actions/Modal/Modal.stories.svelte index 0c2c5f7..13decdb 100644 --- a/src/lib/components/Actions/Modal/Modal.stories.svelte +++ b/src/lib/components/Actions/Modal/Modal.stories.svelte @@ -16,15 +16,18 @@ }, }, }); + + let dialog: HTMLDialogElement | undefined = $state(undefined); {#snippet template({ children: _, ...props }: Partial>)} - + +

    Hello!

    Press ESC key or click the button below to close

    - +     -- 2.45.3 From 15c52a30d7ef4203113b252b718dc6dc18e22237 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sat, 8 Feb 2025 21:06:05 -0500 Subject: [PATCH 5/8] fix error --- .../Residents/ResidentTable.stories.svelte | 11 +++++++++-- .../components/Residents/ResidentTable.svelte | 18 ++++++++++-------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/src/lib/components/Residents/ResidentTable.stories.svelte b/src/lib/components/Residents/ResidentTable.stories.svelte index b71c898..90875fd 100644 --- a/src/lib/components/Residents/ResidentTable.stories.svelte +++ b/src/lib/components/Residents/ResidentTable.stories.svelte @@ -6,7 +6,6 @@ const { Story } = defineMeta({ title: 'Residents/Resident Table', component: ResidentTable, - argTypes: {}, }); @@ -17,5 +16,13 @@ diff --git a/src/lib/components/Residents/ResidentTable.svelte b/src/lib/components/Residents/ResidentTable.svelte index cf5cc3f..b9a9261 100644 --- a/src/lib/components/Residents/ResidentTable.svelte +++ b/src/lib/components/Residents/ResidentTable.svelte @@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge'; type Props = { - items: Pick[]; + items?: Pick[]; } & Omit; let { items, class: className, ...props }: Props = $props(); @@ -22,12 +22,14 @@ - {#each items as resident, index (resident.id)} - - {index + 1} - {resident.name} - {resident.phoneNumber} - - {/each} + {#if items} + {#each items as resident, index (resident.id)} + + {index + 1} + {resident.name} + {resident.phoneNumber} + + {/each} + {/if} -- 2.45.3 From 4f939c960efe46fc7ada110e7e01e8bddf50862c Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 9 Feb 2025 23:36:24 -0500 Subject: [PATCH 6/8] add resident edit --- messages/en.json | 4 +- .../components/Residents/ResidentTable.svelte | 24 ++++++++++-- src/lib/components/Residents/index.ts | 1 + src/routes/app/residents/+page.server.ts | 16 +++++++- src/routes/app/residents/+page.svelte | 39 +++++++++++++++---- 5 files changed, 70 insertions(+), 14 deletions(-) diff --git a/messages/en.json b/messages/en.json index 424533b..179a93d 100644 --- a/messages/en.json +++ b/messages/en.json @@ -24,7 +24,9 @@ "sms_button_submit": "Send Message", "residents_title": "Residents", "residents_button_new": "New Resident", - "residents_modal_title": "Create a Resident", + "residents_table_edit": "Edit", + "residents_modal_title_new": "Create a Resident", + "residents_modal_title_edit": "Edit Resident", "residents_modal_submit": "Submit", "residents_modal_label_name": "Name", "residents_modal_label_phone": "Phone Number", diff --git a/src/lib/components/Residents/ResidentTable.svelte b/src/lib/components/Residents/ResidentTable.svelte index b9a9261..60caee6 100644 --- a/src/lib/components/Residents/ResidentTable.svelte +++ b/src/lib/components/Residents/ResidentTable.svelte @@ -1,23 +1,34 @@ + + - + + {#if onEdit} + + {/if} @@ -28,6 +39,13 @@ + {#if onEdit} + + {/if} {/each} {/if} diff --git a/src/lib/components/Residents/index.ts b/src/lib/components/Residents/index.ts index 08b406c..a613801 100644 --- a/src/lib/components/Residents/index.ts +++ b/src/lib/components/Residents/index.ts @@ -1 +1,2 @@ export { default as ResidentTable } from './ResidentTable.svelte'; +export * from './ResidentTable.svelte'; diff --git a/src/routes/app/residents/+page.server.ts b/src/routes/app/residents/+page.server.ts index 0f22441..df893b8 100644 --- a/src/routes/app/residents/+page.server.ts +++ b/src/routes/app/residents/+page.server.ts @@ -32,6 +32,11 @@ export const actions = { return fail(400, { error: 'message_missing' }); } + const id = form.get('id'); + if (id && typeof id !== 'string') { + return fail(400, { error: 'invalid_id' }); + } + const name = form.get('name'); if (typeof name !== 'string') { return fail(400, { error: 'invalid_name' }); @@ -47,12 +52,19 @@ export const actions = { return fail(400, { error: 'invalid_phone' }); } - await prisma.resident.create({ - data: { + await prisma.resident.upsert({ + where: { + id: id ?? '', + }, + create: { name: name, phoneNumber: phone, tenantId: event.locals.tenant.id, }, + update: { + name: name, + phoneNumber: phone, + }, }); }, }; diff --git a/src/routes/app/residents/+page.svelte b/src/routes/app/residents/+page.svelte index aa99bf6..363ac24 100644 --- a/src/routes/app/residents/+page.svelte +++ b/src/routes/app/residents/+page.svelte @@ -2,7 +2,7 @@ import { enhance } from '$app/forms'; import { Button, Modal, ModalActions, ModalBody } from '$lib/components/Actions'; import { TextInput } from '$lib/components/DataInput'; - import { ResidentTable } from '$lib/components/Residents'; + import { ResidentTable, type ResidentItem } from '$lib/components/Residents'; import { messages } from '$lib/i18n'; import { Phone, UserRound, UserRoundPlus } from 'lucide-svelte'; import { fade } from 'svelte/transition'; @@ -17,25 +17,42 @@ let residents = $derived(data.residents); - let dialog = $state(undefined); + let dialog: HTMLDialogElement | undefined = $state(undefined); + let form: HTMLFormElement | undefined = $state(undefined); + + let resident: ResidentItem | undefined = $state(undefined); - + { + resident = undefined; + form?.reset(); + }} +>
    -

    {messages.residents_modal_title()}

    +

    + {resident + ? messages.residents_modal_title_edit() + : messages.residents_modal_title_new()} +

    -
    - + + {#if resident} + + {/if} + {#snippet label()} {messages.residents_modal_label_name()} {/snippet} - + {#snippet label()} {messages.residents_modal_label_phone()} @@ -61,5 +78,11 @@ >
    - + { + resident = r; + dialog?.showModal(); + }} + /> -- 2.45.3 From da45bfb2cba92750b3852255b774199716ce2523 Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Tue, 11 Feb 2025 09:20:21 -0500 Subject: [PATCH 7/8] allow resident delete --- messages/en.json | 1 + src/routes/app/residents/+page.server.ts | 22 +++++++++++++++++++- src/routes/app/residents/+page.svelte | 26 ++++++++++++++++-------- 3 files changed, 40 insertions(+), 9 deletions(-) diff --git a/messages/en.json b/messages/en.json index 179a93d..5a5a1e0 100644 --- a/messages/en.json +++ b/messages/en.json @@ -28,6 +28,7 @@ "residents_modal_title_new": "Create a Resident", "residents_modal_title_edit": "Edit Resident", "residents_modal_submit": "Submit", + "residents_modal_delete": "Delete", "residents_modal_label_name": "Name", "residents_modal_label_phone": "Phone Number", "settings_title": "Settings", diff --git a/src/routes/app/residents/+page.server.ts b/src/routes/app/residents/+page.server.ts index df893b8..7389933 100644 --- a/src/routes/app/residents/+page.server.ts +++ b/src/routes/app/residents/+page.server.ts @@ -22,7 +22,7 @@ export const load = async ({ locals }) => { }; export const actions = { - default: async (event) => { + upsert: async (event) => { const form = await event.request.formData(); if (!form.has('name')) { @@ -67,4 +67,24 @@ export const actions = { }, }); }, + delete: async (event) => { + const form = await event.request.formData(); + + logger.info('Deleting Resident'); + + if (!form.has('id')) { + return fail(400, { error: 'id_missing' }); + } + + const id = form.get('id'); + if (typeof id !== 'string') { + return fail(400, { error: 'invalid_id' }); + } + + await prisma.resident.delete({ + where: { + id: id, + }, + }); + }, }; diff --git a/src/routes/app/residents/+page.svelte b/src/routes/app/residents/+page.svelte index 363ac24..d33b897 100644 --- a/src/routes/app/residents/+page.svelte +++ b/src/routes/app/residents/+page.svelte @@ -4,8 +4,7 @@ import { TextInput } from '$lib/components/DataInput'; import { ResidentTable, type ResidentItem } from '$lib/components/Residents'; import { messages } from '$lib/i18n'; - import { Phone, UserRound, UserRoundPlus } from 'lucide-svelte'; - import { fade } from 'svelte/transition'; + import { Phone, UserRound, UserRoundPlus, X } from 'lucide-svelte'; import type { ActionData, PageData } from './$types'; type Props = { @@ -39,10 +38,12 @@ : messages.residents_modal_title_new()} - + -
    + {#if resident} {/if} @@ -58,16 +59,25 @@ {messages.residents_modal_label_phone()} {/snippet}     - - + +     -
    +

    {messages.residents_title()}

    # Name Phone Number
    {index + 1} {resident.name} {resident.phoneNumber} + +