some changes
This commit is contained in:
chark1es
parent
cd95bb5d0a
commit
ba1cfea557
2 changed files with 282 additions and 230 deletions
|
|
@ -25,267 +25,313 @@ let error: string | null = null;
|
|||
// This provides initial data for server-side rendering
|
||||
// Client-side will use IndexedDB for data management
|
||||
if (auth.isAuthenticated()) {
|
||||
try {
|
||||
const userId = auth.getUserId();
|
||||
if (userId) {
|
||||
userEventRequests = await get.getAll<EventRequest>(
|
||||
Collections.EVENT_REQUESTS,
|
||||
`requested_user="${userId}"`,
|
||||
"-created",
|
||||
);
|
||||
try {
|
||||
const userId = auth.getUserId();
|
||||
if (userId) {
|
||||
userEventRequests = await get.getAll<EventRequest>(
|
||||
Collections.EVENT_REQUESTS,
|
||||
`requested_user="${userId}"`,
|
||||
"-created"
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch user event requests:", err);
|
||||
error = "Failed to load your event requests. Please try again later.";
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch user event requests:", err);
|
||||
error = "Failed to load your event requests. Please try again later.";
|
||||
}
|
||||
}
|
||||
---
|
||||
|
||||
<div class="w-full max-w-6xl mx-auto py-8 px-4">
|
||||
<div class="mb-8">
|
||||
<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.
|
||||
</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>
|
||||
<ul class="list-disc list-inside space-y-1 ml-2">
|
||||
<li>PR Materials (if needed)</li>
|
||||
<li>Event Details</li>
|
||||
<li>TAP Form Information</li>
|
||||
<li>AS Funding (if needed)</li>
|
||||
</ul>
|
||||
<p class="mt-3">
|
||||
Your progress is automatically saved as you fill out the form.
|
||||
</p>
|
||||
<div class="mb-8">
|
||||
<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.
|
||||
</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>
|
||||
<ul class="list-disc list-inside space-y-1 ml-2">
|
||||
<li>PR Materials (if needed)</li>
|
||||
<li>Event Details</li>
|
||||
<li>TAP Form Information</li>
|
||||
<li>AS Funding (if needed)</li>
|
||||
</ul>
|
||||
<p class="mt-3">
|
||||
Your progress is automatically saved as you fill out the form.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="tabs tabs-boxed mb-6">
|
||||
<a class="tab tab-lg tab-active" id="form-tab">Submit Event Request</a>
|
||||
<a class="tab tab-lg" id="submissions-tab">View Your Submissions</a>
|
||||
</div>
|
||||
|
||||
<!-- Form Tab Content -->
|
||||
<div
|
||||
id="form-content"
|
||||
class="bg-base-200 rounded-lg shadow-xl overflow-hidden"
|
||||
>
|
||||
<div class="p-6">
|
||||
<EventRequestForm client:load />
|
||||
<!-- Tabs -->
|
||||
<div class="tabs tabs-boxed mb-6">
|
||||
<a class="tab tab-lg tab-active" id="form-tab">Submit Event Request</a>
|
||||
<a class="tab tab-lg" id="submissions-tab">View Your Submissions</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submissions Tab Content -->
|
||||
<div id="submissions-content" class="hidden">
|
||||
<div class="bg-base-200 rounded-lg shadow-xl overflow-hidden p-6">
|
||||
<h2 class="text-2xl font-bold text-white mb-4">
|
||||
Your Event Request Submissions
|
||||
</h2>
|
||||
|
||||
{
|
||||
error && (
|
||||
<div class="alert alert-error mb-6">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 stroke-current shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
!error && (
|
||||
<UserEventRequests client:load eventRequests={userEventRequests} />
|
||||
)
|
||||
}
|
||||
<!-- Form Tab Content -->
|
||||
<div
|
||||
id="form-content"
|
||||
class="bg-base-200 rounded-lg shadow-xl overflow-hidden"
|
||||
>
|
||||
<div class="p-6">
|
||||
<EventRequestForm client:load />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submissions Tab Content -->
|
||||
<div id="submissions-content" class="hidden">
|
||||
<div class="bg-base-200 rounded-lg shadow-xl overflow-hidden p-6">
|
||||
<h2 class="text-2xl font-bold text-white mb-4">
|
||||
Your Event Request Submissions
|
||||
</h2>
|
||||
|
||||
{
|
||||
error && (
|
||||
<div class="alert alert-error mb-6">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 stroke-current shrink-0"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
!error && (
|
||||
<UserEventRequests
|
||||
client:load
|
||||
eventRequests={userEventRequests}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style is:global>
|
||||
/* Ensure the modal container is always visible */
|
||||
#event-request-preview-modal-container {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
z-index: 99999 !important;
|
||||
}
|
||||
/* Ensure the modal container is always visible */
|
||||
#event-request-preview-modal-container {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !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 */
|
||||
#event-request-preview-modal-container > div > div:first-child {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
z-index: 99999 !important;
|
||||
background-color: rgba(0, 0, 0, 0.8) !important;
|
||||
backdrop-filter: blur(8px) !important;
|
||||
}
|
||||
/* Style for the modal backdrop */
|
||||
#event-request-preview-modal-container > div > div:first-child {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100vw !important;
|
||||
height: 100vh !important;
|
||||
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;
|
||||
}
|
||||
/* 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>
|
||||
|
||||
<!-- Add the modal component -->
|
||||
<EventRequestFormPreviewModal client:load />
|
||||
|
||||
<div class="dashboard-section hidden" id="eventRequestFormSection">
|
||||
<!-- ... existing code ... -->
|
||||
<!-- ... existing code ... -->
|
||||
</div>
|
||||
|
||||
<script is:inline>
|
||||
// Define the global function immediately to ensure it's available
|
||||
window.showEventRequestFormPreview = function (formData) {
|
||||
console.log(
|
||||
"Global showEventRequestFormPreview called with data",
|
||||
formData,
|
||||
);
|
||||
// Define the global function immediately to ensure it's available
|
||||
window.showEventRequestFormPreview = function (formData) {
|
||||
console.log(
|
||||
"Global showEventRequestFormPreview called with data",
|
||||
formData
|
||||
);
|
||||
|
||||
// Remove any elements that might be obstructing the view
|
||||
const removeObstructions = () => {
|
||||
// Find any elements with high z-index that might be obstructing
|
||||
document.querySelectorAll('[style*="z-index"]').forEach((el) => {
|
||||
if (
|
||||
el.id !== "event-request-preview-modal-container" &&
|
||||
!el.closest("#event-request-preview-modal-container")
|
||||
) {
|
||||
// Store original z-index to restore later
|
||||
if (!el.dataset.originalZIndex) {
|
||||
el.dataset.originalZIndex = el.style.zIndex;
|
||||
}
|
||||
// Temporarily lower z-index
|
||||
el.style.zIndex = "0";
|
||||
}
|
||||
});
|
||||
// Remove any elements that might be obstructing the view
|
||||
const removeObstructions = () => {
|
||||
// Find any elements with high z-index that might be obstructing
|
||||
document.querySelectorAll('[style*="z-index"]').forEach((el) => {
|
||||
if (
|
||||
el.id !== "event-request-preview-modal-container" &&
|
||||
!el.closest("#event-request-preview-modal-container")
|
||||
) {
|
||||
// Store original z-index to restore later
|
||||
if (!el.dataset.originalZIndex) {
|
||||
el.dataset.originalZIndex = el.style.zIndex;
|
||||
}
|
||||
// Temporarily lower z-index
|
||||
el.style.zIndex = "0";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Create a custom event to trigger the preview
|
||||
const event = new CustomEvent("showEventRequestPreviewModal", {
|
||||
detail: { formData },
|
||||
});
|
||||
|
||||
// Remove obstructions before showing modal
|
||||
removeObstructions();
|
||||
|
||||
// Dispatch event to show modal
|
||||
document.dispatchEvent(event);
|
||||
console.log("showEventRequestPreviewModal event dispatched");
|
||||
|
||||
// Ensure modal container is visible
|
||||
setTimeout(() => {
|
||||
const modalContainer = document.getElementById(
|
||||
"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 = "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);
|
||||
};
|
||||
|
||||
// Create a custom event to trigger the preview
|
||||
const event = new CustomEvent("showEventRequestPreviewModal", {
|
||||
detail: { formData },
|
||||
});
|
||||
|
||||
// Remove obstructions before showing modal
|
||||
removeObstructions();
|
||||
|
||||
// Dispatch event to show modal
|
||||
document.dispatchEvent(event);
|
||||
console.log("showEventRequestPreviewModal event dispatched");
|
||||
|
||||
// Ensure modal container is visible
|
||||
setTimeout(() => {
|
||||
const modalContainer = document.getElementById(
|
||||
"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%";
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Import the DataSyncService for client-side use
|
||||
import { DataSyncService } from "../../scripts/database/DataSyncService";
|
||||
import { Collections } from "../../schemas/pocketbase/schema";
|
||||
import { Authentication } from "../../scripts/pocketbase/Authentication";
|
||||
// Import the DataSyncService for client-side use
|
||||
import { DataSyncService } from "../../scripts/database/DataSyncService";
|
||||
import { Collections } from "../../schemas/pocketbase/schema";
|
||||
import { Authentication } from "../../scripts/pocketbase/Authentication";
|
||||
|
||||
// Tab switching logic
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
// Initialize DataSyncService for client-side
|
||||
const dataSync = DataSyncService.getInstance();
|
||||
const auth = Authentication.getInstance();
|
||||
// Tab switching logic
|
||||
document.addEventListener("DOMContentLoaded", async () => {
|
||||
// Initialize DataSyncService for client-side
|
||||
const dataSync = DataSyncService.getInstance();
|
||||
const auth = Authentication.getInstance();
|
||||
|
||||
// Prefetch data into IndexedDB if authenticated
|
||||
if (auth.isAuthenticated()) {
|
||||
try {
|
||||
const userId = auth.getUserId();
|
||||
if (userId) {
|
||||
// Force sync to ensure we have the latest data
|
||||
await dataSync.syncCollection(
|
||||
Collections.EVENT_REQUESTS,
|
||||
`requested_user="${userId}"`,
|
||||
"-created",
|
||||
);
|
||||
console.log("Initial data sync complete for user event requests");
|
||||
// Prefetch data into IndexedDB if authenticated
|
||||
if (auth.isAuthenticated()) {
|
||||
try {
|
||||
const userId = auth.getUserId();
|
||||
if (userId) {
|
||||
// Force sync to ensure we have the latest data
|
||||
await dataSync.syncCollection(
|
||||
Collections.EVENT_REQUESTS,
|
||||
`requested_user="${userId}"`,
|
||||
"-created"
|
||||
);
|
||||
console.log(
|
||||
"Initial data sync complete for user event requests"
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error during initial data sync:", err);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Error during initial data sync:", err);
|
||||
}
|
||||
}
|
||||
|
||||
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 formTab = document.getElementById("form-tab");
|
||||
const submissionsTab = document.getElementById("submissions-tab");
|
||||
const formContent = document.getElementById("form-content");
|
||||
const submissionsContent = document.getElementById(
|
||||
"submissions-content"
|
||||
);
|
||||
|
||||
// Function to switch tabs
|
||||
const switchTab = (
|
||||
activeTab: HTMLElement,
|
||||
activeContent: HTMLElement,
|
||||
inactiveTab: HTMLElement,
|
||||
inactiveContent: HTMLElement,
|
||||
) => {
|
||||
// Update tab classes
|
||||
activeTab.classList.add("tab-active");
|
||||
inactiveTab.classList.remove("tab-active");
|
||||
// Function to switch tabs
|
||||
const switchTab = (
|
||||
activeTab: HTMLElement,
|
||||
activeContent: HTMLElement,
|
||||
inactiveTab: HTMLElement,
|
||||
inactiveContent: HTMLElement
|
||||
) => {
|
||||
// Update tab classes
|
||||
activeTab.classList.add("tab-active");
|
||||
inactiveTab.classList.remove("tab-active");
|
||||
|
||||
// Show/hide content
|
||||
activeContent.classList.remove("hidden");
|
||||
inactiveContent.classList.add("hidden");
|
||||
// Show/hide content
|
||||
activeContent.classList.remove("hidden");
|
||||
inactiveContent.classList.add("hidden");
|
||||
|
||||
// Dispatch event to refresh submissions when switching to submissions tab
|
||||
if (activeTab.id === "submissions-tab") {
|
||||
// Dispatch a custom event that the UserEventRequests component listens for
|
||||
document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
|
||||
}
|
||||
};
|
||||
// Dispatch event to refresh submissions when switching to submissions tab
|
||||
if (activeTab.id === "submissions-tab") {
|
||||
// Dispatch a custom event that the UserEventRequests component listens for
|
||||
document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
|
||||
}
|
||||
};
|
||||
|
||||
// Add click event listeners to tabs
|
||||
formTab?.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
if (formContent && submissionsContent && submissionsTab) {
|
||||
switchTab(formTab, formContent, submissionsTab, submissionsContent);
|
||||
}
|
||||
// Add click event listeners to tabs
|
||||
formTab?.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
if (formContent && submissionsContent && submissionsTab) {
|
||||
switchTab(
|
||||
formTab,
|
||||
formContent,
|
||||
submissionsTab,
|
||||
submissionsContent
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
submissionsTab?.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
if (formContent && submissionsContent && formTab) {
|
||||
switchTab(
|
||||
submissionsTab,
|
||||
submissionsContent,
|
||||
formTab,
|
||||
formContent
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for visibility changes
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (document.visibilityState === "visible") {
|
||||
// Dispatch custom event that components can listen for
|
||||
document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
submissionsTab?.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
if (formContent && submissionsContent && formTab) {
|
||||
switchTab(submissionsTab, submissionsContent, formTab, formContent);
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for visibility changes
|
||||
document.addEventListener("visibilitychange", () => {
|
||||
if (document.visibilityState === "visible") {
|
||||
// Dispatch custom event that components can listen for
|
||||
document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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