From a146a4793c3d8ca0633821849bfec20ed7d51fb7 Mon Sep 17 00:00:00 2001 From: Corban-Lee Jones Date: Mon, 10 Feb 2025 22:19:34 +0000 Subject: [PATCH] form submission and validation work --- src/client/public/css/tailwind.css | 19 ++++++++++++++---- src/client/public/js/guild/subscriptions.js | 18 ++++++++++++++--- src/client/views/guild/subscriptions.ejs | 20 ++++++++++--------- .../controllers/guild/sub.api.controller.ts | 3 +-- 4 files changed, 42 insertions(+), 18 deletions(-) diff --git a/src/client/public/css/tailwind.css b/src/client/public/css/tailwind.css index e267da6..4be1143 100644 --- a/src/client/public/css/tailwind.css +++ b/src/client/public/css/tailwind.css @@ -984,10 +984,6 @@ video { margin-bottom: 2rem; } -.me-1 { - margin-inline-end: 0.25rem; -} - .me-2 { margin-inline-end: 0.5rem; } @@ -1795,6 +1791,11 @@ video { padding-right: 1.5rem; } +.py-0 { + padding-top: 0px; + padding-bottom: 0px; +} + .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; @@ -2956,6 +2957,16 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)); } +.group.submitted .group-\[\.submitted\]\:has-\[\:invalid\]\:border-red-500:has(:invalid) { + --tw-border-opacity: 1; + border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); +} + +.group.submitted .group-\[\.submitted\]\:has-\[\:invalid\]\:ring-red-500:has(:invalid) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity, 1)); +} + .group.submitted .peer:has(:invalid) ~ .group-\[\.submitted\]\:peer-has-\[\:invalid\]\:block { display: block; } diff --git a/src/client/public/js/guild/subscriptions.js b/src/client/public/js/guild/subscriptions.js index ea41a11..ef9714f 100644 --- a/src/client/public/js/guild/subscriptions.js +++ b/src/client/public/js/guild/subscriptions.js @@ -273,11 +273,16 @@ $("input[name='filterActive']").on("change", () => { table.dataTable.draw(); }) -const openSubForm = async () => { +const openSubForm = () => { $("#subForm").removeClass("submitted"); HSOverlay.open($("#subModal").get(0)) } +const closeSubForm = () => { + $("#subForm").removeClass("submitted"); + HSOverlay.close($("#subModal").get(0)); +} + $(document).on("click", ".openSubModal-js", openSubForm); const submitForm = async event => { @@ -295,8 +300,15 @@ const submitForm = async event => { url: `/guild/${guildId}/subscriptions/api`, method: "post", dataType: "json", - data: $(event.target).serializeArray() - }) + data: $(event.target).serializeArray(), + success: () => { + table.dataTable.draw(); + closeSubForm(); + }, + error: error => { + alert(error); + } + }); } $("#subForm").on("submit", submitForm); \ No newline at end of file diff --git a/src/client/views/guild/subscriptions.ejs b/src/client/views/guild/subscriptions.ejs index 6c3f1cf..cc7d42b 100644 --- a/src/client/views/guild/subscriptions.ejs +++ b/src/client/views/guild/subscriptions.ejs @@ -294,11 +294,14 @@

- - -

+ + +

Ignore content older than this date.

+
@@ -309,11 +312,10 @@ "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-md focus:outline-none focus:bg-gray-100 hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800", "mode": "tags", "tagsInputId": "formChannelsInput", - "wrapperClasses": "relative ps-0.5 pe-9 min-h-[46px] flex items-center flex-wrap text-nowrap w-full border border-gray-200 rounded-md text-start text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400", - "tagsItemTemplate": "
", - "tagsInputClasses": "py-3 px-2 rounded-sm order-1 text-sm outline-none dark:bg-neutral-900 dark:placeholder-neutral-500 dark:text-neutral-400", - "optionTemplate": "
", - "extraMarkup": "
" + "wrapperClasses": "relative form-select group-[.submitted]:has-[:invalid]:border-red-500 group-[.submitted]:has-[:invalid]:ring-red-500 py-0 ps-0.5 pe-9 min-h-[46px] flex items-center flex-wrap text-nowrap w-full border border-gray-200 rounded-md text-start text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400", + "tagsItemTemplate": "
", + "tagsInputClasses": "px-2 rounded-sm order-1 text-sm outline-none dark:bg-neutral-900 dark:placeholder-neutral-500 dark:text-neutral-400", + "optionTemplate": "
" }' class="hidden"> @@ -344,7 +346,7 @@ "mode": "tags", "tagsInputId": "formChannelsInput", "wrapperClasses": "relative ps-0.5 pe-9 min-h-[46px] flex items-center flex-wrap text-nowrap w-full border border-gray-200 rounded-md text-start text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400", - "tagsItemTemplate": "
", + "tagsItemTemplate": "
", "tagsInputClasses": "py-3 px-2 rounded-sm order-1 text-sm outline-none dark:bg-neutral-900 dark:placeholder-neutral-500 dark:text-neutral-400", "optionTemplate": "
", "extraMarkup": "
" diff --git a/src/server/controllers/guild/sub.api.controller.ts b/src/server/controllers/guild/sub.api.controller.ts index 9f97c4d..8fe4b98 100644 --- a/src/server/controllers/guild/sub.api.controller.ts +++ b/src/server/controllers/guild/sub.api.controller.ts @@ -96,7 +96,7 @@ export const post = async (request: Request, response: Response) => { name, url, guild_id, - active: active ?? true, + active: active === "on", created_at: new Date(), updated_at: new Date() }) @@ -111,7 +111,6 @@ export const post = async (request: Request, response: Response) => { await db("channels").insert(channelData); } - response.status(201).json({ ...subscription, channels: channels ?? []