some changes
This commit is contained in:
parent
cd95bb5d0a
commit
ba1cfea557
2 changed files with 282 additions and 230 deletions
|
@ -31,7 +31,7 @@ if (auth.isAuthenticated()) {
|
|||
userEventRequests = await get.getAll<EventRequest>(
|
||||
Collections.EVENT_REQUESTS,
|
||||
`requested_user="${userId}"`,
|
||||
"-created",
|
||||
"-created"
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
|
@ -46,8 +46,8 @@ if (auth.isAuthenticated()) {
|
|||
<h1 class="text-3xl font-bold text-white mb-2">Event Request Form</h1>
|
||||
<p class="text-gray-300 mb-4">
|
||||
Submit your event request at least 6 weeks before your event. After
|
||||
submitting, please notify PR and/or Coordinators in the #-events Slack
|
||||
channel.
|
||||
submitting, please notify PR and/or Coordinators in the #-events
|
||||
Slack channel.
|
||||
</p>
|
||||
<div class="bg-base-300/50 p-4 rounded-lg text-sm text-gray-300">
|
||||
<p class="font-medium mb-2">This form includes sections for:</p>
|
||||
|
@ -109,7 +109,10 @@ if (auth.isAuthenticated()) {
|
|||
|
||||
{
|
||||
!error && (
|
||||
<UserEventRequests client:load eventRequests={userEventRequests} />
|
||||
<UserEventRequests
|
||||
client:load
|
||||
eventRequests={userEventRequests}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
@ -122,9 +125,12 @@ if (auth.isAuthenticated()) {
|
|||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
z-index: 99999 !important;
|
||||
overflow: auto !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
/* Style for the modal backdrop */
|
||||
|
@ -137,12 +143,21 @@ if (auth.isAuthenticated()) {
|
|||
z-index: 99999 !important;
|
||||
background-color: rgba(0, 0, 0, 0.8) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
/* Style for the modal content */
|
||||
#event-request-preview-modal-container > div > div > div {
|
||||
z-index: 100000 !important;
|
||||
position: relative !important;
|
||||
max-width: 90vw !important;
|
||||
width: 100% !important;
|
||||
max-height: 90vh !important;
|
||||
overflow: auto !important;
|
||||
margin: 2rem !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
@ -158,7 +173,7 @@ if (auth.isAuthenticated()) {
|
|||
window.showEventRequestFormPreview = function (formData) {
|
||||
console.log(
|
||||
"Global showEventRequestFormPreview called with data",
|
||||
formData,
|
||||
formData
|
||||
);
|
||||
|
||||
// Remove any elements that might be obstructing the view
|
||||
|
@ -194,15 +209,32 @@ if (auth.isAuthenticated()) {
|
|||
// Ensure modal container is visible
|
||||
setTimeout(() => {
|
||||
const modalContainer = document.getElementById(
|
||||
"event-request-preview-modal-container",
|
||||
"event-request-preview-modal-container"
|
||||
);
|
||||
if (modalContainer) {
|
||||
modalContainer.style.zIndex = "99999";
|
||||
modalContainer.style.position = "fixed";
|
||||
modalContainer.style.top = "0";
|
||||
modalContainer.style.left = "0";
|
||||
modalContainer.style.width = "100%";
|
||||
modalContainer.style.height = "100%";
|
||||
modalContainer.style.width = "100vw";
|
||||
modalContainer.style.height = "100vh";
|
||||
modalContainer.style.overflow = "auto";
|
||||
modalContainer.style.margin = "0";
|
||||
modalContainer.style.padding = "0";
|
||||
|
||||
// Force body to allow scrolling
|
||||
document.body.style.overflow = "auto";
|
||||
|
||||
// Ensure the modal content is properly sized
|
||||
const modalContent =
|
||||
modalContainer.querySelector("div > div > div");
|
||||
if (modalContent) {
|
||||
modalContent.style.maxWidth = "90vw";
|
||||
modalContent.style.width = "100%";
|
||||
modalContent.style.maxHeight = "90vh";
|
||||
modalContent.style.overflow = "auto";
|
||||
modalContent.style.margin = "2rem";
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
|
@ -229,9 +261,11 @@ if (auth.isAuthenticated()) {
|
|||
await dataSync.syncCollection(
|
||||
Collections.EVENT_REQUESTS,
|
||||
`requested_user="${userId}"`,
|
||||
"-created",
|
||||
"-created"
|
||||
);
|
||||
console.log(
|
||||
"Initial data sync complete for user event requests"
|
||||
);
|
||||
console.log("Initial data sync complete for user event requests");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error during initial data sync:", err);
|
||||
|
@ -241,14 +275,16 @@ if (auth.isAuthenticated()) {
|
|||
const formTab = document.getElementById("form-tab");
|
||||
const submissionsTab = document.getElementById("submissions-tab");
|
||||
const formContent = document.getElementById("form-content");
|
||||
const submissionsContent = document.getElementById("submissions-content");
|
||||
const submissionsContent = document.getElementById(
|
||||
"submissions-content"
|
||||
);
|
||||
|
||||
// Function to switch tabs
|
||||
const switchTab = (
|
||||
activeTab: HTMLElement,
|
||||
activeContent: HTMLElement,
|
||||
inactiveTab: HTMLElement,
|
||||
inactiveContent: HTMLElement,
|
||||
inactiveContent: HTMLElement
|
||||
) => {
|
||||
// Update tab classes
|
||||
activeTab.classList.add("tab-active");
|
||||
|
@ -269,14 +305,24 @@ if (auth.isAuthenticated()) {
|
|||
formTab?.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
if (formContent && submissionsContent && submissionsTab) {
|
||||
switchTab(formTab, formContent, submissionsTab, submissionsContent);
|
||||
switchTab(
|
||||
formTab,
|
||||
formContent,
|
||||
submissionsTab,
|
||||
submissionsContent
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
submissionsTab?.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
if (formContent && submissionsContent && formTab) {
|
||||
switchTab(submissionsTab, submissionsContent, formTab, formContent);
|
||||
switchTab(
|
||||
submissionsTab,
|
||||
submissionsContent,
|
||||
formTab,
|
||||
formContent
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
@ -70,10 +70,13 @@ export const EventRequestFormPreviewModal: React.FC = () => {
|
|||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
zIndex: 99999,
|
||||
pointerEvents: isOpen ? 'auto' : 'none'
|
||||
pointerEvents: isOpen ? 'auto' : 'none',
|
||||
overflow: 'auto',
|
||||
margin: 0,
|
||||
padding: 0
|
||||
}}
|
||||
>
|
||||
<EventRequestFormPreview
|
||||
|
@ -454,7 +457,8 @@ const EventRequestFormPreview: React.FC<EventRequestFormPreviewProps> = ({
|
|||
width: '100vw',
|
||||
height: '100vh',
|
||||
margin: 0,
|
||||
padding: 0
|
||||
padding: 0,
|
||||
overflow: 'auto'
|
||||
}}
|
||||
>
|
||||
<motion.div
|
||||
|
@ -466,7 +470,9 @@ const EventRequestFormPreview: React.FC<EventRequestFormPreviewProps> = ({
|
|||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
position: 'relative',
|
||||
zIndex: 100000
|
||||
zIndex: 100000,
|
||||
maxWidth: '90vw',
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<div className="sticky top-0 z-10 bg-base-100 px-6 py-4 border-b border-base-300 flex justify-between items-center">
|
||||
|
|
Loading…
Reference in a new issue