From 40bf33a9e58183dec3c781bd9c87344e56ad6eb4 Mon Sep 17 00:00:00 2001 From: Baobeld Date: Tue, 11 Feb 2025 17:15:19 -0500 Subject: [PATCH] Residents frontend page (#82) * create modal component * refactor app layout and add residents page * add residents page * fix story * fix error * add resident edit * allow resident delete * remove page transitions, use default actions --- messages/en.json | 10 ++ .../Actions/Modal/Modal.stories.svelte | 36 +++++++ 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 + .../Navigation/Navbar/Navbar.svelte | 2 +- .../Residents/ResidentTable.stories.svelte | 28 ++++++ .../components/Residents/ResidentTable.svelte | 53 ++++++++++ src/lib/components/Residents/index.ts | 2 + src/routes/+layout.svelte | 14 +-- src/routes/app/+layout.svelte | 52 ++++++---- src/routes/app/residents/+page.server.ts | 90 +++++++++++++++++ src/routes/app/residents/+page.svelte | 98 +++++++++++++++++++ src/routes/app/settings/+page.server.ts | 2 +- src/routes/app/settings/+page.svelte | 9 +- src/routes/app/sms/+page.server.ts | 2 +- src/routes/app/sms/+page.svelte | 5 +- 19 files changed, 415 insertions(+), 39 deletions(-) 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 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..5a5a1e0 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,15 @@ "sms_label_phone": "Phone Number", "sms_label_message": "Message", "sms_button_submit": "Send Message", + "residents_title": "Residents", + "residents_button_new": "New Resident", + "residents_table_edit": "Edit", + "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", "settings_category_twilio": "Twilio Config", "settings_twilio_account_sid": "Account SID", 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..13decdb --- /dev/null +++ b/src/lib/components/Actions/Modal/Modal.stories.svelte @@ -0,0 +1,36 @@ + + +{#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/'; 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/lib/components/Residents/ResidentTable.stories.svelte b/src/lib/components/Residents/ResidentTable.stories.svelte new file mode 100644 index 0000000..90875fd --- /dev/null +++ b/src/lib/components/Residents/ResidentTable.stories.svelte @@ -0,0 +1,28 @@ + + +{#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..60caee6 --- /dev/null +++ b/src/lib/components/Residents/ResidentTable.svelte @@ -0,0 +1,53 @@ + + + + + + + + + + + + {#if onEdit} + + {/if} + + + + + {#if items} + {#each items as resident, index (resident.id)} + + + + + {#if onEdit} + + {/if} + + {/each} + {/if} + +
#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..a613801 --- /dev/null +++ b/src/lib/components/Residents/index.ts @@ -0,0 +1,2 @@ +export { default as ResidentTable } from './ResidentTable.svelte'; +export * from './ResidentTable.svelte'; 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..1c04bb5 100644 --- a/src/routes/app/+layout.svelte +++ b/src/routes/app/+layout.svelte @@ -5,14 +5,14 @@ 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'; + import type { LayoutData } from './$types'; type Props = { children: Snippet; - data: PageData; + data: LayoutData; }; let { children, data }: Props = $props(); @@ -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()} +
    +
    diff --git a/src/routes/app/residents/+page.server.ts b/src/routes/app/residents/+page.server.ts new file mode 100644 index 0000000..7389933 --- /dev/null +++ b/src/routes/app/residents/+page.server.ts @@ -0,0 +1,90 @@ +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 = { + upsert: 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 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' }); + } + + 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.upsert({ + where: { + id: id ?? '', + }, + create: { + name: name, + phoneNumber: phone, + tenantId: event.locals.tenant.id, + }, + update: { + name: name, + phoneNumber: phone, + }, + }); + }, + 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 new file mode 100644 index 0000000..d33b897 --- /dev/null +++ b/src/routes/app/residents/+page.svelte @@ -0,0 +1,98 @@ + + + { + resident = undefined; + form?.reset(); + }} +> + +
    +

    + {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()} + {/snippet} + + + + + +
    +     +     + +
    +
    +

    {messages.residents_title()}

    + +
    +
    + { + resident = r; + dialog?.showModal(); + }} + /> +
    diff --git a/src/routes/app/settings/+page.server.ts b/src/routes/app/settings/+page.server.ts index 765f48d..4f86407 100644 --- a/src/routes/app/settings/+page.server.ts +++ b/src/routes/app/settings/+page.server.ts @@ -27,7 +27,7 @@ export const load = async (event) => { }; export const actions = { - update: async (event) => { + default: async (event) => { const form = await event.request.formData(); const tenantId = event.locals.tenant.id; diff --git a/src/routes/app/settings/+page.svelte b/src/routes/app/settings/+page.svelte index 360d245..8c96065 100644 --- a/src/routes/app/settings/+page.svelte +++ b/src/routes/app/settings/+page.svelte @@ -2,11 +2,10 @@ import { enhance } from '$app/forms'; import { Button } from '$lib/components/Actions'; import { TextInput } from '$lib/components/DataInput'; + import Divider from '$lib/components/Layout/Divider.svelte'; import { messages } from '$lib/i18n'; import { Fingerprint, KeyRound, PhoneOutgoing } from 'lucide-svelte'; - import { fade } from 'svelte/transition'; import type { ActionData, PageData } from './$types'; - import Divider from '$lib/components/Layout/Divider.svelte'; type Props = { data: PageData; @@ -17,18 +16,18 @@ let configs = $derived(form?.configs ?? data.configs); -
    +

    {messages.settings_title()}

    {#if form?.error} - -
    +
    diff --git a/src/routes/app/sms/+page.server.ts b/src/routes/app/sms/+page.server.ts index a9018c9..cb65687 100644 --- a/src/routes/app/sms/+page.server.ts +++ b/src/routes/app/sms/+page.server.ts @@ -37,7 +37,7 @@ export const load = async (event) => { }; export const actions = { - push: async (event) => { + default: async (event) => { const form = await event.request.formData(); if (!form.has('phone')) { diff --git a/src/routes/app/sms/+page.svelte b/src/routes/app/sms/+page.svelte index b2b7270..36087c6 100644 --- a/src/routes/app/sms/+page.svelte +++ b/src/routes/app/sms/+page.svelte @@ -7,7 +7,6 @@ import { Link } from '$lib/components/Navigation'; import { messages } from '$lib/i18n'; import { CircleX, MessageCircleMore, PhoneOutgoing, TriangleAlert } from 'lucide-svelte'; - import { fade } from 'svelte/transition'; import type { ActionData, PageData } from './$types'; type Props = { @@ -25,7 +24,7 @@ {messages.sms_label_message()} {/snippet} -
    +
    {#if form?.error} @@ -49,7 +48,7 @@

    {messages.sms_prompt()}

    - +