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

header
All checks were successful
Build And Deploy Main / build-and-deploy (push) Successful in 33s
Details

Browse Source
This commit is contained in:
Lixian Zhou
2026-03-09 14:28:43 -04:00
parent 93eb32d477
commit cd37154001
5 changed files with 87 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
client/src/components/resources/ResourcesList.js
View File

@@ -1,10 +1,11 @@
import React, {useState, useEffect} from "react";
import { useNavigate } from "react-router-dom";
import { AuthService, ResourceService } from "../../services";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab, Dropdown } from "react-bootstrap";
import { Columns, Download, Filter, PencilSquare, PersonSquare, Plus } from "react-bootstrap-icons";
import ReactPaginate from 'react-paginate';
import { ManageTable, Export } from "../../shared/components";
import { RESOURCE_TYPE_OPTIONS, RESOURCE_SPECIALTY_OPTIONS } from "../../shared";
const ResourcesList = () => {
const navigate = useNavigate();
@@ -20,6 +21,9 @@ const ResourcesList = () => {
const [itemsPerPage, setItemsPerPage] = useState(10);
const [showDeletedItems, setShowDeletedItems] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [showFilterDropdown, setShowFilterDropdown] = useState(false);
const [typeFilter, setTypeFilter] = useState('');
const [specialtyFilter, setSpecialtyFilter] = useState('');
const [columns, setColumns] = useState([
{
key: 'name',
@@ -68,10 +72,16 @@ const ResourcesList = () => {
})
}, []);
const getFilteredResources = () => {
return (showDeletedItems ? resources.filter(item => item.status !== 'active') : resources.filter(item => item.status === 'active'))
?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) )))
?.filter(resource => !typeFilter || (resource?.type || '') === typeFilter)
?.filter(resource => !specialtyFilter || (resource?.specialty || '') === specialtyFilter);
};
useEffect(() => {
const endOffset = itemOffset + parseInt(itemsPerPage);
const newResources = (showDeletedItems ? resources.filter(item => item.status !== 'active') : resources.filter(item => item.status === 'active'))?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) )));
//const newResources = (.slice(itemOffset, endOffset);
const newResources = getFilteredResources();
const sortedResources = sorting.key === '' ? newResources : newResources.sort((a, b) => {
return a[sorting.key]?.localeCompare(b[sorting.key]);
});
@@ -89,8 +99,8 @@ const ResourcesList = () => {
display_address
});
}));
setPageCount(Math.ceil(((showDeletedItems ? resources : resources.filter(item => item.status === 'active') )?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) )))).length / itemsPerPage));
}, [resources, itemOffset, keyword, itemsPerPage, showDeletedItems, sorting]);
setPageCount(Math.ceil((newResources.length || 0) / itemsPerPage));
}, [resources, itemOffset, keyword, itemsPerPage, showDeletedItems, sorting, typeFilter, specialtyFilter]);
// useEffect(() => {
// const newResources = currentItems? [...currentItems] : [];
@@ -102,7 +112,8 @@ const ResourcesList = () => {
// }, [sorting]);
const handlePageClick = (event) => {
const newOffset = (event.selected * itemsPerPage) % (showDeletedItems ? resources : resources.filter(item => item.status === 'active') )?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) ))).length;
const filteredLength = getFilteredResources().length || 1;
const newOffset = (event.selected * itemsPerPage) % filteredLength;
console.log(
`User requested page number ${event.selected}, which is offset ${newOffset}`
);
@@ -111,7 +122,8 @@ const ResourcesList = () => {
};
const handlePageSelect = (pageNo) => {
const newOffset = ((pageNo-1) * itemsPerPage) % (showDeletedItems ? resources : resources.filter(item => item.status === 'active') )?.filter(resource => (resource?.name?.toLowerCase().includes(keyword.toLowerCase()) || (resource?.specialty?.toLowerCase().includes(keyword.toLowerCase()) ) || (resource?.address?.toLowerCase().includes(keyword.toLowerCase()) ))).length;
const filteredLength = getFilteredResources().length || 1;
const newOffset = ((pageNo-1) * itemsPerPage) % filteredLength;
console.log(
`User requested page number ${pageNo}, which is offset ${newOffset}`
);
@@ -174,10 +186,61 @@ const ResourcesList = () => {
setShowDeletedItems(value === 'archivedProviders');
// Recover all filters
setKeyword('');
setTypeFilter('');
setSpecialtyFilter('');
setSorting({key: '', order: ''});
setSelectedItems([]);
}
const clearAndCloseFilter = () => {
setTypeFilter('');
setSpecialtyFilter('');
setShowFilterDropdown(false);
};
const applyAndCloseFilter = () => {
setShowFilterDropdown(false);
};
const customFilterMenu = React.forwardRef(
({ children, style, className, 'aria-labelledby': labeledBy }, ref) => (
<div
ref={ref}
style={style}
className={className}
aria-labelledby={labeledBy}
>
<h6>Filter By</h6>
<div className="app-main-content-fields-section margin-sm dropdown-container">
<div className="me-4">
<div className="field-label">Type</div>
<select value={typeFilter} onChange={(e) => setTypeFilter(e.currentTarget.value)}>
<option value="">All</option>
{RESOURCE_TYPE_OPTIONS.map((item) => (
<option key={item.value} value={item.value}>{item.label}</option>
))}
</select>
</div>
<div className="me-4">
<div className="field-label">Specialty</div>
<select value={specialtyFilter} onChange={(e) => setSpecialtyFilter(e.currentTarget.value)}>
<option value="">All</option>
{RESOURCE_SPECIALTY_OPTIONS.map((item) => (
<option key={item.value} value={item.value}>{item.label}</option>
))}
</select>
</div>
</div>
<div className="list row">
<div className="col-md-12">
<button className="btn btn-default btn-sm float-right" onClick={clearAndCloseFilter}> Cancel </button>
<button className="btn btn-primary btn-sm float-right" onClick={applyAndCloseFilter}> Filter </button>
</div>
</div>
</div>
)
);
const checkSelectAll = () => {
return selectedItems?.length === currentItems?.length && selectedItems?.length > 0;
}
@@ -290,8 +353,20 @@ const ResourcesList = () => {
</Tabs>
<div className="list-func-panel">
<input className="me-2 with-search-icon" type="text" placeholder="Search" value={keyword} onChange={(e) => setKeyword(e.currentTarget.value)} />
{/* <button className="btn btn-primary me-2"><Filter size={16} className="me-2"></Filter>Filter</button> */}
<ManageTable columns={columns} onColumnsChange={setColumns} />
<Dropdown
key={'filter-providers'}
id="filter-providers"
className="me-2"
show={showFilterDropdown}
onToggle={(isOpen) => setShowFilterDropdown(isOpen)}
autoClose={false}
>
<Dropdown.Toggle variant="primary">
<Filter size={16} className="me-2"></Filter>Filter
</Dropdown.Toggle>
<Dropdown.Menu as={customFilterMenu}/>
</Dropdown>
<button className="btn btn-primary me-2" onClick={() => goToCreateNew()}><Plus size={16}></Plus>Add New Providers</button>
<Export
columns={columns}

2
client/src/components/trans-routes/CreateRoute.js
View File

@@ -204,7 +204,7 @@ const CreateRoute = () => {
<>
<div className="list row mb-4">
<Breadcrumb>
<Breadcrumb.Item href="/">Transportation</Breadcrumb.Item>
<Breadcrumb.Item href="/trans-routes/dashboard">Transportation</Breadcrumb.Item>
<Breadcrumb.Item href="/trans-routes/dashboard">
Transportation Routes
</Breadcrumb.Item>

2
client/src/components/trans-routes/RouteEdit.js
View File

@@ -398,7 +398,7 @@ const RouteEdit = () => {
<>
<div className="list row mb-4">
<Breadcrumb>
<Breadcrumb.Item href="/">Transportation</Breadcrumb.Item>
<Breadcrumb.Item href="/trans-routes/dashboard">Transportation</Breadcrumb.Item>
<Breadcrumb.Item href="/trans-routes/dashboard">
Transportation Routes
</Breadcrumb.Item>

2
client/src/components/trans-routes/RouteView.js
View File

@@ -162,7 +162,7 @@ const RouteView = () => {
<>
<div className="list row mb-4">
<Breadcrumb>
<Breadcrumb.Item href="/">Transportation</Breadcrumb.Item>
<Breadcrumb.Item href="/trans-routes/dashboard">Transportation</Breadcrumb.Item>
<Breadcrumb.Item href="/trans-routes/dashboard">
Transportation Routes
</Breadcrumb.Item>

2
client/src/components/trans-routes/RoutesDashboard.js
View File

@@ -1327,7 +1327,7 @@ const RoutesDashboard = () => {
</div>}
<div className="list row mb-4">
<Breadcrumb>
<Breadcrumb.Item href="/">Transportation</Breadcrumb.Item>
<Breadcrumb.Item href="/trans-routes/dashboard">Transportation</Breadcrumb.Item>
<Breadcrumb.Item active>
Transportation Routes
</Breadcrumb.Item>