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

adjust calendar height

Browse Source
This commit is contained in:
Lixian Zhou
2026-02-05 20:35:53 -05:00
parent ed56d29088
commit cd29e53132
6 changed files with 109 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/.DS_Store vendored
View File

Binary file not shown.

BIN
client/.DS_Store vendored
View File

Binary file not shown.

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

@@ -458,8 +458,8 @@ const EventsCalendar = () => {
}
};
const calendarView = <div className="multi-columns-container">
<div className="column-container" style={{'minWidth': '1000px'}}>
const calendarView = <div className="multi-columns-container" style={{ display: 'flex', alignItems: 'stretch' }}>
<div className="column-container" style={{ minWidth: '1000px', display: 'flex', flexDirection: 'column' }}>
{calendar && <ScheduleXCalendar customComponents={customComponents} calendarApp={calendar} />}
{/* Dynamic Legend */}
<div className="calendar-legend mt-3">
@@ -483,85 +483,87 @@ const EventsCalendar = () => {
</div>
</div>
</div>
<div className="column-container">
<div className="column-card" style={{ maxHeight: '800px', overflowY: 'auto', overflowX: 'hidden', padding: '16px' }}>
<div className="column-container" style={{ display: 'flex', flexDirection: 'column' }}>
<div className="column-card" style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden', padding: '16px', display: 'flex', flexDirection: 'column' }}>
<h6 className="text-primary mb-3">List</h6>
{(!groupedEvents || groupedEvents.size === 0) && (
<div style={{ padding: '24px', textAlign: 'center', color: '#999' }}>
No events for this period
</div>
)}
{
Array.from(groupedEvents?.keys())?.map((key) => {
return <div key={key}>
<h6 className="text-primary me-2">{key}</h6>
{
groupedEvents.get(key).map(eventItem => <div
key={eventItem.id}
className={`event-${eventItem.color || 'primary'} mb-3 event-list-item-container`}
onClick={() => currentTab === 'medicalCalendar' && goToView(eventItem.id)}
style={{ cursor: currentTab === 'medicalCalendar' ? 'pointer' : 'default', padding: '8px 12px', borderRadius: '4px' }}
>
{/* Medical Events */}
{currentTab === 'medicalCalendar' && (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span className="sx__month-agenda-event__title">{formatFullName(eventItem.customer)}</span>
<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('HH:mm')} - {moment(eventItem?.stop_time || eventItem?.start_time).format('HH:mm')}</span>
</div>
<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Provider: {eventItem?.doctor || '-'}</div>
</>
)}
{/* Activities */}
{currentTab === 'activitiesCalendar' && (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span className="sx__month-agenda-event__title">{eventItem.title}</span>
<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('HH:mm')}</span>
</div>
<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Location: {eventItem?.event_location || '-'}</div>
</>
)}
{/* Attendance Notes */}
{currentTab === 'incidentsCalendar' && (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span className="sx__month-agenda-event__title">{eventItem?.target_name || eventItem.title}</span>
<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('MM/DD')}</span>
</div>
<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Reason: {eventItem?.description || '-'}</div>
</>
)}
{/* Meal Plan */}
{currentTab === 'mealPlanCalendar' && (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span className="sx__month-agenda-event__title">{eventItem.title}</span>
<span style={{ fontSize: '12px', textTransform: 'capitalize' }}>{eventItem?.meal_type || '-'}</span>
</div>
<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Ingredients: {eventItem?.ingredients || '-'}</div>
</>
)}
{/* Important Dates / Reminders */}
{currentTab === 'reminderDatesCalendar' && (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span className="sx__month-agenda-event__title">{eventItem.title}</span>
<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('MM/DD')}</span>
</div>
<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>{eventItem?.target_type === 'vehicle' ? 'Vehicle' : 'Person'}: {eventItem?.target_name || '-'}</div>
{eventItem?.event_prediction_date && <div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '2px' }}>Deadline: {moment(eventItem?.event_prediction_date).format('MM/DD/YYYY')}</div>}
</>
)}
</div>)
}
<div style={{ flex: 1, overflowY: 'auto' }}>
{(!groupedEvents || groupedEvents.size === 0) && (
<div style={{ padding: '24px', textAlign: 'center', color: '#999' }}>
No events for this period
</div>
})
}
)}
{
Array.from(groupedEvents?.keys())?.map((key) => {
return <div key={key}>
<h6 className="text-primary me-2">{key}</h6>
{
groupedEvents.get(key).map(eventItem => <div
key={eventItem.id}
className={`event-${eventItem.color || 'primary'} mb-3 event-list-item-container`}
onClick={() => currentTab === 'medicalCalendar' && goToView(eventItem.id)}
style={{ cursor: currentTab === 'medicalCalendar' ? 'pointer' : 'default', padding: '8px 12px', borderRadius: '4px' }}
>
{/* Medical Events */}
{currentTab === 'medicalCalendar' && (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span className="sx__month-agenda-event__title">{formatFullName(eventItem.customer)}</span>
<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('HH:mm')} - {moment(eventItem?.stop_time || eventItem?.start_time).format('HH:mm')}</span>
</div>
<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Provider: {eventItem?.doctor || '-'}</div>
</>
)}
{/* Activities */}
{currentTab === 'activitiesCalendar' && (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span className="sx__month-agenda-event__title">{eventItem.title}</span>
<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('HH:mm')}</span>
</div>
<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Location: {eventItem?.event_location || '-'}</div>
</>
)}
{/* Attendance Notes */}
{currentTab === 'incidentsCalendar' && (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span className="sx__month-agenda-event__title">{eventItem?.target_name || eventItem.title}</span>
<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('MM/DD')}</span>
</div>
<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Reason: {eventItem?.description || '-'}</div>
</>
)}
{/* Meal Plan */}
{currentTab === 'mealPlanCalendar' && (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span className="sx__month-agenda-event__title">{eventItem.title}</span>
<span style={{ fontSize: '12px', textTransform: 'capitalize' }}>{eventItem?.meal_type || '-'}</span>
</div>
<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>Ingredients: {eventItem?.ingredients || '-'}</div>
</>
)}
{/* Important Dates / Reminders */}
{currentTab === 'reminderDatesCalendar' && (
<>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
<span className="sx__month-agenda-event__title">{eventItem.title}</span>
<span style={{ fontSize: '12px' }}>{moment(eventItem?.start_time).format('MM/DD')}</span>
</div>
<div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '4px' }}>{eventItem?.target_type === 'vehicle' ? 'Vehicle' : 'Person'}: {eventItem?.target_name || '-'}</div>
{eventItem?.event_prediction_date && <div className="sx__event-modal__time" style={{ fontSize: '12px', marginTop: '2px' }}>Deadline: {moment(eventItem?.event_prediction_date).format('MM/DD/YYYY')}</div>}
</>
)}
</div>)
}
</div>
})
}
</div>
</div>
</div>
</div>

