1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
$(document).ready(function () {
$.uploadPreview({
input_field: "#event-image-upload",
preview_box: "#event-image-preview",
label_field: "#event-image-label",
label_default: "Choose file",
label_selected: "Change file",
no_label: false,
});
autosize($("textarea"));
if (window.eventData.image) {
$("#event-image-preview").css(
"background-image",
`url('/events/${window.eventData.image}')`,
);
$("#event-image-preview").css("background-size", "cover");
$("#event-image-preview").css("background-position", "center center");
}
});
function editEventForm() {
return {
data: {
eventName: window.eventData.name,
eventLocation: window.eventData.location,
eventStart: window.eventData.startForDateInput,
eventEnd: window.eventData.endForDateInput,
timezone: window.eventData.timezone,
eventDescription: window.eventData.description,
eventURL: window.eventData.url,
hostName: window.eventData.hostName,
creatorEmail: window.eventData.creatorEmail,
eventGroupID: window.eventData.eventGroupID,
eventGroupEditToken: window.eventData.eventGroupEditToken,
interactionCheckbox: window.eventData.usersCanComment,
joinCheckbox: window.eventData.usersCanAttend,
maxAttendeesCheckbox: window.eventData.maxAttendees !== null,
maxAttendees: window.eventData.maxAttendees,
},
errors: [],
submitting: false,
init() {
// Set up Select2
this.select2 = $(this.$refs.timezone).select2();
this.select2.on("select2:select", (event) => {
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;
this.data.interactionCheckbox = window.eventData.usersCanComment;
this.data.joinCheckbox = window.eventData.usersCanAttend;
this.data.maxAttendeesCheckbox =
window.eventData.maxAttendees !== null;
},
async submitForm() {
this.submitting = true;
this.errors = [];
const formData = new FormData();
for (const [key, value] of Object.entries(this.data)) {
formData.append(key, value);
}
formData.append(
"imageUpload",
this.$refs.eventImageUpload.files[0],
);
formData.append("editToken", window.eventData.editToken);
try {
const response = await fetch(`/event/${window.eventData.id}`, {
method: "PUT",
body: formData,
});
this.submitting = false;
if (!response.ok) {
if (response.status !== 400) {
this.errors = unexpectedError;
return;
}
const json = await response.json();
this.errors = json.errors;
// Set Bootstrap validation classes using 'field' property
$("input, textarea").removeClass("is-invalid");
this.errors.forEach((error) => {
$(`#${error.field}`).addClass("is-invalid");
});
return;
}
window.location.reload();
} catch (error) {
console.log(error);
this.errors = unexpectedError;
this.submitting = false;
}
},
};
}
|
