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

fix some view bugs

Browse source
This commit is contained in:
chark1es 2025-03-11 16:13:23 -07:00
parent e829eef69f
commit 0a8348729b
2 changed files with 80 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -453,7 +453,7 @@ const EventRequestFormPreview: React.FC<EventRequestFormPreviewProps> = ({
</h2> </h2>
</div> </div>
<p className="text-base-content/70"> <p className="text-base-content/70">
Please review all information carefully before submitting. You can go back to any section to make changes if needed. Please review all information to make sure it is correct. Please contact the event coordinator any issues occur
</p> </p>
</motion.div> </motion.div>
)} )}

117
src/components/dashboard/Officer_EventRequestForm/UserEventRequests.tsx
View file

@ -159,6 +159,12 @@ const EventRequestModal: React.FC<{ isOpen: boolean, onClose: () => void, childr
); );
}; };
// Add a utility function to truncate text with an ellipsis
const truncateText = (text: string, maxLength: number) => {
if (!text) return '';
return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
};
const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: initialEventRequests }) => { const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: initialEventRequests }) => {
const [eventRequests, setEventRequests] = useState<EventRequest[]>(initialEventRequests); const [eventRequests, setEventRequests] = useState<EventRequest[]>(initialEventRequests);
const [selectedRequest, setSelectedRequest] = useState<EventRequest | null>(null); const [selectedRequest, setSelectedRequest] = useState<EventRequest | null>(null);
@ -226,10 +232,9 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
try { try {
const date = new Date(dateString); const date = new Date(dateString);
return date.toLocaleDateString('en-US', { return date.toLocaleDateString('en-US', {
year: 'numeric',
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
hour: '2-digit', hour: 'numeric',
minute: '2-digit' minute: '2-digit'
}); });
} catch (e) { } catch (e) {
@ -377,56 +382,84 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
</div> </div>
{viewMode === 'table' ? ( {viewMode === 'table' ? (
<div className="overflow-x-auto rounded-xl shadow-sm"> <div className="overflow-x-auto overflow-y-auto rounded-xl shadow-sm max-h-[70vh]">
<table className="table table-zebra w-full"> <table className="table table-zebra w-full text-xs">
<thead className="bg-base-300/50"> <thead className="bg-base-300/50 sticky top-0 z-10">
<tr> <tr>
<th>Event Name</th> <th className="w-[17%]">Event Name</th>
<th>Date</th> <th className="w-[16%]">Date</th>
<th>Location</th> <th className="w-[14%]">Location</th>
<th>PR Materials</th> <th className="w-[7%] text-center">PR</th>
<th>AS Funding</th> <th className="w-[7%] text-center">AS</th>
<th>Submitted</th> <th className="w-[15%]">Submitted</th>
<th>Status</th> <th className="w-[14%] text-center">Status</th>
<th>Actions</th> <th className="w-[10%] px-0 text-center">View</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{eventRequests.map((request) => ( {eventRequests.map((request) => (
<tr key={request.id} className={`hover border-l-4 ${getCardBorderClass(request.status)}`}> <tr key={request.id} className={`hover border-l-4 ${getCardBorderClass(request.status)}`}>
<td className="font-medium">{request.name}</td> <td className="font-medium">
<td>{formatDate(request.start_date_time)}</td> <div className="tooltip" data-tip={request.name}>
<td>{request.location}</td> <span className="block truncate max-w-[125px]">
{truncateText(request.name, 18)}
</span>
</div>
</td>
<td> <td>
<div className="tooltip" data-tip={formatDate(request.start_date_time)}>
<span className="block truncate max-w-[110px]">
{formatDate(request.start_date_time)}
</span>
</div>
</td>
<td>
<div className="tooltip" data-tip={request.location}>
<span className="block truncate max-w-[90px]">
{truncateText(request.location, 14)}
</span>
</div>
</td>
<td className="text-center">
{request.flyers_needed ? ( {request.flyers_needed ? (
<span className="badge badge-success badge-sm">Yes</span> <span className="badge badge-success badge-sm">Yes</span>
) : ( ) : (
<span className="badge badge-ghost badge-sm">No</span> <span className="badge badge-ghost badge-sm">No</span>
)} )}
</td> </td>
<td> <td className="text-center">
{request.as_funding_required ? ( {request.as_funding_required ? (
<span className="badge badge-success badge-sm">Yes</span> <span className="badge badge-success badge-sm">Yes</span>
) : ( ) : (
<span className="badge badge-ghost badge-sm">No</span> <span className="badge badge-ghost badge-sm">No</span>
)} )}
</td> </td>
<td>{formatDate(request.created)}</td>
<td> <td>
<div className="tooltip" data-tip={formatDate(request.created)}>
<span className="block truncate max-w-[100px]">
{formatDate(request.created)}
</span>
</div>
</td>
<td className="text-center">
<span className={`badge ${getStatusBadge(request.status)} badge-sm`}> <span className={`badge ${getStatusBadge(request.status)} badge-sm`}>
{request.status || 'Submitted'} {request.status || 'Submitted'}
</span> </span>
</td> </td>
<td> <td className="text-center px-0">
<div className="flex gap-2"> <div className="flex justify-center">
<button <button
className="btn btn-sm btn-outline" className="btn btn-xs btn-ghost btn-circle tooltip flex items-center justify-center p-0"
data-tip="View Details"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
openDetailModal(request); openDetailModal(request);
}} }}
> >
View Details <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button> </button>
</div> </div>
</td> </td>
@ -447,24 +480,30 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
> >
<div className="card-body p-5"> <div className="card-body p-5">
<div className="flex justify-between items-start"> <div className="flex justify-between items-start">
<h3 className="card-title text-base">{request.name}</h3> <h3 className="card-title text-base tooltip" data-tip={request.name}>
<span className="block truncate max-w-[180px]">
{truncateText(request.name, 25)}
</span>
</h3>
<span className={`badge ${getStatusBadge(request.status)}`}> <span className={`badge ${getStatusBadge(request.status)}`}>
{request.status || 'Pending'} {request.status || 'Pending'}
</span> </span>
</div> </div>
<div className="space-y-2 mt-2 text-sm"> <div className="space-y-2 mt-2 text-sm">
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-base-content/60 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-base-content/60 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg> </svg>
<span>{formatDate(request.start_date_time)}</span> <span className="truncate">{formatDate(request.start_date_time)}</span>
</div> </div>
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-base-content/60 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-base-content/60 mt-0.5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg> </svg>
<span>{request.location}</span> <span className="truncate tooltip" data-tip={request.location}>
{truncateText(request.location, 25)}
</span>
</div> </div>
</div> </div>
<div className="flex flex-wrap gap-2 mt-3"> <div className="flex flex-wrap gap-2 mt-3">
@ -479,17 +518,19 @@ const UserEventRequests: React.FC<UserEventRequestsProps> = ({ eventRequests: in
)} )}
</div> </div>
<div className="card-actions justify-end mt-4"> <div className="card-actions justify-end mt-4">
<div className="flex gap-2"> <button
<button className="btn btn-sm btn-circle btn-ghost text-primary tooltip flex items-center justify-center"
className="btn btn-sm btn-outline" data-tip="View Details"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
openDetailModal(request); openDetailModal(request);
}} }}
> >
View Details <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
</button> <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</div> <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
</button>
</div> </div>
</div> </div>
</motion.div> </motion.div>