diff options
Diffstat (limited to 'public/js')
| -rw-r--r-- | public/js/modules/event-edit.js | 1 | ||||
| -rw-r--r-- | public/js/modules/group-linker.js | 90 | ||||
| -rw-r--r-- | public/js/modules/new.js | 3 |
3 files changed, 70 insertions, 24 deletions
diff --git a/public/js/modules/event-edit.js b/public/js/modules/event-edit.js index afe41d4..740c861 100644 --- a/public/js/modules/event-edit.js +++ b/public/js/modules/event-edit.js @@ -46,7 +46,6 @@ function editEventForm() { this.data.timezone = event.target.value; }); this.select2.val(this.data.timezone).trigger("change"); - console.log(JSON.stringify(this.data, null, 2)); // Set checkboxes this.data.eventGroupCheckbox = !!window.eventData.eventGroupID; diff --git a/public/js/modules/group-linker.js b/public/js/modules/group-linker.js index ca5e159..a21fec3 100644 --- a/public/js/modules/group-linker.js +++ b/public/js/modules/group-linker.js @@ -5,23 +5,87 @@ function eventGroupLinker() { eventGroupEditToken: "", groups: [], }, + manualGroupInputVisible: false, + eventGroupOptionTemplate(state) { + if (!state.id) { + return state.text; + } + if (!this.data.groups.length) { + return state.text; + } + const group = this.data.groups.find( + (group) => group.id === state.id, + ); + if (!group) { + return state.text; + } + const template = ` + <span class="group-preview"> + <img src="${ + group.image + ? `/events/${group.image}` + : "/images/seigaiha-single.png" + }" class="group-preview__image" /> + <div class="group-preview__text"> + <strong>${group.name}</strong> + <p class="text-muted">${group.description}</p> + </div> + </span>`; + return $(template); + }, async init() { + this.select2 = $(this.$refs.eventGroupSelect).select2({ + placeholder: "No group selected", + templateResult: this.eventGroupOptionTemplate.bind(this), + templateSelection: this.eventGroupOptionTemplate.bind(this), + selectionCssClass: "group-select-dropdown", + }); + this.select2.on("select2:select", (event) => { + this.selectGroup(event); + }); + this.select2.on("select2:unselect", () => { + this.data.eventGroupID = ""; + this.data.eventGroupEditToken = ""; + }); this.$watch("data.eventGroupID", () => { this.$dispatch( "event-group-id-changed", this.data.eventGroupID, ); + const matchingGroup = this.data.groups.find( + (group) => + group.id === this.data.eventGroupID && + group.editToken === this.data.eventGroupEditToken, + ); + if (matchingGroup) { + this.select2.val(matchingGroup.id).trigger("change"); + } else { + this.resetGroupSelector(); + } }); this.$watch("data.eventGroupEditToken", () => { this.$dispatch( "event-group-edit-token-changed", this.data.eventGroupEditToken, ); + const matchingGroup = this.data.groups.find( + (group) => + group.id === this.data.eventGroupID && + group.editToken === this.data.eventGroupEditToken, + ); + if (matchingGroup) { + this.select2.val(matchingGroup.id).trigger("change"); + } else { + this.resetGroupSelector(); + } }); - if (window.eventData && window.eventData.eventGroupID !== "") { + this.$watch("data.groups", () => { + this.select2.val(this.data.eventGroupID).trigger("change"); + }); + if (window.eventData && !!window.eventData.eventGroupID) { this.data.eventGroupID = window.eventData.eventGroupID; } - if (window.eventData && window.eventGroupEditToken !== "") { + if (window.eventData && !!window.eventGroupEditToken) { this.data.eventGroupEditToken = window.eventData.eventGroupEditToken; } @@ -42,7 +106,7 @@ function eventGroupLinker() { if (!response.ok) { return; } - const json = await (await response).json(); + const json = await response.json(); this.data.groups = json; } catch (e) { return false; @@ -60,26 +124,8 @@ function eventGroupLinker() { this.data.eventGroupID = group.id; this.data.eventGroupEditToken = group.editToken; }, - showGroupPreview() { - return ( - this.data.eventGroupID !== "" && - this.data.groups.some( - (group) => - group.id === this.data.eventGroupID && - group.editToken === this.data.eventGroupEditToken, - ) - ); - }, - groupPreview() { - if (!this.showGroupPreview()) { - return {}; - } - return this.data.groups.find( - (group) => group.id === this.data.eventGroupID, - ); - }, resetGroupSelector() { - this.$refs.eventGroupSelect.value = ""; + this.select2.val(null).trigger("change"); }, }; } diff --git a/public/js/modules/new.js b/public/js/modules/new.js index ca875bc..2d880f8 100644 --- a/public/js/modules/new.js +++ b/public/js/modules/new.js @@ -95,12 +95,13 @@ function newEventForm() { errors: [], submitting: false, init() { - // Set up Select2 + // Set up timezone Select2 this.select2 = $(this.$refs.timezone).select2(); this.select2.on("select2:select", (event) => { this.data.timezone = event.target.value; }); this.data.timezone = this.select2.val(); + // Reset checkboxes this.data.eventGroupCheckbox = false; this.data.interactionCheckbox = false; |