Add tower and facing filters to Units page
All checks were successful
CI/CD Pipeline - Apartment Dashboard / Run Linter (push) Successful in 12s
CI/CD Pipeline - Apartment Dashboard / Scan Dependencies (push) Successful in 12s
CI/CD Pipeline - Apartment Dashboard / Build & Push Image (push) Successful in 1m1s
CI/CD Pipeline - Apartment Dashboard / Deploy to Production (push) Successful in 19s
All checks were successful
CI/CD Pipeline - Apartment Dashboard / Run Linter (push) Successful in 12s
CI/CD Pipeline - Apartment Dashboard / Scan Dependencies (push) Successful in 12s
CI/CD Pipeline - Apartment Dashboard / Build & Push Image (push) Successful in 1m1s
CI/CD Pipeline - Apartment Dashboard / Deploy to Production (push) Successful in 19s
Add Building filter (East Tower, West Tower, 23 S Downing) and Facing filter (North/South based on unit code last digit) to the Units page. Downing units pass through the facing filter since it only applies to E/W tower units. Bump version to 1.1.0.
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "apartment-dashboard",
|
||||
"private": true,
|
||||
"version": "1.0.1",
|
||||
"version": "1.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
39
src/App.jsx
39
src/App.jsx
@ -31,6 +31,8 @@ const ApartmentDashboard = () => {
|
||||
// Filters
|
||||
const [priceFilter, setPriceFilter] = useState({ min: 0, max: 10000 });
|
||||
const [bedroomFilter, setBedroomFilter] = useState('all');
|
||||
const [towerFilter, setTowerFilter] = useState('all');
|
||||
const [facingFilter, setFacingFilter] = useState('all');
|
||||
const [sortBy, setSortBy] = useState('unitCode');
|
||||
const [sortDirection, setSortDirection] = useState('asc');
|
||||
const [watchedUnits, setWatchedUnits] = useState(new Set());
|
||||
@ -418,7 +420,19 @@ const ApartmentDashboard = () => {
|
||||
const price = unit.currentPrice || 0;
|
||||
const matchesPrice = price >= priceFilter.min && (priceFilter.max === 10000 || price <= priceFilter.max);
|
||||
const matchesBedroom = bedroomFilter === 'all' || (unit.bedCount != null && unit.bedCount.toString() === bedroomFilter);
|
||||
return matchesPrice && matchesBedroom;
|
||||
const matchesTower = towerFilter === 'all'
|
||||
|| (towerFilter === 'east' && unit.unitCode?.startsWith('E'))
|
||||
|| (towerFilter === 'west' && unit.unitCode?.startsWith('W'))
|
||||
|| (towerFilter === 'downing' && /^\d/.test(unit.unitCode));
|
||||
const matchesFacing = facingFilter === 'all'
|
||||
|| (() => {
|
||||
if (/^\d/.test(unit.unitCode)) return true;
|
||||
const lastDigit = parseInt(unit.unitCode?.slice(-1));
|
||||
if (facingFilter === 'north') return lastDigit % 2 === 0;
|
||||
if (facingFilter === 'south') return lastDigit % 2 !== 0;
|
||||
return true;
|
||||
})();
|
||||
return matchesPrice && matchesBedroom && matchesTower && matchesFacing;
|
||||
}).sort((a, b) => {
|
||||
const dir = sortDirection === 'asc' ? 1 : -1;
|
||||
switch (sortBy) {
|
||||
@ -804,8 +818,8 @@ const ApartmentDashboard = () => {
|
||||
/>
|
||||
<span className="text-sm">{priceFilter.max === 10000 ? 'No limit' : formatPrice(priceFilter.max)}</span>
|
||||
</div>
|
||||
<select
|
||||
value={bedroomFilter}
|
||||
<select
|
||||
value={bedroomFilter}
|
||||
onChange={(e) => setBedroomFilter(e.target.value)}
|
||||
className="border rounded-md px-3 py-2"
|
||||
>
|
||||
@ -814,6 +828,25 @@ const ApartmentDashboard = () => {
|
||||
<option value="1">1 BR</option>
|
||||
<option value="2">2 BR</option>
|
||||
</select>
|
||||
<select
|
||||
value={towerFilter}
|
||||
onChange={(e) => setTowerFilter(e.target.value)}
|
||||
className="border rounded-md px-3 py-2"
|
||||
>
|
||||
<option value="all">All Buildings</option>
|
||||
<option value="east">East Tower</option>
|
||||
<option value="west">West Tower</option>
|
||||
<option value="downing">23 S Downing</option>
|
||||
</select>
|
||||
<select
|
||||
value={facingFilter}
|
||||
onChange={(e) => setFacingFilter(e.target.value)}
|
||||
className="border rounded-md px-3 py-2"
|
||||
>
|
||||
<option value="all">All Facing</option>
|
||||
<option value="north">North Facing</option>
|
||||
<option value="south">South Facing</option>
|
||||
</select>
|
||||
<select
|
||||
value={`${sortBy}-${sortDirection}`}
|
||||
onChange={(e) => {
|
||||
|
||||
Reference in New Issue
Block a user