6
client/src/components/customers/CustomersList.js
View File

@@ -50,7 +50,7 @@ const CustomersList = () => {
navigate(`/customers`);
}
const additionalButtons = (
const additionalButtons = ({ showExportDropdown, onExportToggle }) => (
<>
<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}>
<Plus size={16}></Plus>Add New Customer
@@ -63,7 +63,9 @@ const CustomersList = () => {
phone: customer?.phone || customer?.home_phone || customer?.mobile_phone,
tags: customer?.tags?.join(', ')
}))}
filename="customers"
filename="customers"
show={showExportDropdown}
onToggle={onExportToggle}
/>
</>
);

17
client/src/components/dashboard/DashboardCustomersList.js
View File

@@ -21,6 +21,7 @@ const DashboardCustomersList = ({ additionalButtons, showBreadcrumb = false, tit
const [filteredCustomers, setFilteredCustomers] = useState(customers);
const [showFilterDropdown, setShowFilterDropdown] = useState(false);
const [showManageTableDropdown, setShowManageTableDropdown] = useState(false);
const [showExportDropdown, setShowExportDropdown] = useState(false);
const [healthConditionFilter, setHealthConditionFilter] = useState('');
const [paymentStatusFilter, setPaymentStatusFilter] = useState('');
const [serviceRequirementFilter, setServiceRequirementFilter] = useState('');
@@ -427,6 +428,7 @@ const DashboardCustomersList = ({ additionalButtons, showBreadcrumb = false, tit
onToggle={(isOpen) => {
if (isOpen) {
setShowManageTableDropdown(false);
setShowExportDropdown(false);
}
setShowFilterDropdown(isOpen);
}}
@@ -444,11 +446,24 @@ const DashboardCustomersList = ({ additionalButtons, showBreadcrumb = false, tit
onToggle={(isOpen) => {
if (isOpen) {
setShowFilterDropdown(false);
setShowExportDropdown(false);
}
setShowManageTableDropdown(isOpen);
}}
/>
{additionalButtons}
{typeof additionalButtons === 'function'
? additionalButtons({
showExportDropdown,
onExportToggle: (isOpen) => {
if (isOpen) {
setShowFilterDropdown(false);
setShowManageTableDropdown(false);
}
setShowExportDropdown(isOpen);
}
})
: additionalButtons
}
</div>
</div>
</div>

12
client/src/shared/components/Export.js
View File

@@ -2,12 +2,16 @@ import React, { useState } from "react";
import { Dropdown } from "react-bootstrap";
import { Download } from "react-bootstrap-icons";
const Export = ({ columns, data, filename = "export", customActions = [] }) => {
const [showExportDropdown, setShowExportDropdown] = useState(false);
const Export = ({ columns, data, filename = "export", customActions = [], show, onToggle }) => {
const [internalShow, setInternalShow] = useState(false);
const [exportColumns, setExportColumns] = useState(
columns.map(col => ({ ...col, show: true }))
);
// Use external control if provided, otherwise use internal state
const showExportDropdown = show !== undefined ? show : internalShow;
const handleToggle = onToggle || ((isOpen) => setInternalShow(isOpen));
const handleColumnToggle = (columnKey) => {
const updatedColumns = exportColumns.map(col =>
col.key === columnKey ? { ...col, show: !col.show } : col
@@ -17,7 +21,7 @@ const Export = ({ columns, data, filename = "export", customActions = [] }) => {
const handleCancel = () => {
setExportColumns(columns.map(col => ({ ...col, show: true })));
setShowExportDropdown(false);
handleToggle(false);
};
const generateCSV = () => {
@@ -179,7 +183,7 @@ const Export = ({ columns, data, filename = "export", customActions = [] }) => {
id="export-dropdown"
className="me-2"
show={showExportDropdown}
onToggle={() => setShowExportDropdown(!showExportDropdown)}
onToggle={handleToggle}
autoClose={false}
>
<Dropdown.Toggle variant="primary">