Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

some changes

Browse source
This commit is contained in:
chark1es 2025-03-08 02:13:38 -08:00
parent cd95bb5d0a
commit ba1cfea557
2 changed files with 282 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

496
src/components/dashboard/Officer_EventRequestForm.astro
View file

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

16
src/components/dashboard/Officer_EventRequestForm/EventRequestFormPreview.tsx
View file

@ -70,10 +70,13 @@ export const EventRequestFormPreviewModal: React.FC = () => {
position: 'fixed', position: 'fixed',
top: 0, top: 0,
left: 0, left: 0,
width: '100%', width: '100vw',
height: '100%', height: '100vh',
zIndex: 99999, zIndex: 99999,
pointerEvents: isOpen ? 'auto' : 'none' pointerEvents: isOpen ? 'auto' : 'none',
overflow: 'auto',
margin: 0,
padding: 0
}} }}
> >
<EventRequestFormPreview <EventRequestFormPreview
@ -454,7 +457,8 @@ const EventRequestFormPreview: React.FC<EventRequestFormPreviewProps> = ({
width: '100vw', width: '100vw',
height: '100vh', height: '100vh',
margin: 0, margin: 0,
padding: 0 padding: 0,
overflow: 'auto'
}} }}
> >
<motion.div <motion.div
@ -466,7 +470,9 @@ const EventRequestFormPreview: React.FC<EventRequestFormPreviewProps> = ({
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
style={{ style={{
position: 'relative', 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"> <div className="sticky top-0 z-10 bg-base-100 px-6 py-4 border-b border-base-300 flex justify-between items-center">