yangli/worldshine-redesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Lixian Zhou
2026-02-05 20:44:52 -05:00
parent cd29e53132
commit 0a9ccfecf8
12 changed files with 96 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

12
app/views/asset-manifest.json
View File

@@ -1,16 +1,16 @@
{ {
"files": { "files": {
"main.css": "/static/css/main.01f852fa.css", "main.css": "/static/css/main.934f61ea.css",
"main.js": "/static/js/main.d902953d.js", "main.js": "/static/js/main.1d0beffa.js",
"static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js", "static/js/787.c4e7f8f9.chunk.js": "/static/js/787.c4e7f8f9.chunk.js",
"static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png", "static/media/landing.png": "/static/media/landing.d4c6072db7a67dff6a78.png",
"index.html": "/index.html", "index.html": "/index.html",
"main.01f852fa.css.map": "/static/css/main.01f852fa.css.map", "main.934f61ea.css.map": "/static/css/main.934f61ea.css.map",
"main.d902953d.js.map": "/static/js/main.d902953d.js.map", "main.1d0beffa.js.map": "/static/js/main.1d0beffa.js.map",
"787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map" "787.c4e7f8f9.chunk.js.map": "/static/js/787.c4e7f8f9.chunk.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.01f852fa.css", "static/css/main.934f61ea.css",
"static/js/main.d902953d.js" "static/js/main.1d0beffa.js"
] ]
} }

2
app/views/index.html
View File

@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.d902953d.js"></script><link href="/static/css/main.01f852fa.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"><link rel="manifest" href="/manifest.json"/><title>Worldshine Transportation</title><script defer="defer" src="/static/js/main.1d0beffa.js"></script><link href="/static/css/main.934f61ea.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

1
app/views/static/css/main.01f852fa.css.map
View File

File diff suppressed because one or more lines are too long

4
app/views/static/css/main.01f852fa.css → app/views/static/css/main.934f61ea.css
View File

File diff suppressed because one or more lines are too long

1
app/views/static/css/main.934f61ea.css.map Normal file
View File

File diff suppressed because one or more lines are too long

3
app/views/static/js/main.1d0beffa.js Normal file
View File

File diff suppressed because one or more lines are too long

0
app/views/static/js/main.d902953d.js.LICENSE.txt → app/views/static/js/main.1d0beffa.js.LICENSE.txt
View File

2
app/views/static/js/main.d902953d.js.map → app/views/static/js/main.1d0beffa.js.map
View File

File diff suppressed because one or more lines are too long

3
app/views/static/js/main.d902953d.js
View File

File diff suppressed because one or more lines are too long

32
client/src/App.css
View File

