diff --git a/src/client/src/css/main.css b/src/client/src/css/main.css index 11e6da0..6bc763e 100644 --- a/src/client/src/css/main.css +++ b/src/client/src/css/main.css @@ -99,9 +99,7 @@ @apply text-sm text-gray-500 dark:text-neutral-500 text-nowrap; } -/* Select Box */ - -.cj-select-toggle { +.cj-table-paging-select-toggle { @apply form-select hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-2 px-3 pe-9 flex text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm @@ -110,7 +108,7 @@ dark:text-neutral-200 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800; } -.cj-select-dropdown { +.cj-table-paging-select-dropdown { @apply mt-2 z-50 w-20 max-h-72 p-1 space-y-0.5 bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 @@ -119,12 +117,74 @@ dark:border-neutral-700; } -.cj-select-option { +.cj-table-paging-select-option { @apply py-2 px-3 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800; } +/* Tag Select */ + +.cj-tag-select-wrapper { + @apply relative form-select has-invalid:group-[.submitted]:border-red-500 + has-invalid:group-[.submitted]: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-lg text-start text-sm focus:border-blue-500 + focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400; +} + +.cj-tag-select-dropdown { + @apply + z-80 + min-w-fit + max-h-72 + p-1.5 + space-y-0.5 + bg-white + border + border-gray-200 rounded-lg overflow-hidden + overflow-y-auto + [&::-webkit-scrollbar]:w-2 + [&::-webkit-scrollbar-thumb]:rounded-full + [&::-webkit-scrollbar-track]:rounded-full + [&::-webkit-scrollbar-track]:bg-gray-100 + [&::-webkit-scrollbar-thumb]:bg-gray-300 + dark:[&::-webkit-scrollbar-track]:bg-neutral-700 + dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 + dark:bg-neutral-900 + dark:border-neutral-700; +} + +.cj-tag-select-input { + @apply px-2 rounded-xs order-1 text-sm outline-hidden dark:bg-neutral-900 dark:placeholder-neutral-500 + dark:text-neutral-400; +} + +.cj-tag-select-option { + @apply flex items-center rounded-lg cursor-pointer py-2 ps-2 pe-4 w-full + text-gray-500 + hover:bg-gray-100 + focus:bg-gray-100 + + dark:text-neutral-200 + dark:bg-neutral-900 + dark:hover:bg-neutral-800 + dark:focus:bg-neutral-800; +} + +.cj-tag-select-option [data-icon] { + @apply size-8 me-2 flex shrink-0 items-center justify-center text-gray-500 dark:text-neutral-500; +} + +.cj-tag-select-option [data-title] { + @apply text-sm font-semibold text-gray-800 dark:text-neutral-200; +} + +.cj-tag-select-option [data-description] { + @apply text-xs text-gray-500 dark:text-neutral-500; +} + + + /* Layout Sidebar */ .sidebar-btn { diff --git a/src/client/src/ts/guild/feeds.ts b/src/client/src/ts/guild/feeds.ts index ac0709f..f4cee3e 100644 --- a/src/client/src/ts/guild/feeds.ts +++ b/src/client/src/ts/guild/feeds.ts @@ -251,18 +251,25 @@ const table: HSDataTable = new HSDataTable( offset: offset }; +// Close on click. +window.addEventListener('click', (evt) => { + const evtTarget = evt.target; + + HSSelect.closeCurrentlyOpened(evtTarget as HTMLElement); +}); + const pageSelectOptions: ISelectOptions = { - toggleTag: "", + toggleTag: '', optionTemplate: ` -
+
- - +
`, - toggleClasses: "cj-select-toggle", - optionClasses: "cj-select-option", - dropdownClasses: `cj-select-dropdown`, + toggleClasses: "cj-table-paging-select-toggle", + optionClasses: "cj-table-paging-select-option", + dropdownClasses: `cj-table-paging-select-dropdown`, dropdownSpace: 10, dropdownScope: "parent", dropdownPlacement: "top", @@ -299,4 +306,69 @@ const closeEditModal = () => { editModal.close(); }; +const channelsSelectOptions: ISelectOptions = { + placeholder: "Select option....", + mode: "tags", + + tagsItemTemplate: ` +
+
+
+
+ +
+
+ `, + optionTemplate: ` +
+
+
+
+
+
+ +
+
+ `, + tagsInputId: "formChannelsInput", + wrapperClasses: "cj-tag-select-wrapper", + dropdownClasses: "cj-tag-select-dropdown w-full", + tagsInputClasses: "cj-tag-select-input", + + dropdownScope: "window", + dropdownSpace: 10, + dropdownPlacement: "bottom", + dropdownVerticalFixedPlacement: null +}; + +const channelSelect: HSSelect = new HSSelect( + $("#formChannels").get(0) as HTMLElement, + channelsSelectOptions +); + +$("#editForm").on("submit", async event => { + event.preventDefault(); + + const form = $(event.target).get(0) as HTMLFormElement; + $(form).addClass("submitted"); + + if (!form.checkValidity()) return; + + await $.ajax({ + url: `/guild/${guildId}/feeds/api`, + method: "post", + dataType: "json", + data: $(event.target).serializeArray(), + success: () => { + table.fireEvent("draw"); + closeEditModal(); + }, + error: error => { + alert(JSON.stringify(error, null, 4)); + } + }); +}); + // #endregion diff --git a/src/client/src/ts/guild/filters.ts b/src/client/src/ts/guild/filters.ts index e3c346e..a87dba1 100644 --- a/src/client/src/ts/guild/filters.ts +++ b/src/client/src/ts/guild/filters.ts @@ -16,7 +16,7 @@ import { formatTimestamp } from "../../../src/ts/main"; const emptyTableHtml: string = `
- +

No results found @@ -241,9 +241,9 @@ const pageSelectOptions: ISelectOptions = {

`, - toggleClasses: "cj-select-toggle", - optionClasses: "cj-select-option", - dropdownClasses: `cj-select-dropdown`, + toggleClasses: "cj-table-paging-select-toggle", + optionClasses: "cj-table-paging-select-option", + dropdownClasses: `cj-table-paging-select-dropdown`, dropdownSpace: 10, dropdownScope: "parent", dropdownPlacement: "top", diff --git a/src/client/views/guild/feeds.ejs b/src/client/views/guild/feeds.ejs index 41c0e81..496be13 100644 --- a/src/client/views/guild/feeds.ejs +++ b/src/client/views/guild/feeds.ejs @@ -168,6 +168,43 @@ Please enter a valid URL.

+
+ +
+
+ +
+
+ + +
+
+ +
+
+
+
+ +