@@ -2263,3 +2263,35 @@ input[type="checkbox"] {
.info-gallery-img-thumb-wrap { .info-gallery-img-thumb-wrap {
position: relative; position: relative;
} }
/* Center Calendar - List section styling */
.calendar-list-column {
flex: 1;
min-width: 0;
padding-right: 0 !important;
}
.calendar-list-column .column-card {
box-sizing: border-box;
width: 100%;
}
.calendar-list-column .event-list-item-container {
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
}
.calendar-list-column .event-list-item-container .sx__month-agenda-event__title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 60%;
}
.calendar-list-column .event-list-item-container .sx__event-modal__time {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

58
client/src/components/center-calendar/CenterCalendar.js
View File

@@ -1,4 +1,4 @@
import React, {useState, useEffect} from "react"; import React, {useState, useEffect, useRef, useCallback} from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { AuthService, EventsService, CustomerService, ResourceService, VehicleService, EmployeeService } from "../../services"; import { AuthService, EventsService, CustomerService, ResourceService, VehicleService, EmployeeService } from "../../services";
import moment from 'moment'; import moment from 'moment';
@@ -24,6 +24,8 @@ import Select from 'react-select';
const EventsCalendar = () => { const EventsCalendar = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [events, setEvents] = useState([]); const [events, setEvents] = useState([]);
const calendarColumnRef = useRef(null);
const [listHeight, setListHeight] = useState(null);
const [allEvents, setAllEvents] = useState([]); const [allEvents, setAllEvents] = useState([]);
const [targetedEventType, setTargetedEventType] = useState('medical'); const [targetedEventType, setTargetedEventType] = useState('medical');
const [currentTab, setCurrentTab] = useState('medicalCalendar'); const [currentTab, setCurrentTab] = useState('medicalCalendar');
@@ -279,13 +281,32 @@ const EventsCalendar = () => {
} }
} else { } else {
const originalEvents = [...allEvents]; const originalEvents = [...allEvents];
setEvents(originalEvents?.filter(item => item.type === eventTypeMap[currentTab])?.map(item => ({ let filteredEvents = originalEvents?.filter(item => item.type === eventTypeMap[currentTab])?.map(item => ({
...item, ...item,
title: item?.title, title: item?.title,
start: item?.start_time? `${moment(new Date(item?.start_time)).format('YYYY-MM-DD HH:mm')}` : `${moment().format('YYYY-MM-DD HH:mm')}`, start: item?.start_time? `${moment(new Date(item?.start_time)).format('YYYY-MM-DD HH:mm')}` : `${moment().format('YYYY-MM-DD HH:mm')}`,
end: item?.stop_time? `${moment(new Date(item?.stop_time)).format('YYYY-MM-DD HH:mm')}` : (item?.start_time? `${moment(item?.start_time).format('YYYY-MM-DD HH:mm')}` : `${moment().format('YYYY-MM-DD HH:mm')}`), end: item?.stop_time? `${moment(new Date(item?.stop_time)).format('YYYY-MM-DD HH:mm')}` : (item?.start_time? `${moment(item?.start_time).format('YYYY-MM-DD HH:mm')}` : `${moment().format('YYYY-MM-DD HH:mm')}`),
_options: { additionalClasses: [`event-${item?.color || 'primary'}`]} _options: { additionalClasses: [`event-${item?.color || 'primary'}`]}
}))?.filter(item => (!showDeletedItems && item.status === 'active') || showDeletedItems)); }))?.filter(item => (!showDeletedItems && item.status === 'active') || showDeletedItems);
// For Important Dates tab, filter to only show events for active customers
if (currentTab === 'reminderDatesCalendar' && customers?.length > 0) {
filteredEvents = filteredEvents?.filter(item => {
// If it's a customer-related event, check if the customer is active
if (item.target_type === 'customer' && item.target_uuid) {
const customer = customers.find(c => c.id === item.target_uuid);
// Only show if customer exists and is active (not discharged/transferred/deceased)
return customer && customer.status === 'active' &&
customer.type !== 'discharged' &&
customer.type !== 'transferred' &&
customer.type !== 'deceased';
}
// Vehicle-related events are always shown
return true;
});
}
setEvents(filteredEvents);
} }
}, [customers, resources, timeData, currentTab, allEvents, showDeletedItems]) }, [customers, resources, timeData, currentTab, allEvents, showDeletedItems])
@@ -299,6 +320,27 @@ const EventsCalendar = () => {
} }
}, [events, currentRangeStart, currentRangeEnd]); }, [events, currentRangeStart, currentRangeEnd]);
// Sync list column height with calendar column height
useEffect(() => {
const updateListHeight = () => {
if (calendarColumnRef.current) {
const calendarHeight = calendarColumnRef.current.offsetHeight;
setListHeight(calendarHeight);
}
};
// Initial measurement after render
const timer = setTimeout(updateListHeight, 100);
// Update on window resize
window.addEventListener('resize', updateListHeight);
return () => {
clearTimeout(timer);
window.removeEventListener('resize', updateListHeight);
};
}, [events, currentTab]);
const redirectToAdmin = () => { const redirectToAdmin = () => {
navigate(`/medical`) navigate(`/medical`)
@@ -458,8 +500,8 @@ const EventsCalendar = () => {
} }
}; };
const calendarView = <div className="multi-columns-container" style={{ display: 'flex', alignItems: 'stretch' }}> const calendarView = <div className="multi-columns-container" style={{ display: 'flex', alignItems: 'flex-start', width: '100%' }}>
<div className="column-container" style={{ minWidth: '1000px', display: 'flex', flexDirection: 'column' }}> <div className="column-container" ref={calendarColumnRef} style={{ minWidth: '1000px', flexShrink: 0, display: 'flex', flexDirection: 'column' }}>
{calendar && <ScheduleXCalendar customComponents={customComponents} calendarApp={calendar} />} {calendar && <ScheduleXCalendar customComponents={customComponents} calendarApp={calendar} />}
{/* Dynamic Legend */} {/* Dynamic Legend */}
<div className="calendar-legend mt-3"> <div className="calendar-legend mt-3">
@@ -483,10 +525,10 @@ const EventsCalendar = () => {
</div> </div>
</div> </div>
</div> </div>
<div className="column-container" style={{ display: 'flex', flexDirection: 'column' }}> <div className="column-container calendar-list-column" style={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 }}>
<div className="column-card" style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '16px', display: 'flex', flexDirection: 'column' }}> <div className="column-card" style={{ height: listHeight ? `${listHeight}px` : 'auto', overflowY: 'auto', overflowX: 'hidden', padding: '16px', display: 'flex', flexDirection: 'column', width: '100%', boxSizing: 'border-box' }}>
<h6 className="text-primary mb-3">List</h6> <h6 className="text-primary mb-3">List</h6>
<div style={{ flex: 1, overflowY: 'auto' }}> <div style={{ flex: 1, overflowY: 'auto', width: '100%' }}>
{(!groupedEvents || groupedEvents.size === 0) && ( {(!groupedEvents || groupedEvents.size === 0) && (
<div style={{ padding: '24px', textAlign: 'center', color: '#999' }}> <div style={{ padding: '24px', textAlign: 'center', color: '#999' }}>
No events for this period No events for this period